mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-12 14:16:28 +03:00
Paul BakausandGitHub
51d01e3a5f
* Add design-aware detector rules * Fix design-aware detector noise * Unify CLI and hook detector ignores * Fix remaining design-system review findings * Add detector ignore CLI * Fix design detector review findings * Fix design color source false positives * Fix core test suite registration * Add design-aware detector docs * Fix font priority design-system parsing * Fix color ignore value matching
754 lines
46 KiB
Plaintext
754 lines
46 KiB
Plaintext
---
|
||
import Base from '../layouts/Base.astro';
|
||
import LiveDemoPalette from '../components/LiveDemoPalette.astro';
|
||
import Testimonials from '../components/Testimonials.astro';
|
||
import LiveDemoGbar from '../components/LiveDemoGbar.astro';
|
||
import '../styles/main.css';
|
||
import '../styles/sub-pages.css';
|
||
import '../styles/home-kinpaku.css';
|
||
import '../styles/home-rebuild.css';
|
||
import '../styles/testimonials.css';
|
||
|
||
// Hero background candidates: pulled from /design-system's candidate folders
|
||
// so the homepage switcher and the design-system gallery stay in sync. The
|
||
// switcher panel below the hero lets you cycle through them and pick one;
|
||
// selection persists in localStorage. Remove the switcher block + this loader
|
||
// once the hero is locked in.
|
||
// Hero is /assets/neo-kinpaku/candidates/finalists/m-01-v2-01.png (referenced from CSS).
|
||
// Previous hero: /assets/neo-kinpaku/kintsugi-hero-v3.png
|
||
---
|
||
|
||
<Base
|
||
title="Impeccable: The missing upgrade to Anthropic's impeccable skill"
|
||
description="1 skill, 23 commands, and curated anti-patterns for impeccable frontend design. Works with Cursor, Claude Code, GitHub Copilot, Gemini CLI, and Codex CLI."
|
||
activeNav="home"
|
||
canonicalPath="/"
|
||
bodyClass="home-kinpaku kinpaku-chrome"
|
||
mainId="main-content"
|
||
mainClass="site-content"
|
||
ogTitle="Impeccable: Design skills for AI harnesses"
|
||
ogDescription="1 skill, 23 commands, and curated anti-patterns for impeccable frontend design. Works with Cursor, Claude Code, GitHub Copilot, Gemini CLI, and Codex CLI."
|
||
ogImage="https://impeccable.style/og-image-v2.jpg"
|
||
twitterSite="@pbakaus"
|
||
twitterCreator="@pbakaus"
|
||
>
|
||
|
||
<Fragment slot="head">
|
||
<script is:inline async src="https://www.googletagmanager.com/gtag/js?id=G-TEXGHC7V34"></script>
|
||
<script is:inline>
|
||
window.dataLayer = window.dataLayer || [];
|
||
function gtag(){dataLayer.push(arguments);}
|
||
gtag('js', new Date());
|
||
gtag('config', 'G-TEXGHC7V34');
|
||
</script>
|
||
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
|
||
<meta name="theme-color" content="#070604">
|
||
</Fragment>
|
||
|
||
<Fragment slot="before-header">
|
||
<div class="grain-overlay" aria-hidden="true"></div>
|
||
</Fragment>
|
||
|
||
<Fragment slot="after-header">
|
||
<!-- 1. HERO -->
|
||
<section id="hero" class="hero-rebuild">
|
||
<div class="hero-rebuild-art" aria-hidden="true"></div>
|
||
<div class="hero-rebuild-container">
|
||
<div class="hero-rebuild-left">
|
||
<h1 class="hero-rebuild-title">The missing design<br>vocabulary for agents.</h1>
|
||
|
||
<p class="hero-rebuild-body">
|
||
It's why AI frontends all share one look: no words for hierarchy, contrast, or restraint.
|
||
Impeccable gives your agent the designer's vocabulary, and gives you the same commands,
|
||
so you both stop guessing and start directing, live, in your production codebase.
|
||
</p>
|
||
|
||
<div class="hero-rebuild-actions">
|
||
<a href="#downloads" class="ks-button ks-button-primary">
|
||
Get started
|
||
<span class="ks-button-arrow" aria-hidden="true">
|
||
<svg viewBox="0 0 16 8" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square">
|
||
<path d="M0 4h14M10 0l4 4-4 4"/>
|
||
</svg>
|
||
</span>
|
||
</a>
|
||
<a href="/designing" class="ks-button ks-button-ghost">How it works</a>
|
||
</div>
|
||
|
||
<div class="hero-rebuild-logos" aria-label="AI coding harnesses Impeccable works with">
|
||
<span class="hero-rebuild-logo has-tooltip" data-tooltip="Codex CLI"><img src="assets/openai-logo.png" alt="Codex CLI" width="20" height="20" loading="lazy"></span>
|
||
<span class="hero-rebuild-logo has-tooltip" data-tooltip="Claude Code"><img src="assets/claude-logo.png" alt="Claude Code" width="22" height="22" loading="lazy"></span>
|
||
<span class="hero-rebuild-logo has-tooltip" data-tooltip="Cursor"><img src="assets/cursor-logo.png" alt="Cursor" width="22" height="22" loading="lazy"></span>
|
||
<span class="hero-rebuild-logo has-tooltip" data-tooltip="Gemini CLI"><img src="assets/gemini-logo.png" alt="Gemini CLI" width="20" height="20" loading="lazy"></span>
|
||
<span class="hero-rebuild-logo has-tooltip" data-tooltip="GitHub Copilot"><img src="assets/github-copilot-logo.svg" alt="GitHub Copilot" width="20" height="20" loading="lazy"></span>
|
||
<span class="hero-rebuild-logo has-tooltip" data-tooltip="Antigravity"><img src="assets/antigravity-logo.png" alt="Antigravity" width="20" height="20" loading="lazy"></span>
|
||
<span class="hero-rebuild-logo has-tooltip" data-tooltip="OpenCode"><img src="assets/opencode-logo.png" alt="OpenCode" width="20" height="20" loading="lazy"></span>
|
||
<span class="hero-rebuild-logo has-tooltip" data-tooltip="Pi"><img src="assets/pi-logo.svg" alt="Pi" width="20" height="20" loading="lazy"></span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="hero-rebuild-right">
|
||
<!-- Live Mode loop: starts on the AI-slop card, picks it, and cycles
|
||
three refined variants. Driven by live-demo.js (#live-demo). -->
|
||
<div class="live-demo hero-live-demo" id="live-demo" aria-label="Live Mode interactive demo loop">
|
||
<div class="live-demo-frame-col"><div class="live-demo-frame">
|
||
<div class="live-demo-chrome">
|
||
<span class="live-demo-dot"></span>
|
||
<span class="live-demo-dot"></span>
|
||
<span class="live-demo-dot"></span>
|
||
<span class="live-demo-url">localhost:3000</span>
|
||
</div>
|
||
|
||
<div class="live-demo-stage">
|
||
<!-- The page under the picker: a warm, serif boutique-hotel site
|
||
(deliberately the opposite of Impeccable's dark look). -->
|
||
<div class="hotel-site" aria-hidden="true">
|
||
<header class="hotel-nav">
|
||
<span class="hotel-logo">AURELIA</span>
|
||
<nav class="hotel-nav-links"><span>Suites</span><span>Dining</span><span>Spa</span><span>Journal</span></nav>
|
||
<span class="hotel-nav-book">Book</span>
|
||
</header>
|
||
<!-- The picked element: the hero. Your AI generated it generic;
|
||
pick it, comment, and the variants make it exclusive + on-brand. -->
|
||
<div class="live-demo-target hotel-hero-pick" data-demo-target>
|
||
<div class="live-demo-variant is-active" data-variant="original">
|
||
<div class="hotel-hero hotel-hero--slop">
|
||
<div class="hotel-hero-inner">
|
||
<h2 class="hotel-hero-title">Welcome to Our Hotel</h2>
|
||
<p class="hotel-hero-sub">Book the best rooms at the best prices.</p>
|
||
<button type="button" class="hotel-hero-cta">Book Now</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{['1', '2', '3'].map((n) => (
|
||
<div class="live-demo-variant" data-variant={n}>
|
||
<div class={`hotel-hero hotel-hero--${n}`}>
|
||
<div class="hotel-hero-photo"></div>
|
||
<div class="hotel-hero-inner">
|
||
<p class="hotel-hero-eyebrow">Amalfi Coast</p>
|
||
<h2 class="hotel-hero-title">Where the coast forgets time</h2>
|
||
<p class="hotel-hero-sub">Forty suites above the sea.</p>
|
||
<button type="button" class="hotel-hero-cta">Reserve your stay</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
<!-- Context: the rest of the page, scrolled just into view -->
|
||
<div class="hotel-suites">
|
||
<p class="hotel-suites-label">Our Suites</p>
|
||
<div class="hotel-suites-row">
|
||
<article class="hotel-card">
|
||
<div class="hotel-card-photo"></div>
|
||
<div class="hotel-card-body">
|
||
<p class="hotel-card-kicker">Suite</p>
|
||
<h3 class="hotel-card-name">Garden Suite</h3>
|
||
<p class="hotel-card-meta">Sea view · 48m²</p>
|
||
<div class="hotel-card-foot">
|
||
<span class="hotel-card-price">$420<i>/night</i></span>
|
||
<button type="button" class="hotel-card-btn">Reserve</button>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
<article class="hotel-card">
|
||
<div class="hotel-card-photo hotel-card-photo--b"></div>
|
||
<div class="hotel-card-body">
|
||
<p class="hotel-card-kicker">Suite</p>
|
||
<h3 class="hotel-card-name">Sea Loft</h3>
|
||
<p class="hotel-card-meta">Terrace · 62m²</p>
|
||
<div class="hotel-card-foot">
|
||
<span class="hotel-card-price">$510<i>/night</i></span>
|
||
<button type="button" class="hotel-card-btn">Reserve</button>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
<article class="hotel-card">
|
||
<div class="hotel-card-photo hotel-card-photo--c"></div>
|
||
<div class="hotel-card-body">
|
||
<p class="hotel-card-kicker">Suite</p>
|
||
<h3 class="hotel-card-name">Cliff Suite</h3>
|
||
<p class="hotel-card-meta">Sea view · 70m²</p>
|
||
<div class="hotel-card-foot">
|
||
<span class="hotel-card-price">$680<i>/night</i></span>
|
||
<button type="button" class="hotel-card-btn">Reserve</button>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="live-demo-outline" data-demo-outline aria-hidden="true"></div>
|
||
|
||
<!-- Annotation layer: one freehand circle around the off-brand
|
||
purple button + a comment pin with the intent. Mirrors the real
|
||
picker; both are "sent along". -->
|
||
<div class="live-demo-annotations" data-demo-annotations aria-hidden="true">
|
||
<svg class="live-demo-stroke" viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true">
|
||
<path d="M5 73 C1 61 15 55 27 57 C36 59 37 71 27 74 C16 78 5 76 3 65" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" pathLength="1"/>
|
||
</svg>
|
||
<span class="live-demo-pin" data-demo-pin>
|
||
<span class="live-demo-pin-dot"></span>
|
||
<span class="live-demo-pin-note"><span data-demo-note-text></span><span class="live-demo-pin-caret"></span></span>
|
||
</span>
|
||
<span class="live-demo-annot-clear">Clear</span>
|
||
</div>
|
||
|
||
<div class="live-demo-ctx" data-demo-ctx data-phase="hidden">
|
||
<div class="live-demo-ctx-row live-demo-ctx-row--configure">
|
||
<div class="live-demo-ctx-command">
|
||
<span class="live-demo-ctx-input" data-demo-input>
|
||
<button type="button" class="live-demo-ctx-selection">h1</button>
|
||
<span data-demo-input-text></span><span class="live-demo-ctx-caret"></span>
|
||
</span>
|
||
</div>
|
||
<div class="live-demo-ctx-trailing">
|
||
<div class="live-demo-ctx-modifiers">
|
||
<button type="button" class="live-demo-ctx-action" data-demo-ctx-pill>
|
||
<span data-demo-cmd-name>adapt</span>
|
||
<span class="live-demo-ctx-action-caret" aria-hidden="true">▾</span>
|
||
</button>
|
||
<button type="button" class="live-demo-ctx-count">×3</button>
|
||
</div>
|
||
<div class="live-demo-ctx-actions">
|
||
<button type="button" class="live-demo-ctx-voice" aria-label="Voice input">
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"></path><path d="M19 10v2a7 7 0 0 1-14 0v-2"></path><line x1="12" x2="12" y1="19" y2="22"></line></svg>
|
||
</button>
|
||
<button type="button" class="live-demo-ctx-go" data-demo-go aria-label="Generate variants">
|
||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<LiveDemoPalette pick="colorize" />
|
||
<div class="live-demo-ctx-row live-demo-ctx-row--generating">
|
||
<span class="live-demo-ctx-spinner" aria-hidden="true"></span>
|
||
<span>Generating variants…</span>
|
||
</div>
|
||
<div class="live-demo-ctx-row live-demo-ctx-row--cycling">
|
||
<button type="button" class="live-demo-ctx-nav" aria-label="Previous variant">‹</button>
|
||
<span class="live-demo-ctx-counter" data-demo-counter>1 / 3</span>
|
||
<button type="button" class="live-demo-ctx-nav" aria-label="Next variant">›</button>
|
||
<span class="live-demo-ctx-divider"></span>
|
||
<button type="button" class="live-demo-ctx-discard" aria-label="Discard">✕</button>
|
||
<button type="button" class="live-demo-ctx-accept" data-demo-accept>Accept</button>
|
||
</div>
|
||
<div class="live-demo-ctx-row live-demo-ctx-row--accepted">
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
||
<span>Variant 3 written to source</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="live-demo-cursor" data-demo-cursor aria-hidden="true">
|
||
<svg width="18" height="22" viewBox="0 0 18 22" fill="none">
|
||
<path d="M1 1 L1 17 L5 13 L8 20 L11 19 L7.5 12 L13 12 Z" fill="#111" stroke="#fff" stroke-width="1.2" stroke-linejoin="round"/>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
|
||
<LiveDemoGbar />
|
||
</div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</Fragment>
|
||
|
||
<!-- 01b. TESTIMONIALS: five-variant section, switcher in the bottom-right
|
||
floating panel. Sits between the hero and the slop teaser. The dot-grid
|
||
divider that used to open the slop section now opens this one. -->
|
||
<Testimonials />
|
||
|
||
|
||
<!-- 02. CATCH THE SLOP - Anti-pattern detector teaser -->
|
||
<section class="slop-teaser-section" id="slop" aria-labelledby="slop-teaser-title">
|
||
<div class="slop-teaser-head">
|
||
<h2 id="slop-teaser-title" class="slop-teaser-title">Desloppification</h2>
|
||
<p class="slop-teaser-body">
|
||
Impeccable strips the AI slop tells and bad defaults out of every design discipline, from type to motion to copy. A skill can't make the model a better designer; it can clear the reflexes that make its output look generated.
|
||
</p>
|
||
<div class="slop-teaser-actions">
|
||
<a class="slop-teaser-cta-primary" href="/slop">
|
||
Browse the full catalog
|
||
<svg viewBox="0 0 16 8" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square" aria-hidden="true">
|
||
<path d="M0 4h14M10 0l4 4-4 4"/>
|
||
</svg>
|
||
</a>
|
||
<code class="slop-teaser-cli">npx impeccable detect src/</code>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="foundation-grid" data-source="slop" data-reveal>
|
||
<!-- 7 discipline cards, rendered by JS with slop-tells-we-prevent copy -->
|
||
</div>
|
||
|
||
</section>
|
||
|
||
<script is:inline>
|
||
(function () {
|
||
const gallery = document.querySelector('[data-slop-gallery]');
|
||
if (!gallery) return;
|
||
const track = gallery.querySelector('[data-slop-track]');
|
||
const prev = gallery.querySelector('[data-slop-prev]');
|
||
const next = gallery.querySelector('[data-slop-next]');
|
||
const scrollByCards = (dir) => {
|
||
const card = track.querySelector('.slop-teaser-card');
|
||
if (!card) return;
|
||
const cardWidth = card.getBoundingClientRect().width + 18;
|
||
track.scrollBy({ left: dir * cardWidth * 2, behavior: 'smooth' });
|
||
};
|
||
prev?.addEventListener('click', () => scrollByCards(-1));
|
||
next?.addEventListener('click', () => scrollByCards(1));
|
||
})();
|
||
</script>
|
||
|
||
<!-- (The standalone "Design in production" section was removed. Its
|
||
narrative now lives in the bento (T7 + T8 below) plus the full
|
||
/live-mode page; the homepage hero's auto-playing demo is the
|
||
in-place proof.) -->
|
||
|
||
<!-- 02. THE LANGUAGE - Commands vocabulary + demos -->
|
||
<section class="language-section" id="language">
|
||
<div id="solution" style="height:0;overflow:hidden;visibility:hidden"></div>
|
||
<div class="section-header" data-reveal>
|
||
<h2 class="section-title">The Language</h2>
|
||
</div>
|
||
<div class="language-content">
|
||
<div class="language-intro-row" data-reveal>
|
||
<p class="section-lead">23 commands give you a shared design vocabulary with your AI. Each maps to one discipline (<code>/typeset</code> for type, <code>/colorize</code> for color, <code>/animate</code> for motion), so you can ask for the exact thing without explaining it. Pick any to see it in action, or <a href="/docs" class="cheatsheet-link">browse the full reference →</a></p>
|
||
<div class="language-view-toggle" role="tablist" aria-label="Commands view">
|
||
<button type="button" role="tab" class="language-view-tab is-active" data-view="palette" aria-selected="true">Palette</button>
|
||
<button type="button" role="tab" class="language-view-tab" data-view="periodic" aria-selected="false">Periodic</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="commands-section" style="height:0;overflow:hidden;visibility:hidden"></div>
|
||
|
||
<div class="language-view language-view--palette is-active" data-view-panel="palette">
|
||
<div class="commands-subsection">
|
||
<div class="commands-gallery">
|
||
<!-- Rendered by JS -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="language-view language-view--periodic" data-view-panel="periodic" hidden>
|
||
<div class="solution-visual-interactive" id="framework-viz-container" data-reveal>
|
||
<!-- Periodic table generated by JS -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
<!-- 05. READY TO DROP IN: bento grid with six tiles. Replaces the
|
||
carousel (initWhyTabs in app.js returns early when .why-layout is
|
||
missing, so leaving that JS in place is harmless). Tiles share
|
||
inner content classes (.why-panel-title, .why-panel-body,
|
||
.why-visual--*) with the old carousel; only the outer chrome
|
||
changed. -->
|
||
<section class="why-section" id="why">
|
||
<div class="why-content" data-reveal>
|
||
<div class="section-header">
|
||
<h2 class="section-title">Ready to drop in</h2>
|
||
</div>
|
||
|
||
<div class="ks-bento why-bento">
|
||
<!-- T1: hero, wide. Respects your design system. -->
|
||
<article class="ks-bento-tile ks-bento-tile--span-8" id="why-respects">
|
||
<span class="ks-bento-num" data-color="kinpaku">01</span>
|
||
<h3 class="why-panel-title">Respects your design system.</h3>
|
||
<p class="why-panel-body">Inherits your tokens, components, and conventions instead of overwriting them. New work fits the system, not the model's defaults.</p>
|
||
<div class="why-visual why-visual--terminal">
|
||
<div class="why-terminal">
|
||
<div class="why-terminal-header">
|
||
<span class="why-terminal-dot"></span>
|
||
<span class="why-terminal-dot"></span>
|
||
<span class="why-terminal-dot"></span>
|
||
<span class="why-terminal-title">/impeccable polish : scanning codebase</span>
|
||
</div>
|
||
<div class="why-terminal-body">
|
||
<div class="why-terminal-line why-terminal-line--prompt"><span class="why-terminal-prompt">›</span> Walking src/…</div>
|
||
<div class="why-terminal-line"> <span class="why-terminal-ok">✓</span> <span class="why-terminal-path">src/styles/tokens.css</span> <span class="why-terminal-meta">14 colors, 6 font sizes, 7 spacing steps</span></div>
|
||
<div class="why-terminal-line"> <span class="why-terminal-ok">✓</span> <span class="why-terminal-path">tailwind.config.ts</span> <span class="why-terminal-meta">theme.extend merged</span></div>
|
||
<div class="why-terminal-line"> <span class="why-terminal-ok">✓</span> <span class="why-terminal-path">src/components/</span> <span class="why-terminal-meta">34 components</span></div>
|
||
<div class="why-terminal-line"> <span class="why-terminal-meta">· Button: primary, secondary, ghost, destructive</span></div>
|
||
<div class="why-terminal-line"> <span class="why-terminal-meta">· Card: 3 variants, 8px / 16px radii</span></div>
|
||
<div class="why-terminal-line"> <span class="why-terminal-meta">· Input, Select, Dialog, Toast, Table…</span></div>
|
||
<div class="why-terminal-line"> <span class="why-terminal-ok">✓</span> <span class="why-terminal-path">DESIGN.md</span> <span class="why-terminal-meta">brand rules loaded</span></div>
|
||
<div class="why-terminal-line why-terminal-line--hint"><span class="why-terminal-arrow">→</span> Matching your system. Not inventing one.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
|
||
<!-- T2: narrow. Real product context. -->
|
||
<article class="ks-bento-tile ks-bento-tile--span-4" id="why-product">
|
||
<span class="ks-bento-num" data-color="patina">02</span>
|
||
<h3 class="why-panel-title">Real product context.</h3>
|
||
<p class="why-panel-body">Captures the brief once, in <code>PRODUCT.md</code>. Every command reads it before designing.</p>
|
||
<div class="why-visual why-visual--productmd">
|
||
<div class="why-productmd-file">
|
||
<div class="why-productmd-header">
|
||
<span class="why-productmd-filename">PRODUCT.md</span>
|
||
<span class="why-productmd-status">Loaded on every command</span>
|
||
</div>
|
||
<div class="why-productmd-body">
|
||
<div class="why-productmd-field">
|
||
<span class="why-productmd-k">Users</span>
|
||
<span class="why-productmd-v">SREs on call, reading fast, often in the dark.</span>
|
||
</div>
|
||
<div class="why-productmd-field">
|
||
<span class="why-productmd-k">Register</span>
|
||
<span class="why-productmd-v">Product. Design serves the task.</span>
|
||
</div>
|
||
<div class="why-productmd-field">
|
||
<span class="why-productmd-k">Brand voice</span>
|
||
<span class="why-productmd-v">Calm, clinical, no hype.</span>
|
||
</div>
|
||
<div class="why-productmd-field">
|
||
<span class="why-productmd-k">Anti-references</span>
|
||
<span class="why-productmd-v">Purple gradients. Glassmorphism. "Boost your productivity."</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
|
||
<!-- T3: narrow. DESIGN.md travels. Restored from the parked panel
|
||
at site/_parked/the-case.astro. -->
|
||
<article class="ks-bento-tile ks-bento-tile--span-4" id="why-designmd">
|
||
<span class="ks-bento-num" data-color="kinpaku">03</span>
|
||
<h3 class="why-panel-title">Travels as DESIGN.md.</h3>
|
||
<p class="why-panel-body"><code>/impeccable document</code> writes one in the <a href="https://stitch.withgoogle.com/docs/design-md/overview/" target="_blank" rel="noopener">Google Stitch format</a>. Your visual system becomes portable.</p>
|
||
<div class="why-visual why-visual--designmd-v2">
|
||
<div class="why-dm-header">
|
||
<span class="why-dm-filename">DESIGN.md</span>
|
||
<span class="why-dm-badge">Google Stitch spec</span>
|
||
</div>
|
||
<div class="why-dm-grid">
|
||
<div class="why-dm-tile why-dm-tile--color" style="--c: var(--ks-kinpaku);">
|
||
<div class="why-dm-tile-meta"><span>Primary</span><span>oklch(78% .12 82)</span></div>
|
||
<div class="why-dm-color-hero"></div>
|
||
<div class="why-dm-color-ramp">
|
||
<span style="background: oklch(22% .04 78)"></span>
|
||
<span style="background: oklch(34% .06 78)"></span>
|
||
<span style="background: oklch(48% .08 78)"></span>
|
||
<span style="background: oklch(61% .085 78)"></span>
|
||
<span style="background: oklch(72% .105 82)"></span>
|
||
<span style="background: oklch(78% .12 82)"></span>
|
||
<span style="background: oklch(84% .075 84)"></span>
|
||
<span style="background: oklch(89% .055 84)"></span>
|
||
</div>
|
||
</div>
|
||
<div class="why-dm-tile why-dm-tile--type">
|
||
<div class="why-dm-tile-meta"><span>Wordmark</span><span>Spaced 400</span></div>
|
||
<div class="why-dm-type-specimen">IM</div>
|
||
<div class="why-dm-type-family">Avenir Next</div>
|
||
</div>
|
||
<div class="why-dm-tile why-dm-tile--type">
|
||
<div class="why-dm-tile-meta"><span>Body</span><span>Regular 400</span></div>
|
||
<div class="why-dm-type-specimen why-dm-type-specimen--sans">Aa</div>
|
||
<div class="why-dm-type-family">Avenir Next</div>
|
||
</div>
|
||
<div class="why-dm-tile why-dm-tile--components">
|
||
<div class="why-dm-tile-meta"><span>Components</span><span>34</span></div>
|
||
<div class="why-dm-comp-row">
|
||
<span class="why-dm-comp-chip why-dm-comp-chip--primary">Primary</span>
|
||
<span class="why-dm-comp-chip">Ghost</span>
|
||
</div>
|
||
<div class="why-dm-comp-input">Email address</div>
|
||
</div>
|
||
</div>
|
||
<div class="why-dm-foot">Readable by every DESIGN.md-aware tool.</div>
|
||
</div>
|
||
</article>
|
||
|
||
<!-- T4: wide. Tuned to the agent you use. -->
|
||
<article class="ks-bento-tile ks-bento-tile--span-8 why-panel--vizfirst" id="why-tuned">
|
||
<span class="ks-bento-num" data-color="patina">04</span>
|
||
<h3 class="why-panel-title">Tuned to the agent you actually use.</h3>
|
||
<p class="why-panel-body">Plays to each agent's strengths and around its weaknesses. Below: Codex used image generation to draft Neo Mirai before <code>/impeccable craft</code> turned it into shipped code.</p>
|
||
<div class="why-visual why-visual--vizfirst">
|
||
<figure class="why-vz-plate why-vz-plate--hifi">
|
||
<span class="why-vz-plate-kind">01 · Visualize</span>
|
||
<a class="why-vz-plate-frame" href="/cases/neo-mirai" aria-label="Read the Neo Mirai case study">
|
||
<img src="assets/openai_image_2_hifi.jpg" alt="Auto-generated hi-fi landing-page mock in editorial warm-paper style." loading="lazy" width="864" height="1821" />
|
||
</a>
|
||
</figure>
|
||
<figure class="why-vz-plate why-vz-plate--brand">
|
||
<span class="why-vz-plate-kind">02 · Shape</span>
|
||
<a class="why-vz-plate-frame" href="/cases/neo-mirai" aria-label="Read the Neo Mirai case study">
|
||
<img src="assets/openai_image_2_brand.jpg" alt="Auto-generated brand toolkit: identity lockups, palette, type, icon system, and application mocks for a fictional AI design conference." loading="lazy" width="1536" height="1024" />
|
||
</a>
|
||
</figure>
|
||
<figure class="why-vz-plate why-vz-plate--live">
|
||
<span class="why-vz-plate-kind">03 · Live build</span>
|
||
<a class="why-vz-plate-frame" href="/neo-mirai/" aria-label="Open the Neo Mirai live build">
|
||
<img src="assets/cases/neo-mirai/live-fold.png" alt="Finished Neo Mirai website hero and agenda, implemented from the generated conference mock." loading="lazy" width="1440" height="1100" />
|
||
</a>
|
||
</figure>
|
||
</div>
|
||
<p class="why-panel-meta"><a href="/cases/neo-mirai">Read the case →</a> · <a href="/neo-mirai/">Open the live build →</a></p>
|
||
</article>
|
||
|
||
<!-- T5: medium. Brand vs Product registers. -->
|
||
<article class="ks-bento-tile ks-bento-tile--span-6" id="why-registers">
|
||
<span class="ks-bento-num" data-color="kinpaku">05</span>
|
||
<h3 class="why-panel-title">Brand work is not product UI.</h3>
|
||
<p class="why-panel-body">A landing page and a dashboard play by different rules. Impeccable runs in two registers, <em>brand</em> or <em>product</em>, and every command knows which.</p>
|
||
<div class="why-visual why-visual--registers">
|
||
<div class="why-register why-register--brand">
|
||
<span class="why-register-label">Brand mode</span>
|
||
<div class="why-register-mock why-register-mock--brand">
|
||
<span class="why-brand-hero-mono">Issue 04</span>
|
||
<div class="why-brand-hero-title"><em>Shape</em> the story.</div>
|
||
</div>
|
||
</div>
|
||
<div class="why-register why-register--product">
|
||
<span class="why-register-label">Product mode</span>
|
||
<div class="why-register-mock why-register-mock--product">
|
||
<div class="why-product-row"><span class="why-product-k">Users</span><span class="why-product-v">12,482</span></div>
|
||
<div class="why-product-row"><span class="why-product-k">Active now</span><span class="why-product-v">1,207</span></div>
|
||
<div class="why-product-row"><span class="why-product-k">Conversion</span><span class="why-product-v">4.8%</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
|
||
<!-- T6: medium. CI/CD-ready. -->
|
||
<article class="ks-bento-tile ks-bento-tile--span-6" id="why-ci">
|
||
<span class="ks-bento-num" data-color="patina">06</span>
|
||
<h3 class="why-panel-title">Block slop before it ships.</h3>
|
||
<p class="why-panel-body">A detector you can wire into PR checks. 44 deterministic rules, no LLM, exit codes the build can read.</p>
|
||
<div class="why-visual why-visual--ci">
|
||
<div class="why-ci-window">
|
||
<div class="why-ci-header">
|
||
<span class="why-ci-branch">feat/pricing-page</span>
|
||
<span class="why-ci-status why-ci-status--fail">✗ failing</span>
|
||
</div>
|
||
<div class="why-ci-body">
|
||
<div class="why-ci-line"><span class="why-ci-cmd">$</span> npx impeccable detect src/</div>
|
||
<div class="why-ci-issue"><span class="why-ci-x">✗</span> <code>src/Hero.tsx:42</code> gradient-text</div>
|
||
<div class="why-ci-issue"><span class="why-ci-x">✗</span> <code>src/Card.tsx:8</code> side-stripe-border</div>
|
||
<div class="why-ci-issue"><span class="why-ci-x">✗</span> <code>src/Button.tsx:17</code> ai-color-palette</div>
|
||
<div class="why-ci-summary">3 anti-patterns · exit 1</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
|
||
<!-- T7: wide. Live Mode showcase. The old standalone "Design in
|
||
production" section collapsed into this bento beat. -->
|
||
<article class="ks-bento-tile ks-bento-tile--span-8" id="why-live">
|
||
<span class="ks-bento-num" data-color="kinpaku">07</span>
|
||
<h3 class="why-panel-title">Iterate in your live app. <span class="why-panel-badge">BETA</span></h3>
|
||
<p class="why-panel-body">Pick any element in your running dev server, leave a comment or a stroke, hit Go. Three production-quality variants swap in via your framework's HMR.</p>
|
||
<div class="why-visual why-visual--live">
|
||
<div class="why-live-frame">
|
||
<div class="why-live-chrome">
|
||
<span class="why-live-dot"></span><span class="why-live-dot"></span><span class="why-live-dot"></span>
|
||
<span class="why-live-url">localhost:3000</span>
|
||
</div>
|
||
<div class="why-live-stage">
|
||
<div class="why-live-pick">
|
||
<span class="why-live-pick-tag">section.hero</span>
|
||
<span class="why-live-pick-note">more elegant<span class="why-live-pick-caret"></span></span>
|
||
</div>
|
||
</div>
|
||
<div class="why-live-ctx live-demo-ctx" data-phase="configuring">
|
||
<div class="live-demo-ctx-row live-demo-ctx-row--configure">
|
||
<div class="live-demo-ctx-command">
|
||
<span class="live-demo-ctx-input"><span class="live-demo-ctx-selection">h1</span><span class="live-demo-ctx-caret"></span></span>
|
||
</div>
|
||
<div class="live-demo-ctx-trailing">
|
||
<div class="live-demo-ctx-modifiers">
|
||
<span class="live-demo-ctx-action">bolder<span class="live-demo-ctx-action-caret" aria-hidden="true">▾</span></span>
|
||
<span class="live-demo-ctx-count">×3</span>
|
||
</div>
|
||
<div class="live-demo-ctx-actions">
|
||
<span class="live-demo-ctx-voice" aria-hidden="true">
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"></path><path d="M19 10v2a7 7 0 0 1-14 0v-2"></path><line x1="12" x2="12" y1="19" y2="22"></line></svg>
|
||
</span>
|
||
<span class="live-demo-ctx-go" aria-hidden="true">
|
||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<p class="why-panel-meta"><a href="/live-mode">See how Live Mode works →</a></p>
|
||
</article>
|
||
|
||
<!-- T8: narrow. Accept writes to source. Pairs with T7 as the
|
||
"writes back" beat that separates Live Mode from a mock. -->
|
||
<article class="ks-bento-tile ks-bento-tile--span-4" id="why-writes">
|
||
<span class="ks-bento-num" data-color="patina">08</span>
|
||
<h3 class="why-panel-title">Accept writes to source.</h3>
|
||
<p class="why-panel-body">Variants land in your real file as an ordinary edit, not a throwaway mock. A diff you can review, commit, or undo.</p>
|
||
<div class="why-visual why-visual--writes">
|
||
<div class="why-writes-card">
|
||
<div class="why-writes-head">
|
||
<span class="why-writes-check">✓</span>
|
||
<span class="why-writes-label">Wrote</span>
|
||
<span class="why-writes-file">src/Hero.astro</span>
|
||
</div>
|
||
<div class="why-writes-diff">
|
||
<div class="why-writes-line why-writes-line--del">- "Welcome to Our Hotel"</div>
|
||
<div class="why-writes-line why-writes-line--add">+ "Where the coast forgets time"</div>
|
||
<div class="why-writes-line why-writes-line--del">- "Book Now"</div>
|
||
<div class="why-writes-line why-writes-line--add">+ "Reserve your stay"</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 06. GET STARTED -->
|
||
<section class="downloads-rebuild" id="downloads" aria-labelledby="downloads-title">
|
||
<div class="downloads-rebuild-card">
|
||
<div class="downloads-rebuild-head">
|
||
<h2 id="downloads-title" class="downloads-rebuild-title">Get started</h2>
|
||
</div>
|
||
|
||
<div class="downloads-rebuild-install">
|
||
<div class="downloads-rebuild-cmd-group">
|
||
<span class="downloads-rebuild-cmd-label">Install</span>
|
||
<div class="downloads-rebuild-cmd">
|
||
<span class="downloads-rebuild-prompt" aria-hidden="true">$</span>
|
||
<code>npx impeccable install</code>
|
||
<button class="downloads-rebuild-copy" type="button" aria-label="Copy install command" data-copy="npx impeccable install">
|
||
<svg class="downloads-rebuild-copy-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true">
|
||
<rect x="9" y="9" width="13" height="13" rx="2"/>
|
||
<path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/>
|
||
</svg>
|
||
<svg class="downloads-rebuild-check-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.1" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||
<path d="M20 6 9 17l-5-5"/>
|
||
</svg>
|
||
<span>Copy</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="downloads-rebuild-cmd-group">
|
||
<span class="downloads-rebuild-cmd-label">First run</span>
|
||
<div class="downloads-rebuild-cmd">
|
||
<span class="downloads-rebuild-prompt" aria-hidden="true">$</span>
|
||
<code>/impeccable init</code>
|
||
<button class="downloads-rebuild-copy" type="button" aria-label="Copy first run command" data-copy="/impeccable init">
|
||
<svg class="downloads-rebuild-copy-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true">
|
||
<rect x="9" y="9" width="13" height="13" rx="2"/>
|
||
<path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/>
|
||
</svg>
|
||
<svg class="downloads-rebuild-check-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.1" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||
<path d="M20 6 9 17l-5-5"/>
|
||
</svg>
|
||
<span>Copy</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="downloads-rebuild-cmd-group">
|
||
<span class="downloads-rebuild-cmd-label downloads-rebuild-cmd-label--update">Update</span>
|
||
<div class="downloads-rebuild-cmd downloads-rebuild-cmd--update">
|
||
<span class="downloads-rebuild-prompt" aria-hidden="true">$</span>
|
||
<code>npx impeccable update</code>
|
||
<button class="downloads-rebuild-copy" type="button" aria-label="Copy update command" data-copy="npx impeccable update">
|
||
<svg class="downloads-rebuild-copy-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true">
|
||
<rect x="9" y="9" width="13" height="13" rx="2"/>
|
||
<path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/>
|
||
</svg>
|
||
<svg class="downloads-rebuild-check-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.1" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||
<path d="M20 6 9 17l-5-5"/>
|
||
</svg>
|
||
<span>Copy</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<p class="downloads-rebuild-note">Works with Cursor, Claude Code, GitHub Copilot, Gemini CLI, Codex CLI, and every other major AI coding harness. <code>install</code> sets up the build for your harness. Then run <code>/impeccable init</code> inside your AI tool so the skill can save your design context. <code>update</code> pulls the latest version. Run <code>npx impeccable check</code> to see if you're behind. Installed the Claude Code plugin? Update it from the <code>/plugin</code> menu instead.</p>
|
||
|
||
<details class="downloads-rebuild-alts">
|
||
<summary class="downloads-rebuild-alts-summary">
|
||
<svg class="downloads-rebuild-alts-arrow" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M9 6l6 6-6 6"/></svg>
|
||
<span>Other install methods</span>
|
||
</summary>
|
||
|
||
<div class="downloads-rebuild-alt">
|
||
<span class="downloads-rebuild-alt-label">Claude Code plugin</span>
|
||
<div class="downloads-rebuild-cmd downloads-rebuild-cmd--alt">
|
||
<code>/plugin marketplace add pbakaus/impeccable</code>
|
||
<button class="downloads-rebuild-copy" type="button" aria-label="Copy Claude Code plugin command" data-copy="/plugin marketplace add pbakaus/impeccable">
|
||
<svg class="downloads-rebuild-copy-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true">
|
||
<rect x="9" y="9" width="13" height="13" rx="2"/>
|
||
<path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/>
|
||
</svg>
|
||
<svg class="downloads-rebuild-check-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.1" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||
<path d="M20 6 9 17l-5-5"/>
|
||
</svg>
|
||
<span>Copy</span>
|
||
</button>
|
||
</div>
|
||
<span class="downloads-rebuild-alt-note">Then open <code>/plugin</code> in Claude Code and install Impeccable from the list. Claude Code only.</span>
|
||
</div>
|
||
|
||
<div class="downloads-rebuild-alt">
|
||
<span class="downloads-rebuild-alt-label">npx skills</span>
|
||
<div class="downloads-rebuild-cmd downloads-rebuild-cmd--alt">
|
||
<code>npx skills add pbakaus/impeccable</code>
|
||
<button class="downloads-rebuild-copy" type="button" aria-label="Copy npx skills command" data-copy="npx skills add pbakaus/impeccable">
|
||
<svg class="downloads-rebuild-copy-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true">
|
||
<rect x="9" y="9" width="13" height="13" rx="2"/>
|
||
<path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/>
|
||
</svg>
|
||
<svg class="downloads-rebuild-check-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.1" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||
<path d="M20 6 9 17l-5-5"/>
|
||
</svg>
|
||
<span>Copy</span>
|
||
</button>
|
||
</div>
|
||
<span class="downloads-rebuild-alt-note">The general-purpose skills installer. For now it installs one shared build for all harnesses rather than the build compiled for yours. Prefer <code>npx impeccable install</code> above for the correct setup.</span>
|
||
</div>
|
||
</details>
|
||
|
||
<p class="downloads-rebuild-secondary"><a href="/tutorials/getting-started">Read the setup guide</a> · <a href="/changelog">See what's new</a> · <a href="/faq">Got questions?</a></p>
|
||
</div>
|
||
|
||
|
||
<ul class="downloads-rebuild-extras">
|
||
<li>
|
||
<strong>Chrome extension</strong>
|
||
<span>Run the detector overlay on any page: your staging, a competitor, anything in the browser.</span>
|
||
<a href="https://chromewebstore.google.com/detail/impeccable/bdkgmiklpdmaojlpflclinlofgjfpabf" target="_blank" rel="noopener">Install from the Chrome Web Store →</a>
|
||
</li>
|
||
<li>
|
||
<strong>CLI for CI</strong>
|
||
<span><code>npx impeccable detect src/</code> in a PR check. 44 deterministic rules. JSON output, exit codes for build gates.</span>
|
||
<a href="https://www.npmjs.com/package/impeccable" target="_blank" rel="noopener">View on npm →</a>
|
||
</li>
|
||
<li>
|
||
<strong>Follow along</strong>
|
||
<span>The design thinking behind new commands and anti-patterns, in long form. Read the newsletter, or catch the shorter notes on X.</span>
|
||
<a href="https://impeccablestyle.substack.com" target="_blank" rel="noopener" class="downloads-rebuild-link-primary">Read the newsletter →</a>
|
||
<a href="https://x.com/impeccable_ai" target="_blank" rel="noopener" class="downloads-rebuild-link-secondary">Follow @impeccable_ai on X →</a>
|
||
</li>
|
||
</ul>
|
||
|
||
<p class="downloads-rebuild-more">Learn more: <a href="/tutorials/getting-started">Getting started</a> · <a href="/designing">Designing with Impeccable</a> · <a href="/docs">command docs</a></p>
|
||
</div>
|
||
</section>
|
||
|
||
<Fragment slot="scripts">
|
||
<script>
|
||
import '../scripts/app.js';
|
||
</script>
|
||
</Fragment>
|
||
|
||
</Base>
|