Help us improve
Share bugs, ideas, or general feedback.
From design-systems
Generate a self-contained HTML specimen page that renders the design system live. Triggers on: "generate specimen", "preview design system", "show design system", "specimen page", "visualize design system", or /design-systems:specimen. Produces a single HTML file with all tokens rendered as visual examples.
npx claudepluginhub aaronbassett/agent-foundry --plugin design-systemsHow this skill is triggered — by the user, by Claude, or both
Slash command
/design-systems:specimenThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Generate a self-contained HTML page that renders the design system live.
Creates or extracts DESIGN.md visual design systems from scratch, a URL, or a codebase — documenting tokens, components, and style rules for AI agents to reproduce.
Showcase design tokens — color palettes, type scales, spacing systems, radius scales, shadow systems, motion tokens — as HTML pages with copy-paste CSS variable exports, contrast ratio checks, and live sample type. Use whenever the user shows or asks about a palette, theme, design system, branding colors, design tokens, or wants to document any system of values that drives visual design. Markdown literally cannot display colors; reach for this skill any time color or spatial values are involved.
Extracts design system from websites, HTML files, or screenshots into DESIGN.md via Playwright automation, HTML inspection, and visual analysis for UI consistency.
Share bugs, ideas, or general feedback.
Generate a self-contained HTML page that renders the design system live.
Find DESIGN.md using this search order:
src/, packages/*//design-systems:create first."Extract everything needed to render the specimen:
Produce a single HTML file. Requirements:
<style> block. No external CSS files.<link> tags. These are the ONLY external dependencies.<header>, <main>, <section>, <article>, <button>, etc.aria-label on sections, proper heading hierarchy.Page structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Specimen: [Name]</title>
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=[fonts]&display=swap" rel="stylesheet">
<style>
:root {
/* ALL design tokens as CSS custom properties */
/* Copy every token from DESIGN.md */
}
/* Page layout */
/* Section styles */
/* Component demonstrations */
</style>
</head>
<body style="background: var(--surface); color: var(--on-surface); font-family: var(--font-body);">
<header>
<h1 style="font-family: var(--font-display);">Design System Specimen</h1>
<p>[Creative North Star name]: [First paragraph of north star description]</p>
</header>
<main>
<section id="palette" aria-label="Color Palette">
<h2>Colors</h2>
<!-- For each color token: a swatch div showing the color,
with the token name and hex value as labels -->
<!-- Group by: Surface tokens, Primary, Secondary, Tertiary,
Outline, On-Surface -->
<!-- Surface Hierarchy: nested boxes showing base → section →
component → interactive layering -->
</section>
<section id="typography" aria-label="Typography">
<h2>Typography</h2>
<!-- For each type scale level: render sample text at the
actual size, weight, and font family -->
<!-- Show: level name, token, font family, size, weight -->
<!-- Include a paragraph demonstrating body text at body-md -->
<!-- Include a data sample demonstrating mono/label text -->
</section>
<section id="spacing" aria-label="Spacing Scale">
<h2>Spacing</h2>
<!-- Visual ruler: horizontal bars at each spacing value -->
<!-- Label each bar with: token name, rem value, px value -->
</section>
<section id="elevation" aria-label="Elevation & Depth">
<h2>Elevation</h2>
<!-- Cards at different elevation levels using the shadow tokens -->
<!-- If no shadows: demonstrate tonal layering with nested surfaces -->
<!-- Show the surface hierarchy nesting in practice -->
</section>
<section id="components" aria-label="Components">
<h2>Components</h2>
<article>
<h3>Buttons</h3>
<!-- Primary, Secondary, Tertiary buttons -->
<!-- Each in default, hover (simulated with class), focus,
disabled states -->
</article>
<article>
<h3>Cards</h3>
<!-- A sample card with the system's surface, radius,
shadow, spacing treatment -->
<!-- If hover behavior is defined, include a
:hover demonstration -->
</article>
<article>
<h3>Input Fields</h3>
<!-- Default state input -->
<!-- Focused state input (simulated with class) -->
<!-- With label in the specified treatment -->
</article>
<article>
<h3>Specialized Components</h3>
<!-- Any specialized components from DESIGN.md Section 6 -->
<!-- Or "None defined for this system" -->
</article>
</section>
<section id="prohibitions" aria-label="What NOT To Do">
<h2>Prohibitions</h2>
<!-- For each Core Prohibition: show a visual example of
the VIOLATION with a red overlay/border/indicator -->
<!-- Label each: "PROHIBITED: [prohibition text]" -->
<!-- This makes violations viscerally recognizable -->
</section>
</main>
<script>
// Minimal JS for interactive demonstrations
// Toggle .hover class on buttons/cards for touch devices
// Toggle .focus class on inputs
document.querySelectorAll('[data-interactive]').forEach(el => {
el.addEventListener('click', () => {
el.classList.toggle('demo-active');
});
});
</script>
</body>
</html>
Default (disposable preview):
/tmp/design-specimen-[name-slug].htmlopen /tmp/design-specimen-[name-slug].html (macOS)If user requests save:
Report what was generated: