From 5f9db79a4cce7506810cc8b85e198525d91372d1 Mon Sep 17 00:00:00 2001 From: "@scott-wueschinski-GTMify" Date: Wed, 27 May 2026 14:48:32 -0400 Subject: [PATCH] =?UTF-8?q?feat:=20add=20design-system=20skill=20=E2=80=94?= =?UTF-8?q?=20brand-customizable=20single-file=20template?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit A new skill in the toolkit. Interviews the user for 7 brand decisions (name, tagline, primary, accent, heading font, body font, voice), derives the rest of the palette, then outputs a customized single-file HTML design system the user can share with their team. Files: - SKILL.md — six-layer skill (Context, Role, Task, Constraints, Examples, Output Spec). Claude Code reads this. - COWORK-PROMPT.md — paste-ready Cowork version (template fetched via raw GitHub URL). - template.html — the working template (691 lines, brand variables in :root, no dependencies beyond Google Fonts). - README.md — what this is + three ways to use it (Claude Code, Cowork, web form at /design-system). Companion site page at /design-system (separate PR on pavilion-ai-gtm-school) provides an interactive web form that uses this template + a Going Deeper card on /power-prompting. Co-Authored-By: Claude Opus 4.7 --- skills/design-system/COWORK-PROMPT.md | 77 +++ skills/design-system/README.md | 86 ++++ skills/design-system/SKILL.md | 134 +++++ skills/design-system/template.html | 691 ++++++++++++++++++++++++++ 4 files changed, 988 insertions(+) create mode 100644 skills/design-system/COWORK-PROMPT.md create mode 100644 skills/design-system/README.md create mode 100644 skills/design-system/SKILL.md create mode 100644 skills/design-system/template.html diff --git a/skills/design-system/COWORK-PROMPT.md b/skills/design-system/COWORK-PROMPT.md new file mode 100644 index 0000000..6ba74c2 --- /dev/null +++ b/skills/design-system/COWORK-PROMPT.md @@ -0,0 +1,77 @@ +# Design System — Cowork Prompt + +Paste this whole block into Claude Cowork. Fill in the bracketed fields. Submit. Cowork will reply with a customized design-system HTML file you can save and open in any browser. + +```text +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", etc.] + +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 to the template: + - Search-and-replace [Your Brand] with my brand name (preserve my exact capitalization) + - Update to "[My brand name] — Design System" + - Replace the cover tagline with mine + - Update CSS variables in :root with my colors (derived ones from step 2 for what I didn't provide) + - Swap the Google Fonts <link> URL to load my chosen heading + body fonts + - Update --font-heading and --font-body in :root + - Update the HOW TO USE comment block at the top 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 short cover paragraph (≤3 sentences) summarizing what you customized — brand name, color thesis, type thesis. + +CONSTRAINTS: + +- No dependencies beyond Google Fonts. Single file. No build step. +- Don't fabricate brand colors I didn't give you. Derive only. +- Don't include a logo unless I provide a URL. +- Final file must stay under 800 lines. +- If my primary color fails WCAG AA contrast on white (text contrast < 4.5:1), note it once in the cover paragraph and proceed anyway. +- If my fonts aren't on Google Fonts, ask once for a Google Fonts alternative. + +OUTPUT SPEC: + +1. Cover paragraph (≤3 sentences) — what changed. +2. Single fenced `html` code block — the complete customized template, ready to save as `.html`. + +That's it. After you reply, I'll save the block as <my-brand-name>-design-system.html, open it in any browser, and that's my live design system. +``` + +## After Cowork replies + +1. Click into the `html` code block and copy. +2. Save as `<your-brand-name>-design-system.html` (lowercase, hyphens). +3. Open the file in any browser — that's your design system. +4. To revise: edit the CSS variables in `:root` at the top of the file. +5. To share: drop on any static host (Vercel, Netlify, GitHub Pages) or PDF-print directly from the browser. + +## How this works under the hood + +This is a skill from the [aigtm](https://github.com/GTMify/aigtm) toolkit. The template lives at [`skills/design-system/template.html`](template.html) in the repo. The full SKILL.md (Claude Code version) is in the same folder — it does the same thing but reads the template directly from your filesystem instead of fetching it via URL. + +Same Six-Layer Power Prompt Stack as every other skill in the repo. Layer 1 (Context) = your brand. Layer 6 (Output Spec) = a single fenced HTML block. The skill is the framework. diff --git a/skills/design-system/README.md b/skills/design-system/README.md new file mode 100644 index 0000000..e69b063 --- /dev/null +++ b/skills/design-system/README.md @@ -0,0 +1,86 @@ +# design-system + +Build a brand-customized, single-file HTML design system from a working template — no build step, no dependencies beyond Google Fonts, one file your whole team can open in a browser. + +## What this is + +A skill that interviews you for the seven brand decisions that actually matter (name, tagline, primary, accent, heading font, body font, voice), then produces a self-contained `design-system.html` file you can save, share, and fork. + +The template is at [`template.html`](template.html) in this folder. Open it in a browser to see what the output looks like before you customize. + +## Three ways to use this + +### 1. Claude Code + +```bash +claude "use the design-system skill to build me one for my company" +``` + +Claude reads `template.html` from `~/.claude/skills/design-system/` (installed when you ran the aigtm bootstrap), interviews you, and writes the customized file to your current directory. + +### 2. Cowork + +Paste the contents of [`COWORK-PROMPT.md`](COWORK-PROMPT.md) into Claude Cowork. Fill in the bracketed fields. Cowork fetches the template via its raw GitHub URL and replies with the customized file. + +### 3. Web form + +Visit [aigtmschool2026q2.vercel.app/design-system](https://aigtmschool2026q2.vercel.app/design-system) — the takeaway page has an interactive form. Fill it in, click Download, the customized file is generated client-side and downloaded immediately. No Claude needed. + +## What the template includes + +| Section | Purpose | +|---|---| +| Cover | Brand title + tagline | +| Color palette | 12 swatches (brand, neutrals, semantic) with hex values | +| Typography | 8 type ramps from H1 → mono | +| Buttons | Primary / secondary / ghost, three sizes | +| Cards | 3-up feature grid | +| Badges | 5 status colors | +| Forms | Input / select / textarea with focus states | +| Navigation | Marketing top-nav pattern | +| Page preview | Hero + stats bar + testimonial composed from primitives | + +## What customization actually changes + +Every brand decision lives in CSS variables in `:root` at the top of the file. The skill modifies exactly seven things: + +- `[Your Brand]` placeholder (replaced throughout) +- `<title>` tag +- Cover tagline +- `--color-primary` and `--color-accent` (you provide these) +- `--color-primary-dark` and `--color-primary-light` (derived from your primary) +- `--font-heading` and `--font-body` + the Google Fonts `<link>` URL +- The HOW TO USE comment block at the top + +Everything else — the HTML structure, the component definitions, the spacing scale, the radius and shadow tokens — stays as-is. That's the point. The structure is the contract; the variables are the brand. + +## Why a single-file design system + +A design system is a single source of truth for how your brand looks on screen. Most companies maintain one in Figma (slow to share), Notion (no live components), or a Storybook (engineering-only). A single HTML file: + +- Opens in any browser, on any OS, with no install +- PDF-prints to a sharable artifact in one click +- Lives in version control (treat it as code) +- Doubles as a working reference — copy the CSS for any component into your real app +- Is editable by anyone who knows enough HTML to find `:root` + +When you outgrow it, port the variables into Tailwind config, CSS custom properties on your real app, or a proper Figma library. The single-file version was just to get you moving in the first 24 hours. + +## How this fits the Six-Layer Power Prompt Stack + +This skill is itself a Power Prompt — every layer is visible in [`SKILL.md`](SKILL.md): + +| Layer | What it does here | +|---|---| +| 1. Context | Describes the template structure so Claude knows what it's building on | +| 2. Role | Senior brand designer with 30+ design systems shipped | +| 3. Task | One verb: build (interview → customize → output) | +| 4. Constraints | No structural HTML changes, no dependencies, under 800 lines, derive don't invent | +| 5. Examples | Two reference brand customizations (SEN-style + Pavilion-style) | +| 6. Output Spec | A cover paragraph + a single fenced `html` code block — that's it | + +If you want to extend the template (new sections, dark mode, motion specs), edit `SKILL.md`'s Constraints layer to allow it and `template.html` to add the structure. Same six-layer pattern. + +## License + +MIT. Same as the rest of the [aigtm](https://github.com/GTMify/aigtm) toolkit. Pass it along. diff --git a/skills/design-system/SKILL.md b/skills/design-system/SKILL.md new file mode 100644 index 0000000..5eb2ee6 --- /dev/null +++ b/skills/design-system/SKILL.md @@ -0,0 +1,134 @@ +--- +name: design-system +description: "Build a brand-customized single-file design system from a working HTML template. Interviews the user for brand name, palette, typography, and voice; produces a self-contained design-system.html the user can share with their team. Use when the user says 'build my design system', 'design system template', 'brand my design system', 'design tokens', 'design guide for my brand', or asks for help producing a single-source-of-truth design artifact." +--- + +# Design System Agent + +## Your Role + +You are 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 don't ship a Figma library; you ship one file every team can open in a browser, share, and fork. Your job is to interview the user just enough to fill the brand variables, then produce a customized HTML file ready to share. + +## Context (Layer 1) + +You ship a single-file HTML design system (`template.html` in this skill folder). It has: + +- A sticky sidebar TOC +- Color palette (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 +- Every brand decision lives in CSS variables in `:root` at the top of the file + +The user wants a copy of this file customized to their brand. Your job is to collect just enough information to fill in those variables, then produce the file. + +## Process + +### Step 1: Interview the user + +Ask one focused round of questions. Bundle them into a single message so the user can answer in one reply. Do NOT ask one at a time. + +Required: +1. **Brand name** — the literal company name that replaces `[Your Brand]` throughout the file +2. **Tagline** — one short sentence that goes under the brand name on the cover +3. **Primary brand color** — hex code (the dominant CTA / accent on most surfaces) +4. **Accent color** — hex code (the secondary highlight that complements the primary) +5. **Heading font** — name a Google Font (e.g., Fraunces, Playfair Display, Space Grotesk, Inter, IBM Plex Sans) +6. **Body font** — name a Google Font (often the same family different weight, or a clean sans) +7. **Brand voice** — one line ("authoritative + warm", "playful + direct", "operator + technical", etc.) + +Optional (only ask if the user prompts you to go deeper): +- Dark-section color (defaults to near-black if unspecified) +- Page background color (defaults to off-white if unspecified) +- Success / warning / error / info semantic colors (defaults to muted variants if unspecified) +- Logo URL (the file does not ship with a logo slot by default — only add one if user requests) + +### Step 2: Derive the palette + +From the primary and accent the user gave, derive: + +- `--color-primary-dark` — darken the primary by ~15% (hover state) +- `--color-primary-light` — lighten the primary by ~25% (tint / chip background) +- `--color-bg` — if not provided, use `#FAFAF7` or a neutral that pairs with the primary +- `--color-ink` — near-black (`#1A1A1A`) unless the brand has a strong opinion +- `--color-ink-muted` — `#5C5C5C` +- `--color-neutral` — `#E5E2DC` or a brand-neutral that matches `--color-bg` +- `--color-dark` — `#0F1419` for the dark sections + +### Step 3: Produce the customized file + +Read `template.html` from this skill folder. Apply these transformations: + +1. **Search-and-replace `[Your Brand]`** with the user's brand name (case-preserving — keep the user's exact capitalization) +2. **Update the `<title>` tag** to: `<title>[Brand Name] — Design System` +3. **Replace the cover tagline** with the user's tagline +4. **Update CSS variables in `:root`** with the user's color values (derived per Step 2 for the ones they didn't provide) +5. **Swap the Google Fonts `` URL** to load the user's chosen heading + body fonts +6. **Update `--font-heading` and `--font-body`** in `:root` to the user's font choices +7. **Update the HOW TO USE comment block at the top** to credit the user's brand as the source brand + +Leave the rest of the file structure intact. Do NOT rewrite the body markup unless the user asks — the structure is the contract. + +### Step 4: Output the file + +Output the entire customized HTML file as a single fenced code block in your reply, with the language hint `html`. Tell the user: + +1. Save the block as `-design-system.html` +2. Open in any browser — that's the live design system +3. To revise the brand, edit the CSS variables in `:root` +4. To share with their team, drop the file on any static host (Vercel, Netlify, GitHub Pages) or PDF-print directly from the browser + +## Constraints (Layer 4) + +- Do NOT change the HTML structure (sections, classes, layout). Brand variables only. +- Do NOT introduce dependencies (no React, no Tailwind, no build step). Single file, zero dependencies beyond Google Fonts. +- Do NOT fabricate brand colors the user didn't provide. If they only gave a primary, derive the palette mathematically from that primary; don't invent. +- Do NOT include a logo unless the user provides a URL. +- Final file must stay under 800 lines. +- All CSS variables must have a clear comment explaining what they control. Match the template's comment style. + +## Examples (Layer 5) + +Reference brand customization that this template ships with (cover SEN-inspired off-white + green): + +```css +:root { + --color-primary: #2C5F2D; + --color-primary-dark: #1F4520; + --color-accent: #C9A55C; + --color-bg: #FAFAF7; + --font-heading: 'Fraunces', Georgia, serif; + --font-body: 'Inter', system-ui, sans-serif; +} +``` + +Reference brand customization for a Pavilion-inspired deep-purple + pink palette: + +```css +:root { + --color-primary: #180A5C; + --color-primary-dark: #0D0339; + --color-primary-light: #EDEAFF; + --color-accent: #DD275B; + --color-bg: #FFFFFF; + --font-heading: 'Poppins', sans-serif; + --font-body: 'Poppins', sans-serif; +} +``` + +Both produce a fully functional design system from the same template — only the variables changed. + +## Output Spec (Layer 6) + +Your reply contains exactly two things: + +1. A short cover paragraph (≤3 sentences) summarizing what you customized — brand name, color thesis, type thesis. +2. A single fenced `html` code block containing the complete customized template, ready to save as `.html`. + +No additional sections, no walkthrough, no "here's what I changed" lists. The user opens the file in a browser; that's the validation. If the user wants revisions, they edit `:root` directly or ask you for a second pass. + +## Guardrails + +- **If the user provides brand colors that fail WCAG AA on white backgrounds** (text contrast < 4.5:1), note it once in the cover paragraph and proceed. Don't refuse to build. +- **If the user picks fonts that aren't on Google Fonts**, ask once for a Google Fonts alternative. If they insist, swap the `` for a comment explaining the user needs to self-host the font. +- **If the user wants major structural changes** (different sections, removed components, added components), tell them this skill is for brand customization only and that structural edits should be done by hand after they open the customized file. diff --git a/skills/design-system/template.html b/skills/design-system/template.html new file mode 100644 index 0000000..ff1a3d0 --- /dev/null +++ b/skills/design-system/template.html @@ -0,0 +1,691 @@ + + + + + + [Your Brand] — Design System Template + + + + + + + + + + + + + + + +
+ + +
+
Design System v1.0
+

