design-system-generate

Design System Generate Skill

There is a skill for auditing a design system that exists and a skill for

extracting one from a brand that exists. This one is for the case in between:

there is no system, and something ships on Thursday.

The output is not a mood board. It is a set of files an engineer can commit,

with a contrast audit attached to them.

Required Inputs

Ask for these if not provided:

• A name or seed — anything; the product name works. The same seed always

produces the same system, so this is how a design becomes reproducible.

• A brand colour, if one is non-negotiable (#E4002B and so on). If there

isn't one yet, say so and let it choose.

• Light, dark, or both — default to both.
• A feeling, loosely: editorial, brutalist, glassy, terminal, or playful.

If the user describes it in their own words, map it to the nearest.

• Where it has to land — CSS variables, Tailwind, design tokens, Figma, a

VS Code theme, a deck theme, Storybook. Default to CSS + tokens.

Programmatic Helper

This skill is a thin wrapper around a deterministic generator. Do not invent hex

values — run it.

# Look at one first
npx --yes notugly <seed> --vibe editorial

# Lock a brand colour that is not up for discussion
npx --yes notugly <seed> --brand "#e4002b"

# Write the files
npx --yes notugly export <seed> --brand "#e4002b" --out ./design
npx --yes notugly slides <seed> --out ./deck        # .thmx for PowerPoint/Keynote
npx --yes notugly storybook <seed> --out ./stories

# Prove the claim rather than making it
npx --yes notugly audit <seed> --brand "#e4002b"
npx --yes notugly vision <seed>                     # colour-blind collisions
npx --yes notugly print <seed>                      # what survives CMYK

export writes ten files: CSS custom properties, a Tailwind config, W3C design

tokens, React and Svelte snippets, a demo page, a loadable Figma plugin, and a

VS Code theme. Runtime cost is zero — it is all static text, so there is no

package to install and nothing to break at 3am.

Zero dependencies and no model call, so it is free to run and gives the same

answer every time.

The Method

1. Start from the constraint, not the palette. If there is a mandated brand

colour, pass it to --brand and build everything else around it. Generating

a lovely system and then discovering it cannot accommodate the company red is

the most common way this work gets thrown away.

1. Let the text colour be derived, never chosen. The generator picks each

text colour from its background so that no combination can fail. If you

find yourself hand-picking a hex for body copy, you have left the system.

1. Check it against the three things nobody checks. Colour-blind collisions

(vision), the CMYK gamut if anything will be printed (print), and the

chart accents if it will ever be a deck (slides warns when two chart series

are indistinguishable).

1. Ship the audit with the tokens. A design system without a contrast report

is a claim. Paste the audit output into the handoff.

1. Say what was decided and why. Record the seed and the flags. `npx notugly

<seed> --vibe <vibe>` reproduces the whole thing exactly, which means the

design is a one-line command rather than a folder somebody has to keep.

Output Structure

---

Design System: [Product Name]

Seed: [seed] · Vibe: [vibe] · Brand locked: [hex or "no"]

Reproduce: npx notugly [seed] --vibe [vibe] [--brand #hex]

Palette

| Role | Colour | Hex | Name | On background | Verdict |

|---|---|---|---|---|---|

| Background | ▪ | #ffffff | Paper | — | — |

| Body text | ▪ | #020404 | Soot | 20.55:1 | AAA |

| Brand | ▪ | #004054 | Navy | 11.28:1 | AAA |

Every ratio above is computed, not estimated.

Type

Headings: [family] · Body: [family] · Scale: [ratio] ([name])

[The size ladder, in px.]

Spacing, radius, elevation

[The 4px grid, the radius set, and the five elevation levels.]

What was checked

• [ ] Every text pairing clears WCAG AA — weakest: X:1
• [ ] No two colours merge under any simulated colour vision deficiency
• [ ] Every colour is inside the CMYK gamut (if printing)
• [ ] All six chart accents are distinguishable (if there will be decks)

Files produced

[The list from export, with byte counts, and the runtime cost line.]

Open decisions for a human

[Anything the generator cannot decide: illustration style, photography

direction, motion beyond the presets, iconography.]

---

Quality Checks

• Did you run it, or describe it? Every hex in the output must come from the

tool. A plausible palette written by hand is exactly what this skill exists to

replace.

• Is the seed recorded? Without it the design is not reproducible and the

next person starts over.

• Did the brand colour survive? If the user gave one, --brand must be in

the reproduce command.

• Is the audit attached? Not "it meets AA" — the actual ratios.
• Are the open decisions listed? A generator cannot choose an illustration

style. Pretending otherwise is how these documents lose credibility.

Anti-Patterns

• Inventing hex values. The whole point is that these are computed.
• Claiming AA without a number. "Accessible" is a marketing word; "4.52:1"

is a fact.

• Generating a system when one already exists. If the product has a design

system, use [[design-system-audit]]. If it has a brand but no system, use

[[brand-guidelines]] to extract first, then pass the result in via --brand.

• Shipping the light theme only. Dark mode is where elevation and contrast

break, and it is cheaper to check now than to retrofit.

• Treating the vibe as the deliverable. The vibe is a starting point. The

deliverable is the token file and the audit.

Example Trigger Phrases

• "We need a design system by Thursday"
• "Pick a colour palette for [product]"
• "Build a starter theme around our brand red"
• "Generate design tokens for the new app"
• "Give me a Tailwind config that passes accessibility"
• "Make a deck theme that matches our product"