A brand-customizable single-file HTML design system you can share with your team. Fill in seven brand decisions — get a self-contained file. Three ways to customize: a web form right here, a Cowork prompt, or a Claude Code one-liner.
A single HTML file with your brand baked in — color palette, type ramps, buttons, cards, badges, forms, navigation, and a composed page preview. Every brand decision lives in CSS variables in :root at the top. Edit the variables; the file is your design system.
Save the file. Open in any browser. That's it. No npm, no Tailwind config, no Storybook server.
One <link> to Google Fonts and everything else is inline. Drop on any static host or share the file directly.
Copy the CSS for any component into your real app. The single file is a working reference, not a runtime dependency.
Browser print → PDF, hand to designers / agencies / partners. Or push the URL to a static host.
This is the file you customize. It ships with placeholder brand colors and Fraunces + Inter typography — replace those with yours.
Preview served via raw.githack.com from the aigtm repo. The customization paths below produce the same file with your brand values plugged in.
All three paths produce the same file. Pick the one your team will actually use.
Fastest path. Fill in the form below, click Download, save the file. No Claude needed. Browser does the work client-side.
Jump to form ↓For attendees using Claude Cowork. Paste the prompt below — Cowork fetches the template, interviews you, and replies with the customized file.
Get Cowork prompt ↓One-liner for terminal users with the aigtm toolkit installed. claude invokes the design-system skill, interviews you, writes the file.
Everything's client-side. Nothing leaves your browser until you click Download.
Paste this into a new Cowork conversation. Fill in the bracketed fields. Cowork replies with the customized file as a code block — copy, save as .html, open in a browser.
I want you to build me a brand-customized, single-file HTML design system. You'll act as a senior brand designer who has stood up design systems for 30+ product and revenue teams. You build with primitives — color, type, spacing, radius, shadow. You ship one file every team can open in a browser, share, and fork.
CONTEXT — what you're building on top of:
The starting template is a self-contained HTML file with a sticky sidebar TOC; a color palette section (12 swatches: brand, neutrals, semantic); typography ramps (H1 → mono, 8 ramps); buttons (primary / secondary / ghost in 3 sizes); cards; badges; forms; navigation; and a composed page preview at the bottom. Every brand decision lives in CSS variables in :root at the top of the file. Fetch the template here:
https://raw.githubusercontent.com/GTMify/aigtm/main/skills/design-system/template.html
MY BRAND ANSWERS (fill these in):
- Brand name: [Your company name — replaces [Your Brand] throughout the file]
- Tagline: [One short sentence — goes under the brand name on the cover]
- Primary color: [Hex code — dominant CTA / accent on most surfaces]
- Accent color: [Hex code — secondary highlight that complements the primary]
- Heading font: [A Google Font name — e.g., Fraunces, Playfair Display, Space Grotesk, Inter, IBM Plex Sans]
- Body font: [A Google Font name — often the same family different weight, or a clean sans]
- Brand voice: [One line — "authoritative + warm", "playful + direct", "operator + technical"]
WHAT TO DO:
1. Read the template at the URL above. Do not change the HTML structure (sections, classes, layout). Brand variables only.
2. Derive the rest of the palette from my primary and accent:
- --color-primary-dark — darken primary ~15% (hover state)
- --color-primary-light — lighten primary ~25% (tint / chip background)
- --color-bg — neutral that pairs with the primary (default #FAFAF7)
- --color-ink — near-black (#1A1A1A)
- --color-ink-muted — #5C5C5C
- --color-neutral — #E5E2DC or a neutral matching the bg
- --color-dark — #0F1419 for dark sections
3. Apply these transformations:
- Search-and-replace [Your Brand] with my brand name
- Update <title> to "[My brand name] — Design System"
- Replace the cover tagline with mine
- Update CSS variables in :root with my colors
- Swap the Google Fonts <link> URL to load my chosen heading + body fonts
- Update --font-heading and --font-body
- Update the HOW TO USE comment block to credit my brand
4. Output the entire customized HTML file as a single fenced code block (language hint: html). Above the block, give me a cover paragraph (≤3 sentences) summarizing what you customized.
CONSTRAINTS:
- No dependencies beyond Google Fonts. Single file. No build step.
- Don't fabricate brand colors I didn't give you. Derive only.
- Final file under 800 lines.If you ran bootstrap.sh from the aigtm repo, the design-system skill is already installed at ~/.claude/skills/design-system/. Open your terminal and paste:
claude "use the design-system skill to build me a design system for my company"Claude will interview you for the seven brand decisions, then write a customized HTML file to your current directory. Or, if you'd rather skip the interview and edit the template by hand:
curl -o design-system.html \
https://raw.githubusercontent.com/GTMify/aigtm/main/skills/design-system/template.htmlNow edit the CSS variables in :root at the top of the file. Open in a browser to verify. Done.
This page is a thin wrapper around a skill that ships in the cohort toolkit. The skill, the template, and the Cowork prompt all live in version control.
The six-layer skill that interviews you and customizes the template. SKILL.md, COWORK-PROMPT.md, template.html, and README.md all in one folder.
View on GitHub →The unbranded source. 691 lines, brand variables in :root. Save, edit, share. Pinned in version control so it can't drift.
The Six-Layer Power Prompt Stack — the framework this skill (and every other in the toolkit) is built on.
/power-prompting →