Agent Skills
› mtarcure/claude-vibe-squad
› figma-implement-design
figma-implement-design
GitHub将 Figma 设计稿忠实地转换为生产级 UI 代码，确保复用现有设计系统组件、自动布局及所有交互状态，而非像素级近似。
Trigger Scenarios
需要将 Figma 文件转化为前端代码
要求严格遵循设计系统的 token 和组件规范
Install
npx skills add mtarcure/claude-vibe-squad --skill figma-implement-design -g -y
SKILL.md
Frontmatter
{
"name": "figma-implement-design",
"audience": "specialist",
"description": "Use when a Figma file or frame is the authoritative implementation source and production UI must reproduce its tokens, component variants, auto-layout, interaction states, and responsive breakpoints through the project’s established primitives. This is source-to-code translation; post-build acceptance and inventing a visual language are separate work."
}
Figma Implement Design
Translate a Figma design into production UI code faithfully — tokens, components, states, and responsive behavior — not a pixel-approximation.
Steps
- Read the design's structure and design tokens (color, type, spacing, radius) from the source, not from a screenshot guess.
- Map Figma components to existing code components; reuse the design system rather than re-implementing primitives.
- Implement layout with the real layout model (auto-layout → fl/grid), not absolute pixel offsets.
- Cover all states and variants (hover/focus/active/disabled/empty/error) and responsive breakpoints the design specifies.
- Verify against the source for fidelity and against
wcag-conformance-auditfor accessibility; flag any design gap (missing state/token) back rather than inventing it.
Acceptance
- Tokens and components map to the design system; no re-implemented primitives.
- All specified states, variants, and breakpoints are implemented.
- Output is verified for fidelity and accessibility; design gaps are flagged, not guessed.
Version History
- d5262e2 Current 2026-09-11 11:16
