figma-generate-design
From the author
Use this skill alongside figma-use when the task involves translating an application page, view, or multi-section layout into Figma. Triggers: 'write to Figma', 'create in Figma from code', 'push page to Figma', 'take this app/page and build it in Figma', 'create a screen', 'build a landing page in Figma', 'update the Figma screen to match code'. This is the preferred workflow skill whenever the user wants to build or update a full page, screen, or view in Figma from code or a description. Discovers design system components, variables, and styles via search_design_system, imports them, and assembles screens incrementally section-by-section using design system tokens instead of hardcoded values.
Install
npx skills add openai/skills --skill figma-generate-design -a claude-code
Installs to .claude/skills/figma-generate-design/ · Each command fetches the skill straight from GitHub with the open skills CLI.
No download: this skill’s licence (Custom or unclear) does not let us redistribute its files. The install commands fetch them from GitHub instead.
Want your agent to suggest skills while you type? See how to use skills from your IDE.
Safety checks on SKILL.md
No warnings.
Why 88
aiqbench computes the trust score from public signals. It is not a security audit, so read a skill before you install it.
Similar skills
Closest to this one by what they do and when they are used.
- figmaheygen-com/hyperframesImport Figma content into a HyperFrames composition — rendered assets, brand tokens, components, storyboard sections → reconstructed motion (frames read as states, not slides) (REST/CLI), connector-assisted motion when available, and shaders from a connector or native export. Use when the user pastes a figma.com link or asks to bring a Figma design, frame, logo, brand, or animation into a video/composition.OfficialDesign★ 68.8K
- figma-usenexu-io/open-designRun Figma Plugin API scripts for canvas writes, inspections, variables, and design-system work. Prerequisite for every other Figma skill in this catalogue.Design★ 102.9K
- figma-implement-designopenai/skillsTranslates Figma designs into production-ready application code with 1:1 visual fidelity. Use when implementing UI code from Figma files, when user mentions "implement design", "generate code", "implement component", provides Figma URLs, or asks to build components matching Figma specs. For Figma canvas writes via `use_figma`, use `figma-use`.OfficialDesign★ 28.2K
- figma-create-design-system-rulesnexu-io/open-designGenerate project-specific design system rules for Figma-to-code workflows. Useful for capturing tokens, naming, and lint rules in one source.Design★ 102.9K
- understand-figmaEgonex-AI/Understand-AnythingAnalyze a Figma file via the Figma REST API and generate an interactive design knowledge graph (pages, screens, components, component sets, instances, design tokens) with a kind:"design" dashboard.Design★ 87.4K
- design-critiqueanthropics/knowledge-work-pluginsGet structured design feedback on usability, hierarchy, and consistency. Trigger with "review this design", "critique this mockup", "what do you think of this screen?", or when sharing a Figma link or screenshot for feedback at any stage from exploration to final polish.OfficialDesign★ 31K
Ratings & reviews
—
no reviews
Tried this skill? Rate it to help others. Sign in
Discussion
Join the discussion. Sign in