Skill822 repo starsupdated 5d ago

figma-implement-design

This skill translates Figma designs into production-ready code by analyzing layout, spacing, typography, and component structure. Use it when a user provides a Figma file or screen mockup and needs functional code that matches the design specifications with high fidelity, rather than loose visual approximation.

View source Repository: openagent

Install in Claude Code

Copy

git clone --depth 1 https://github.com/Haohao-end/openagent /tmp/figma-implement-design && cp -r /tmp/figma-implement-design/api/internal/core/skills/catalog/figma-implement-design ~/.claude/skills/figma-implement-design

Then start a new Claude Code session; the skill loads automatically.

Definition

skill.md

# Figma Implement Design

Use this skill when a user wants a Figma design translated into production-ready code.

## When to use

- The request provides a Figma file or a screen to implement
- The task is about matching layout, spacing, typography, and component structure
- The goal is code fidelity, not just a loose visual similarity

## Workflow

1. Confirm the Figma file, node, or scope.
2. Inspect the layout hierarchy, spacing, text styles, and component usage.
3. Identify reusable code components before writing new ones.
4. Implement incrementally and validate each major section.
5. Compare the result against the design and correct obvious mismatches.

## Boundaries

- If the request is only about mapping Figma components to code components, use the code-connect workflow instead.
- If the task is only to edit canvas elements in Figma, use the Figma canvas workflow instead.
- If the task needs a full-page or multi-section screen, keep the implementation cohesive and avoid partial stylistic drift.

## Output expectations

- Produce a concrete implementation plan or code changes.
- Call out any missing Figma context early.
- Keep the result faithful to the design system and interaction intent.