figma-generate-design
Translate an application page, view or multi-section layout from code into Figma. Used alongside figma-use.
- Kind
- Skill
- Works with
- Codex, Claude Code
- Source
- openai/skills @ 49f948faa925
- Path
- skills/.curated/figma-generate-design/SKILL.md
- License
- Apache-2.0
- Jobs
- UI/UX work, Implementation
InstallCopy it from the source repository, or sign in and let the assistant adapt it for your project.
# Build / Update Screens from Design System Use this skill to create or update full-page screens in Figma by **reusing the published design system** — components, variables, and styles — rather than drawing primitives with hardcoded values. The key insight: the Figma file likely has a published design system with components, color/spacing variables, and text/effect styles that correspond to the codebase's UI components and tokens. Find and use those instead of drawing boxes with hex colors. **MANDATORY**: You MUST also load [figma-use](../figma-use/SKILL.md) before any `use_figma` call. That skill contains critical rules (color ranges, font loading, etc.) that apply to every script you write. **Always pass `skillNames: "figma-generate-design"` when calling `use_figma` as part of this skill.** This is a logging parameter — it does not affect execution. ## Skill Boundaries - Use this skill when the deliverable is a **Figma screen** (new or updated) composed of design system component instances. - If the user wants to generate **code from a Figma design**, switch to [figma-implement-design](../figma-implement-design/SKILL.md). …