$ loading_
Turn code or page descriptions into full Figma screens using design systems.
The material indicates this is essentially an open-source prompt/workflow skill for generating or updating designs in Figma, with no declared secrets, remote endpoints, or local execution capability of its own. Given the GitHub open-source source and strong community adoption, the overall risk is low, though real-world behavior still depends on companion tooling such as figma-use and the Figma MCP environment, which should be reviewed separately.
The material and objective checks indicate the skill itself requires no keys or environment variables; there is no stated token collection, storage, forwarding, or credential-exposure pattern, so credential risk is low.
No remote endpoint is declared, and the system marks it as prompt-only; based on the provided material, it functions as workflow guidance rather than a program that initiates network traffic itself, with no standalone data egress evident.
There is no indication that this skill itself starts local processes, runs scripts, or invokes system capabilities; it mainly instructs use alongside other skills/tools, so the skill artifact itself does not present direct code-execution privileges.
From the material, the skill itself does not directly read or write local files or system data; any access to Figma files, design-system components, or page context belongs to the companion toolchain rather than permissions granted to this prompt-only skill alone.
The source is the open-source openai/skills repository on GitHub with strong community adoption (~22k stars), providing good auditability and source credibility; although the license is not declared and maintenance status is unknown, there are no visible red flags such as closed-source distribution, unclear provenance, or obvious supply-chain abuse.
Copy the install command and let the AI configure it · recommended for beginners
Please install the "figma-generate-design" skill from askskill: 1. Download https://raw.githubusercontent.com/openai/skills/main/skills/.curated/figma-generate-design/SKILL.md 2. Save it as ~/.claude/skills/figma-generate-design/SKILL.md 3. Reload skills and tell me it's ready
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 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.
When building a screen from a web app that can be rendered in a browser, the best results come from running both approaches in parallel:
generate_figma_design to capture a pixel-perfect screenshot of the running web appgenerate_figma_design capture. The capture provides the exact spacing, sizing, and visual treatment to aim for, while your use_figma output has proper component instances linked to the design system.generate_figma_design output — it was only used as a visual reference.This combines the best of both: generate_figma_design gives pixel-perfect layout accuracy, while use_figma gives proper design system component instances that stay linked and updatable.
This workflow only applies to web apps where generate_figma_design can capture the running page. For non-web apps (iOS, Android, etc.) or when updating existing screens, use the standard workflow below.
Follow these steps in order. Do not skip steps.
Before touching Figma, understand what you're building:
You need three things from the design system: components (buttons, cards, etc.), variables (colors, spacing, radii), and styles (text styles, effect styles like shadows). Don't hardcode hex colors or pixel values when design system tokens exist.
…
Generate or edit bitmap images for illustrations, photos, textures, mockups, and cutouts.
Build, scaffold, refactor, and troubleshoot ChatGPT Apps SDK applications.
Create a composable CLI from docs, specs, SDKs, apps, or scripts.
Turn vague intentions into concrete, measurable goals and clear success criteria.
Create a new blank Figma design or FigJam file to start collaborating quickly.
Connect to Figma, fetch design assets, and turn nodes into production code.
Create or update a professional Figma design system from a codebase.
Convert Figma designs into production-ready UI code with pixel-perfect fidelity.
Map Figma design components to code components for consistent implementation.
Generate custom design system rules for your codebase and Figma-to-code workflow.
Connect Figma files to extract data, capture screens, and generate code.
Use natural language to create, review, fix, and sync designs in Figma.