artifact-design

OUTPUT CONTRACT

Produces ONE .html file. A design system page is a Storybook-lite: each primitive renders live, paired with its source code, paired with notes on when to use it. All in one file.

File extension is .html. File name typically design-system.html or <component>-variants.html.

A living design system page or component-variants sheet. Renders the primitives, lists their variants, shows their source, and documents when each variant applies — all in one self-contained .html.

Read artifact-css/SKILL.md first for the OUTPUT CONTRACT, design tokens, and class vocabulary. This skill uses no jQuery — design pages are static.

When to reach for this skill

• User says "show me all the buttons", "every state of the card", "the full palette", "design system snapshot".
• User wants something a designer / engineer can scan to see all available primitives at once.
• User wants a single-file brand kit they can ship to a contractor.