[Your Brand]

+

A single source of truth for how the brand looks, sounds, and behaves across every surface.

+
+ + +
+ 01 — Foundation +

Color Palette

+

Use primary for CTAs and accents. Use neutrals for surfaces, dividers, and supporting text.

+ +
+
+
+
Primary
#2C5F2D
+
+
+
+
Primary Dark
#1F4520
+
+
+
+
Primary Light
#97BC62
+
+
+
+
Accent
#C9A55C
+
+
+
+
Dark
#0F1419
+
+
+
+
Ink
#1A1A1A
+
+
+
+
Ink Muted
#5C5C5C
+
+
+
+
Neutral
#E5E2DC
+
+
+
+
Background
#FAFAF7
+
+
+
+
Success
#4A7C59
+
+
+
+
Warning
#D4882A
+
+
+
+
Error
#C04A3C
+
+
+
+ + +
+ 02 — Foundation +

Typography

+

Heading face: Fraunces. Body face: Inter. Keep line lengths under 75 characters.

+ +
+
H1 / Display — Fraunces 64
+
The headline that opens the page.
+
+
+
H2 — Fraunces 48
+
A section-opening statement.
+
+
+
H3 — Fraunces 32
+
A supporting subsection title.
+
+
+
H4 — Fraunces 24
+
Card or component heading.
+
+
+
Body Large — Inter 18
+
Used for hero subheads and lead paragraphs. Keep tone confident and direct.
+
+
+
Body — Inter 16
+
The default text size. Most paragraphs, list items, card descriptions, and form labels live here.
+
+
+
Small — Inter 13
+
Captions, helper text, footnotes, metadata.
+
+
+
Mono — SF Mono 14
+
code_snippets, hex_values, api_keys
+
+
+ + +
+ 03 — Components +

