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 Hipson47/Hipson --skill figma-generate-designgit clone --depth 1 https://github.com/Hipson47/HipsonWrote 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/hipson47/hipson/figma-generate-design)<a href="https://agentmods.dev/skills/hipson47/hipson/figma-generate-design"><img src="https://agentmods.dev/badge/skills/hipson47/hipson/figma-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/hipson47/hipson/figma-generate-design"><img src="https://agentmods.dev/badge/skills/hipson47/hipson/figma-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.04627 |
| Opus 5 | $0.00080 | $0.02313 |
| Sonnet 5 | $0.00032 | $0.00925 |
| Haiku 4.5 | $0.00016 | $0.00463 |
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 9d 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
81% identical to figma-generate-design — 233 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 — 342 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-components.
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. - Once confirmed looking good: Delete the
generate_figma_designoutput — it was only used as a visual reference.
What ships with it
6 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
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.
- 9d ago First seen · 342 lines · 160 tokens per session scan A 45d2b97103bd
figma-generate-design is a skill published in the GitHub repository Hipson47/Hipson (4 stars, last pushed 2mo ago), licensed Apache-2.0. It adds 160 tokens to every session and 4,627 once invoked, about $0.0008 per session on Opus 5. A static security scan graded it A with 0 findings. It is 81% identical to figma-generate-design, differing in 233 lines, and is treated as a copy.
Other skills, from other repositories
kirby-panel-and-blueprints
Designs Kirby blueprints and Panel UI, including blueprint reuse/extends, programmable blueprints, and custom Panel fields/sections/areas. Use when changing the Panel experience or schema.
bootstrap-design
A guided process for choosing a user interface’s visual direction and recording the decisions in DESIGN.md.
agent-session-format-check
Verify agent session format compatibility for Agent Sessions. Use when any agent CLI updates, when monitoring flags drift, or when bumping max verified versions (fixtures + docs + tests). Covers session schema, usage/limits tracking, storage backends, and discovery path contracts for all supported agents.
agent-support-matrix
Maintain Agent Sessions agent support matrix and JSON/JSONL parsing compatibility. Use when checking upstream agent releases for session format changes, updating max verified versions in docs/agent-support/agent-support-matrix.yml, or updating docs/agent-json-tracking.md and fixtures/tests.
diagrams
Mermaid diagrams following the C4 model: context, container, component, sequence, ER and deployment. Use when saying "diagram", "visualize", or "architecture diagram".
from-intake
A workflow for reviewing material brought from another workspace and carrying relevant brand evidence into the project's assets. It checks inventories, brand guides, logos, and image sources before anything is used.