skills.rest
robonuggets
robonuggetsCOMMUNITY
Explore all skills by this author →
GitHub

design-system

Generate design-system.html and brand-book-a4.html from a provided URL, screenshot, or asset reference.

108|23|Updated Apr 18, 2026
Search Tags:#automation#typography#design-system#color-palette#brand-extraction#brand-book#lockups
One-click install
npx skills add https://github.com/robonuggets/design-system --skill design-system-robonuggets
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system
Source: https://github.com/robonuggets/design-system/tree/main/.claude/skills/design-system
Command: npx skills add https://github.com/robonuggets/design-system --skill design-system-robonuggets

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Extracts brand data from a user-provided reference (URL, screenshot, or assets) to generate two artifacts: design-system.html and brand-book-a4.html (brand-book-a4.pdf). Applies to branding projects by deriving color, typography, principles, and lockups from source material for rapid iteration. Requires no invented brand details and uses only what's present in the reference, prompting for gaps when necessary.

Core Features & Use Cases

  • Automated brand extraction: pull colors, typography, logos, and principles from the reference.
  • Dual-output generation: create design-system.html and brand-book-a4.html (with an accompanying brand-book-a4.pdf) ready for distribution.
  • Use Case: teams can rapidly convert brand references into structured design systems for web and print deliverables.

Quick Start

Provide a brand reference (URL or assets) and instruct Claude to generate the two outputs.

Frequently Asked Questions about design-system

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate a design system from a brand reference?▼

To generate a design system from a brand reference, provide a URL, screenshot, or assets to extract brand colors, typography, and lockups, producing a ready-to-use design-system.html file.

Can I extract a color palette and typography from a website screenshot?▼

Yes, you can extract a color palette and typography from a website screenshot. The process analyzes the provided assets to derive brand principles and visual elements for rapid iteration.

What is the best way to create a brand book from existing assets?▼

The best way to create a brand book from existing assets is to supply the source files for automated extraction, generating a brand-book-a4.html and an accompanying brand-book-a4.pdf for distribution.

Does the design system generator invent missing brand details?▼

No, the design system generator does not invent missing brand details. It uses only the data present in the reference material and prompts you to fill any gaps when necessary.

What file formats do I get when extracting a brand identity?▼

When extracting a brand identity, you get two output formats: a design-system.html file for web deliverables and a brand-book-a4.html with a brand-book-a4.pdf for print.

How to automate brand extraction for web and print deliverables?▼

Automate brand extraction for web and print deliverables by inputting a brand reference. The system derives colors, fonts, and lockups to output structured design-system.html and brand-book-a4.pdf files.

Related Skills

Explore More Design & Creative Skills→
growupanandgrowupanand
101

resend-design-skills

Access Resend brand guidelines and assets for compliant marketing materials.

Community
Basic
devCharuzudevCharuzu

brand-guidelines

Audit brand assets and generate brand guidelines for colors, typography, logos, and imagery.

Community
Advanced
AgriciDanielAgriciDaniel
7.9k

ads-dna

Extract brand identity elements from a website URL into a brand-profile.json file.

Community
Intermediate
Nir-BhayNir-Bhay
19

brand-guidelines-doc

Generate brand guideline documents with logo, color, typography, and voice specifications.

Community
Intermediate