New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Design System

by robonuggets in robonuggets/design-system

Extract a brand's design from any reference the user provides (site URL, screenshot, or existing assets) and generate a full design system reference page AND a 1-page A4 brand book PDF.

MITAuto-check passedFrontend & Design

Install Design System

skills CLI
$ npx skills add robonuggets/design-system --skill design-system -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install robonuggets/design-system design-system --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/robonuggets/design-system.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/design-system .claude/skills/design-system && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
design-system
GitHub stars
141
Token cost
~1.7k tokens
SKILL.md length
824 words
Files
2
Skills in repo
1
Repo updated
First seen
Licence
MIT

At a glance

Extract a brand's design from any reference the user provides (site URL, screenshot, or existing assets) and generate a full design system reference page AND a 1-page A4 brand book PDF.

  • Works in 2 steps: design-system.html — a scrollable… → brand-book-a4.html → brand-book-a4.pdf —…
  • Make design assets
  • SKILL.md covers Workflow, What to ask for (only if not…, Output 1: design-system.html… and Output 2: brand-book-a4.html →…, plus 3 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Design System is an agent skill from robonuggets/design-system. Extract a brand's design from any reference the user provides (site URL, screenshot, or existing assets) and generate a full design system reference page AND a 1-page A4 brand book PDF. Triggers on "design system", "brand book", "make design assets", "extract design", "brand page", "one page brand".

Its SKILL.md is about 1.7k tokens, which your agent loads only when the skill is triggered. The skill folder holds 2 other files.

It sits in Frontend & Design, covering Design systems, Brand strategy and identity and PDF. The repository describes itself as: Give Claude a brand reference, get a full design system page + 1-page A4 brand book PDF. The licence is MIT.

When your agent uses it

  • Make design assets
  • Tasks that involve Design systems
  • Tasks that involve Brand strategy and identity

Example prompts

  • “design system”
  • “brand book”
  • “make design assets”
  • “/design-system”

Workflow steps

2 steps, taken from the first numbered list in SKILL.md.

  1. design-system.html — a scrollable reference page covering colors, typography, principles, components, icons, and wordmarks.
  2. brand-book-a4.html → brand-book-a4.pdf — a single A4 portrait page fitting the brand topline onto one shareable poster, print-ready.

What it can do on your machine

Read from SKILL.md and the folder at commit 74b456c. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md (its code samples are bash and css).

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Design System loads about 1.7k tokens when it runs. Until then it costs about 79 tokens; SKILL.md has 824 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~79
When it runs · the whole SKILL.md, loaded when a task matches
~1.7k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from robonuggets/design-system at commit 74b456c, republished under its MIT licence (© robonuggets). 824 words, ~1,711 tokens.

Download SKILL.mdSave it as .claude/skills/design-system/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.
name
design-system
description
Extract a brand's design from any reference the user provides (site URL, screenshot, or existing assets) and generate a full design system reference page AND a 1-page A4 brand book PDF. Triggers on "design system", "brand book", "make design assets", "extract design", "brand page", "one page brand".

Design System + Brand Book Generator

Give Claude a reference (site URL, screenshot, or existing brand assets) and it produces two artifacts matching that brand:

  1. design-system.html — a scrollable reference page covering colors, typography, principles, components, icons, and wordmarks.
  2. brand-book-a4.html → brand-book-a4.pdf — a single A4 portrait page fitting the brand topline onto one shareable poster, print-ready.

Both outputs are self-contained HTML (Google Fonts CDN + inline CSS + inline SVG, no build step). The PDF is rendered via headless Edge/Chrome.

This skill has no opinions about fonts, colors, or themes. Everything comes from the user's reference. If there's no reference, ask for one — don't invent.

Workflow

  1. Get the reference. URL, screenshot, existing site, or a description of the brand. If the user hasn't provided one, ask.
  2. Extract. If URL → WebFetch it and inspect the HTML/CSS. If screenshot → Read it and identify colors/fonts visually. Pull out:
    • Hex colors (primary, secondary, any accents the brand actually uses)
    • Fonts (check <link> tags, CSS font-family declarations, or visual identification)
    • Tagline / value prop
    • Any documented principles
    • Logo / mark (grab as inline SVG if the reference has one)
    • Theme direction (light / dark / which surfaces are used)
  3. Confirm extraction. Short message listing what you found. Ask only for the gaps.
  4. Generate both files into a design/ folder.
  5. Render the PDF via headless Edge/Chrome.
  6. Show the user. Send the PDF and the design-system.html.
  7. Iterate on feedback.

What to ask for (only if not extractable)

  • Brand name(s) — single brand or a family (parent + product + studio)
  • Tagline — one short line
  • Principles — 4–6 design rules (if the brand doesn't publish any, skip the section rather than invent)
  • Team or product set (optional) — 4–8 items with a color + role each
  • Any colors/fonts you can't see in the reference

Never invent brand details. Colors, fonts, names, taglines, logos, and principles all come from the user or the reference. If a section has no source material, drop it — don't fill it with made-up content.

Never redraw logos. Use the exact SVG from the reference. If the logo is a raster image, ask the user for the SVG or leave a placeholder and note it.

Output 1: design-system.html (scrollable reference page)

Sections in this order (drop any for which there's no source material):

  1. Header — brand lockup + tagline + version/date
  2. Color Hierarchy — the primary, secondary, tertiary colors the brand actually uses, with hex + usage note
  3. Extended Palette — any additional brand colors (status, category, etc)
  4. Typography — display, body, mono samples using the brand's actual fonts; weight ladder
  5. Principles — whatever the brand documents
  6. Components — buttons, cards, badges styled in the brand's language
  7. Icons — whatever icon language the brand uses (inline SVG, pixel art, line, filled, etc)
  8. Wordmarks / Lockups — 2–3 name treatments based on the brand's mark + wordmark
  9. Footer — file path, version, any cross-reference note

Match the brand's surfaces (light vs dark), radius, border treatment, and type hierarchy. If the brand is rounded and soft, don't default to sharp. If the brand is maximalist, don't make it minimal.

Show full SKILL.md (323 more words)Show less

Output 2: brand-book-a4.html → brand-book-a4.pdf

A single A4 portrait page (210mm × 297mm) — the brand topline in one glance.

Required print CSS
css
@page { size: A4; margin: 0; }
* { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.page { width: 210mm; height: 297mm; padding: 18mm 16mm 14mm; }
Layout (top to bottom, single A4 page)
  1. Head — brand lockup on the left, version + tagline on the right
  2. Color Hierarchy — 3 swatch tiles (Primary / Secondary / Tertiary) using the brand's actual colors
  3. Two-column middle — Typography card (brand's fonts) + Principles card (brand's documented principles)
  4. Team / Product row (optional) — 6 small tiles if the brand has a product family
  5. Wordmarks · Lockups — 3 tiles showing name treatments
  6. Footer — file path + cross-reference note
Rendering to PDF

Windows (Edge):

bash
"/c/Program Files (x86)/Microsoft/Edge/Application/msedge.exe" \
  --headless --disable-gpu --no-pdf-header-footer \
  --print-to-pdf="brand-book-a4.pdf" \
  "file:///absolute/path/to/brand-book-a4.html"

macOS (Chrome):

bash
"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" \
  --headless --disable-gpu --no-pdf-header-footer \
  --print-to-pdf="brand-book-a4.pdf" \
  "file://$PWD/brand-book-a4.html"

Linux (Chromium):

bash
chromium --headless --disable-gpu --no-pdf-header-footer \
  --print-to-pdf="brand-book-a4.pdf" \
  "file://$PWD/brand-book-a4.html"

Wordmark Patterns

Three lockup styles you can offer (adapt to the brand's tone):

  1. Mark + wordmark — icon next to the brand name. Weight/tracking matches the brand's own wordmark.
  2. Split-weight lockup — PART1PART2 where one half is heavy and the other half is light. Useful for umbrella/group names.
  3. Accent lockup — PART1PART2 where one half is colored with the brand primary. Useful for studios/sub-brands.

Only include lockup variants that make sense for the brand. A single-word brand doesn't need a split-weight treatment.

Skeleton Template

See examples/template.html for a structural skeleton with placeholder tokens ({{PRIMARY}}, {{DISPLAY_FONT}}, etc). Copy it, swap the tokens with values from your extraction, add or drop sections to match the brand.

Rules

  • Extract before asking. Use the reference to pre-fill whatever you can.
  • Never invent brand details. No made-up colors, fonts, names, taglines, principles, or logos.
  • Never redraw logos. Use the exact SVG the user provides.
  • Drop sections you can't source. Better to skip a section than fill it with fiction.
  • Match the brand, don't impose a style. The template is structural — visual language comes from the reference.
  • Fit on one A4 page. If content overflows, tighten padding or drop a section.
  • Self-contained HTML. Google Fonts CDN + inline CSS + inline SVG. No build step.
  • Render the PDF. Don't just hand over HTML — finish the job with headless Edge/Chrome.

© robonuggets, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 1 other file in .claude/skills/design-system of robonuggets/design-system.

  • SKILL.md
  • examples/template.html

Open the folder on GitHubat commit 74b456c

Compare with similar skills

Design System next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Design System compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Design System this skillrobonuggets/design-system141—~1.7kAutomated safety check: PassMIT
DesignOhh-889/skyroc7959 repos~3.1kAutomated safety check: PassMIT
Brand SystemsHermeticOrmus/LibreUIUX-Claude-Code113—~2.3kAutomated safety check: PassMIT
Design Systemalirezarezvani/claude-skills28k—~2.8kAutomated safety check: PassMIT
Transilience Report Styletransilienceai/communitytools562—~6.3kAutomated safety check: PassMIT
Pro Report Builderthatrebeccarae/claude-marketing162—~3.6kAutomated safety check: PassMIT

Similar skills

  • Design

    Ohh-889/skyroc

    Comprehensive design skill: brand identity, design tokens, UI styling, logo generation (55 styles, Gemini AI), corporate identity program (50 deliverables, CIP mockups), HTML presentations…

    795 GitHub starsUsed in 9 repos~3.1k tokens
    Frontend & DesignAuto-check passed

  • Brand Systems

    HermeticOrmus/LibreUIUX-Claude-Code

    Brand identity building blocks: positioning, personality, archetypes, logo systems, color palettes, type pairing, voice, and guidelines documentation.

    113 GitHub stars~2.3k tokensUpdated 4 days ago
    Frontend & DesignAuto-check passed

  • Design System

    alirezarezvani/claude-skills

    Captures the user's brand identity once via a 10-question onboarding wizard (primary/accent HEX + heading + body Google Fonts + design style editorial/technical/minimal/playful + default output…

    28k GitHub stars~2.8k tokensUpdated 1 mo ago
    Frontend & DesignAuto-check passed

  • Transilience Report Style

    transilienceai/communitytools

    Threat Intelligence Report Design System — ReportLab-based PDF generation for A4 reports with Transilience branding, typography, and layout standards.

    562 GitHub stars~6.3k tokensUpdated 2 mo ago
    Frontend & DesignAuto-check passed

  • Pro Report Builder

    thatrebeccarae/claude-marketing

    Create polished HTML technical reports and multi-page documents for consulting deliverables.

    162 GitHub stars~3.6k tokensUpdated 4 mo ago
    Frontend & DesignAuto-check passed

  • HTML Report Builder

    thatrebeccarae/claude-marketing

    Create polished HTML technical reports and multi-page documents for consulting deliverables.

    162 GitHub stars~1.2k tokensUpdated 4 mo ago
    Frontend & DesignAuto-check passed

Categories

Questions about Design System

What does Design System do?

Extract a brand's design from any reference the user provides (site URL, screenshot, or existing assets) and generate a full design system reference page AND a 1-page A4 brand book PDF. Design System is an agent skill from robonuggets/design-system. Extract a brand's design from any reference the user provides (site URL, screenshot, or existing assets) and generate a full design system reference page AND a 1-page A4 brand book PDF.

When should I use Design System?

Design System fits situations like: make design assets; tasks that involve Design systems; tasks that involve Brand strategy and identity.

How do I install Design System in Claude Code?

Run `npx skills add robonuggets/design-system --skill design-system -a claude-code`. Or copy the skill folder (.claude/skills/design-system in robonuggets/design-system) into .claude/skills/design-system in your project. Claude Code loads it when a task matches its description.

How do I install Design System in Codex?

Run `npx skills add robonuggets/design-system --skill design-system -a codex`. Or copy the skill folder (.claude/skills/design-system in robonuggets/design-system) into .agents/skills/design-system in your project. Codex loads it when a task matches its description.

Can I use Design System in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add robonuggets/design-system --skill design-system -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/design-system, .gemini/skills/design-system, .github/skills/design-system and .opencode/skills/design-system in your project.

What does Design System need to run?

SKILL.md names no scripts, command-line tools or credentials: Design System is instructions for the agent only.

Does Design System access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Design System safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Design System use?

Design System is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Design System use?

About 1.7k tokens (SKILL.md is roughly 6.8k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Design System?

Skills that share tags, products or a category with Design System: Design (Ohh-889/skyroc, 795 stars), Brand Systems (HermeticOrmus/LibreUIUX-Claude-Code, 113 stars), Design System (alirezarezvani/claude-skills, 28k stars) and Transilience Report Style (transilienceai/communitytools, 562 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Design System?

robonuggets (a GitHub user) maintains it in robonuggets/design-system, which has 141 GitHub stars. The repository was last updated on April 18, 2026.

Source: robonuggets/design-system on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.