Buttons

+

Primary for one action per view. Secondary for alternatives. Ghost for low-priority.

+ +
+ + + +
+
+ + + +
+
+ + +
+ 04 — Components +

Cards

+

Use for feature blocks, pricing tiers, content modules.

+ +
+
+
1
+

Discover

+

Surface insight before competitors do. Identify the buyers ready to move, not just the ones on a list.

+
+
+
2
+

Engage

+

Reach prospects with the right message at the moment intent peaks. No more generic outreach.

+
+
+
3
+

Convert

+

Move qualified opportunities through pipeline with systems that compound instead of breaking down.

+
+
+
+ + +
+ 05 — Components +

Badges & Status

+

Inline status indicators for tables, lists, and inline labels.

+ +
+ Active + Pending + Failed + In Review + Draft +
+
+ + +
+ 06 — Components +

Forms

+

Single column. Labels above inputs. Clear focus states.

+ +
+ + +
+
+ + +
We'll never share this with anyone.
+
+
+ + +
+
+ + +
+ +
+ + +
+ 07 — Patterns +

Navigation

+

Top nav for marketing sites. Keep to five items + CTA.

+ +
+ +
+ Product + Solutions + Pricing + Resources + About +
+ +
+
+ + +
+ 08 — Composition +

Page Preview

+

Components composed into a real homepage section.

+ +
+

The category-defining headline.

+

One sentence that explains who you serve, what you do, and the outcome they get. Nothing else.

+ +
+ +
+
+
$100M+
+
Revenue Impact
+
+
+
40%
+
Time Saved
+
+
+
500+
+
Companies Served
+
+
+
18mo
+
Avg. Payback
+
+
+ +
+
"We rebuilt our entire GTM around this system. Pipeline coverage tripled in two quarters."
+
— Customer Name, Title at Company
+
+
+ + +
+

Make it yours.

+

Edit the CSS variables, swap the fonts, replace the copy. The structure stays the same.

+

+ Design System Template · Built for Pavilion class by Scott Wueschinski · GTMify.io +

+
+ +
+ +