skills/pbakaus_impeccable
1
0
Fork 0
mirror of https://github.com/pbakaus/impeccable.git synced 2026-09-13 06:36:26 +03:00
Code Issues Packages Projects Releases Wiki Activity

feat(site): foreground visualize-first workflow on /designing + Case carousel

Browse Source 
/designing §01 is reframed around the words → pictures → code arc.
The phase sub covers teach, shape, and craft in one breath; the body
splits into two labeled micro-steps ("teach · in words" and
"shape + craft · in pictures") so the new image-gen spread reads as
step 2 of the same flow instead of a separate topic. Generated plates
from GPT Image 2 sit as an editorial two-up beside their brand and
hi-fi captions. Also fixes a long-standing font-size mismatch where
<code> inside .designing-phase-sub fell back to the browser's default
monospace.

Homepage: inserts a new "Visualize, then build" slot at position 02 of
The Case carousel, compact two-plate visual, shifts the remaining
eight slots to 03-09.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Paul Bakaus
2026-04-23 13:32:32 -07:00
co-authored by Claude Opus 4.7
parent df72ca2a58
commit 37f79cd013
7 changed files with 290 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/assets/openai_image_2_brand.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 212 KiB

public/assets/openai_image_2_hifi.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 217 KiB

public/css/docs-visuals.css
+112 -37
View File
@@ -2034,6 +2034,12 @@
max-width: 60ch;
}
.designing-phase-sub code {
font-family: var(--font-mono);
font-size: 0.875em;
color: var(--color-ink);
}
.designing-phase--appendix .designing-phase-sub {
font-size: 0.9375rem;
max-width: 64ch;
@@ -2106,27 +2112,92 @@
color: var(--color-accent);
}
/* Codex aside — quieter, pull-quote shape, not a card */
.designing-codex {
margin-top: var(--spacing-xl, 48px);
padding: var(--spacing-md, 24px) 0 var(--spacing-md, 24px) var(--spacing-md, 24px);
border-left: 2px solid var(--color-accent);
display: grid;
grid-template-columns: auto 1fr;
column-gap: var(--spacing-md, 24px);
row-gap: 6px;
align-items: baseline;
/* Start-phase flow — two step blocks ("in words", "in pictures")
under the single 01 · Start header. Step labels carry the
narrative; no competing display headings inside the body. */
.designing-start {
display: flex;
flex-direction: column;
gap: var(--spacing-2xl, 80px);
}
@media (max-width: 640px) {
.designing-codex {
.designing-start-step-label {
display: flex;
align-items: center;
gap: var(--spacing-md, 24px);
font-family: var(--font-mono);
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--color-accent);
margin: 0 0 var(--spacing-md, 24px) 0;
}
.designing-start-step-label::after {
content: "";
flex: 1;
height: 1px;
background: var(--color-mist);
}
.designing-start-step-note {
font-family: var(--font-body);
font-size: 1rem;
line-height: 1.7;
color: var(--color-ink);
margin: 0 0 var(--spacing-lg, 32px) 0;
max-width: 64ch;
}
.designing-start-step-note code {
font-family: var(--font-mono);
font-size: 0.875rem;
color: var(--color-accent);
}
.designing-visualize-spread {
display: grid;
grid-template-columns: 1.35fr 1fr;
gap: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2.5rem);
align-items: start;
}
@media (max-width: 880px) {
.designing-visualize-spread {
grid-template-columns: 1fr;
}
}
.designing-codex-eyebrow {
.designing-visualize-plate {
margin: 0;
display: flex;
flex-direction: column;
gap: var(--spacing-md, 24px);
}
.designing-visualize-plate-frame {
background: var(--color-cream);
border: 1px solid var(--color-mist);
overflow: hidden;
}
.designing-visualize-plate-frame img {
display: block;
width: 100%;
height: auto;
}
.designing-visualize-plate-cap {
display: grid;
grid-template-columns: auto 1fr;
column-gap: var(--spacing-md, 24px);
align-items: baseline;
}
.designing-visualize-plate-kind {
font-family: var(--font-mono);
font-size: 0.625rem;
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
@@ -2135,40 +2206,44 @@
padding-top: 2px;
}
.designing-codex-body {
.designing-visualize-plate-note {
font-family: var(--font-body);
font-weight: 400;
font-size: 1rem;
line-height: 1.7;
color: var(--color-ink);
font-size: 0.9375rem;
line-height: 1.65;
color: var(--color-charcoal);
margin: 0;
max-width: 56ch;
max-width: 48ch;
}
.designing-codex-body code,
.designing-codex-body strong {
font-family: inherit;
font-weight: inherit;
font-size: inherit;
background: transparent;
color: inherit;
padding: 0;
}
.designing-codex-hosts {
grid-column: 2;
.designing-visualize-plate-note code {
font-family: var(--font-mono);
font-size: 0.75rem;
color: var(--color-ash);
margin-top: 8px;
font-size: 0.8125rem;
color: var(--color-ink);
}
@media (max-width: 640px) {
.designing-codex-hosts {
grid-column: 1;
.designing-visualize-plate-cap {
grid-template-columns: 1fr;
row-gap: 8px;
}
}
.designing-visualize-foot {
margin: var(--spacing-xl, 48px) 0 0 0;
padding-top: var(--spacing-md, 24px);
border-top: 1px solid var(--color-mist);
font-family: var(--font-body);
font-size: 0.8125rem;
line-height: 1.7;
color: var(--color-ash);
max-width: 72ch;
}
.designing-visualize-foot strong {
font-weight: 500;
color: var(--color-charcoal);
}
/* ============================================
PHASE 2 — Iterate
============================================ */
public/css/workflow.css
+51
View File
@@ -2835,6 +2835,57 @@
margin-top: -2px;
}
/* ─ Panel: Visualize, then build — two plates from GPT Image 2 ─ */
.why-visual--vizfirst {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
align-items: start;
padding: 0;
overflow: visible;
}
.why-vz-plate {
margin: 0;
display: flex;
flex-direction: column;
gap: 8px;
min-width: 0;
}
.why-vz-plate-kind {
font-family: var(--font-mono);
font-size: 0.625rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--color-accent);
}
.why-vz-plate-frame {
background: var(--color-cream);
border: 1px solid var(--color-mist);
overflow: hidden;
height: 240px;
}
.why-vz-plate-frame img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center;
}
@media (max-width: 720px) {
.why-visual--vizfirst {
gap: 12px;
}
.why-vz-plate-frame {
height: 240px;
}
}
/* ============================================
LANGUAGE section — Palette / Periodic tabs
public/designing/index.html
+59 -34
View File
@@ -27,9 +27,8 @@
<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="/anti-patterns" data-nav="anti-patterns">Anti-Patterns</a>
<a href="/slop" data-nav="slop">Slop</a>
<a href="/live-mode" data-nav="live">Live</a>
<a href="/visual-mode" data-nav="visual-mode">Overlay</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>
@@ -108,50 +107,76 @@
<header class="designing-phase-head">
<span class="designing-phase-num">01 &middot; Start</span>
<h2 class="designing-phase-title">From a blank file to a designed feature.</h2>
<p class="designing-phase-sub">Run <code>/impeccable teach</code> once per project to establish PRODUCT.md and DESIGN.md. Then reach for <code>/impeccable craft</code> and describe what you want to build. Shape, build, and iterate happen inside one invocation.</p>
<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/craft">/impeccable craft</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">
<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 class="designing-phase-body designing-start">
<div class="designing-start-step">
<span class="designing-start-step-label">teach &middot; 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-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 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>
<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>.</p>
<p>From that point on, every command reads both files before generating. Craft, polish, critique, live, all of them.</p>
<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>
<aside class="designing-codex">
<span class="designing-codex-eyebrow">A note on image-gen</span>
<p class="designing-codex-body">Harnesses that can generate images take this further. On Codex and Gemini, craft generates reference visuals first, then implements from them. The mood board is built into the flow, not a separate step you have to remember.</p>
</aside>
<div class="designing-start-step">
<span class="designing-start-step-label">shape + craft &middot; in pictures</span>
<p class="designing-start-step-note">Since image generation crossed the reference-quality threshold, <code>shape</code> drafts a brand toolkit you can review at a glance, and <code>craft</code> codes toward a hi-fi mock instead of a paragraph.</p>
<div class="designing-visualize-spread">
<figure class="designing-visualize-plate designing-visualize-plate--brand">
<div class="designing-visualize-plate-frame">
<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" />
</div>
<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">
<div class="designing-visualize-plate-frame">
<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" />
</div>
<figcaption class="designing-visualize-plate-cap">
<span class="designing-visualize-plate-kind">Craft</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>
</div>
<p class="designing-visualize-foot">Plates generated by <strong>OpenAI GPT Image 2</strong>. <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>
public/index.html
+32 -7
View File
@@ -88,6 +88,8 @@
<!-- Left: Title & Info -->
<div class="hero-combined-left">
<h1 class="hero-title-combined">Impeccable</h1>
<p class="hero-tagline-combined">Design fluency for AI harnesses</p>
@@ -130,6 +132,8 @@
<!-- Right: Before/After Demo -->
<div class="hero-combined-right">
<div class="split-comparison" id="lens-comparison">
@@ -250,13 +254,14 @@
<div class="why-left">
<ol class="why-tabs" role="tablist" aria-label="Reasons Impeccable is different">
<li><button role="tab" class="why-tab is-active" data-index="0" aria-selected="true" aria-controls="why-panel-0"><span class="why-tab-num">01</span><span class="why-tab-label">Intentional design</span><span class="why-tab-progress" aria-hidden="true"></span></button></li>
<li><button role="tab" class="why-tab" data-index="1" aria-selected="false" aria-controls="why-panel-1"><span class="why-tab-num">02</span><span class="why-tab-label">Prevents AI slop</span><span class="why-tab-progress" aria-hidden="true"></span></button></li>
<li><button role="tab" class="why-tab" data-index="2" aria-selected="false" aria-controls="why-panel-2"><span class="why-tab-num">03</span><span class="why-tab-label">Production codebases</span><span class="why-tab-progress" aria-hidden="true"></span></button></li>
<li><button role="tab" class="why-tab" data-index="3" aria-selected="false" aria-controls="why-panel-3"><span class="why-tab-num">04</span><span class="why-tab-label">Brand + Product design</span><span class="why-tab-progress" aria-hidden="true"></span></button></li>
<li><button role="tab" class="why-tab" data-index="4" aria-selected="false" aria-controls="why-panel-4"><span class="why-tab-num">05</span><span class="why-tab-label">Ships code, not mockups</span><span class="why-tab-progress" aria-hidden="true"></span></button></li>
<li><button role="tab" class="why-tab" data-index="5" aria-selected="false" aria-controls="why-panel-5"><span class="why-tab-num">06</span><span class="why-tab-label">Fluent in DESIGN.md</span><span class="why-tab-progress" aria-hidden="true"></span></button></li>
<li><button role="tab" class="why-tab" data-index="6" aria-selected="false" aria-controls="why-panel-6"><span class="why-tab-num">07</span><span class="why-tab-label">CI/CD-ready</span><span class="why-tab-progress" aria-hidden="true"></span></button></li>
<li><button role="tab" class="why-tab" data-index="7" aria-selected="false" aria-controls="why-panel-7"><span class="why-tab-num">08</span><span class="why-tab-label">Chrome extension</span><span class="why-tab-progress" aria-hidden="true"></span></button></li>
<li><button role="tab" class="why-tab" data-index="vz" aria-selected="false" aria-controls="why-panel-vz"><span class="why-tab-num">02</span><span class="why-tab-label">Visualize, then build</span><span class="why-tab-progress" aria-hidden="true"></span></button></li>
<li><button role="tab" class="why-tab" data-index="1" aria-selected="false" aria-controls="why-panel-1"><span class="why-tab-num">03</span><span class="why-tab-label">Prevents AI slop</span><span class="why-tab-progress" aria-hidden="true"></span></button></li>
<li><button role="tab" class="why-tab" data-index="2" aria-selected="false" aria-controls="why-panel-2"><span class="why-tab-num">04</span><span class="why-tab-label">Production codebases</span><span class="why-tab-progress" aria-hidden="true"></span></button></li>
<li><button role="tab" class="why-tab" data-index="3" aria-selected="false" aria-controls="why-panel-3"><span class="why-tab-num">05</span><span class="why-tab-label">Brand + Product design</span><span class="why-tab-progress" aria-hidden="true"></span></button></li>
<li><button role="tab" class="why-tab" data-index="4" aria-selected="false" aria-controls="why-panel-4"><span class="why-tab-num">06</span><span class="why-tab-label">Ships code, not mockups</span><span class="why-tab-progress" aria-hidden="true"></span></button></li>
<li><button role="tab" class="why-tab" data-index="5" aria-selected="false" aria-controls="why-panel-5"><span class="why-tab-num">07</span><span class="why-tab-label">Fluent in DESIGN.md</span><span class="why-tab-progress" aria-hidden="true"></span></button></li>
<li><button role="tab" class="why-tab" data-index="6" aria-selected="false" aria-controls="why-panel-6"><span class="why-tab-num">08</span><span class="why-tab-label">CI/CD-ready</span><span class="why-tab-progress" aria-hidden="true"></span></button></li>
<li><button role="tab" class="why-tab" data-index="7" aria-selected="false" aria-controls="why-panel-7"><span class="why-tab-num">09</span><span class="why-tab-label">Chrome extension</span><span class="why-tab-progress" aria-hidden="true"></span></button></li>
</ol>
</div>
@@ -298,6 +303,26 @@
</div>
</article>
<article class="why-panel why-panel--vizfirst" id="why-panel-vz" role="tabpanel" data-index="vz" hidden>
<h3 class="why-panel-title">Picture it before you build it.</h3>
<p class="why-panel-body">Image gen crossed the reference-quality threshold with <em>GPT Image 2</em>, <em>Nano Banana Pro</em>, and <em>Imagen 4 Ultra</em>. <code>/impeccable shape</code> drafts a brand toolkit; <code>/impeccable craft</code> codes toward a hi-fi mock. The mood board lives inside the flow.</p>
<div class="why-visual why-visual--vizfirst">
<figure class="why-vz-plate why-vz-plate--brand">
<span class="why-vz-plate-kind">Shape &middot; brand toolkit</span>
<div class="why-vz-plate-frame">
<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" />
</div>
</figure>
<figure class="why-vz-plate why-vz-plate--hifi">
<span class="why-vz-plate-kind">Craft &middot; hi-fi reference</span>
<div class="why-vz-plate-frame">
<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" />
</div>
</figure>
</div>
<p class="why-panel-meta">Plates generated by GPT Image 2 via Codex. &middot; <a href="/designing#start">See the workflow &rarr;</a></p>
</article>
<article class="why-panel why-panel--antidote" id="why-panel-1" role="tabpanel" data-index="1" hidden>
<h3 class="why-panel-title">Every model learned from the same slop.</h3>
<p class="why-panel-body">Without intervention, they all produce the same predictable mistakes: purple gradients, nested cards, gradient text, low-contrast labels. Impeccable names 25 of them, detects them in your code and in the browser, and teaches the AI to avoid them.</p>
scripts/build-sub-pages.js
+36 -37
View File
@@ -975,7 +975,7 @@ function renderDesigningMain() {
<header class="designing-phase-head">
<span class="designing-phase-num">01 &middot; Start</span>
<h2 class="designing-phase-title">From a blank file to a designed feature.</h2>
<p class="designing-phase-sub">Run <code>/impeccable teach</code> once per project to establish PRODUCT.md and DESIGN.md. Then reach for <code>/impeccable craft</code> and describe what you want to build. Shape, build, and iterate happen inside one invocation.</p>
<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>
@@ -983,49 +983,48 @@ function renderDesigningMain() {
</div>
</header>
<div class="designing-phase-body">
<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 class="designing-phase-body designing-start">
<div class="designing-start-step">
<span class="designing-start-step-label">teach &middot; 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-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 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>
<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>.</p>
<p>From that point on, every command reads both files before generating. Craft, polish, critique, live, all of them.</p>
<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>
<aside class="designing-visualize" aria-label="Visualize-first workflow with image generation">
<header class="designing-visualize-head">
<span class="designing-visualize-eyebrow">The new start</span>
<h3 class="designing-visualize-title">Shape in pictures. <em>Craft</em> from them.</h3>
<p class="designing-visualize-lede">Image generation is finally good enough to serve as a design brief. <code>/impeccable shape</code> drafts a brand toolkit you can review at a glance. <code>/impeccable craft</code> codes toward a hi-fi mock instead of a paragraph. The mood board lives inside the flow, on any harness that can generate images.</p>
</header>
<div class="designing-start-step">
<span class="designing-start-step-label">shape + craft &middot; in pictures</span>
<p class="designing-start-step-note">Since image generation crossed the reference-quality threshold, <code>shape</code> drafts a brand toolkit you can review at a glance, and <code>craft</code> codes toward a hi-fi mock instead of a paragraph.</p>
<div class="designing-visualize-spread">
<figure class="designing-visualize-plate designing-visualize-plate--brand">
<div class="designing-visualize-plate-frame">
<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="1280" height="854" />
<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" />
</div>
<figcaption class="designing-visualize-plate-cap">
<span class="designing-visualize-plate-kind">Shape</span>
@@ -1035,7 +1034,7 @@ function renderDesigningMain() {
<figure class="designing-visualize-plate designing-visualize-plate--hifi">
<div class="designing-visualize-plate-frame">
<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="960" height="1280" />
<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" />
</div>
<figcaption class="designing-visualize-plate-cap">
<span class="designing-visualize-plate-kind">Craft</span>
@@ -1044,8 +1043,8 @@ function renderDesigningMain() {
</figure>
</div>
<p class="designing-visualize-foot">Plates above generated by <strong>OpenAI GPT Image 2</strong> in a single pass. <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>
</aside>
<p class="designing-visualize-foot">Plates generated by <strong>OpenAI GPT Image 2</strong>. <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>