implementing-figma-ui-tempad-dev

TemPad Dev：将 Figma 设计实现为 UI

此技能需要 TemPad Dev MCP。如果 tempad-dev:* 工具不可用、未激活或未获授权，请停止并告知用户安装 TemPad Dev MCP，并确保其已在 Figma 设计文件的 TemPad Dev 面板中激活。

TemPad Dev 输出类似 Tailwind 的 IR，格式为 JSX 或 Vue。将 MCP 输出视为设计事实。切勿猜测关键样式。

证据规则

优先级顺序：

1. tempad-dev:get_code（权威信息：明确值、布局意图、警告、资源、令牌、代码生成、语言）
2. tempad-dev:get_structure（层级、重叠、边界说明）

切勿臆造：颜色、排版（字号／字重／行高／字间距）、间距、圆角、边框、阴影、渐变、不透明度／叠加层、模糊。

不要输出 data-hint-* 属性。

工作流

1) 检测仓库约定

从仓库中识别集成所需的信息（不要凭空假设）：

• 框架／运行时和文件约定（React／Vue、TS／JS、SFC 约定、命名）
• 样式集成规则（是否允许使用工具类？类名排序？Lint 规则？提取模式？）
• 令牌／主题系统（CSS 变量、令牌文件、命名、深色模式／模式）
• 资源策略（公共文件夹与导入、图标管线、哈希、目录规则）
• 现有基础组件／组件（按钮、输入框、排版、布局包装器）、导入路径约定

仅当仓库实际使用 Tailwind（或兼容 Tailwind 的工具）时，才检测会影响类语法／格式的 Tailwind 版本和约定。

如果不确定，最多提出 3 个简短问题；否则继续操作，并说明哪些内容是推断得出的。

2) 获取基准设计快照

调用 tempad-dev:get_code，并设置：

• resolveTokens: false
• 仅当用户提供了 nodeId 时传入；否则依赖工具的默认行为（当前选区）
• preferredLang：选择与仓库匹配的语言（jsx 或 vue）

重要：get_code.lang 是 MCP 在考虑 TemPad Dev 插件／配置优先级后实际使用的语言。插件可能覆盖 preferredLang。使用返回的 lang 和 codegen 信息来正确解读 IR，然后将其转换为仓库所需的输出。

将以下内容记录为设计事实：

• code、lang
• warnings
• assets（如果存在）
• tokens（如果存在）
• codegen（例如 scale、长度单位、rootRem 及其他标准化设置）

3) 处理警告和不确定性

如果警告表明证据缺失、不完整或不确定，请立即采取措施：

• depth-cap：针对列出的每个子树根 nodeId，调用一次 get_code 并拼接结果，或缩小范围并列出省略的部分。
• truncated：缩小范围（选择较小区域或关键子树），并警告输出不完整。
• 布局／重叠不确定：调用 get_structure 解决矛盾。
  • 如果通过 structure 仍无法解决矛盾（或无法缩小范围），请停止。

4) 处理资源（仅当存在 assets 时）

优先遵循仓库的资源策略：

• 通过 TemPad 提供的 asset.url 下载字节数据，按策略要求的路径保存到仓库，并按照仓库约定引用。
• 如果策略禁止存储资源，可以引用 TemPad URL，但必须警告输出依赖本地 TemPad 资源服务器。

切勿从公共互联网下载资源。只能使用 TemPad 提供的 asset.url。

5) Token 映射（仅当存在 tokens 时）

Token 证据格式：

• tokens 是一个记录，键为规范的 CSS 变量名称（例如 --...）。
• 每个 token 的值可以是字符串，也可以是以 Collection:Mode 字符串为键、值为字符串的记录。
• 任意值字符串都可能引用其他变量；保留这些引用。

映射目标：在安全的情况下整合仓库中的 token；否则保留 get_code 中的显式值。

规则：

1. 当你能通过值等价性（包括引用）以及仓库中的语义一致性证明等价时，优先使用现有仓库 token。Token 命名可作为辅助证据，但不能仅因名称相似就进行映射。
2. 仅当仓库已有成熟的 token 工作流且预期会进行此更改时，才添加新 token。
3. 如果模式选择或映射仍有歧义，保留显式值并发出警告。

存在提示时，可将其用于推理模式选择；绝不可输出提示属性。

6) 实现符合仓库惯例的代码

将 TemPad Dev IR 转换为仓库所用的惯例：

• 工具优先型仓库（Tailwind/UnoCSS）：保留工具类；调整顺序和格式以符合仓库规则。如果使用 Tailwind，在更改类语法前应遵循仓库的 Tailwind 版本和配置。
• 非工具优先型仓库：将工具类转换为仓库采用的样式方案（CSS Modules/作用域 CSS/Sass/CSS-in-JS），同时保留显式值。

约束：

• 不得引入新的框架或样式系统。
• 除非用户确认，否则新增运行时/构建依赖必须先获得用户确认；如果用户明确表示无需确认，则除外。
• 仅实现基础状态，除非仓库惯例或证据能够证实存在变体/状态。

组件提取与基础组件：

• 仅当重复使用的情况和仓库模式足以证明合理时，才提取组件。
• 优先使用现有仓库基础组件/组件，前提是其语义符合预期且无需猜测样式。

7) 语义与无障碍最低要求

仅在 IR 否则需要使用普通容器语义（例如，可点击的 div），且未使用合适的仓库基础组件/组件时，才应用以下要求：

• 适当使用原生元素（button、a、input/label）。
• 确保支持键盘交互且可聚焦。
• 必要时添加无障碍名称（aria-label、alt）。

假定仓库已有 CSS 重置/规范化设置。除非仓库已有明确惯例，否则不得添加新的重置库或全局 CSS。

8) 退出与收尾

遇到以下情况时停止（不要交付代码）：

• TemPad Dev MCP 不可用/未获授权，或无法读取目标
• 证据相互矛盾，且无法通过结构或缩小范围来解决
• 无法根据仓库策略获取/存储所需资源

否则，交付基于最佳证据的基础实现，并在结尾说明：

• 证据注意事项：任何 warnings、遗漏或推断的仓库惯例
• 资源：已存储的资源与 TemPad URL，以及任何策略限制
• Token：已映射与显式保留的值，以及任何歧义
• 依赖项：是否添加了依赖项（以及是否获得用户确认）
• 如果已停止：后续所需信息（最多 3 项）