fec-implement-from-designlisted

# 按设计稿实现 ## 用途 基于设计工具（Figma、Sketch、MasterGo、Pixso、墨刀、摹客）的设计上下文，高保真实现页面或组件，强调组件复用、设计 Token 映射、可访问性和面向生产的前端实现。 ## 支持的设计工具 | 工具 | MCP 集成 | 获取设计数据方式 | | -------- | ------------------------- | ----------------------------------------- | | Figma | `figma` / `figma-desktop` | API 获取设计结构、变量定义 | | Sketch | `sketch` | MCP 获取设计选区截图 | | MasterGo | `mastergo` | API 获取 DSL 结构数据 | | Pixso | `pixso` | 本地 MCP 获取帧数据和代码 | | 墨刀 | `modao` | MCP 获取原型数据、生成设计描述 | | 摹客 | 无 MCP | 通过用户提供的截图、标注或导出的 CSS 获取 | ## 目标 - 尽量高还原地实现设计稿 - 在创建新组件前优先复用现有项目组件 - 尽可能把设计变量映射到现有 Token - 保持实现结果可维护、类型明确、可测试且具备可访问性 - 避免引入重复的基础组件或并行设计系统 ## 流程 ### 1. 识别设计来源 按优先级选择设计数据获取方式： - `figma` — Figma API 集成 - `figma-desktop` — Figma 桌面端集成 - `mastergo` — MasterGo DSL 数据 - `pixso` — Pixso 本地 MCP - `modao` — 墨刀原型数据 - `sketch` — Sketch 选区截图 - 如以上 MCP 均不可用，请求用户提供设计截图或标注（适用于摹客等无 MCP 工具） - 如果没有权威设计稿，但任务明确要求视觉型网站、品牌页、作品集或高审美重设计，可把用户提供或本地生成的分区级参考图作为临时视觉事实来源；这种来源必须先分析后实现，并在计划中标明不是权威设计系统。 ### 2. 读取设计上下文 通过 MCP 或用户提供的设计数据读取设计上下文： - 检查布局结构 - 检查间距、字体、颜色、变量、状态、图标和组件层级 - 如果 MCP 提供了资源文件或 SVG / 图片源，直接使用 - 如果 MCP 已提供真实资源，不要自行造占位资源 - 如果用户提供截图而非 MCP 数据，从截图中推断布局、颜色、字体等视觉信息 - 如果使用图像/截图参考，先提取区块结构、视觉层级、主色和功能色、字体气质、间距节奏、媒体位置、交互状态暗示和响应式风险，再写代码。 - 对多区块页面优先使用清晰的分区级参考图或局部细节图；不要从压缩长图里猜测按钮、字号、间距和组件状态。 - 视觉参考中的不可读文字、假截图、不可检查素材