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.
npx skills add app-builders-club/design-builder --skill generate-designgit clone --depth 1 https://github.com/app-builders-club/design-builderWrote 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.
[](https://agentmods.dev/skills/app-builders-club/design-builder/generate-design)<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.
<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>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.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00160 | $0.05102 |
| Opus 5 | $0.00080 | $0.02551 |
| Sonnet 5 | $0.00032 | $0.01020 |
| Haiku 4.5 | $0.00016 | $0.00510 |
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 10d 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.
This is a copy
86% identical to figma-generate-design — 211 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.
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:
- In parallel:
- Start building the screen using this skill's workflow (use_figma + design system components)
- Run
generate_figma_designto capture a pixel-perfect screenshot of the running web app
- Once both complete: Update the use_figma output to match the pixel-perfect layout from the
generate_figma_designcapture. 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 copyingimageHashvalues from the capture's image fills (see Step 5 for details). - Once confirmed looking good: Delete the
generate_figma_designoutput — it was only used as a visual reference.
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.
- 10d ago First seen · 372 lines · 160 tokens per session scan A 0f390674e0b1
figma-generate-design is a skill published in the GitHub repository app-builders-club/design-builder (4 stars, last pushed 2mo ago), licensed MIT. It adds 160 tokens to every session and 5,102 once invoked, about $0.0008 per session on Opus 5. A static security scan graded it A with 0 findings. It is 86% identical to figma-generate-design, differing in 211 lines, and is treated as a copy.
Other skills, from other repositories
top-design
Create award-winning, immersive web experiences at the level of Awwwards-featured agencies. Use when the user mentions "Awwwards quality", "make my site stunning", "scroll animations", "parallax storytelling", "cinematic web design", "portfolio site", or "brand experience". Also trigger when elevating a standard…
design-everyday-things
Apply foundational design principles: affordances, signifiers, constraints, feedback, and conceptual models. Use when the user mentions "why is this confusing", "affordance", "error prevention", "discoverability", "human-centered design", "mental model", "mapping", "seven stages of action", "users keep making…
sxo
Search Experience Optimization (SXO) — the bridge between SEO and UX/CRO. Audits the full journey from the SERP click to the on-page goal: SERP click-through factors (title/meta/rich results that win the click), then post-click experience signals that keep users and drive conversions — above-the-fold relevance and…
influence-psychology
Apply the seven principles of ethical persuasion (reciprocity, commitment, social proof, authority, liking, scarcity, unity) to product design, copy, and sales. Use when the user mentions "social proof", "persuasive copy", "why users dont convert", "ethical persuasion", "reciprocity", "scarcity tactics", "commitment…
refactoring-ui
Audit and fix visual hierarchy, spacing, color, and depth in web UIs. Use when the user mentions "my UI looks off" (or amateur/unprofessional), "fix the design", "Tailwind styling", "color palette", "visual hierarchy", "design system", "spacing scale", or "component styling". Also trigger when building consistent…
ux-heuristics
Evaluate and improve interface usability using heuristic analysis. Use when the user mentions "usability audit", "users are confused", "form usability", "navigation problems", "Nielsen heuristics", "cognitive walkthrough", or "is this easy to use". Also trigger when reviewing a design for usability issues, improving…