Skill822 estrellas del repoactualizado 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.

Ver fuente Repositorio: openagent

Instalar en Claude Code

Copiar

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

Después abre una sesión nueva de Claude Code; el skill carga automáticamente.

Definición

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.

Del mismo repositorio

cloudflare-deploySkill

code_workbenchSkill

creativeSkill

Use when the user wants a less default, more original solution for code, design, writing, naming, architecture, debugging, or strategy, especially when progress is stuck.

develop-web-gameSkill