",
+ "css": ".ds-hero-h1 { font-family: 'Fraunces', Georgia, serif; font-weight: 400; font-size: clamp(48px, 7vw, 88px); line-height: 1.05; letter-spacing: -0.02em; color: #1f1a15; max-width: 720px; margin: 0; } .ds-hero-h1 em { font-style: italic; color: #a8431f; }"
+ },
+ {
+ "name": "Logo Strip Wordmark",
+ "kind": "custom",
+ "description": "The italic Fraunces wordmarks in the logo row — the exception to the One-Italic Rule.",
+ "html": "Northwind",
+ "css": ".ds-logo-mark { font-family: 'Fraunces', Georgia, serif; font-style: italic; font-size: 22px; color: #5b4f44; }"
+ }
+ ],
+ "narrative": {
+ "northStar": "Editorial confidence in warm light.",
+ "overview": "The system reads as a printed magazine spread, transposed to a screen. Cream paper as the page surface, ink-dark headlines in Fraunces, restrained pacing carried by whitespace. Density is mid. The accent (a burnt orange warming toward the lower stop of the cream-to-peach hero gradient) appears sparingly: on the eyebrow chip, the logo dot, and the italic emphasis inside the hero headline. Nowhere else.\n\nWhat the system explicitly rejects, per PRODUCT.md anti-references: glassmorphism, dark mode with neon glow, gradient text, side-stripe accents on cards, and the broader \"Fraunces-cream-peach SaaS template\" that this very page exemplifies. The DESIGN.md documents the current visual reality so the live-mode design panel can render it accurately. The brand intent is to diffuse away from it.",
+ "keyCharacteristics": [
+ "Warm-paper palette anchored on cream (#faf6ef)",
+ "Display in Fraunces, body in Inter",
+ "Editorial-leaning layout vocabulary",
+ "Rounded throughout (14px, 20px, 999px)",
+ "Flat: no shadows, depth via tonal layering"
+ ],
+ "rules": [
+ {
+ "name": "The Cream-Family Rule",
+ "body": "Every neutral surface tints toward the brand hue. No pure white anywhere, no pure black, no untinted gray. The eye should never read this page as 'default browser.'",
+ "section": "colors"
+ },
+ {
+ "name": "The 10% Accent Rule",
+ "body": "The burnt orange covers no more than 10% of any rendered surface. Its rarity is the point.",
+ "section": "colors"
+ },
+ {
+ "name": "The One-Italic Rule",
+ "body": "Italic appears exactly once per page: on a single emphasized word inside the hero headline. Nowhere else. The logo strip's italic Fraunces wordmarks are the exception that proves it (wordmark, not running italic).",
+ "section": "typography"
+ },
+ {
+ "name": "The No-Gradient-Text Rule",
+ "body": "Type is solid color, always. The hero's cream-to-peach gradient is a section background, never a typographic effect.",
+ "section": "typography"
+ },
+ {
+ "name": "The Flat-By-Default Rule",
+ "body": "Surfaces are flat at rest. Hover lift uses transform: translateY(-1px), never a shadow. Glassmorphism, neon glow, and elevation halos are absent by design.",
+ "section": "elevation"
+ }
+ ],
+ "dos": [
+ "Do keep the burnt-orange accent under 10% of any visible surface; it's a typographic accent and a logo dot, not a button.",
+ "Do use Fraunces for display and Inter for body; respect the One-Italic Rule.",
+ "Do carry depth via tonal layering and hairline borders, not shadows.",
+ "Do tint every neutral toward the cream hue. Reject pure white and pure gray.",
+ "Do keep buttons fully rounded (999px) and cards moderately rounded (20px); the contrast is intentional."
+ ],
+ "donts": [
+ "Don't add box-shadows to surfaces. The system is flat by default; hover lift uses transform, not shadow.",
+ "Don't introduce gradient text or background-clip: text. The hero gradient is a section background, never a typographic effect.",
+ "Don't add glassmorphism, neon glow, dark mode by default, or side-stripe colored borders. All banned in PRODUCT.md anti-references.",
+ "Don't introduce a fourth color outside the cream / ink / orange family without an explicit reason recorded in PRODUCT.md.",
+ "Don't drift into the broader 'Fraunces-cream-peach SaaS template' the page already exemplifies. The PRODUCT.md anti-references this aesthetic; departure-mode variants should diffuse away from it."
+ ]
+ }
+}
diff --git a/demos/landing-demo/DESIGN.md b/demos/landing-demo/DESIGN.md
new file mode 100644
index 000000000..ca5ff39e7
--- /dev/null
+++ b/demos/landing-demo/DESIGN.md
@@ -0,0 +1,207 @@
+---
+name: Lumina
+description: Editorial-warm landing page for an AI-native workflow tool.
+colors:
+ cream: "#faf6ef"
+ cream-warm: "#f4ebdc"
+ peach: "#f6dfcb"
+ line: "#e6dccb"
+ ink: "#1f1a15"
+ soft: "#5b4f44"
+ accent: "#c8552b"
+ accent-deep: "#a8431f"
+typography:
+ display:
+ fontFamily: "Fraunces, Georgia, serif"
+ fontSize: "clamp(3rem, 7vw, 5.5rem)"
+ fontWeight: 400
+ lineHeight: 1.05
+ letterSpacing: "-0.02em"
+ headline:
+ fontFamily: "Fraunces, Georgia, serif"
+ fontSize: "clamp(2.25rem, 4.5vw, 3.25rem)"
+ fontWeight: 400
+ lineHeight: 1.1
+ letterSpacing: "-0.02em"
+ title:
+ fontFamily: "Fraunces, Georgia, serif"
+ fontSize: "1.375rem"
+ fontWeight: 500
+ lineHeight: 1.3
+ letterSpacing: "-0.01em"
+ body:
+ fontFamily: "Inter, system-ui, sans-serif"
+ fontSize: "1rem"
+ fontWeight: 400
+ lineHeight: 1.55
+ letterSpacing: "normal"
+ lede:
+ fontFamily: "Inter, system-ui, sans-serif"
+ fontSize: "1.25rem"
+ fontWeight: 400
+ lineHeight: 1.55
+ letterSpacing: "normal"
+ label:
+ fontFamily: "Inter, system-ui, sans-serif"
+ fontSize: "0.75rem"
+ fontWeight: 600
+ lineHeight: 1.4
+ letterSpacing: "0.16em"
+rounded:
+ card: "20px"
+ icon: "14px"
+ pill: "999px"
+spacing:
+ xs: "8px"
+ sm: "16px"
+ md: "24px"
+ lg: "32px"
+ xl: "56px"
+ 2xl: "80px"
+ 3xl: "120px"
+components:
+ button-primary:
+ backgroundColor: "{colors.ink}"
+ textColor: "{colors.cream}"
+ rounded: "{rounded.pill}"
+ padding: "14px 28px"
+ button-ghost:
+ backgroundColor: "transparent"
+ textColor: "{colors.ink}"
+ rounded: "{rounded.pill}"
+ padding: "14px 28px"
+ nav-pill:
+ backgroundColor: "{colors.ink}"
+ textColor: "{colors.cream}"
+ rounded: "{rounded.pill}"
+ padding: "9px 18px"
+ card:
+ backgroundColor: "{colors.cream-warm}"
+ textColor: "{colors.soft}"
+ rounded: "{rounded.card}"
+ padding: "40px 32px"
+ icon-tile:
+ backgroundColor: "{colors.cream}"
+ rounded: "{rounded.icon}"
+ size: "56px"
+---
+
+# Design System: Lumina
+
+## 1. Overview
+
+**Creative North Star: "Editorial confidence in warm light."**
+
+The system reads as a printed magazine spread, transposed to a screen. Cream paper as the page surface, ink-dark headlines in Fraunces, restrained pacing carried by whitespace. Density is mid. The accent (a burnt orange warming toward the lower stop of the cream-to-peach hero gradient) appears sparingly: on the eyebrow chip, the logo dot, and the italic emphasis inside the hero headline. Nowhere else.
+
+What the system explicitly rejects, per PRODUCT.md anti-references: glassmorphism, dark mode with neon glow, gradient text, side-stripe accents on cards, and the broader "Fraunces-cream-peach SaaS template" that this very page exemplifies. The DESIGN.md documents the current visual reality so the live-mode design panel can render it accurately. The brand intent is to diffuse away from it.
+
+**Key Characteristics:**
+- Warm-paper palette anchored on cream (#faf6ef)
+- Display in Fraunces, body in Inter
+- Editorial-leaning layout vocabulary
+- Rounded throughout (14px, 20px, 999px)
+- Flat: no shadows, depth via tonal layering
+
+## 2. Colors
+
+A single warm-cream family carrying both surface and neutral text, with one muted-orange accent that earns its rare appearances.
+
+### Primary
+- **Burnt Orange Accent** (#c8552b): the eyebrow chip's color, the logo dot, the italic emphasis inside the hero headline. Decorative; never a surface, never a button background.
+- **Accent Deep** (#a8431f): the darker variant for hover and emphasis states; same hue, a step deeper.
+
+### Neutral
+- **Cream** (#faf6ef): the page surface, the nav background (translucent), and the bottom of the hero gradient.
+- **Cream Warm** (#f4ebdc): the feature card surface; one shade darker than cream, anchors the card group as a contained set.
+- **Peach** (#f6dfcb): the warmer stop of the hero gradient. Atmospheric, not structural.
+- **Ink** (#1f1a15): primary body text; primary-button background; the dark CTA section's surface.
+- **Soft** (#5b4f44): secondary text; captions; footer copy; nav link rest state.
+- **Line** (#e6dccb): hairline borders on cards, the nav, the footer, and the icon tiles.
+
+### Named Rules
+**The Cream-Family Rule.** Every neutral surface tints toward the brand hue. No pure white anywhere, no pure black, no untinted gray. The eye should never read this page as "default browser."
+
+**The 10% Accent Rule.** The burnt orange covers no more than 10% of any rendered surface. Its rarity is the point.
+
+## 3. Typography
+
+**Display Font:** Fraunces (Georgia fallback, serif)
+**Body Font:** Inter (system-ui fallback, sans-serif)
+
+**Character:** A magazine-cover serif for the headlines and brand mark, paired with a refined sans for everything else. The italic Fraunces inside `` is the system's only italic, used exactly once per page on a single word inside the hero headline.
+
+### Hierarchy
+- **Display** (Fraunces, clamp(48px, 7vw, 88px), weight 400, line-height 1.05, letter-spacing -0.02em): hero headlines only.
+- **Headline** (Fraunces, clamp(36px, 4.5vw, 52px), weight 400, line-height 1.1): section headlines.
+- **Title** (Fraunces, 22px, weight 500, letter-spacing -0.01em): card headings.
+- **Lede** (Inter, 20px, weight 400, line-height 1.55): the supporting paragraph below a hero headline.
+- **Body** (Inter, 15–18px, weight 400, line-height 1.55): default paragraph copy. Cap line length at 65–75ch.
+- **Label** (Inter, 12px, weight 600, letter-spacing 0.16em, uppercase): the eyebrow chip and any small uppercase labels.
+
+### Named Rules
+**The One-Italic Rule.** Italic appears exactly once per page: on a single emphasized word inside the hero headline. Nowhere else. The logo strip's italic Fraunces wordmarks are the exception that proves it (wordmark, not running italic).
+
+**The No-Gradient-Text Rule.** Type is solid color, always. The hero's cream-to-peach gradient is a section background, never a typographic effect.
+
+## 4. Elevation
+
+Flat. No shadows on cards, buttons, surfaces, or any rendered element. Depth is conveyed by three things and only those:
+
+- **Tonal layering**: cream (page) sits below cream-warm (cards), which sit below ink (the dark CTA section).
+- **Hairline borders**: 1px line color (`--line`) on every contained surface.
+- **Sticky-nav backdrop blur**: the only blur in the system, marking the nav as living above content.
+
+### Named Rules
+**The Flat-By-Default Rule.** Surfaces are flat at rest. Hover lift uses `transform: translateY(-1px)`, never a shadow. Glassmorphism, neon glow, and elevation halos are absent by design.
+
+## 5. Components
+
+### Buttons
+- **Shape:** fully rounded (border-radius: 999px). The full-size variant is 14px 28px padding; the smaller nav pill is 9px 18px.
+- **Primary** (`.btn-primary`, `.pill`): background ink, text cream. The primary CTA on every section.
+- **Ghost** (`.btn-ghost`): transparent background, ink 1px border, ink text. Secondary CTA, always paired with primary.
+- **Hover:** translateY(-1px), 150ms ease.
+- **Inverted Primary** (`.cta-section .btn-primary`): background cream, text ink. Used because the dark CTA section reverses the surface contrast.
+
+### Cards (Feature Tiles)
+- **Corner Style:** 20px rounded (less than pill, more than container).
+- **Background:** cream-warm (`--cream-warm`), one shade darker than the surrounding cream surface.
+- **Border:** 1px line color.
+- **Internal Padding:** 40px 32px (generous; cards breathe).
+- **Shadow:** none, see Elevation.
+
+### Icon Tile (inside Cards)
+- **Size:** 56×56px.
+- **Background:** cream (`--cream`).
+- **Border:** 1px line color.
+- **Corner Style:** 14px rounded.
+- **Position:** centered above the card heading, 24px bottom margin.
+
+### Eyebrow Chip
+- **Style:** uppercase Inter, 12px, weight 600, letter-spacing 0.16em, color accent-deep (#a8431f). No background or border — pure typographic label.
+- **Position:** standalone above the hero `
`, with 32px bottom margin.
+
+### Navigation
+- **Background:** translucent cream (`rgba(250, 246, 239, 0.85)`) with `backdrop-filter: blur(10px)`. Sticky to the top.
+- **Border:** 1px line color at the bottom edge.
+- **Links:** 14px Inter, weight 400, color soft (rest), color ink (hover). The trailing pill CTA uses the nav-pill component.
+
+### Logo Strip
+- **Items:** Fraunces italic, 22px, color soft. Six wordmarks, justified across a single row, separated by hairline borders top and bottom.
+
+## 6. Do's and Don'ts
+
+### Do:
+- **Do** keep the burnt-orange accent under 10% of any visible surface; it's a typographic accent and a logo dot, not a button.
+- **Do** use Fraunces for display and Inter for body; respect the One-Italic Rule.
+- **Do** carry depth via tonal layering and hairline borders, not shadows.
+- **Do** tint every neutral toward the cream hue. Reject pure white and pure gray.
+- **Do** keep buttons fully rounded (999px) and cards moderately rounded (20px); the contrast is intentional.
+
+### Don't:
+- **Don't** add box-shadows to surfaces. The system is flat by default; hover lift uses transform, not shadow.
+- **Don't** introduce gradient text or `background-clip: text`. The hero gradient is a section background, never a typographic effect.
+- **Don't** add glassmorphism, neon glow, dark mode by default, or side-stripe colored borders — all banned in PRODUCT.md anti-references.
+- **Don't** introduce a fourth color outside the cream / ink / orange family without an explicit reason recorded in PRODUCT.md.
+- **Don't** drift into the broader "Fraunces-cream-peach SaaS template" the page already exemplifies. The PRODUCT.md anti-references this aesthetic; departure-mode variants should diffuse away from it.
diff --git a/demos/landing-demo/PRODUCT.md b/demos/landing-demo/PRODUCT.md
new file mode 100644
index 000000000..ca8b945bc
--- /dev/null
+++ b/demos/landing-demo/PRODUCT.md
@@ -0,0 +1,39 @@
+# Lumina
+
+## Register
+
+brand
+
+## Users
+
+Senior product builders at Series A through C software companies: founding engineers, design-leaning PMs, and tech-fluent founders. They evaluate tools fast, distrust marketing-speak, and have spent the last twelve months watching every SaaS landing page converge on the same warm-cream-and-Fraunces template. They will close the tab on anything that pattern-matches to "AI startup default" within two seconds.
+
+## Product Purpose
+
+Lumina is an AI-native workflow tool for product teams. The marketing site exists to make taste-aware buyers stop, read, and remember. Success is not "high conversion." Success is "shared in a group chat with the message: have you seen this yet."
+
+## Brand Personality
+
+Three-word personality: **specific, earned, unmistakable**. The voice is closer to a well-written engineering blog post than a pitch deck. Claims are concrete and verifiable. Adjectives are rationed. The brand has a point of view and trusts the reader's intelligence.
+
+## Anti-references
+
+Explicitly avoid the patterns that have become the new monoculture:
+
+- **The Fraunces-cream-peach SaaS template.** Warm cream backgrounds, large italic Fraunces headlines, soft burnt-orange accent, gentle peach gradients. This was novel in early 2025 and is now everywhere. The current `index.html` is itself an example. Diffuse away from it.
+- **Three-icon feature tile rows.** Icon-above-h3-above-paragraph, repeated three or four times across equal-width cards, generic single-word feature names ("Lightning Fast", "Enterprise Secure", "Built to Scale"). The flattest possible expression of "we have features."
+- **Hero superlatives.** "All-in-one platform", "in record time", "powered by AI, designed for humans", "trusted by 10,000+ teams worldwide". B2B SaaS mad-libs.
+- **Soft-everything aesthetic.** Rounded corners on every element, soft shadows on every surface, polite center-aligned spacing, no edges, no opinions.
+- **Decorative gradient text and glass-blur backdrops.** Both already banned by the shared design laws; restated here because they're still the first thing models reach for on brand surfaces.
+
+## Design Principles
+
+1. **Distinctiveness over polish.** Polish is table stakes; standing out from the SaaS-default sea is the job. If the page could plausibly be running on twenty other companies' domains, it has failed regardless of how clean it looks.
+2. **Specific over generic.** Real numbers, real product screenshots, real customer names, real claims with evidence. No abstract feature taxonomies.
+3. **Earned attention, not decorative attention.** Type weight, scale, and rhythm carry hierarchy. Animation, gradients, and effects are reserved for moments that genuinely warrant them.
+4. **Commitment over compromise.** Confidence shows up as restraint OR as full commitment, never as a hedged middle. A timid centered-stack with polite shadows is the failure mode this brand exists to avoid.
+5. **Confidence without volume.** The strongest brands speak quietly when quiet is the right register, and loudly when loud is. Insecurity is what splits the difference.
+
+## Accessibility & Inclusion
+
+WCAG 2.2 AA minimum across body text, headings, and interactive controls. Honor `prefers-reduced-motion` for any animation. Color is never the sole carrier of meaning. Tap targets ≥44px on mobile. Tested with screen readers; reading order matches visual order.
diff --git a/demos/landing-demo/classic/index.html b/demos/landing-demo/classic/index.html
new file mode 100644
index 000000000..b17a18b43
--- /dev/null
+++ b/demos/landing-demo/classic/index.html
@@ -0,0 +1,350 @@
+
+
+
+
+
+Lumina — The future of intelligent workflows
+
+
+
+
+
+
+
+
+
+
+
🚀 Powered by AI
+
Build faster with intelligent workflows
+
The all-in-one platform that helps modern teams ship better products in record time. Powered by AI, designed for humans.
A retro-futurist AI design conference became a real static site through the full Impeccable loop: visual reference, brand direction, implementation, asset regeneration, responsive fixes, animation polish, and browser verification.
-
-
-
-
-
-
-
- 01 · Visualize
-
- Hi-fi north star. A concrete composition to build toward, not a paragraph to interpret.
-
-
- 02 · Shape
-
- Brand toolkit. Identity, palette, type, image language, and motion direction before code.
-
-
- 03 · Ship
-
-
-
- Implemented page. Semantic HTML, responsive layout, regenerated assets, real states, and polish.
-
-
-
-
-
- What changed
-
The mock did not become a screenshot. It became a system.
-
-
-
-
Composition matching
-
The build preserved the mock's asymmetric rhythm: full-bleed hero artwork, dark agenda block, orange manifesto band, drifting installation grid, and structured ticket field.
-
-
-
Asset regeneration
-
Image-native pieces stayed image-native. The manifesto city, speaker portraits, pine overlay, and supporting illustrations were regenerated or isolated where raster detail mattered.
-
-
-
Browser iteration
-
The page was tested in the browser after each pass. Overlaps, bad crops, active nav state, speaker carousel behavior, mobile heights, and large-viewport balance were fixed visually.
-
-
-
-
-
-
-
- North-star mock The reference image preserved the intended rhythm: full-bleed hero, dark agenda, speaker carousel, installation field, manifesto, and tickets.
-
-
-
-
-
- Live build The shipped page keeps the same visual ambition while becoming responsive markup, real links, carousel controls, hover states, and browser-tested layout.
-
-
-
-
-
- Reproduce the loop
-
Use craft when the output has to feel designed.
-
/impeccable craft is the right command when a feature needs shaping, visual direction, implementation, and browser iteration in one run.
-
-
/impeccable craft retro-futurist AI design conference website
Pick any element in the browser. Drop a comment or a stroke. Three production-quality variants swap in via your framework's HMR. Accept the one you want and it writes back to source.
-
Why alpha: Live Mode works end-to-end and is ready to try, but it still needs more testing against real-world repos and framework configs. Expect rough edges on uncommon setups, and please report what breaks.
-
- $
- /impeccable live
-
-
-
-
-
-
-
-
-
-
-
-
- localhost:3000
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Newsletter
-
Subscribe for updates
-
Monthly-ish design notes.
-
-
-
-
-
- No. 04
-
Letters, occasionally.
-
A postcard from the editor, about once a month. No tracking pixels, no "just checking in."
-
-
-
-
-
-
☞
- Dispatch
-
Design notes, every other Thursday.
-
-
-
-
-
-
☆☆☆
- Field Notes
-
A monthly letter, for people who still read email for pleasure.
-
-
-
-
-
-
-
-
-
-
more playful
-
-
-
-
-
-
-
-
-
-
-
-
-
- Generating variants…
-
-
-
- 1 / 3
-
-
-
-
-
-
-
- Variant 3 written to source
-
-
-
-
-
-
-
-
-
- /
-
-
-
-
-
-
-
-
-
-
Click the frame or scroll it into view to start the loop. Respects prefers-reduced-motion.
-
-
-
-
What happens, in three moves
-
-
- 01 · Pick
-
Point at what bugs you
-
Click any element on your running dev server. Add a comment pin where the issue lives. Draw a stroke through the bit you want to change. Or just type "more playful".
-
-
-
- Newsletter card
- 1
-
-
-
-
-
- 02 · Generate
-
Three genuinely different takes
-
Variants anchor to different archetypes, not three riffs on color. Each one explores a different primary axis: hierarchy, typography, density, layout, or palette strategy.
-
-
-
No.04
-
Dispatch
-
Field
-
-
-
-
- 03 · Accept
-
Lands in real source
-
The accepted variant replaces the picked element in your source file. CSS consolidates into your real stylesheet, not inline. Discard all three and the original stays.
Impeccable is an open-source collection of agent skills (text files) that run locally in your AI coding tool. The skills themselves collect no data, make no network requests, and have no analytics.
-
-
Website analytics
-
The Impeccable website (impeccable.style) uses Google Analytics to understand traffic patterns (page views, referrers, country). No personal information is collected beyond what Google Analytics provides by default. No cookies are used for advertising.
-
-
Downloads
-
When you download a skill bundle from the website, we log the download event (which bundle, timestamp) for usage statistics. No personal information is attached to these logs.
-
-
Claude Code Plugin
-
When installed as a Claude Code plugin, Impeccable runs entirely within your local Claude Code session. No data is sent to Impeccable's servers. Anthropic's own privacy policy governs the Claude Code application itself.
-
-
Chrome Extension
-
The Impeccable Chrome DevTools extension runs entirely in your browser. All anti-pattern detection happens locally on the page you are inspecting. No page content, URLs, or detection results are ever sent to any external server.
-
The extension stores your rule preferences (which detections are enabled or disabled) using Chrome's built-in sync storage (chrome.storage.sync), which syncs settings across your Chrome instances via your Google account. No other data is stored or transmitted.
-
The extension requests the following permissions:
-
-
activeTab / scripting - to inject the detector script into the page you are inspecting
-
storage - to save your rule preferences
-
webNavigation - to re-scan automatically when you navigate to a new page
-
Host permissions (all URLs) - so the detector can run on any website you choose to inspect
-
-
-
GitHub
-
The source code is hosted on GitHub. Interactions with the repository (issues, pull requests, stars) are governed by GitHub's privacy policy.
-
-
Contact
-
Questions about this policy? Open an issue on GitHub or reach out to @pbakaus.
-
-
-
diff --git a/scripts/build-sub-pages.js b/scripts/build-sub-pages.js
deleted file mode 100644
index 671792434..000000000
--- a/scripts/build-sub-pages.js
+++ /dev/null
@@ -1,1532 +0,0 @@
-/**
- * Generate static HTML files for /docs, /slop, /tutorials, /live-mode,
- * /designing.
- *
- * Called from both scripts/build.js (before buildStaticSite) and
- * server/index.js (at module load), so dev and prod share the same
- * code path and output shape.
- *
- * Output lives under public/docs/, public/slop/, public/tutorials/, all
- * gitignored. Bun's HTML loader picks them up the same way it picks up
- * the hand-authored pages.
- */
-
-import fs from 'node:fs';
-import path from 'node:path';
-import {
- buildSubPageData,
- CATEGORY_ORDER,
- CATEGORY_LABELS,
- CATEGORY_DESCRIPTIONS,
- COMMAND_RELATIONSHIPS,
- LAYER_LABELS,
- LAYER_DESCRIPTIONS,
- GALLERY_ITEMS,
-} from './lib/sub-pages-data.js';
-import { renderMarkdown, slugify } from './lib/render-markdown.js';
-import { renderPage } from './lib/render-page.js';
-
-function escapeHtml(str) {
- return String(str || '')
- .replace(/&/g, '&')
- .replace(//g, '>')
- .replace(/"/g, '"')
- .replace(/'/g, ''');
-}
-
-/**
- * Render the before/after split-compare demo block for a skill.
- * Returns '' when the skill has no demo data (e.g. /shape).
- */
-function renderSkillDemo(skill) {
- if (!skill.demo) return '';
- const { before, after, caption } = skill.demo;
- return `
-
-
-
- ${editorialHtml ? `\n${editorialHtml}\n` : ''}
-
- ${caseCalloutHtml}
-
-
-
- ${skill.isSubCommand ? 'reference/' + escapeHtml(skill.id) + '.md' : 'SKILL.md'}
- ${skill.isSubCommand ? 'Loaded when the impeccable skill routes to this command.' : 'The canonical skill definition your AI harness loads.'}
-
-
-${bodyHtml}
-
-
-
- ${referencesHtml}
-
-`;
-}
-
-/**
- * Render the unified Docs sidebar used across /skills and /tutorials.
- * Shows every skill grouped by category, then tutorials as a final
- * group. Pass the current page identifier so we can mark it:
- *
- * { kind: 'skill', id: 'polish' }
- * { kind: 'tutorial', slug: 'getting-started' }
- * null (no current page)
- */
-function renderDocsSidebar(skillsByCategory, tutorials, current = null) {
- // Label the toggle button with the current page so mobile users know
- // where they are at a glance, then open the menu to switch.
- let currentLabel = 'Docs menu';
- if (current?.kind === 'skill') {
- currentLabel = `/${current.id}`;
- } else if (current?.kind === 'tutorial') {
- const t = tutorials.find((x) => x.slug === current.slug);
- if (t) currentLabel = t.title;
- }
-
- let html = `
-`;
- return html;
-}
-
-/**
- * Render the /skills overview main column content (not the sidebar).
- * This is the orientation piece: what skills are, how to pick one,
- * the six categories explained with inline cross-links to detail pages.
- */
-function renderSkillsOverviewMain(skillsByCategory, allSkills) {
- // Build a lookup by id so we can pull taglines/descriptions for the cards.
- const skillsById = Object.fromEntries(allSkills.map((s) => [s.id, s]));
- const commandCount = allSkills.filter((s) => s.id !== 'impeccable').length;
-
- // Short, clean tagline for the home command card. Fall back to the editorial
- // tagline if set, otherwise use a default.
- const impeccable = skillsById['impeccable'];
- const homeTagline = impeccable?.editorial?.frontmatter?.tagline
- || 'The design intelligence behind every command.';
-
- // Render a single command as a compact row: name on the left, description
- // and relationship on the right. Matches the original cheatsheet density.
- const renderCommandRow = (skill) => {
- const tagline = skill.editorial?.frontmatter?.tagline || skill.description;
- const shortTagline = tagline.length > 140 ? tagline.slice(0, 137) + '...' : tagline;
- const rel = COMMAND_RELATIONSHIPS[skill.id] || {};
- const isAlpha = skill.id === 'live';
-
- let metaHtml = '';
- if (rel.pairs) {
- metaHtml = `
Impeccable gives you a shared design vocabulary with your AI. ${commandCount} commands that each encode a specific design discipline, so you can steer with precision. Pick one for the job or let the skill route you automatically.
-
-
-
-
- The home command
-
/impeccable
-
${escapeHtml(homeTagline)}
-
Call /impeccable directly for freeform design work with the full guidebook loaded. Or reach for one of its specialized modes:
Short, opinionated walk-throughs of the highest-leverage workflows. Each one takes around ten minutes and ends with something working in your project.
-
-
-
-${cards}
-
-
`;
-}
-
-/**
- * Render the /slop page main content.
- *
- * Four numbered sections in one scroll: See it (iframe overlay demo),
- * Try it live (specimen gallery), The catalog (the full rule list), and
- * Run it yourself (three invocation methods). Lives inside the docs
- * layout shell so the slop sidebar (renderSlopSidebar) navigates both
- * the top-level anchors and the per-catalog-section anchors.
- */
-function renderSlopMain(grouped, totalRules) {
- // Catalog: rule-card sections, grouped by skillSection.
- let catalogSectionsHtml = '';
- for (const section of grouped.order) {
- const rules = grouped.bySection[section] || [];
- if (rules.length === 0) continue;
- const slug = slugify(section);
- catalogSectionsHtml += `
-
-
-
${totalRules} patterns that mark an interface as AI-generated, and the detection overlay that catches them in place. Watch it flag them live, try it on ${GALLERY_ITEMS.length} synthetic specimens, or browse the full catalog. ${detectedCount} rules run deterministically (npx impeccable detect or the browser extension); ${llmCount} need /impeccable critique's LLM review pass.
-
-
-
-
01 See it
-
-
-
-
-
- Live on a synthetic slop page
-
-
-
-
Hover or tap any outlined element to see which rule fired.
-
-
-
-
-
02 Try it live
-
These ${GALLERY_ITEMS.length} synthetic slop pages ship with the detector script baked in. Click any to see the overlay running on a real page, then hover the outlined elements.
-
-
-${specimenCards}
-
-
-
-
-
-
03 The catalog
-
Every pattern /impeccable teaches against. AI slop rules flag the tells of AI-generated UIs; Quality rules flag general design mistakes that hurt regardless of who wrote them.
-
-
-
-
- How to read this
-
-
-
-
Each rule shows how it is detected:
-
-
CLI
Deterministic. Runs from npx impeccable detect on files, no browser required.
-
Browser
Deterministic, but needs real browser layout. Runs via the browser extension or Puppeteer, not the plain CLI.
-
LLM only
No deterministic detector. Caught by /impeccable critique during its LLM design review.
The design review command opens the overlay automatically during its browser assessment pass. Deterministic findings highlighted in place while the LLM runs its separate heuristic review.
-
-
-
Standalone CLI
-
npx impeccable live
-
Starts a local server that serves the detector script. Inject it into any page via a <script> tag to see the overlay. Works on your own dev server, a staging URL, or anyone's live page.
`;
-}
-
-/**
- * Render the animated Live Mode demo block. HTML structure matches the
- * homepage #live-demo exactly so public/js/components/live-demo.js can
- * drive it without modification. The CSS (.live-demo-*) lives in
- * public/css/live-mode.css, imported by main.css and also loaded on this
- * page via extraHead.
- */
-function renderLiveModeDemo() {
- return `
-
-
-
-
-
-
- localhost:3000
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Newsletter
-
Subscribe for updates
-
Monthly-ish design notes.
-
-
-
-
-
- No. 04
-
Letters, occasionally.
-
A postcard from the editor, about once a month. No tracking pixels, no "just checking in."
-
-
-
-
-
-
☞
- Dispatch
-
Design notes, every other Thursday.
-
-
-
-
-
-
☆☆☆
- Field Notes
-
A monthly letter, for people who still read email for pleasure.
-
-
-
-
-
-
-
-
-
-
more playful
-
-
-
-
-
-
-
-
-
-
-
-
-
- Generating variants…
-
-
-
- 1 / 3
-
-
-
-
-
-
-
- Variant 3 written to source
-
-
-
-
-
-
-
-
-
- /
-
-
-
-
-
-
-
-
-
`;
-}
-
-/**
- * Render the /live-mode page main content.
- *
- * Marketing-style single-column layout mirroring /visual-mode's structure.
- * Surfaces the animated homepage live-demo, a three-stage narrative,
- * pathway cards (tutorial / reference / install), and the supported
- * framework strip.
- */
-function renderLiveModeMain() {
- return `
-
-
-
New in v3.0 Alpha
-
Live Mode
-
Pick any element in the browser. Drop a comment or a stroke. Three production-quality variants swap in via your framework's HMR. Accept the one you want and it writes back to source.
-
Why alpha: Live Mode works end-to-end and is ready to try, but it still needs more testing against real-world repos and framework configs. Expect rough edges on uncommon setups, and please report what breaks.
-
- $
- /impeccable live
-
-
-
-
-
- ${renderLiveModeDemo()}
-
Click the frame or scroll it into view to start the loop. Respects prefers-reduced-motion.
-
-
-
-
What happens, in three moves
-
-
- 01 · Pick
-
Point at what bugs you
-
Click any element on your running dev server. Add a comment pin where the issue lives. Draw a stroke through the bit you want to change. Or just type "more playful".
-
-
-
- Newsletter card
- 1
-
-
-
-
-
- 02 · Generate
-
Three genuinely different takes
-
Variants anchor to different archetypes, not three riffs on color. Each one explores a different primary axis: hierarchy, typography, density, layout, or palette strategy.
-
-
-
No.04
-
Dispatch
-
Field
-
-
-
-
- 03 · Accept
-
Lands in real source
-
The accepted variant replaces the picked element in your source file. CSS consolidates into your real stylesheet, not inline. Discard all three and the original stays.
`;
-}
-
-/**
-/**
- * Render the /designing page.
- *
- * Editorial orientation: four-phase loop (start → iterate → polish →
- * maintain) as the spine, plus three appendix sections (register,
- * interop, avoid) and a CTA climax. Cards are rare: most sections
- * rely on typography, hairline rules, and whitespace for structure.
- */
-function renderDesigningMain() {
- const loopNodes = [
- { id: 'start', num: '01', name: 'Start', hint: 'From a blank file, through a brief, to a designed feature.' },
- { id: 'iterate', num: '02', name: 'Iterate', hint: 'Refine in place. Command line or in the browser.' },
- { id: 'polish', num: '03', name: 'Polish', hint: 'The pre-ship gauntlet. Audit, clarify, harden.' },
- { id: 'maintain', num: '04', name: 'Maintain', hint: 'Pay down design debt before it solidifies.' },
- ];
- const nodeHtml = loopNodes.map((n) => `
-
- ${n.num}
- ${n.name}
- ${escapeHtml(n.hint)}
- `).join('');
-
- return `
-
-
-
- The core loop
-
Designing with Impeccable
-
Shipping a real interface is a loop. Four phases, each with one place to begin.
-
-
-
- The core loop
-
- ${nodeHtml}
-
-
- ↘
- ↙
- ↖
- ↗
-
- designing
- impeccable
-
-
-
-
-
-
-
-
- 01 · Start
-
From a blank file to a designed feature.
-
Three commands, one arc. /impeccable teach writes the brief, once per project. /impeccable shape drafts a reference you can look at. /impeccable craft codes toward what you can see. Words, then pictures, then code.
Teach runs a short discovery interview about audience, register, voice, and anti-references. It writes PRODUCT.md and, if there's code to scan, a DESIGN.md. Every later command reads both files before generating.
-
-
-
-
-
- shape + craft · in pictures
-
Since image generation crossed the reference-quality threshold, shape can draft a brand toolkit you review at a glance, and craft can code toward a hi-fi mock instead of a paragraph. Neo Mirai is the full loop: generated direction, implemented page, browser iteration.
Brand toolkit. Identity, palette, type, icon language, applications, social tiles, UI direction. One plate, reviewable at a glance. Approved decisions get written into DESIGN.md.
Live build. The mock became semantic markup, regenerated assets, responsive fixes, nav state, speaker carousel behavior, and browser-verified polish. Open the live site.
-
-
-
-
-
The first two plates were generated by OpenAI GPT Image 2. The third is the implemented Neo Mirai page. Gemini Nano Banana Pro, Imagen 4 Ultra, and Grok Imagen work the same way, via Codex, Gemini CLI, and compatible harnesses.
-
-
-
-
-
-
- 02 · Iterate
-
Refine what's there.
-
Once something exists, you're iterating. There are two paths: specific commands for named dimensions, or Live Mode for visual exploration.
-
-
-
-
-
- Command line
-
When the edit has a name.
-
Type a command and let the skill encode a specific discipline. Best when you know the word: typography, layout, color, motion.
-
-
$/impeccable polish pricing
-
$/impeccable bolder hero
-
$/impeccable typeset checkout
-
-
-
-
- Live Mode
-
When the edit is easier to point at.
-
Pick any element in the browser, draw, type, hit Go. Three production-quality variants. Accept one and it writes to source.
Scans tokens, components, and rendered output. Writes a spec-compliant DESIGN.md.
-
-
-
-
-
-
-
-
- Two lanes
-
Brand, or product.
-
Two defaults with different vocabularies. Impeccable picks the lane from your task cue and PRODUCT.md before every command, so typeset, animate, colorize, and friends adjust their output to match. You rarely need to set it by hand.
-
-
-
-
-
- Brand
-
Design IS the product. Marketing, landing, editorial, long-form, portfolio.
-
- No. 04 · Dispatch
- Letters, occasionally.
-
-
-
- Product
-
Design serves the task. App UI, admin, dashboards, tools.
An anti-patterns list, for using the anti-patterns tool.
-
-
-
-
-
- ×
-
- Running both Impeccable and Anthropic's frontend-design skill
-
Anthropic still promotes their skill in Claude Code, but it's been unmaintained and is now behind on recommended patterns. Run both and they collide on vocabulary, cancelling each other out. Pick one.
-
-
-
- ×
-
- Pinning every command
-
Pinning brings back /audit, /polish, /critique as shortcuts. Pin everything and you've re-exploded the / menu the v3.0 consolidation cleaned up. Pin the two or three you reach for daily.
-
-
-
- ×
-
- Skipping teach
-
Commands still run without PRODUCT.md and DESIGN.md. They default to generic SaaS patterns. The floor is meaningfully higher with context. Run teach once; every later command benefits.
-
-
-
- ×
-
- Treating it like a linter
-
Impeccable is an opinionated design partner, not a validator. It has a point of view. Push back with a reason and it'll work with you. Ignore the opinion without a reason and output gets worse, not better.
-
- 
- 
- 
-
- 
- 
- 
- 
-