figma-design-to-code

用代码实现 Figma 设计

将可见的 Figma 证据转化为最精简、符合项目惯例的实现， 并保留预期效果。让该效果成为焦点：项目文件、 TemPad 输出、规则和工具调用都是实现的依据，而不是需要机械复现的交付物。

要求 TemPad Dev MCP 为当前选区或用户既定范围内的确切节点 ID 提供可信的设计证据。切勿 凭记忆、仅凭截图或 get_structure 元数据重构设计。

证据与权威

仅在各来源能够佐证的范围内使用它们：

• 用户确定范围、要求、禁止事项，以及缺失的产品或实现决策。
• 项目确定框架、文件位置、组件边界、样式、设计令牌、资源、依赖项和验证惯例。
• TemPad Dev确定可见结构和渲染设计事实。

对于 Figma 到代码转换以外的问题，遵循项目指令文件。不要为路由、分析、i18n、CMS 或其他无关系统添加策略。

TemPad 可以确定可见层级、布局、间距、排版、颜色、效果、设计令牌引用、导出的资源和代码生成单元上下文。它无法确定缺乏证据的状态、响应式行为、业务逻辑、导航、验证、分析或项目惯例。将 get_structure 仅视为层级和几何证据，切勿将其作为缺失样式的依据。

工作流

1. 确定实现范围

只读取可能影响本次实现的本地证据，并按以下顺序进行：

1. 适用的 AGENTS.md 或等效指令；
2. 相关的设计系统、设计令牌、组件和资源指南；
3. 最接近的可比实现和可复用基础组件；
4. 本任务所需的框架、样式和检查配置。

确定目标文件或组件边界、框架、样式方法、设计令牌和资源路径、可复用内容、依赖约束，以及范围最小的相关检查。仅当项目实际使用兼容 Tailwind 的工具时，才检查 Tailwind 版本和主题比例。

明确所需范围后，不要再全面盘点代码库。如果缺失的项目决策会显著影响结果，请在实现前询问。

2. 按请求的范围读取设计

实现前，直接调用 TemPad Dev 的 get_code 获取请求的根节点：

• 对当前选区（包括多个节点），省略 nodeId 和 nodeIds； 对一个确切目标使用 nodeId，对多个目标使用 nodeIds。只能使用用户提供的 ID，或 TemPad 在既定范围内返回的 ID；
• 默认使用 resolveTokens: false。当请求字面输出，或需要通过定向读取确定消费者的实际值时，使用 true；
• 根据项目目标设置 preferredLang；将返回的 lang 视为权威值，因为插件配置可能会覆盖该首选项；
• 除非用户明确要求保留资源的矢量保真度，否则保留 TemPad 的默认矢量行为；对于此类请求，在当前工具架构支持时使用 vectorMode: "snapshot"。

将每个根节点的 code、lang、warnings、assets、tokens 和 codegen 放在一起。在批量结果中，每个 results 条目都会标明其 nodeId，并包含 result 负载或 error。精确换算单位时，使用该根节点的 codegen.config.{cssUnit,rootFontSize,scale}。

在每个根节点内保留请求的组合。只加载与返回证据相关的指南：

• 资源交付请参阅 资源；
• 需要设计令牌定义、代码中的引用，或用于映射决策的消费者值时，请参阅 设计令牌；
• 出现 remainingNodeIds、错误、警告、读取了错误文件或证据不完整时，请参阅 恢复。

3. 区分事实、适配和缺口

编辑前，请区分：

• 设计事实，必须保留；
• 项目原生适配，由现有组件、令牌、工具或资源约定支持；
• 缺乏证据的产品决策，必须暂不实现或向用户询问。

应按渲染值和语义进行映射，而不是依赖一个方便的名称。熟悉的组件或令牌只是候选项，并不能证明它们等效。如果仍有多种同样合理且影响重大的实现路径，请询问用户。只推断影响较小的细节，并报告任何会影响结果的推断。

4. 实施最小且完整的改动

• 遵循既定的框架、样式系统、文件位置、导入方式和抽象层级。不要引入并行系统。
• 只有在语义和渲染行为无需猜测即可匹配时，才复用现有基础组件。不要为了强行复用而抹去设计事实。
• 除非项目证据证明某个令牌、工具或组件等效，否则保留精确的渲染值。对于 rem 输出，请使用 TemPad 实际的 cssUnit、rootFontSize 和 scale 进行转换。
• 保留有意采用的少见输出，包括伪元素、滤镜、蒙版、混合与背景滤镜效果、渐变和非默认合成，除非有记录的项目限制要求适配。
• 只实现有依据的状态和响应式行为。不要臆造悬停、加载、错误、空、禁用或响应式行为。
• 当既定基础组件未提供相应功能时，使用原生语义元素，并保留键盘访问能力和可访问名称。
• 未经用户批准，不得添加运行时或构建依赖，除非用户已明确豁免此限制。
• 不要将 data-hint-* 属性加入交付代码。

不要反复进行视觉微调。只有新的项目、设计、工具或验证证据发现具体缺陷时，才再次修改实现。

5. 在项目的实际工作流中验证

运行项目说明和脚本中定义的、最精简且相关的检查。修复实现问题，并重新运行受影响的检查。若有现成的预览、截图或对比工作流，请使用；不要臆造通用验证矩阵。

如果没有可运行的检查，请报告实现尚未验证。没有真实的项目对比路径时，不要宣称视觉效果已完成；请用户对照 Figma 确认渲染结果。

必须暂停的情况

出现以下情况时，暂停受影响的工作及其依赖工作：

• TemPad 不可用、未获授权、未在目标文件上激活，或无法为所需合成提供可信证据；
• 目标无法读取或不可见；
• 经针对性排查后，项目、设计和用户证据仍相互冲突；
• 缺少的决策会重大影响行为、结构、依赖、资源交付或令牌映射；
• 无法按项目政策获取或存储所需资源。

继续开展有充分证据支持的独立工作。报告任何未完成的请求范围以及解除阻碍所需的具体操作。

交接

报告：

• 修改了什么，以及修改位置；
• 仅报告相关的适配、推断、警告、资源或令牌处理，以及残余视觉风险；
• 运行了哪些检查、检查结果，以及哪些内容仍未验证。

交接中不要提及不存在的问题。不要为任务从未涉及的分支生成合规清单。

决策示例

如果 TemPad 输出 padding: 15px，而项目中的 space-4 令牌值为 16px，则应保留 15px，除非项目证据明确表明该令牌是预期映射。项目一致性决定的是表示方式，并不授权更改可见设计。