Agent Skills
返回列表
前端方案评估器

前端方案评估器

开发编程 更新于 2026.08.29

将以下提示词粘贴到你的 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 到生产差距。