agentmods.dev

figma-generate-design

figma-generate-design is a skill for Claude Code from app-builders-club/design-builder. It costs 160 tokens per session (5,109 once invoked), scanned A, a copy of figma-generate-design, MIT.

A workflow for turning application code or a description into a full-page screen in Figma, a collaborative interface-design tool.

In plain words
What is it for?
Creating or updating pages and multi-section layouts in Figma by reusing published components, variables, and styles.
Why use it?
It helps keep generated screens consistent with an existing Figma design system instead of recreating styles manually.

Skill for Claude Code

Written for Claude Code: disable-model-invocation in frontmatter.

Part of the design-builder plugin — 10 skills, 7 commands, 1 agent, 2 MCP servers shipped together

not rated 4repo changed 5d ago A scan 160 tokens copy · 86% MIT

Good fit Creating or updating pages and multi-section layouts in Figma by reusing published components, variables, and styles.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/app-builders-club/design-builder/generate-design
View source ↗ app-builders-club/design-builder
Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Any agent
npx skills add app-builders-club/design-builder --skill generate-design
Clone the repo
git clone --depth 1 https://github.com/app-builders-club/design-builder

Made for: Claude Code.

Or install design-builder, the plugin that ships this one along with the rest of its 10 skills, 7 commands, 1 agent, 2 MCP servers.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for figma-generate-design

README.md
[![agentmods](https://agentmods.dev/badge/skills/app-builders-club/design-builder/generate-design/github.svg)](https://agentmods.dev/skills/app-builders-club/design-builder/generate-design)
Your own site
<a href="https://agentmods.dev/skills/app-builders-club/design-builder/generate-design"><img src="https://agentmods.dev/badge/skills/app-builders-club/design-builder/generate-design/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

agentmods 80×15 button for figma-generate-design

Your own site · 80×15
<a href="https://agentmods.dev/skills/app-builders-club/design-builder/generate-design"><img src="https://agentmods.dev/badge/skills/app-builders-club/design-builder/generate-design.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 160 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 5,109 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.
Origin 86% copy Near-identical to another mod in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5.1 $0.00160 $0.05109
Opus 5.5 $0.00064 $0.02044
Sonnet 5.5 $0.00032 $0.01022
Haiku 4.5 $0.00016 $0.00511

Measured 5d ago against content hash ca9c49851855, method: parsed. Prices are Anthropic first-party input rates as of 2026-10-07, from the pricing page.

Security

Grade A, and why

figma-generate-design scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 5d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

Origin

This is a copy

86% identical to figma-generate-design — 237 lines differ, which has more behind it and is treated as the original. This page carries a canonical link to it rather than competing with it.

skills/design/references/figma/generate-design/SKILL.md · 372 lines

How it starts

The opening of the file, as written. The whole thing — 372 lines — stays where its author put it; the contents beside it link to each section on GitHub.

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 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.
  • If the user wants to create new reusable components or variants, use figma-use directly.
  • If the user wants to write Code Connect mappings, switch to figma-code-connect.

Prerequisites

  • Figma MCP server must be connected
  • The target Figma file must have a published design system with components (or access to a team library)
  • User should provide either:
    • A Figma file URL / file key to work in
    • Or context about which file to target (the agent can discover pages)
  • Source code or description of the screen to build/update

Parallel Workflow with generate_figma_design (Web Apps Only)

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:

  1. In parallel:
    • Start building the screen using this skill's workflow (use_figma + design system components)
    • Run generate_figma_design to capture a pixel-perfect screenshot of the running web app
  2. Once both complete: Update the use_figma output to match the pixel-perfect layout from the generate_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. If the capture contains images, transfer them to your use_figma output by copying imageHash values from the capture's image fills (see Step 5 for details).
  3. Once confirmed looking good: Delete the generate_figma_design output — it was only used as a visual reference.

Read the full file on GitHub · 372 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 5d ago Changed ca9c49851855
  2. 2mo ago First seen · 372 lines · 160 tokens per session scan A 0f390674e0b1

Subscribe to this mod's changes

figma-generate-design is a skill published in the GitHub repository app-builders-club/design-builder (4 stars, last pushed 5d ago), licensed MIT. It adds 160 tokens to every session and 5,109 once invoked, about $0.0006 per session on Opus 5.5. A static security scan graded it A with 0 findings. It is 86% identical to figma-generate-design, differing in 237 lines, and is treated as a copy.

Design and UXclaude-code-plugindesign-skill
Related

figma-generate-design compared with skills from other repositories

figma-generate-design next to 6 skills from other repositories
ModTypeStarsLast pushLicenceScanTokensWorks with
figma-generate-designapp-builders-club/design-builderSkill45d agoMITA160Claude Code
top-designwondelai/skillsSkill2.6k4d agoMITA113Claude Code, Codex
influence-psychologywondelai/skillsSkill2.6k4d agoMITA156Claude Code
refactoring-uiwondelai/skillsSkill2.6k4d agoMITA132Claude Code, Codex
ux-heuristicswondelai/skillsSkill2.6k4d agoMITA122Claude Code, Codex
sxonowork-studio/notfair-pluginSkill4.1k8d agoMITA211Claude Code
shiny-bslibposit-dev/skillsSkill5544d agoMITA107Claude Code