skills.rest
MilUX-Ltd
MilUX-LtdOFFICIAL
Explore all skills by this author →
GitHub

design-system-setup

Generate a token-based design system with CSS tokens, showcase page, and starter templates from a brand config.

Updated Jul 1, 2026
Search Tags:#typography#templates#design system#color palette#scaffold#brand#css tokens
One-click install
npx skills add https://github.com/MilUX-Ltd/footing --skill design-system-setup-milux-ltd
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system-setup
Source: https://github.com/MilUX-Ltd/footing/tree/main/footing/template/Skills/brand-skills/design-system-setup
Command: npx skills add https://github.com/MilUX-Ltd/footing --skill design-system-setup-milux-ltd

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve? Founders and small teams often lack a single source of truth for brand colour, type, and spacing, so every document, deck, and page ends up styled by hand and inconsistent. This Skill turns a short interview into a complete, editable design system folder. ## Core Features & Use Cases - Canonical token file: Generates css/colors_and_type.css with a derived brand palette, six-stop chart palette, type scale, spacing, radii, borders, and elevation tokens. - Generated showcase and guidance: Produces an index.html showcase of colour, type, components, and voice, plus a written BRAND-GUIDANCE.md from the founder's voice rules. - Starter templates: Ships A4 report, 16:9 slide, and letterhead templates built on the tokens, with a WeasyPrint one-liner for PDF rendering. - Use Case: A founder answers six questions (brand name, primary and accent hex colours, neutral temperature, fonts, voice rules) and receives a self-contained Brand/ folder they can open in any browser and build every surface from. ## Quick Start Ask the assistant to set up a design system for your brand, then answer the short interview about your colours, fonts, and voice so it can run the scaffolder into a folder you choose.

Frequently Asked Questions about design-system-setup

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

FAQPage Schema
How do I create a design system with CSS tokens for my brand?▼

Answer a short interview covering brand name, primary and accent hex colours, neutral temperature, fonts, and voice rules. The answers are written to a brand.config.json, and running node scripts/scaffold.mjs with that config generates the full token-based system folder.

What files does a generated design system contain?▼

The output folder contains css/colors_and_type.css as the canonical token source, css/styles.css as the single stylesheet entry point, an index.html showcase, BRAND-GUIDANCE.md voice rules, starter templates for PDF reports, slides, and letterhead, and a README.

Does the design system scaffolder require npm dependencies or network access?▼

No. The scaffolder is plain Node.js with zero dependencies and fetches nothing over the network. It only writes files inside the output folder you specify, and the generated pages work offline with system font fallbacks.

Can I change brand colours after the design system is generated?▼

Yes. Edit values directly in css/colors_and_type.css, which is the source of truth, or update brand.config.json and re-run the scaffolder to regenerate the folder. Derived tints and the chart palette are recalculated from the two brand colours.

What are the limitations of this design system generator?▼

It scaffolds the foundation only: tokens, a showcase, guidance, and starter templates. It does not design logos, choose colours for you, write copy, or produce finished decks, and it is not meant to replace an existing design system you already use.

Related Skills

Explore More Design & Creative Skills→
MarcelLeonMarcelLeon
43

brand-guidelines

Applies Anthropic's brand colors and Poppins/Lora typography to documents and presentations.

Community
Basic
opensquillaopensquilla
6.6k

html-to-pdf

Render styled HTML and CSS into print-ready PDF files with WeasyPrint.

Official
Intermediate
getsentrygetsentry
905

brand-guidelines

Generate UI and marketing copy aligned with specified writing guidelines.

Official
Intermediate
Gekkos-techGekkos-tech
4

brandkit

Generates brand identity assets including logo concepts, guideline boards, moodboards, and mockups from AI image models.

Official
Intermediate