Agent Skills
› ecomfe/tempad-dev
ecomfe/tempad-dev
GitHub通过 TemPad MCP 工具在 Figma 中创建、编辑原生可编辑设计文件，包括屏幕、流程、组件及本地设计系统资源。适用于需要直接操作 Figma 图层而非代码转换或纯审查的场景。
Install All Skills
npx skills add ecomfe/tempad-dev --all -g -y
Skills in Collection (17)
通过 TemPad MCP 工具在 Figma 中创建、编辑原生可编辑设计文件，包括屏幕、流程、组件及本地设计系统资源。适用于需要直接操作 Figma 图层而非代码转换或纯审查的场景。
用户要求创建新的 Figma 设计稿
用户要求修改或更新现有的 Figma 图层和组件
npx skills add ecomfe/tempad-dev --skill design-in-figma -g -y
通过 TemPad MCP 在 Figma 中创建或更新原生可编辑设计，支持屏幕、流程、组件及本地设计系统资源。适用于 Figma 内的直接设计工作，非代码转换或插件自动化。
需要在 Figma 中创建新页面或画布
修改现有 Figma 设计稿的结构或内容
基于设计系统进行组件更新
npx skills add ecomfe/tempad-dev --skill figma-canvas-authoring -g -y
将 Figma 设计节点转化为符合项目规范的前端 UI 代码，支持多节点读取、Token 解析及样式映射，确保设计与实现一致。
需要将 Figma 设计稿转换为代码
要求根据 Figma 节点生成前端组件
npx skills add ecomfe/tempad-dev --skill figma-design-to-code -g -y
通过 TemPad MCP 工具在 Figma 中创建、更新和编辑原生可编辑设计，包括屏幕、流程和组件。适用于需要修改 Figma 图层或从零构建设计的场景，不涉及代码转换或纯审查。
请求创建或更新 Figma 设计稿
需要编辑 Figma 中的屏幕、流程或组件
基于空画布生成设计规范资源
npx skills add ecomfe/tempad-dev --skill design-in-figma -g -y
用于在Figma中创建或更新原生可编辑设计，支持屏幕、流程、组件及本地设计系统资源。通过TemPad MCP工具进行画布读写，管理设计任务生命周期，适用于Figma设计工作流而非代码转换或自动化插件操作。
需要在Figma中创建新设计稿
更新现有Figma设计元素
管理Figma设计任务状态
npx skills add ecomfe/tempad-dev --skill figma-canvas-authoring -g -y
将 Figma 设计稿转化为符合项目规范的 UI 代码。利用 TemPad Dev MCP 获取设计证据，结合项目框架、组件库和样式令牌生成原生实现。
需要将 Figma 设计稿转换为前端代码
需要根据 Figma 节点更新现有 UI 组件
npx skills add ecomfe/tempad-dev --skill figma-design-to-code -g -y
通过 TemPad MCP 工具在 Figma 中创建或编辑原生可编辑设计，包括屏幕、流程和组件。适用于直接修改 Figma 图层或基于本地设计系统资源进行原型制作，不涉及代码生成或插件 API 自动化。
用户要求创建新的 Figma 设计稿
用户要求修改现有的 Figma 界面元素
需要搭建 Figma 原型或组件库
npx skills add ecomfe/tempad-dev --skill design-in-figma -g -y
用于在Figma中创建和更新原生可编辑设计，支持屏幕、流程及组件生成。基于TemPad MCP工具操作画布，强调最小完整交付与结构化编辑，不涉及代码转换或插件API自动化。
用户需要在Figma中创建新页面或画布
用户要求修改现有Figma设计的布局或组件
用户希望生成符合特定设计系统的UI元素
npx skills add ecomfe/tempad-dev --skill figma-canvas-authoring -g -y
将 Figma 设计稿转换为项目原生 UI 代码，确保与现有框架、组件库及样式令牌一致。通过 TemPad Dev MCP 获取设计证据，实现像素级还原，不涉及设计编辑或逻辑开发。
用户需要将 Figma 设计稿转换为代码
用户希望复用 Figma 中的 UI 组件到项目中
npx skills add ecomfe/tempad-dev --skill figma-design-to-code -g -y
通过 TemPad MCP 工具在 Figma 中创建或编辑原生可编辑设计，包括屏幕、流程、组件及本地设计系统资源。适用于直接修改 Figma 图层的需求，不涉及代码生成或纯批评。
需要创建新的 Figma 设计稿
需要编辑现有的 Figma 图层或组件
npx skills add ecomfe/tempad-dev --skill design-in-figma -g -y
通过 TemPad MCP 在 Figma 中创建或更新原生可编辑设计，包括屏幕、流程、组件及本地设计系统资源。适用于直接的设计创作，而非代码转换或审查。
需要在 Figma 中创建新页面或画布
需要更新现有 Figma 设计稿的组件或布局
需要将设计系统与具体 UI 元素结合进行编辑
npx skills add ecomfe/tempad-dev --skill figma-canvas-authoring -g -y
将 Figma 设计稿转换为项目原生代码，确保 UI、样式和组件与目标框架一致。通过 TemPad Dev MCP 获取设计证据进行实现，不涉及设计编辑或业务逻辑开发。
用户希望根据 Figma 设计还原或更新 UI 代码
需要将 Figma 节点集成到现有项目中
npx skills add ecomfe/tempad-dev --skill figma-design-to-code -g -y
通过 TemPad MCP 工具在 Figma 中创建、编辑或更新原生设计文件，包括屏幕、流程和组件。适用于需要直接操作 Figma 图层和结构的设计任务，而非代码转换或纯审查。
用户要求创建新的 Figma 设计稿
用户要求修改或更新现有 Figma 界面元素
用户需要在 Figma 中构建组件或页面流程
npx skills add ecomfe/tempad-dev --skill design-in-figma -g -y
通过 TemPad MCP 工具在 Figma 中创建、编辑原生设计文件，支持屏幕、流程和组件的本地设计系统资源操作。
用户要求创建或修改 Figma 设计稿
需要生成可编辑的 Figma 图层或界面原型
npx skills add ecomfe/tempad-dev --skill figma-canvas-authoring -g -y
将 Figma 设计节点转换为符合项目规范的前端代码。利用 TemPad Dev MCP 获取设计证据，结合项目框架、样式和组件约束，实现 UI 还原与集成。
用户要求根据 Figma 设计稿生成或更新前端代码
需要将 Figma 中的 UI 元素移植到当前项目的特定框架中
npx skills add ecomfe/tempad-dev --skill figma-design-to-code -g -y
基于 TemPad Dev MCP 提供的 Figma 设计证据，结合项目现有规范与组件库，将 UI 设计稿转换为符合项目标准的前端代码。
需要将 Figma 设计稿还原为代码
用户指定 nodeId 要求生成对应 UI 实现
npx skills add ecomfe/tempad-dev --skill figma-design-to-code -g -y
将 Figma 设计稿转化为与项目风格一致的 UI 代码，支持组件复用和样式映射。
需要将 Figma 设计还原为前端代码
根据 Figma 节点 ID 生成 UI 实现
npx skills add ecomfe/tempad-dev --skill figma-design-to-code -g -y
