design-bootstrap

design-bootstrap is a skill for Claude Code from Mozurok/fhorja.dev. It costs 56 tokens per session (4,878 once invoked), scanned A, original, MIT.

A starting-point tool that reads a Figma design file and sets up the basic files for a new design system. It collects shared design values, lists components and screens, and creates starter documentation.

In plain words
What is it for?
Use it when beginning a project from an existing Figma design. It helps record colours, text styles, spacing, corner shapes, shadows, components, and screens.
Why use it?
It removes the manual work of turning a Figma file into an organised design-system project. It also gives the team an inventory of what the design contains.

Skill for Claude Code

Written for Claude Code: installed under .claude/. Also seen: reads .claude/ paths; reads ~/.codex paths; mentions Codex.

Good fit Use it when beginning a project from an existing Figma design. It helps record colours, text styles, spacing, corner shapes, shadows, components, and screens.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/mozurok/fhorja.dev/design-bootstrap
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 Mozurok/fhorja.dev --skill design-bootstrap
Clone the repo
git clone --depth 1 https://github.com/Mozurok/fhorja.dev

Made for: Claude Code.

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 design-bootstrap

README.md
[![agentmods](https://agentmods.dev/badge/skills/mozurok/fhorja.dev/design-bootstrap/github.svg)](https://agentmods.dev/skills/mozurok/fhorja.dev/design-bootstrap)
Your own site
<a href="https://agentmods.dev/skills/mozurok/fhorja.dev/design-bootstrap"><img src="https://agentmods.dev/badge/skills/mozurok/fhorja.dev/design-bootstrap/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 design-bootstrap

Your own site · 80×15
<a href="https://agentmods.dev/skills/mozurok/fhorja.dev/design-bootstrap"><img src="https://agentmods.dev/badge/skills/mozurok/fhorja.dev/design-bootstrap.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 56 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 4,878 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 original No closer match found 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.00056 $0.04878
Opus 5.5 $0.00022 $0.01951
Sonnet 5.5 $0.00011 $0.00976
Haiku 4.5 $0.00006 $0.00488

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

Security

Grade A, and why

design-bootstrap 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 12d 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.

.claude/skills/design-bootstrap/SKILL.md · 177 lines

How it starts

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

Output contract, in brief. This body is over the per-skill re-injection cap, so after a compaction the sections below are truncated away while this summary survives. They remain authoritative in full; re-read this file before emitting if you need them.

  • Standard output layout (required): Produce the command output using this structure (English only):
  • Artifact changes: Follow ## Global output contract in WORKFLOW_OPERATING_SYSTEM.md for APPLIED / PROPOSED / SKIP rules. Every listed file...
  • Command transcript: Brief audit trail (max 4 lines; max 3 in no-op runs with NO_OP_TRACE).
  • Handoff: Use the adaptive ending format of WORKFLOW_OPERATING_SYSTEM.md ## Global output contract. Every Handoff is one fenced text b...
  • Definition of done (command output): Both docs/research/ and docs/app/ trees exist and are populated per the canonical layout.

Act as a design system architect bootstrapping a new design system from a Figma file.

Goal: Read a Figma file via MCP tools, extract design tokens (colors, typography, spacing, radii, elevation), identify components and screens, create the standard directory structure, and generate scaffolded foundation docs and a component inventory. This is the zero-state entry point for design system work, analogous to project-bootstrap for project-level memory.

Mandatory context bootstrap (before any output):

  • Read these sections in WORKFLOW_OPERATING_SYSTEM.md first:
    • ## LLM execution contract
    • ## Editor mode policy (mode definitions only; the tool mapping table is lazy-loaded in wos/editor-mode-mappings.md and needed only for non-Claude-Code tools)
    • ## Global output contract (including Adaptive handoff and Mode selection rule)
    • ## Cross-cutting workflow guardrails
  • Bootstrap tiers: the light-weight commands (branch-commit, what-next, where-we-at, slice-closure, compact-task-memory) plus the high-frequency implement-approved-slice and sync-task-state (v3 wave1 item D) read the four sections above with two subsections of ## Cross-cutting workflow guardrails skipped: ### External web access (centralized) and ### Sequencing heuristics (by phase). Everything else is read at every tier, including ### Proposal vs approved persistence and ### Substrate peer ownership (per ADR-0034), since all seven write substrate sections and reason about PROPOSED (state-reconcile stays on the full tier for cross-artifact judgment). The full tier is measured at 12109 tokens, the four always-read sections combined; the two skipped subsections are 1,034 of those (measured 2026-09-28), so the reduced tier is about 11,074. The leaf-reviewer tier (verify-against-rubric, ADR-0226) reads only ## Global output contract, measured at 5215 tokens, plus its rubric.
  • Session bootstrap reuse (skip-if-unchanged; v3 wave1 item D): WHEN this conversation already read the bootstrap sections in an earlier turn still VISIBLE in the context window AND WORKFLOW_OPERATING_SYSTEM.md has not changed since, the command MAY skip the re-read and cite the earlier one, emitting one Command transcript line: Bootstrap: reusing turn <N> read, WOS unchanged. Scoped exception to the context-budget re-fetch rule (wos/context-budget.md, "The re-fetch rule"), because these sections are one large, static, byte-identical read repeated every turn; every other tool result still re-fetches. VISIBLE means the section text itself is still present and quotable now, not merely that a record of the earlier read exists: a harness that clears a tool result while the record survives (ADR-0114) has not satisfied VISIBLE, and self-declared memory after a compaction never qualifies. A stateless-per-turn harness is excluded. The transcript line is mandatory; a silent skip is invalid output.
  • Resolving the spec and wos/<topic>.md: canonical repository FIRST. Otherwise use active-adapter docs: ~/.claude/workflow-docs (CLAUDE_WORKFLOW_DOCS_DIR), ~/.cursor/workflow-docs (WORKFLOW_DOCS_DIR; project .cursor/workflow-docs on project installs), ~/.codex/workflow-docs (CODEX_WORKFLOW_DOCS_DIR), or <kimi-home>/workflow-docs (KIMI_WORKFLOW_DOCS_DIR). Nonempty overrides win. Kimi home: KIMI_CODE_HOME, else existing ~/.kimi-code, else existing ~/.kimi, default ~/.kimi-code. Use one root for both paths; try other adapters if absent or unknown. Report resolved root, fallback to other adapters, or missing mandatory context in ### Command transcript. Installed snapshots refresh and prune retired topics only on sync.
  • Read additional sections only when relevant to this command's role.
  • Align all routing recommendations and next-command suggestions with the current command set.
  • Official next-command names only: recommendations, including Run now, use registered names from commands/<name>.md or commands/<name>/SKILL.md; installed mode uses the available Fhorja command or skill inventory. No invented aliases. Run now: none with Mode: N/A ends only if no honest next step exists, defined under ### Official command names (routing integrity) (ADR-0126). Required inputs:
  • Figma file URL (e.g., https://figma.com/design/:fileKey/:fileName)
  • project workspace path (where docs/ and packages/ will be created)
  • optional: specific Figma page or frame to scope extraction

Read the full file on GitHub · 177 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. 12d ago Changed · -16 tokens per session a699c384d742
  2. 15d ago Changed · -1 lines 91cbdd2944da
  3. 21d ago Changed · -1 lines b0fd1d7ba9c3
  4. 22d ago Changed · -17 lines de5d01eda2b0
  5. 1mo ago First seen · 196 lines · 72 tokens per session scan A 76a26aa8f301

Subscribe to this mod's changes

design-bootstrap is a skill published in the GitHub repository Mozurok/fhorja.dev (10 stars, last pushed 12d ago), licensed MIT. It adds 56 tokens to every session and 4,878 once invoked, about $0.0002 per session on Opus 5.5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.

Related

Other skills, from other repositories

ijfw-ui-spec

Use when the user says: 'ui spec', 'design contract', 'ui audit setup', 'lock the design', 'visual contract', 'ui review setup', or '/ijfw-ui-spec'. Produces UI-SPEC.md as the visual design contract before any frontend or visual-artifact build, and dispatches ijfw-ui-auditor as the final 6-pillar gate.

FerroxLabs/ijfw · 83 tokens

ijfw-design

Use when the user says: 'design', 'redesign', 'UI', 'UX', 'dashboard', 'page', 'component', 'make it look better', 'polish', 'pretty', 'professional', 'user experience', 'layout', 'visual', 'accessibility', 'colors', 'typography', 'brand'.

FerroxLabs/ijfw · 72 tokens

design-maker

name: design-maker description: Used when the Design Brief is complete and the user needs to generate mockups. Reads Product-Spec.md and Design-Brief.md, then generates a complete set of design deliverables through a design tool MCP, including all pages, state variants, component specifications, design tokens…

zxpmail/ReqForge · 0 tokens

design-brief-builder

name: design-brief-builder description: Used when the user wants to define a design style or visual direction, or says something vague like 'I want a premium/sleek/modern look'. Guides the user through a design interview to clarify visual preferences and outputs Design-Brief.md. After Brief is saved, MUST run Next…

zxpmail/ReqForge · 0 tokens

design

Design and critique any visible UI, before and after building. Trigger on UI work: "improve the UI", "redesign", "polish", "make it look better", "visual upgrade", "design review", "design audit", "layout fix", "UX improvement", or any task whose deliverable is a page, screen, or component that renders. Shapes a…

getpapi/papi · 121 tokens

brand-visual-quality

A quality-review workflow for brand visual assets such as logos, icons, theme variants, small-size optical adjustments, and monochrome masters.

devcodex-labs/devcodex · 86 tokens