From the author
Extract a Figma design into a pixel-exact implementation plan -- reads the selected nodes through the figma-bridge MCP, maps Figma variables onto the project's existing theme tokens, and writes a self-contained plan to .claude/plans/ that /design-build executes without touching Figma again. --auto carries the same run through the build without a further prompt.
Install
npx skills add hashgraph-online/awesome-codex-plugins --skill design -a claude-code
Installs to .claude/skills/design/ · Each command fetches the skill straight from GitHub with the open skills CLI.
Byte-identical to the scanned commit, with the repository’s licence and a SOURCE.txt.
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.
- 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
- design-fixhashgraph-online/awesome-codex-pluginsCompare one already-implemented screen or component against its Figma source and fix the deviations you pick -- reads the node live through the figma-bridge MCP, or from the Node Specs of an existing /design plan, then diffs box, layout, typography, fill, stroke, radius, effects, and content against the code that renders it. Reports first, fixes only what you select, and never touches Figma.Design★ 1.4K
- figmaopenai/skillsUse the Figma MCP server to fetch design context, screenshots, variables, and assets from Figma, and to translate Figma nodes into production code. Trigger when a task involves Figma URLs, node IDs, design-to-code implementation, or Figma MCP setup and troubleshooting.OfficialDesign★ 28.2K
- design-buildhashgraph-online/awesome-codex-pluginsExecute a design plan produced by /design -- implements each node against its embedded measurement spec and gates every task on the project's build or tests under a bounded retry budget. Runs with Figma disconnected; the plan carries every number it needs. --auto runs the whole loop without a prompt.Design★ 1.4K
- figma-automationdavepoon/buildwithclaudeAutomate Figma tasks via Rube MCP (Composio): files, components, design tokens, comments, exports. Always search tools first for current schemas.Design★ 3.7K
- figma-design-to-codeDevin-AXIS/iPolloWorkUse this skill when implementing a Figma design as code (design → code) — the read-FROM-Figma direction. Triggers: 'implement this Figma design', 'build this screen from Figma', 'turn this Figma into code', 'code this up from Figma', 'design to code', or a figma.com design URL provided alongside a codebase. Encodes the workflow for reading a node out of Figma with get_design_context and adapting its reference output to the target project — reusing existing components, tokens, and conventions, and honoring Code Connect mappings, component docs, design annotations, and design tokens by priority. Complements figma-code-connect (component mapping) and figma-generate-design / figma-use (the reverse, code → design direction).Design★ 7.1K
Ratings & reviews
—
no reviews
Tried this skill? Rate it to help others. Sign in
Discussion
Join the discussion. Sign in