diff --git a/public/assets/openai_image_2_brand.jpg b/public/assets/openai_image_2_brand.jpg new file mode 100644 index 000000000..121494228 Binary files /dev/null and b/public/assets/openai_image_2_brand.jpg differ diff --git a/public/assets/openai_image_2_hifi.jpg b/public/assets/openai_image_2_hifi.jpg new file mode 100644 index 000000000..dbff26890 Binary files /dev/null and b/public/assets/openai_image_2_hifi.jpg differ diff --git a/public/css/docs-visuals.css b/public/css/docs-visuals.css index 15ff073ce..65af36bec 100644 --- a/public/css/docs-visuals.css +++ b/public/css/docs-visuals.css @@ -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 ============================================ */ diff --git a/public/css/workflow.css b/public/css/workflow.css index e9d167b84..a81706c07 100644 --- a/public/css/workflow.css +++ b/public/css/workflow.css @@ -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 diff --git a/public/designing/index.html b/public/designing/index.html index 251705395..5194e18c2 100644 --- a/public/designing/index.html +++ b/public/designing/index.html @@ -27,9 +27,8 @@ Home Designing Docs - Anti-Patterns + Slop Live - Overlay @@ -108,50 +107,76 @@
01 · Start

From a blank file to a designed feature.

-

Run /impeccable teach once per project to establish PRODUCT.md and DESIGN.md. Then reach for /impeccable craft and describe what you want to build. Shape, build, and iterate happen inside one invocation.

+

Three commands, one arc. /impeccable teach writes the brief, once per project. /impeccable shape drafts a reference you can look at. /impeccable craft codes toward what you can see. Words, then pictures, then code.

/impeccable teach - /impeccable craft /impeccable shape + /impeccable craft
-
-
-
-
- PRODUCT.md - Written by teach -
-
-
- Register - Product. Design serves the task. +
+
+ teach · in words +
+
+
+ PRODUCT.md + Written by teach
-
- Users - SREs on call, reading fast, often in the dark. -
-
- Voice - Calm, clinical, no hype. -
-
- Anti-references - Purple gradients. Glassmorphism. Hype. +
+
+ Register + Product. Design serves the task. +
+
+ Users + SREs on call, reading fast, often in the dark. +
+
+ Voice + Calm, clinical, no hype. +
+
+ Anti-references + Purple gradients. Glassmorphism. Hype. +
-
-
-

Teach runs a short discovery interview about audience, register, voice, and anti-references. It writes PRODUCT.md and, if there's code to scan, a DESIGN.md.

-

From that point on, every command reads both files before generating. Craft, polish, critique, live, all of them.

+
+

Teach runs a short discovery interview about audience, register, voice, and anti-references. It writes PRODUCT.md and, if there's code to scan, a DESIGN.md. Every later command reads both files before generating.

+
- +
+ shape + craft · in pictures +

Since image generation crossed the reference-quality threshold, shape drafts a brand toolkit you can review at a glance, and craft codes toward a hi-fi mock instead of a paragraph.

+ +
+
+
+ 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. +
+
+ Shape +

Brand toolkit. Identity, palette, type, icon language, applications, social tiles, UI direction. One plate, reviewable at a glance. Approved decisions get written into DESIGN.md.

+
+
+ +
+
+ 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. +
+
+ Craft +

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.

+
+
+
+ +

Plates generated by OpenAI GPT Image 2. Gemini Nano Banana Pro, Imagen 4 Ultra, and Grok Imagen work the same way, via Codex, Gemini CLI, and compatible harnesses.

+
diff --git a/public/index.html b/public/index.html index 6dedd6be4..ddd827708 100644 --- a/public/index.html +++ b/public/index.html @@ -88,6 +88,8 @@ + +

Impeccable

Design fluency for AI harnesses

@@ -130,6 +132,8 @@ + +
@@ -250,13 +254,14 @@
    2. -
    3. -
    4. -
    5. -
    6. -
    7. -
    8. -
    9. +
    10. +
    11. +
    12. +
    13. +
    14. +
    15. +
    16. +
@@ -298,6 +303,26 @@
+ +