figma-implement-design
Translate specific Figma nodes into production-ready UI with close visual fidelity and project-aware implementation decisions.
来源信息
- 仓库
- Calvin-Corbett/thomas
- 最近来源活动
- 2026年9月9日 02:49
- 检测到的 SKILL.md 语言
- 英语
- 星标
- 4
- 分支
- 0
安装方式
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
检查来源文件
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
正在显示 SKILL.md
SKILL.md
来源说明 · 只读预览- name
- figma-implement-design
- description
- Translate specific Figma nodes into production-ready UI with close visual fidelity and project-aware implementation decisions.
# Figma Implement Design
Use this skill when Thomas must implement a Figma design faithfully in code rather than only summarizing it.
## Workflow
1. Inspect the exact Figma node or screen and gather screenshots, measurements, and assets.
2. Translate the design into the project?s real component structure instead of flat copywork.
3. Implement the UI with attention to spacing, typography, responsive behavior, and states.
4. Verify the result visually against the design source.
5. Report any intentional implementation deviations and why they were necessary.
## Rules
- Aim for fidelity, but adapt responsibly to the project?s real architecture.
- Do not ignore responsive states or interactive variants.
在 GitHub 查看