القائمة
通用设计稿分析技能。只要需要「分析设计稿、梳理前端 UI 开发任务」，就使用本技能。产出 UI 分析清单，供开发与验收参照。
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
检查 .agents 下 rules、skills、README 与模板基线依赖的一致性，避免规则漂移、悬空引用和 React 能力越界。修改或新增 .agents 内容时使用本技能。
指导在前端项目中按团队规范创建和维护接口请求层，涵盖统一请求客户端、业务 API 文件、类型组织、错误处理、mock 过渡与 React 使用边界。当前端需要新增或重构接口时使用本技能。
指导在前端项目中按团队规范创建和维护 React 组件，涵盖通用组件与页面级组件的边界、目录结构、样式隔离、类型设计与导出策略。当前端需要新增、拆分或沉淀组件时使用本技能。
指导在前端项目中按团队规范创建和维护路由（React Router Data Router），涵盖路由单源、页面目录、路由模块注册、懒加载、标题与守卫等约束。当前端需要新增或重构页面路由时使用本技能。
指导在前端项目中按团队规范使用 Zustand 创建和维护全局状态 store，包括目录结构、命名与持久化策略。当前端需要新增或重构状态管理时使用本技能。
指导在前端项目中正确使用 Ant Design 与自定义主题 CSS 变量，避免硬编码颜色并保证暗色/浅色主题切换一致性。当前端编写或修改样式时使用本技能。
| name | design-analysis |
| description | 通用设计稿分析技能。只要需要「分析设计稿、梳理前端 UI 开发任务」，就使用本技能。产出 UI 分析清单，供开发与验收参照。 |
当满足以下任一情况时使用本技能：
.pen、Figma 链接、其它设计图或标注等），把界面结构、样式、元素梳理成可执行的前端任务不限定阶段：可在写提案前、写提案中、或单独做一次「只分析不写提案」时使用。
**必须按「从上到下、从左到右、从外到里」的顺序分析，并逐条准确记录文字、图片、布局、层级四类重中之重。**详见 rules/analysis-order.md 和 rules/analysis-priorities.md。
| 产出物 | 路径 | 用途 |
|---|---|---|
| UI 分析清单 | docs/样式还原/<名称>-UI分析清单.md | 开发时按此文档精确还原；验收时作为对照基准 |
rules/workflow-layout-map.mdrules/workflow-element-extraction.mdrules/workflow-style-summary.mdrules/workflow-output-checklist.md 和 rules/output-analysis-checklist.mdrules/analysis-order.md - 分析顺序（必守）rules/analysis-priorities.md - 文字、图片、布局、层级四类重中之重rules/workflow-layout-map.md - 第一步：建立布局 Maprules/workflow-element-extraction.md - 第二步：区域与元素提取rules/workflow-style-summary.md - 第三步：样式规范汇总rules/workflow-output-checklist.md - 第四步：输出文档要求rules/output-analysis-checklist.md - UI 分析清单文档完整模板rules/implementation-guidelines.md - 主流网页设计常识rules/implementation-common-errors.md - 常见错误模式与避免方法rules/checklist-common-misses.md - 常见遗漏检查点rules/tools-design-guidelines.md - 设计稿工具使用（Pencil MCP / Figma MCP）.agents/rules/09-样式规范.md - 设计稿颜色、圆角等提取规范.agents/skills/create-proposal/SKILL.md - 创建提案（有设计稿时可先或同步使用本技能）.agents/skills/ui-verification/SKILL.md - UI 验收（以分析清单为基准做验收）