SuperAPI AI 工具集

implement-design

前端与建站

查看项目

更新于 10-16 06:14

技能介绍

用途:当当前运行环境缺少原生 Figma 设计转代码工作流时,用此共享回退技能把 Figma 设计落地为代码。若隐式选中,应优先使用可用的 figma-design-to-code 作为唯一流程并停止本技能;若用户显式选择本技能,则按本技能执行。

主要能力与用法:先阅读仓库说明,识别框架、组件、令牌、路由与资源,并保持用户请求范围。从提供的链接解析目标 Figma 文件与节点;桌面选择仅在所连工具支持时使用,无法确定目标时才向用户询问。实现前通过可用的 Figma 工具获取设计上下文,使用其文档化的参数名;响应过大时缩小到相关子节点,必要时用元数据定位。检查返回的视觉参考,仅在未附带截图或需进一步视觉验证时请求截图;按工具的资源说明导出图片和图标,不要假定资源总是 localhost URL 或替换为生成替代品。

落地与验证:把参考代码适配到项目实际技术栈,复用映射的组件、文档化变体和令牌,遵循设计标注,对推断行为加以标注;设计稿与现有产品存在实质冲突时应解决而非静默覆盖。在相关视口尺寸渲染并与目标对比,验证资源、排版、间距、交互、焦点与响应式行为,报告无障碍方面的偏差和未验证状态。

限制:不得合并两套实现清单,须遵守当前 Figma 工具的 schema 与前置条件。若无法访问 Figma,可在能满足请求时改用 image-to-code 处理提供的导出文件,并说明缺失了哪些设计数据,不要编造确切令牌或隐藏行为。连接与工具行为以官方 Figma MCP 文档为准。