Live examples

Five designs the plugin actually shipped.

Every page below is a single self-contained HTML file generated through the design-mode workflow: starter copy → preview → AI-slop verifier → ship. Click a card to open the live page in a new tab.

Source files and the original prompts live in /examples in the repo.

5 designs · 5 distinct aesthetic directions · all verified errors: 0
Tempo 01 · landing

Time-tracker app launch landing. Dark theme, Geist, iPhone mockup with a live timer counting down to the plugin's own v1.0 release. Six tweakable values via in-page panel.

Tempo launch landing
landing dark iphone-frame tweaks-panel
Quartz 02 · pitch deck

Five-slide Series A pitch — Title, Problem, Solution, Traction, Ask. Fraunces serif italic, two background colors max. deck_stage.js handles scaling, keyboard nav, speaker notes, print-to-PDF.

Quartz pitch deck
deck 5-slides deck_stage fraunces
Aurora 03 · wireframes

Onboarding flow exploration for an offline-first journaling app. Four variations side-by-side — greyscale-only, dashed-border placeholders. Speed over polish, before any high-fi commit.

Aurora onboarding wireframes
wireframe 4-variations greyscale design_canvas
Crayon 04 · macOS app marketing

Native Mac notes app marketing site. Warm beige palette with one accent color, Inter Tight for body, Caveat handwritten for emotional accents. Pixel-precise macOS window with traffic lights + sidebar + content.

Crayon notes app marketing
marketing macos-window warm handwritten-accent
Foundry 05 · pricing

Three-tier SaaS pricing. Bold Space Grotesk + Space Mono pairing. Monochrome with one featured tier in inverted black. Feature comparison table below. No gradients, no checkmark icons — typography only.

Foundry pricing
pricing 3-tier monochrome space-grotesk
Make your own +

Install the plugin and run /design-mode with any brief. Each design above started with one or two sentences in plain language. Yours can too.

$ /plugin install github.com/OkminLee/claude-design-mode
plugin install open

What you're seeing

Each example is a single HTML file with no build step, no bundler, no framework runtime. Just CSS, vanilla JS where needed, and Google Fonts.

How they were made

One natural-language prompt per design → claude-design-mode workflow → headless preview → vision-only AI-slop audit → ship. No hand-tuning of the screenshots.

Try the live edits

Open Tempo and tweak values in the bottom-right panel. Live updates apply immediately. With tweak-host.js running, edits also persist to disk.