前端方案评估器
将以下提示词粘贴到你的 AI 对话框中:
请根据 https://skillhub.cn/install/skillhub.md,安装 @user_ea70d856/frontend-solution-evaluator
技能介绍
解决什么问题
前端项目中,技术选型对比和创意落地评估往往依赖经验,缺乏量化标准。该技能将评估过程结构化,从复杂度、性能、设备兼容性等维度提供客观打分与风险识别,帮助工程师在写代码前或重构时快速对齐技术底线。
核心能力与关键步骤
- 双模式自动检测:根据输入自动切换
Mode A(实现方案评估)或Mode B(创意可行性评估),减少交互摩擦。 - 多维度量化评估(Mode A):
- 复杂度:组件结构、状态管理、依赖风险、开发成本与可维护性,1-5 分打分。
- 性能瓶颈:LCP、运行时渲染、动画帧率、网络请求与缓存策略,标记红/黄/绿风险。
- 设备兼容:覆盖低端 Android、PC 集成显卡、4K 高刷等具体配置层级,识别内存溢出与动画降级。
- HTML 报告生成:替换模板占位符,输出包含雷达图、柱状图、设备热力图及
Top 3 优化建议的自包含 HTML 文件。 - 创意可行性拆解(Mode B):从自然语言或 demo 代码中提取核心功能点,映射至底层技术范式(如实时同步、Canvas 渲染),评估固有复杂度与范式耦合放大效应。
适用边界与注意点
- 评估结果依赖输入代码或描述的完整性,模糊需求可能触发
Medium confidence确认机制。 - 性能与设备兼容分析基于经验准则与参考配置,不替代真机 Profiling。
- 单方案评估会切换为“技术健康度仪表盘”,不提供跨方案排名。
- Mode B 的改进建议(功能降级与路线图)为可选项,默认不生成。
使用场景
- 在重写首页前,比较 Redux、Zustand 和 Context 三种状态管理方案的复杂度与性能风险。
- 拿到 AI 生成的实时协作白板 demo 后,判断上线所需改造、风险点和设备兼容问题。
- 评审低配 Android 和 PC 浏览器方案时,输出 DOM、内存、动画和请求瓶颈的红黄绿评估。
- 把产品创意拆成技术范式,确认可行性、资源投入和 demo 到生产的差距。
适合人员
- 前端负责人:需要把多个状态管理或渲染方案量化对比,给团队选型。
- 工程师:接手 AI 生成的 demo,要判断能否上线和需要改造哪些模块。
- 技术评审:要在低配 Android 和 PC 浏览器上确认性能与兼容风险。
- 产品工程:要把创意拆成技术范式,评估资源和 demo 到生产差距。