mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-12 06:06:37 +03:00
580 lines
32 KiB
HTML
580 lines
32 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Designing with Impeccable</title>
|
||
<meta name="description" content="The core loop: start, iterate, polish, maintain. How to use Impeccable end-to-end, from a blank file to shipped feature to paid-down design debt.">
|
||
<meta name="theme-color" content="#fafafa">
|
||
<link rel="canonical" href="https://impeccable.style/designing">
|
||
<link rel="icon" type="image/svg+xml" href="../favicon.svg">
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400&family=Instrument+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600&display=swap" rel="stylesheet">
|
||
<link rel="stylesheet" href="../css/sub-pages.css">
|
||
|
||
</head>
|
||
<body class="sub-page designing-page-body">
|
||
<a href="#main" class="skip-link">Skip to content</a>
|
||
<!-- site-header v1 -->
|
||
<header class="site-header" data-site-header>
|
||
<a href="/" class="site-header-brand" aria-label="Impeccable home">
|
||
<svg class="site-header-brand-logo" viewBox="0 0 32 32" aria-hidden="true"><rect width="32" height="32" rx="6" fill="#1a1a1a"/><text x="16" y="24" font-family="system-ui, -apple-system, sans-serif" font-size="22" font-weight="500" fill="#f5f3ef" text-anchor="middle">/</text></svg>
|
||
<span class="site-header-brand-name">Impeccable</span>
|
||
</a>
|
||
<div class="site-header-right">
|
||
<nav class="site-header-nav" aria-label="Primary">
|
||
<a href="/" data-nav="home">Home</a>
|
||
<a href="/designing" data-nav="designing" aria-current="page">Designing</a>
|
||
<a href="/docs" data-nav="docs">Docs</a>
|
||
<a href="/slop" data-nav="slop">Slop</a>
|
||
<a href="/live-mode" data-nav="live">Live</a>
|
||
</nav>
|
||
<a href="https://github.com/pbakaus/impeccable" class="site-header-github" target="_blank" rel="noopener" aria-label="Impeccable on GitHub, 21k stars">
|
||
<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"/></svg>
|
||
<span class="site-header-github-label">21k</span>
|
||
<svg class="site-header-github-star" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2l2.76 6.36L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l7.24-.91L12 2z"/></svg>
|
||
</a>
|
||
</div>
|
||
</header>
|
||
<main id="main">
|
||
|
||
<div class="designing-page">
|
||
<section class="designing-hero">
|
||
<header class="designing-page-header">
|
||
<span class="designing-page-eyebrow">The core loop</span>
|
||
<h1 class="designing-page-title">Designing <em>with Impeccable</em></h1>
|
||
<p class="designing-page-lede">Shipping a real interface is a loop. Four phases, each with one place to begin.</p>
|
||
</header>
|
||
|
||
<div class="designing-loop-wrap" aria-label="The four-phase loop">
|
||
<span class="designing-loop-wrap-eyebrow">The core loop</span>
|
||
<div class="designing-loop">
|
||
|
||
<a class="designing-loop-node designing-loop-node--start" href="#start">
|
||
<span class="designing-loop-num">01</span>
|
||
<span class="designing-loop-name">Start</span>
|
||
<span class="designing-loop-hint">From a blank file, through a brief, to a designed feature.</span>
|
||
</a>
|
||
<a class="designing-loop-node designing-loop-node--iterate" href="#iterate">
|
||
<span class="designing-loop-num">02</span>
|
||
<span class="designing-loop-name">Iterate</span>
|
||
<span class="designing-loop-hint">Refine in place. Command line or in the browser.</span>
|
||
</a>
|
||
<a class="designing-loop-node designing-loop-node--polish" href="#polish">
|
||
<span class="designing-loop-num">03</span>
|
||
<span class="designing-loop-name">Polish</span>
|
||
<span class="designing-loop-hint">The pre-ship gauntlet. Audit, clarify, harden.</span>
|
||
</a>
|
||
<a class="designing-loop-node designing-loop-node--maintain" href="#maintain">
|
||
<span class="designing-loop-num">04</span>
|
||
<span class="designing-loop-name">Maintain</span>
|
||
<span class="designing-loop-hint">Pay down design debt before it solidifies.</span>
|
||
</a>
|
||
<div class="designing-loop-wheel" aria-hidden="true">
|
||
<svg class="designing-loop-wheel-svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
|
||
<circle class="designing-loop-wheel-ring" cx="50" cy="50" r="46"/>
|
||
<!-- 12 tick marks at 30° increments. Cardinals (0/90/180/270) stronger. -->
|
||
<line class="designing-loop-wheel-tick designing-loop-wheel-tick--cardinal" x1="50" y1="2.5" x2="50" y2="5.5"/>
|
||
<line class="designing-loop-wheel-tick" x1="73" y1="8.7" x2="72" y2="11.4"/>
|
||
<line class="designing-loop-wheel-tick" x1="91.3" y1="27" x2="88.6" y2="28"/>
|
||
<line class="designing-loop-wheel-tick designing-loop-wheel-tick--cardinal" x1="97.5" y1="50" x2="94.5" y2="50"/>
|
||
<line class="designing-loop-wheel-tick" x1="91.3" y1="73" x2="88.6" y2="72"/>
|
||
<line class="designing-loop-wheel-tick" x1="73" y1="91.3" x2="72" y2="88.6"/>
|
||
<line class="designing-loop-wheel-tick designing-loop-wheel-tick--cardinal" x1="50" y1="97.5" x2="50" y2="94.5"/>
|
||
<line class="designing-loop-wheel-tick" x1="27" y1="91.3" x2="28" y2="88.6"/>
|
||
<line class="designing-loop-wheel-tick" x1="8.7" y1="73" x2="11.4" y2="72"/>
|
||
<line class="designing-loop-wheel-tick designing-loop-wheel-tick--cardinal" x1="2.5" y1="50" x2="5.5" y2="50"/>
|
||
<line class="designing-loop-wheel-tick" x1="8.7" y1="27" x2="11.4" y2="28"/>
|
||
<line class="designing-loop-wheel-tick" x1="27" y1="8.7" x2="28" y2="11.4"/>
|
||
<!-- Clockwise-orbiting accent dot, animates with offset-path. -->
|
||
<circle class="designing-loop-wheel-dot" cx="0" cy="0" r="2.2"/>
|
||
</svg>
|
||
<span class="designing-loop-wheel-arrow designing-loop-wheel-arrow--ne">↘</span>
|
||
<span class="designing-loop-wheel-arrow designing-loop-wheel-arrow--se">↙</span>
|
||
<span class="designing-loop-wheel-arrow designing-loop-wheel-arrow--sw">↖</span>
|
||
<span class="designing-loop-wheel-arrow designing-loop-wheel-arrow--nw">↗</span>
|
||
<div class="designing-loop-wheel-center">
|
||
<span class="designing-loop-wheel-center-label">designing</span>
|
||
<span class="designing-loop-wheel-center-mark">impeccable</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="designing-phase" id="start">
|
||
<header class="designing-phase-head">
|
||
<span class="designing-phase-num">01 · Start</span>
|
||
<h2 class="designing-phase-title">From a blank file to a designed feature.</h2>
|
||
<p class="designing-phase-sub">Three commands, one arc. <code>/impeccable teach</code> writes the brief, once per project. <code>/impeccable shape</code> drafts a reference you can look at. <code>/impeccable craft</code> codes toward what you can see. Words, then pictures, then code.</p>
|
||
<div class="designing-phase-commands">
|
||
<a class="designing-phase-cmd" href="/docs/teach">/impeccable teach</a>
|
||
<a class="designing-phase-cmd" href="/docs/shape">/impeccable shape</a>
|
||
<a class="designing-phase-cmd" href="/docs/craft">/impeccable craft</a>
|
||
</div>
|
||
</header>
|
||
|
||
<div class="designing-phase-body designing-start">
|
||
<div class="designing-start-step">
|
||
<span class="designing-start-step-label">teach · in words</span>
|
||
<div class="designing-start-grid">
|
||
<div class="docs-viz-file" style="margin:0">
|
||
<div class="docs-viz-file-header">
|
||
<span class="docs-viz-file-name">PRODUCT.md</span>
|
||
<span class="docs-viz-file-status">Written by teach</span>
|
||
</div>
|
||
<div class="docs-viz-file-body">
|
||
<div class="docs-viz-file-row">
|
||
<span class="docs-viz-file-k">Register</span>
|
||
<span class="docs-viz-file-v">Product. Design serves the task.</span>
|
||
</div>
|
||
<div class="docs-viz-file-row">
|
||
<span class="docs-viz-file-k">Users</span>
|
||
<span class="docs-viz-file-v">SREs on call, reading fast, often in the dark.</span>
|
||
</div>
|
||
<div class="docs-viz-file-row">
|
||
<span class="docs-viz-file-k">Voice</span>
|
||
<span class="docs-viz-file-v">Calm, clinical, no hype.</span>
|
||
</div>
|
||
<div class="docs-viz-file-row">
|
||
<span class="docs-viz-file-k">Anti-references</span>
|
||
<span class="docs-viz-file-v">Purple gradients. Glassmorphism. Hype.</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="designing-start-grid-prose">
|
||
<p>Teach runs a short discovery interview about audience, register, voice, and anti-references. It writes <code>PRODUCT.md</code> and, if there's code to scan, a <code>DESIGN.md</code>. Every later command reads both files before generating.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="designing-start-step">
|
||
<span class="designing-start-step-label">shape + craft · in pictures</span>
|
||
<p class="designing-start-step-note">Since image generation crossed the reference-quality threshold, <code>shape</code> can draft a brand toolkit you review at a glance, and <code>craft</code> can code toward a hi-fi mock instead of a paragraph. Neo Mirai is the full loop: generated direction, implemented page, browser iteration.</p>
|
||
|
||
<div class="designing-visualize-spread">
|
||
<figure class="designing-visualize-plate designing-visualize-plate--brand">
|
||
<a class="designing-visualize-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 plate: identity lockups, colour palette, type specimens, icon system, and application mocks for a fictional AI design conference, rendered in warm earth tones." loading="lazy" width="1536" height="1024" />
|
||
</a>
|
||
<figcaption class="designing-visualize-plate-cap">
|
||
<span class="designing-visualize-plate-kind">Shape</span>
|
||
<p class="designing-visualize-plate-note">Brand toolkit. Identity, palette, type, icon language, applications, social tiles, UI direction. One plate, reviewable at a glance. Approved decisions get written into <code>DESIGN.md</code>.</p>
|
||
</figcaption>
|
||
</figure>
|
||
|
||
<figure class="designing-visualize-plate designing-visualize-plate--hifi">
|
||
<a class="designing-visualize-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: a long vertical editorial comp for a fictional Tokyo AI design conference, in warm earth tones with committed serif display type." loading="lazy" width="864" height="1821" />
|
||
</a>
|
||
<figcaption class="designing-visualize-plate-cap">
|
||
<span class="designing-visualize-plate-kind">Visualize</span>
|
||
<p class="designing-visualize-plate-note">Hi-fi reference. The destination, before the first line of CSS. Craft codes toward a concrete image, not an abstract brief. That is the step change.</p>
|
||
</figcaption>
|
||
</figure>
|
||
|
||
<figure class="designing-visualize-plate designing-visualize-plate--live">
|
||
<a class="designing-visualize-plate-frame" href="/neo-mirai/" aria-label="Open the Neo Mirai live site">
|
||
<img src="../assets/cases/neo-mirai/live-page.png" alt="Full-page screenshot of the implemented Neo Mirai website." loading="lazy" width="1440" height="3013" />
|
||
</a>
|
||
<figcaption class="designing-visualize-plate-cap">
|
||
<span class="designing-visualize-plate-kind">Ship</span>
|
||
<p class="designing-visualize-plate-note">Live build. The mock became semantic markup, regenerated assets, responsive fixes, nav state, speaker carousel behavior, and browser-verified polish. <a href="/neo-mirai/">Open the live site</a>.</p>
|
||
</figcaption>
|
||
</figure>
|
||
</div>
|
||
|
||
<p class="designing-visualize-foot">The first two plates were generated by <strong>OpenAI GPT Image 2</strong>. The third is the implemented Neo Mirai page. <strong>Gemini Nano Banana Pro</strong>, <strong>Imagen 4 Ultra</strong>, and <strong>Grok Imagen</strong> work the same way, via Codex, Gemini CLI, and compatible harnesses.</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="designing-phase" id="iterate">
|
||
<header class="designing-phase-head">
|
||
<span class="designing-phase-num">02 · Iterate</span>
|
||
<h2 class="designing-phase-title">Refine what's there.</h2>
|
||
<p class="designing-phase-sub">Once something exists, you're iterating. There are two paths: specific commands for named dimensions, or Live Mode for visual exploration.</p>
|
||
</header>
|
||
|
||
<div class="designing-phase-body">
|
||
<div class="designing-iterate-split">
|
||
<div class="designing-iterate-col">
|
||
<span class="designing-iterate-kind">Command line</span>
|
||
<h3 class="designing-iterate-name">When the edit has a name.</h3>
|
||
<p class="designing-iterate-when">Type a command and let the skill encode a specific discipline. Best when you know the word: typography, layout, color, motion.</p>
|
||
<div class="designing-iterate-terminal" aria-hidden="true">
|
||
<div class="designing-iterate-terminal-line"><span class="designing-iterate-terminal-prompt">$</span><span>/impeccable polish pricing</span></div>
|
||
<div class="designing-iterate-terminal-line"><span class="designing-iterate-terminal-prompt">$</span><span>/impeccable bolder hero</span></div>
|
||
<div class="designing-iterate-terminal-line"><span class="designing-iterate-terminal-prompt">$</span><span>/impeccable typeset checkout</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="designing-iterate-col">
|
||
<span class="designing-iterate-kind">Live Mode</span>
|
||
<h3 class="designing-iterate-name">When the edit is easier to point at.</h3>
|
||
<p class="designing-iterate-when">Pick any element in the browser, draw, type, hit Go. Three production-quality variants. Accept one and it writes to source.</p>
|
||
<div class="designing-iterate-live" aria-hidden="true">
|
||
<div class="docs-viz-live-frame" style="max-width:100%">
|
||
<div class="docs-viz-live-chrome">
|
||
<span class="docs-viz-live-dot"></span>
|
||
<span class="docs-viz-live-dot"></span>
|
||
<span class="docs-viz-live-dot"></span>
|
||
<span class="docs-viz-live-url">localhost:3000</span>
|
||
</div>
|
||
<div class="docs-viz-live-stage">
|
||
<div class="docs-viz-live-target">
|
||
<span class="docs-viz-live-kicker">No. 04</span>
|
||
<h4 class="docs-viz-live-title">Letters, <em>occasionally</em>.</h4>
|
||
<button class="docs-viz-live-btn" type="button">Send me one</button>
|
||
</div>
|
||
<div class="docs-viz-live-outline"></div>
|
||
<div class="docs-viz-live-ctx">
|
||
<button class="docs-viz-live-ctx-nav" type="button">‹</button>
|
||
<span class="docs-viz-live-ctx-counter">2 / 3</span>
|
||
<button class="docs-viz-live-ctx-nav" type="button">›</button>
|
||
<span class="docs-viz-live-ctx-divider"></span>
|
||
<button class="docs-viz-live-ctx-accept" type="button">Accept</button>
|
||
</div>
|
||
<div class="docs-viz-live-gbar">
|
||
<span class="docs-viz-live-gbar-brand">/</span>
|
||
<span class="docs-viz-live-gbar-btn is-active">Pick</span>
|
||
<span class="docs-viz-live-gbar-divider"></span>
|
||
<span class="docs-viz-live-gbar-x">✕</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<table class="designing-iterate-table">
|
||
<caption>When to reach for which</caption>
|
||
<tbody>
|
||
<tr>
|
||
<th scope="row">Fix something "off" that you can't name</th>
|
||
<td><a href="/live-mode">/impeccable live</a></td>
|
||
</tr>
|
||
<tr>
|
||
<th scope="row">Apply a specific discipline: type, layout, color, motion</th>
|
||
<td><a href="/docs/typeset">/typeset</a> · <a href="/docs/layout">/layout</a> · <a href="/docs/colorize">/colorize</a> · <a href="/docs/animate">/animate</a></td>
|
||
</tr>
|
||
<tr>
|
||
<th scope="row">Explore three directions side by side</th>
|
||
<td><a href="/live-mode">/impeccable live</a></td>
|
||
</tr>
|
||
<tr>
|
||
<th scope="row">Ask "is this any good?"</th>
|
||
<td><a href="/docs/critique">/impeccable critique</a></td>
|
||
</tr>
|
||
<tr>
|
||
<th scope="row">Bring a safe design to life, or tone a shouting one down</th>
|
||
<td><a href="/docs/bolder">/bolder</a> · <a href="/docs/quieter">/quieter</a></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="designing-phase" id="polish">
|
||
<header class="designing-phase-head">
|
||
<span class="designing-phase-num">03 · Polish</span>
|
||
<h2 class="designing-phase-title">The pre-ship gauntlet.</h2>
|
||
<p class="designing-phase-sub">Three commands in sequence before anything ships. They don't redesign; they find what still needs to change.</p>
|
||
</header>
|
||
|
||
<div class="designing-phase-body">
|
||
<div class="designing-polish">
|
||
<div class="designing-polish-band">
|
||
<span class="designing-polish-band-label">Pre-ship</span>
|
||
<div class="designing-polish-band-cmds">
|
||
<a href="/docs/audit">audit</a>
|
||
<a href="/docs/clarify">clarify</a>
|
||
<a href="/docs/harden">harden</a>
|
||
</div>
|
||
<span class="designing-polish-band-meta">03 · 04</span>
|
||
</div>
|
||
<div class="designing-polish-grid">
|
||
<div class="designing-polish-col">
|
||
<h3 class="designing-polish-name">Score it.</h3>
|
||
<p class="designing-polish-desc">Five dimensions scored 0 to 4: accessibility, performance, theming, responsive, anti-patterns. Findings tagged P0 to P3.</p>
|
||
</div>
|
||
<div class="designing-polish-col">
|
||
<h3 class="designing-polish-name">Rewrite the copy.</h3>
|
||
<p class="designing-polish-desc">Labels, error messages, empty-state prose, microcopy. Tuned to the audience from PRODUCT.md.</p>
|
||
</div>
|
||
<div class="designing-polish-col">
|
||
<h3 class="designing-polish-name">Stress-test reality.</h3>
|
||
<p class="designing-polish-desc">60-character names, German product titles, prices in the billions, 500s, offline. Production data is messy.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="designing-phase" id="maintain">
|
||
<header class="designing-phase-head">
|
||
<span class="designing-phase-num">04 · Maintain</span>
|
||
<h2 class="designing-phase-title">Design debt is real. Pay it down.</h2>
|
||
<p class="designing-phase-sub">Features ship, drift happens. Two commands close the gap before it solidifies.</p>
|
||
</header>
|
||
|
||
<div class="designing-phase-body">
|
||
<div class="designing-maintain">
|
||
<figure class="designing-maintain-tile">
|
||
<div class="designing-maintain-stage">
|
||
<div class="designing-extract-viz" aria-hidden="true">
|
||
<div class="designing-extract-before">
|
||
<span class="designing-extract-btn">Subscribe</span>
|
||
<span class="designing-extract-btn">Submit</span>
|
||
<span class="designing-extract-btn">Join</span>
|
||
<span class="designing-extract-btn">Send</span>
|
||
<span class="designing-extract-btn">Go</span>
|
||
<span class="designing-extract-btn">OK</span>
|
||
</div>
|
||
<span class="designing-extract-arrow">→</span>
|
||
<span class="designing-extract-after">Button</span>
|
||
</div>
|
||
</div>
|
||
<figcaption class="designing-maintain-caption">
|
||
<span class="designing-maintain-label"><a href="/docs/extract">/impeccable extract</a></span>
|
||
<h3 class="designing-maintain-name">Consolidate drift.</h3>
|
||
<p class="designing-maintain-desc">Find patterns used three or more times with the same intent. Propose tokens and primitives.</p>
|
||
</figcaption>
|
||
</figure>
|
||
|
||
<figure class="designing-maintain-tile">
|
||
<div class="designing-maintain-stage">
|
||
<div class="designing-designmd-preview" aria-hidden="true">
|
||
<div class="designing-designmd-preview-line"><span class="designing-designmd-preview-num">01</span><span>Overview</span></div>
|
||
<div class="designing-designmd-preview-line"><span class="designing-designmd-preview-num">02</span><span>Colors</span></div>
|
||
<div class="designing-designmd-preview-line"><span class="designing-designmd-preview-num">03</span><span>Typography</span></div>
|
||
<div class="designing-designmd-preview-line"><span class="designing-designmd-preview-num">04</span><span>Elevation</span></div>
|
||
<div class="designing-designmd-preview-line"><span class="designing-designmd-preview-num">05</span><span>Components</span></div>
|
||
<div class="designing-designmd-preview-line"><span class="designing-designmd-preview-num">06</span><span>Do's & Don'ts</span></div>
|
||
</div>
|
||
</div>
|
||
<figcaption class="designing-maintain-caption">
|
||
<span class="designing-maintain-label"><a href="/docs/document">/impeccable document</a></span>
|
||
<h3 class="designing-maintain-name">Re-capture the system.</h3>
|
||
<p class="designing-maintain-desc">Scans tokens, components, and rendered output. Writes a spec-compliant DESIGN.md.</p>
|
||
</figcaption>
|
||
</figure>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="designing-phase designing-phase--appendix" aria-label="Brand or product lane">
|
||
<header class="designing-phase-head">
|
||
<span class="designing-phase-num">Two lanes</span>
|
||
<h2 class="designing-phase-title">Brand, or product.</h2>
|
||
<p class="designing-phase-sub">Two defaults with different vocabularies. Impeccable picks the lane from your task cue and <code>PRODUCT.md</code> before every command, so <code>typeset</code>, <code>animate</code>, <code>colorize</code>, and friends adjust their output to match. You rarely need to set it by hand.</p>
|
||
</header>
|
||
|
||
<div class="designing-phase-body">
|
||
<div class="designing-lanes">
|
||
<section class="designing-lane">
|
||
<span class="designing-lane-kind">Brand</span>
|
||
<p class="designing-lane-rule">Design IS the product. Marketing, landing, editorial, long-form, portfolio.</p>
|
||
<div class="designing-lane-mock designing-lane-mock--brand" aria-hidden="true">
|
||
<span class="designing-lane-mock-label">No. 04 · Dispatch</span>
|
||
<span class="designing-lane-mock-title">Letters, occasionally.</span>
|
||
</div>
|
||
</section>
|
||
<section class="designing-lane">
|
||
<span class="designing-lane-kind">Product</span>
|
||
<p class="designing-lane-rule">Design serves the task. App UI, admin, dashboards, tools.</p>
|
||
<div class="designing-lane-mock designing-lane-mock--product" aria-hidden="true">
|
||
<span class="designing-lane-mock-label">Newsletter</span>
|
||
<span class="designing-lane-mock-title">Subscribe to updates</span>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
<a class="designing-lane-link" href="/tutorials/brand-vs-product">Read the brand-vs-product tutorial →</a>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="designing-phase designing-phase--appendix" aria-label="What to avoid">
|
||
<header class="designing-phase-head">
|
||
<span class="designing-phase-num">Common mistakes</span>
|
||
<h2 class="designing-phase-title">What to avoid.</h2>
|
||
<p class="designing-phase-sub">An anti-patterns list, for using the anti-patterns tool.</p>
|
||
</header>
|
||
|
||
<div class="designing-phase-body">
|
||
<ul class="designing-avoid">
|
||
<li>
|
||
<span class="designing-avoid-x" aria-hidden="true">×</span>
|
||
<div>
|
||
<span class="designing-avoid-title">Running both Impeccable and Anthropic's frontend-design skill</span>
|
||
<p class="designing-avoid-desc">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.</p>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<span class="designing-avoid-x" aria-hidden="true">×</span>
|
||
<div>
|
||
<span class="designing-avoid-title">Pinning every command</span>
|
||
<p class="designing-avoid-desc">Pinning brings back <code>/audit</code>, <code>/polish</code>, <code>/critique</code> as shortcuts. Pin everything and you've re-exploded the <code>/</code> menu the v3.0 consolidation cleaned up. Pin the two or three you reach for daily.</p>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<span class="designing-avoid-x" aria-hidden="true">×</span>
|
||
<div>
|
||
<span class="designing-avoid-title">Skipping <code>teach</code></span>
|
||
<p class="designing-avoid-desc">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.</p>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<span class="designing-avoid-x" aria-hidden="true">×</span>
|
||
<div>
|
||
<span class="designing-avoid-title">Treating it like a linter</span>
|
||
<p class="designing-avoid-desc">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.</p>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</section>
|
||
|
||
<nav class="designing-cta" aria-label="Where to go next">
|
||
<a class="designing-cta-card" href="/docs/teach">
|
||
<span class="designing-cta-card-kind">New project</span>
|
||
<h2 class="designing-cta-card-title">Start with <em>teach</em></h2>
|
||
<p class="designing-cta-card-desc">Five minutes of discovery, one PRODUCT.md, one DESIGN.md. Every command downstream gets sharper from here.</p>
|
||
</a>
|
||
<a class="designing-cta-card" href="/tutorials">
|
||
<span class="designing-cta-card-kind">Walk a scenario</span>
|
||
<h2 class="designing-cta-card-title">Open a <em>tutorial</em></h2>
|
||
<p class="designing-cta-card-desc">Four short walkthroughs of the highest-leverage flows: getting started, Live Mode, critique with the overlay, brand vs product.</p>
|
||
</a>
|
||
</nav>
|
||
</div>
|
||
</main>
|
||
<script>
|
||
// Copy buttons on rendered code blocks
|
||
document.addEventListener('click', (e) => {
|
||
const btn = e.target.closest('[data-copy]');
|
||
if (!btn) return;
|
||
const text = btn.getAttribute('data-copy');
|
||
if (!text) return;
|
||
navigator.clipboard.writeText(text).then(() => {
|
||
btn.classList.add('is-copied');
|
||
setTimeout(() => btn.classList.remove('is-copied'), 1500);
|
||
}).catch(() => {});
|
||
});
|
||
|
||
// Mobile sidebar toggle (shown on narrow viewports, hidden on desktop).
|
||
document.addEventListener('click', (e) => {
|
||
const toggle = e.target.closest('.skills-sidebar-toggle');
|
||
if (!toggle) return;
|
||
const expanded = toggle.getAttribute('aria-expanded') === 'true';
|
||
toggle.setAttribute('aria-expanded', String(!expanded));
|
||
});
|
||
|
||
// Before/after split-compare: drag on touch, hover OR drag on mouse.
|
||
// Pointer events attach to the padded .split-comparison wrapper so
|
||
// there is a ~20px invisible buffer around the visible box. The
|
||
// divider only snaps back when the pointer leaves that outer buffer.
|
||
(function initSplitCompare() {
|
||
const wrappers = document.querySelectorAll('.split-comparison');
|
||
if (wrappers.length === 0) return;
|
||
const hasHover = matchMedia('(hover: hover)').matches;
|
||
const DEFAULT_POSITION = 50;
|
||
|
||
for (const wrapper of wrappers) {
|
||
const container = wrapper.querySelector('.split-container');
|
||
const splitAfter = wrapper.querySelector('.split-after');
|
||
const splitDivider = wrapper.querySelector('.split-divider');
|
||
if (!container || !splitAfter || !splitDivider) continue;
|
||
|
||
const tanAngle = Math.tan(10 * Math.PI / 180);
|
||
let skewOffset = 8;
|
||
const recalcSkew = () => {
|
||
const r = container.getBoundingClientRect();
|
||
if (r.width > 0 && r.height > 0) {
|
||
skewOffset = 50 * r.height * tanAngle / r.width;
|
||
}
|
||
};
|
||
recalcSkew();
|
||
window.addEventListener('resize', recalcSkew, { passive: true });
|
||
|
||
let targetX = DEFAULT_POSITION;
|
||
let currentX = DEFAULT_POSITION;
|
||
let rafId = null;
|
||
|
||
const paint = (pct) => {
|
||
const x = Math.max(-skewOffset, Math.min(100 + skewOffset, pct));
|
||
splitAfter.style.clipPath =
|
||
`polygon(${x + skewOffset}% 0%, 100% 0%, 100% 100%, ${x - skewOffset}% 100%)`;
|
||
splitDivider.style.left = `${x}%`;
|
||
};
|
||
|
||
const step = () => {
|
||
currentX += (targetX - currentX) * 0.2;
|
||
if (Math.abs(targetX - currentX) < 0.1) {
|
||
currentX = targetX;
|
||
rafId = null;
|
||
} else {
|
||
rafId = requestAnimationFrame(step);
|
||
}
|
||
paint(currentX);
|
||
};
|
||
|
||
const setTarget = (pct) => {
|
||
targetX = pct;
|
||
if (rafId === null) rafId = requestAnimationFrame(step);
|
||
};
|
||
|
||
paint(DEFAULT_POSITION);
|
||
|
||
// Percentage is always relative to the VISIBLE .split-container,
|
||
// not the padded .split-comparison wrapper. The pointer event
|
||
// target is the wrapper but the clip-path math uses the inner box.
|
||
const pctFromClientX = (clientX) => {
|
||
const rect = container.getBoundingClientRect();
|
||
return ((clientX - rect.left) / rect.width) * 100;
|
||
};
|
||
|
||
let hovering = false;
|
||
let dragging = false;
|
||
|
||
wrapper.addEventListener('pointerenter', (e) => {
|
||
if (hasHover && e.pointerType === 'mouse') {
|
||
hovering = true;
|
||
}
|
||
});
|
||
|
||
wrapper.addEventListener('pointerdown', (e) => {
|
||
dragging = true;
|
||
wrapper.setPointerCapture(e.pointerId);
|
||
setTarget(pctFromClientX(e.clientX));
|
||
});
|
||
|
||
wrapper.addEventListener('pointermove', (e) => {
|
||
if (dragging || hovering) {
|
||
setTarget(pctFromClientX(e.clientX));
|
||
}
|
||
});
|
||
|
||
const endDrag = (e) => {
|
||
if (dragging) {
|
||
dragging = false;
|
||
try { wrapper.releasePointerCapture(e.pointerId); } catch {}
|
||
}
|
||
};
|
||
|
||
wrapper.addEventListener('pointerup', endDrag);
|
||
wrapper.addEventListener('pointercancel', endDrag);
|
||
|
||
wrapper.addEventListener('pointerleave', (e) => {
|
||
endDrag(e);
|
||
if (hovering) {
|
||
hovering = false;
|
||
setTarget(DEFAULT_POSITION);
|
||
}
|
||
});
|
||
}
|
||
})();
|
||
</script>
|
||
</body>
|
||
</html>
|