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.
From design-systemsnpx claudepluginhub aaronbassett/agent-foundry --plugin design-systemsThis skill uses the workspace's default tool permissions.
Provides UI/UX resources: 50+ styles, color palettes, font pairings, guidelines, charts for web/mobile across React, Next.js, Vue, Svelte, Tailwind, React Native, Flutter. Aids planning, building, reviewing interfaces.
Fetches up-to-date documentation from Context7 for libraries and frameworks like React, Next.js, Prisma. Use for setup questions, API references, and code examples.
Builds 3-5 year financial models for startups with cohort revenue projections, cost structures, cash flow, headcount plans, burn rate, runway, and scenario analysis.
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: