用途：当用户提供 Figma 设计链接（如 figma.com/design/...?node-id=...）并要求实现时，本技能提供从 Figma 到 CDS 生产代码的结构化工作流，目标是使用真实 CDS 组件与约定，而非照抄 Figma 的原始 HTML 输出。
主要能力：以 Figma MCP 为设计来源，调用 get_design_context 获取设计上下文与 Code Connect 映射，用 get_screenshot 保存视觉基准，下载设计中的图片、图标与 SVG 资源，再按 cds-code 的规范编写 CDS 代码，并分两阶段验证：先通过项目自身的类型检查、lint 与格式化，再与 Figma 截图做视觉比对。
使用方式：需先连接 Figma MCP 服务器并确认 get_design_context 可用；强烈建议启用 cds-code 技能，推荐 cds-docs。用户须提供 Figma URL。流程为：启用 cds-code 判断项目是 cds-web 还是 cds-mobile；调用 get_design_context（保持 disableCodeConnect: false 与截图开启）；若响应过大则用 get_metadata 定位子节点后重试；保存截图与资源；编写 CDS 代码；先跑类型检查与 lint，再按用户同意的方式做视觉验证。
适用场景：把 Figma 设计实现为 CDS React 或 React Native 代码，或用户要求“实现这个设计”“从 Figma 构建”。
限制：无 Figma 设计可参考时不适用，应改用 cds-code；仅做设计评审而无实现请求时不适用。缺少 Figma MCP 或 get_design_context 时应立即停止并提示配置。未映射组件会回退为 HTML/Tailwind，需按置信度矩阵转换为 CDS 组件，不得直接交付原始 Figma HTML。自动化视觉验证需用户同意，安装新工具需明确许可。具体安装命令与配置细节资料未提供。