aemerson-commits Design Showcase
Produces a self-contained HTML page with multiple design variants rendered side-by-side. User reviews, picks a direction, then a follow-up implementation pass converts the chosen variant into real code.
When to use
- Component or view redesign with unclear direction
- Exploring a new design philosophy or pulling inspiration from a reference site
- "Show me options before we commit" requests
- Design reviews where stakeholders need a visual to react to
When NOT to use
- Minor CSS tweaks (color swap, spacing adjustment) — just make the change
- Single-option tasks where the direction is already decided
- Backend-only work
- Feature flags / A-B testing in production code
The Workflow
Step 1 — Read the current component
Read the component file and its CSS. Capture the exact data shape it renders. Note: what information is shown, how it is grouped, what actions exist.
Step 2 — Define 3-7 design philosophies
Pick from philosophies.md or invent new ones for the task. Each variant needs a distinct visual identity — if two variants look similar, merge them or push them further apart. Always include a "Current" baseline (Variant 00) so the user has a reference anchor.
See philosophies.md (in this directory) for the full catalog.
Step 3 — Invent realistic fake data
Write one consistent fake dataset that all variants use. For data-heavy components: use real-sounding identifiers, descriptions, quantities, and dates. Consistent data is critical — variants must differ only in design, not in content.
Step 4 — Dispatch one Opus agent
Agent({
model: "opus",
isolation: "none", // read-only, no code changes
prompt: `
Build a self-contained HTML design showcase at c:/tmp/<slug>-showcase/index.html.
Component: <name>
Fake data: <dataset>
Variants to include:
00. Current — faithful recreation of the existing design
01. <Philosophy 1 name> — <one-line description>
02. <Philosophy 2 name> — <one-line description>
...
[Paste philosophy specs from philosophies.md]
Requirements:
- Single HTML file, no build step, no external JS frameworks
- Google Fonts via CDN is OK
- Top nav with anchor links to each variant (#variant-00 through #variant-N)
- Dark-mode toggle in the nav bar (CSS class toggle, no JS frameworks)
- Each variant in its own full-width section with a header card showing the variant name and 2-3 bullet design rationale
- Responsive down to iPad (768px)
- Include a "Conjunction" blend variant as the last entry
`
})
Use model: "opus" — this is creative/design work and the quality difference is significant.
Step 5 — Serve and present
cd c:/tmp/<slug>-showcase && npx serve . -p 4321
Direct the user to http://localhost:4321. Ask them to review and call out which variant number they prefer, or which elements they want to combine.
Output convention
c:/tmp/<component-name>-showcase/
index.html # the showcase (self-contained)
Slug convention: info-modal, kpi-card, data-table, entry-form.
HTML scaffold guardrails
- No React, Vue, or Angular — vanilla HTML + CSS + minimal JS
- Google Fonts via CDN is allowed (
<link rel="preconnect">+ font link) - Must include a "Current" control baseline so users have an anchor
- Variants must be visually distinct — if two look the same, cut one or push them apart
- Dark-mode toggle at top (toggle
data-theme="dark"on<html>) - Responsive to iPad (768px minimum)
- Each section includes a rationale card (what principles guided this variant)
- Use
<template>forindex.htmlstructure — seetemplate.htmlin this directory
Handoff after pick
After the user picks a variant:
- Do NOT continue in the showcase agent — open a new task
- Read the picked variant's HTML section to extract the design decisions
- Implement those decisions in the real component (React + your project's CSS conventions)
- Follow
/frontend-designfor token usage and component patterns - Run
npm run buildto verify before deploying
The showcase is a design artifact, not production code. Treat it as a spec, not a source to copy.
Example prompt template
Redesign the <ComponentName> component. The current design is the baseline.
Produce a showcase at c:/tmp/<slug>-showcase/index.html with these variants:
00. Current — faithful recreation (baseline reference)
01. Impeccable — anti-pattern discipline, sharp corners, IBM Plex Sans
02. UI/UX Pro Max — operator-first, traffic-light urgency, 44pt touch targets
03. Taste — serif heading, monospace numbers, one accent color
04. Linear — zero-chrome, keyboard shortcuts, tight 4px grid
05. 21st.dev — same layout, CSS-only micro-interactions
06. Conjunction — best-of-all with rationale card
Fake data: <paste dataset here>
Philosophy specs: <paste from philosophies.md>
Requirements: single HTML file, Google Fonts CDN OK, dark-mode toggle, anchor nav, iPad-responsive, rationale card per variant.
Related skills
/frontend-design— design tokens and component patterns (use after picking a variant)/webapp-testing— Playwright visual verification after implementing the chosen variant/review-impl— adversarial review before merging the implemented variant