diff --git a/.agents/skills/impeccable/reference/craft.md b/.agents/skills/impeccable/reference/craft.md index 45249f46c..a2d2eda4c 100644 --- a/.agents/skills/impeccable/reference/craft.md +++ b/.agents/skills/impeccable/reference/craft.md @@ -2,6 +2,18 @@ Build a feature with impeccable UX and UI quality through a structured process: shape the design, load the right references, then build and iterate visually until the result is delightful. +## Real Example: Neon Mirai + +Neon Mirai is the full craft loop in public. A retro-futurist AI design conference started with generated brand and hi-fi reference images, then shipped as a responsive static site in `public/neon-mirai`. + +Repro command: + +```bash +$impeccable craft retro-futurist AI design conference website +``` + +The important detail is the artifact chain: brand toolkit, north-star mock, semantic implementation, regenerated assets, browser iteration, responsive fixes. The mock was not treated as a screenshot to trace. It was used as direction for a real page. + ## Step 1: Shape the Design Run $impeccable shape, passing along whatever feature description the user provided. diff --git a/.claude/skills/impeccable/reference/craft.md b/.claude/skills/impeccable/reference/craft.md index 163ca78f9..84b9e1c81 100644 --- a/.claude/skills/impeccable/reference/craft.md +++ b/.claude/skills/impeccable/reference/craft.md @@ -2,6 +2,18 @@ Build a feature with impeccable UX and UI quality through a structured process: shape the design, load the right references, then build and iterate visually until the result is delightful. +## Real Example: Neon Mirai + +Neon Mirai is the full craft loop in public. A retro-futurist AI design conference started with generated brand and hi-fi reference images, then shipped as a responsive static site in `public/neon-mirai`. + +Repro command: + +```bash +/impeccable craft retro-futurist AI design conference website +``` + +The important detail is the artifact chain: brand toolkit, north-star mock, semantic implementation, regenerated assets, browser iteration, responsive fixes. The mock was not treated as a screenshot to trace. It was used as direction for a real page. + ## Step 1: Shape the Design Run /impeccable shape, passing along whatever feature description the user provided. diff --git a/.cursor/skills/impeccable/reference/craft.md b/.cursor/skills/impeccable/reference/craft.md index 163ca78f9..84b9e1c81 100644 --- a/.cursor/skills/impeccable/reference/craft.md +++ b/.cursor/skills/impeccable/reference/craft.md @@ -2,6 +2,18 @@ Build a feature with impeccable UX and UI quality through a structured process: shape the design, load the right references, then build and iterate visually until the result is delightful. +## Real Example: Neon Mirai + +Neon Mirai is the full craft loop in public. A retro-futurist AI design conference started with generated brand and hi-fi reference images, then shipped as a responsive static site in `public/neon-mirai`. + +Repro command: + +```bash +/impeccable craft retro-futurist AI design conference website +``` + +The important detail is the artifact chain: brand toolkit, north-star mock, semantic implementation, regenerated assets, browser iteration, responsive fixes. The mock was not treated as a screenshot to trace. It was used as direction for a real page. + ## Step 1: Shape the Design Run /impeccable shape, passing along whatever feature description the user provided. diff --git a/.gemini/skills/impeccable/reference/craft.md b/.gemini/skills/impeccable/reference/craft.md index 163ca78f9..84b9e1c81 100644 --- a/.gemini/skills/impeccable/reference/craft.md +++ b/.gemini/skills/impeccable/reference/craft.md @@ -2,6 +2,18 @@ Build a feature with impeccable UX and UI quality through a structured process: shape the design, load the right references, then build and iterate visually until the result is delightful. +## Real Example: Neon Mirai + +Neon Mirai is the full craft loop in public. A retro-futurist AI design conference started with generated brand and hi-fi reference images, then shipped as a responsive static site in `public/neon-mirai`. + +Repro command: + +```bash +/impeccable craft retro-futurist AI design conference website +``` + +The important detail is the artifact chain: brand toolkit, north-star mock, semantic implementation, regenerated assets, browser iteration, responsive fixes. The mock was not treated as a screenshot to trace. It was used as direction for a real page. + ## Step 1: Shape the Design Run /impeccable shape, passing along whatever feature description the user provided. diff --git a/.github/skills/impeccable/reference/craft.md b/.github/skills/impeccable/reference/craft.md index 163ca78f9..84b9e1c81 100644 --- a/.github/skills/impeccable/reference/craft.md +++ b/.github/skills/impeccable/reference/craft.md @@ -2,6 +2,18 @@ Build a feature with impeccable UX and UI quality through a structured process: shape the design, load the right references, then build and iterate visually until the result is delightful. +## Real Example: Neon Mirai + +Neon Mirai is the full craft loop in public. A retro-futurist AI design conference started with generated brand and hi-fi reference images, then shipped as a responsive static site in `public/neon-mirai`. + +Repro command: + +```bash +/impeccable craft retro-futurist AI design conference website +``` + +The important detail is the artifact chain: brand toolkit, north-star mock, semantic implementation, regenerated assets, browser iteration, responsive fixes. The mock was not treated as a screenshot to trace. It was used as direction for a real page. + ## Step 1: Shape the Design Run /impeccable shape, passing along whatever feature description the user provided. diff --git a/.kiro/skills/impeccable/reference/craft.md b/.kiro/skills/impeccable/reference/craft.md index 163ca78f9..84b9e1c81 100644 --- a/.kiro/skills/impeccable/reference/craft.md +++ b/.kiro/skills/impeccable/reference/craft.md @@ -2,6 +2,18 @@ Build a feature with impeccable UX and UI quality through a structured process: shape the design, load the right references, then build and iterate visually until the result is delightful. +## Real Example: Neon Mirai + +Neon Mirai is the full craft loop in public. A retro-futurist AI design conference started with generated brand and hi-fi reference images, then shipped as a responsive static site in `public/neon-mirai`. + +Repro command: + +```bash +/impeccable craft retro-futurist AI design conference website +``` + +The important detail is the artifact chain: brand toolkit, north-star mock, semantic implementation, regenerated assets, browser iteration, responsive fixes. The mock was not treated as a screenshot to trace. It was used as direction for a real page. + ## Step 1: Shape the Design Run /impeccable shape, passing along whatever feature description the user provided. diff --git a/.opencode/skills/impeccable/reference/craft.md b/.opencode/skills/impeccable/reference/craft.md index 163ca78f9..84b9e1c81 100644 --- a/.opencode/skills/impeccable/reference/craft.md +++ b/.opencode/skills/impeccable/reference/craft.md @@ -2,6 +2,18 @@ Build a feature with impeccable UX and UI quality through a structured process: shape the design, load the right references, then build and iterate visually until the result is delightful. +## Real Example: Neon Mirai + +Neon Mirai is the full craft loop in public. A retro-futurist AI design conference started with generated brand and hi-fi reference images, then shipped as a responsive static site in `public/neon-mirai`. + +Repro command: + +```bash +/impeccable craft retro-futurist AI design conference website +``` + +The important detail is the artifact chain: brand toolkit, north-star mock, semantic implementation, regenerated assets, browser iteration, responsive fixes. The mock was not treated as a screenshot to trace. It was used as direction for a real page. + ## Step 1: Shape the Design Run /impeccable shape, passing along whatever feature description the user provided. diff --git a/.pi/skills/impeccable/reference/craft.md b/.pi/skills/impeccable/reference/craft.md index 163ca78f9..84b9e1c81 100644 --- a/.pi/skills/impeccable/reference/craft.md +++ b/.pi/skills/impeccable/reference/craft.md @@ -2,6 +2,18 @@ Build a feature with impeccable UX and UI quality through a structured process: shape the design, load the right references, then build and iterate visually until the result is delightful. +## Real Example: Neon Mirai + +Neon Mirai is the full craft loop in public. A retro-futurist AI design conference started with generated brand and hi-fi reference images, then shipped as a responsive static site in `public/neon-mirai`. + +Repro command: + +```bash +/impeccable craft retro-futurist AI design conference website +``` + +The important detail is the artifact chain: brand toolkit, north-star mock, semantic implementation, regenerated assets, browser iteration, responsive fixes. The mock was not treated as a screenshot to trace. It was used as direction for a real page. + ## Step 1: Shape the Design Run /impeccable shape, passing along whatever feature description the user provided. diff --git a/.rovodev/skills/impeccable/reference/craft.md b/.rovodev/skills/impeccable/reference/craft.md index 163ca78f9..84b9e1c81 100644 --- a/.rovodev/skills/impeccable/reference/craft.md +++ b/.rovodev/skills/impeccable/reference/craft.md @@ -2,6 +2,18 @@ Build a feature with impeccable UX and UI quality through a structured process: shape the design, load the right references, then build and iterate visually until the result is delightful. +## Real Example: Neon Mirai + +Neon Mirai is the full craft loop in public. A retro-futurist AI design conference started with generated brand and hi-fi reference images, then shipped as a responsive static site in `public/neon-mirai`. + +Repro command: + +```bash +/impeccable craft retro-futurist AI design conference website +``` + +The important detail is the artifact chain: brand toolkit, north-star mock, semantic implementation, regenerated assets, browser iteration, responsive fixes. The mock was not treated as a screenshot to trace. It was used as direction for a real page. + ## Step 1: Shape the Design Run /impeccable shape, passing along whatever feature description the user provided. diff --git a/.trae-cn/skills/impeccable/reference/craft.md b/.trae-cn/skills/impeccable/reference/craft.md index 163ca78f9..84b9e1c81 100644 --- a/.trae-cn/skills/impeccable/reference/craft.md +++ b/.trae-cn/skills/impeccable/reference/craft.md @@ -2,6 +2,18 @@ Build a feature with impeccable UX and UI quality through a structured process: shape the design, load the right references, then build and iterate visually until the result is delightful. +## Real Example: Neon Mirai + +Neon Mirai is the full craft loop in public. A retro-futurist AI design conference started with generated brand and hi-fi reference images, then shipped as a responsive static site in `public/neon-mirai`. + +Repro command: + +```bash +/impeccable craft retro-futurist AI design conference website +``` + +The important detail is the artifact chain: brand toolkit, north-star mock, semantic implementation, regenerated assets, browser iteration, responsive fixes. The mock was not treated as a screenshot to trace. It was used as direction for a real page. + ## Step 1: Shape the Design Run /impeccable shape, passing along whatever feature description the user provided. diff --git a/.trae/skills/impeccable/reference/craft.md b/.trae/skills/impeccable/reference/craft.md index 163ca78f9..84b9e1c81 100644 --- a/.trae/skills/impeccable/reference/craft.md +++ b/.trae/skills/impeccable/reference/craft.md @@ -2,6 +2,18 @@ Build a feature with impeccable UX and UI quality through a structured process: shape the design, load the right references, then build and iterate visually until the result is delightful. +## Real Example: Neon Mirai + +Neon Mirai is the full craft loop in public. A retro-futurist AI design conference started with generated brand and hi-fi reference images, then shipped as a responsive static site in `public/neon-mirai`. + +Repro command: + +```bash +/impeccable craft retro-futurist AI design conference website +``` + +The important detail is the artifact chain: brand toolkit, north-star mock, semantic implementation, regenerated assets, browser iteration, responsive fixes. The mock was not treated as a screenshot to trace. It was used as direction for a real page. + ## Step 1: Shape the Design Run /impeccable shape, passing along whatever feature description the user provided. diff --git a/public/app.js b/public/app.js index 5e719ba5c..28b87b2a8 100644 --- a/public/app.js +++ b/public/app.js @@ -287,12 +287,16 @@ function initWhyTabs() { const CYCLE_MS = 7000; const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches; - let current = 0; + let current = Math.max(tabs.findIndex((tab) => tab.classList.contains('is-active')), 0); let timer = null; let autoRotate = !reducedMotion; let visible = false; const tabStrip = container.querySelector('.why-tabs'); + const getPanelForTab = (tab) => { + const panelId = tab?.getAttribute('aria-controls'); + return panelId ? container.querySelector(`#${CSS.escape(panelId)}`) : null; + }; const centerActiveInStrip = (active) => { // On mobile the tab list is a horizontal scroll strip. Keep the @@ -309,6 +313,9 @@ function initWhyTabs() { }; const activate = (index, fromAuto = false) => { + const targetTab = tabs[index]; + const targetPanel = getPanelForTab(targetTab); + if (!targetTab || !targetPanel) return; current = index; tabs.forEach((tab, i) => { const on = i === index; @@ -318,19 +325,18 @@ function initWhyTabs() { // progress indicator restarts cleanly. tab.classList.remove('is-cycling'); }); - panels.forEach((panel, i) => { - const on = i === index; + panels.forEach((panel) => { + const on = panel === targetPanel; panel.classList.toggle('is-active', on); if (on) panel.removeAttribute('hidden'); else panel.setAttribute('hidden', ''); }); if (autoRotate && visible) { // Force reflow so the animation restart is picked up. - const active = tabs[index]; - void active.offsetWidth; - active.classList.add('is-cycling'); + void targetTab.offsetWidth; + targetTab.classList.add('is-cycling'); } - centerActiveInStrip(tabs[index]); + centerActiveInStrip(targetTab); }; const scheduleNext = () => { diff --git a/public/assets/cases/neon-mirai/home.png b/public/assets/cases/neon-mirai/home.png new file mode 100644 index 000000000..5959f9a93 Binary files /dev/null and b/public/assets/cases/neon-mirai/home.png differ diff --git a/public/assets/cases/neon-mirai/live-fold.png b/public/assets/cases/neon-mirai/live-fold.png new file mode 100644 index 000000000..f25909e2a Binary files /dev/null and b/public/assets/cases/neon-mirai/live-fold.png differ diff --git a/public/assets/cases/neon-mirai/live-full.png b/public/assets/cases/neon-mirai/live-full.png new file mode 100644 index 000000000..e77bd63d1 Binary files /dev/null and b/public/assets/cases/neon-mirai/live-full.png differ diff --git a/public/assets/cases/neon-mirai/live-page.png b/public/assets/cases/neon-mirai/live-page.png new file mode 100644 index 000000000..f892b0919 Binary files /dev/null and b/public/assets/cases/neon-mirai/live-page.png differ diff --git a/public/assets/cases/neon-mirai/manifesto-tickets.png b/public/assets/cases/neon-mirai/manifesto-tickets.png new file mode 100644 index 000000000..91bf3669b Binary files /dev/null and b/public/assets/cases/neon-mirai/manifesto-tickets.png differ diff --git a/public/assets/cases/neon-mirai/speakers.png b/public/assets/cases/neon-mirai/speakers.png new file mode 100644 index 000000000..2acb800a1 Binary files /dev/null and b/public/assets/cases/neon-mirai/speakers.png differ diff --git a/public/cases/neon-mirai/index.html b/public/cases/neon-mirai/index.html new file mode 100644 index 000000000..9fc0ca997 --- /dev/null +++ b/public/cases/neon-mirai/index.html @@ -0,0 +1,133 @@ + + + + + + Neon Mirai case study | Impeccable + + + + + + + + + + + +
+ + + Impeccable + +
+ + + + 21k + + +
+
+ +
+
+
+ Designing with Impeccable + Case study +

Neon Mirai: generated mock to shipped page.

+

A retro-futurist AI design conference became a real static site through the full Impeccable loop: visual reference, brand direction, implementation, asset regeneration, responsive fixes, animation polish, and browser verification.

+
+ Open the live build + Read the craft docs +
+
+ + The shipped Neon Mirai conference website hero and agenda, showing a warm retro-futurist Tokyo skyline and large NEO MIRAI headline. + +
+ +
+
+ 01 · Visualize + Generated hi-fi website mock for the Neon Mirai conference page. +
Hi-fi north star. A concrete composition to build toward, not a paragraph to interpret.
+
+
+ 02 · Shape + Generated Neon Mirai brand toolkit plate with palette, typography, symbols, and application mockups. +
Brand toolkit. Identity, palette, type, image language, and motion direction before code.
+
+
+ 03 · Ship + + Full-page screenshot of the implemented Neon Mirai website. + +
Implemented page. Semantic HTML, responsive layout, regenerated assets, real states, and polish.
+
+
+ +
+
+ What changed +

The mock did not become a screenshot. It became a system.

+
+
+
+

Composition matching

+

The build preserved the mock's asymmetric rhythm: full-bleed hero artwork, dark agenda block, orange manifesto band, drifting installation grid, and structured ticket field.

+
+
+

Asset regeneration

+

Image-native pieces stayed image-native. The manifesto city, speaker portraits, pine overlay, and supporting illustrations were regenerated or isolated where raster detail mattered.

+
+
+

Browser iteration

+

The page was tested in the browser after each pass. Overlaps, bad crops, active nav state, speaker carousel behavior, mobile heights, and large-viewport balance were fixed visually.

+
+
+
+ +
+
+ Generated hi-fi Neon Mirai page mock. +
North-star mock The reference image preserved the intended rhythm: full-bleed hero, dark agenda, speaker carousel, installation field, manifesto, and tickets.
+
+
+ + Full-page screenshot of the implemented Neon Mirai website. + +
Live build The shipped page keeps the same visual ambition while becoming responsive markup, real links, carousel controls, hover states, and browser-tested layout.
+
+
+ +
+
+ Reproduce the loop +

Use craft when the output has to feel designed.

+

/impeccable craft is the right command when a feature needs shaping, visual direction, implementation, and browser iteration in one run.

+
+ 
/impeccable craft retro-futurist AI design conference website
+
+
+ + + + diff --git a/public/css/docs-visuals.css b/public/css/docs-visuals.css index 376d3515f..ac864dbdf 100644 --- a/public/css/docs-visuals.css +++ b/public/css/docs-visuals.css @@ -2941,3 +2941,429 @@ color: var(--color-charcoal); margin: 0; } + +/* Neon Mirai proof case: shared by Designing, Craft docs, and the case route. */ +.designing-visualize-spread { + grid-template-columns: 0.88fr 0.72fr 0.88fr; + align-items: start; +} + +.designing-visualize-plate-frame { + display: block; + color: inherit; + text-decoration: none; + transition: border-color var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out); +} + +.designing-visualize-plate-frame:hover { + border-color: var(--color-accent); + transform: translateY(-3px); + box-shadow: 0 20px 46px oklch(10% 0 0 / 0.08); +} + +.designing-visualize-plate--live .designing-visualize-plate-frame { + aspect-ratio: auto; +} + +.designing-visualize-plate--live .designing-visualize-plate-frame img { + height: auto; + object-fit: contain; + object-position: top center; +} + +.designing-visualize-plate-note a { + color: var(--color-accent); + text-decoration-thickness: 1px; + text-underline-offset: 3px; +} + +.craft-case-callout { + display: grid; + grid-template-columns: minmax(0, 1fr) minmax(220px, 0.82fr); + gap: clamp(1.5rem, 4vw, 2.5rem); + align-items: stretch; + margin: clamp(2.5rem, 5vw, 3.5rem) 0; + padding: clamp(1.5rem, 3vw, 2rem); + background: var(--color-paper); + border: 1px solid var(--color-mist); + border-radius: 16px; +} + +.craft-case-eyebrow, +.neon-case-eyebrow, +.neon-case-section-label, +.neon-case-strip figure > span { + display: block; + font-family: var(--font-mono); + font-size: 0.6875rem; + font-weight: 600; + letter-spacing: 0.16em; + text-transform: uppercase; + color: var(--color-accent); +} + +.craft-case-copy h2 { + margin: 0.6rem 0 0.9rem; + font-family: var(--font-display); + font-size: clamp(1.8rem, 4vw, 2.5rem); + font-style: italic; + font-weight: 500; + line-height: 1; + color: var(--color-ink); +} + +.craft-case-copy p { + margin: 0 0 1.25rem; + color: var(--color-charcoal); + line-height: 1.65; +} + +.craft-case-command { + margin: 1.35rem 0 1rem; +} + +.craft-case-link-row { + display: flex; + flex-wrap: wrap; + gap: 1rem; + margin-bottom: 0 !important; + font-family: var(--font-body); + font-weight: 600; +} + +.craft-case-link-row a { + color: var(--color-accent); +} + +.craft-case-images { + position: relative; + min-height: 260px; +} + +.craft-case-images img { + position: absolute; + display: block; + width: 66%; + height: 78%; + object-fit: cover; + border: 1px solid var(--color-mist); + background: var(--color-cream); +} + +.craft-case-images img:first-child { + left: 0; + bottom: 0; + object-position: top center; +} + +.craft-case-images img:last-child { + right: 0; + top: 0; + object-position: top left; + box-shadow: 0 20px 40px oklch(10% 0 0 / 0.08); +} + +.neon-case-page { + background: + radial-gradient(circle at 84% 8%, var(--color-accent-dim), transparent 22rem), + var(--color-cream); +} + +.neon-case { + width: min(100% - 32px, 1360px); + margin: 0 auto; + padding: clamp(4rem, 8vw, 6.5rem) 0 clamp(4rem, 8vw, 7rem); +} + +.neon-case-hero { + display: grid; + grid-template-columns: minmax(300px, 0.82fr) minmax(0, 1.18fr); + gap: clamp(2rem, 5vw, 5rem); + align-items: end; +} + +.neon-case-back { + display: inline-block; + margin-bottom: clamp(2rem, 5vw, 4rem); + font-family: var(--font-body); + font-size: 0.875rem; + font-weight: 600; + color: var(--color-ash); + text-decoration: none; +} + +.neon-case-back:hover { + color: var(--color-accent); +} + +.neon-case-hero h1 { + margin: 0.8rem 0 1.5rem; + font-family: var(--font-display); + font-size: clamp(2.8rem, 5vw, 4.9rem); + font-style: italic; + font-weight: 400; + letter-spacing: -0.045em; + line-height: 0.96; + color: var(--color-ink); + max-width: 15ch; +} + +.neon-case-hero p, +.neon-case-command p { + max-width: 58ch; + margin: 0; + font-family: var(--font-body); + font-size: clamp(1rem, 1.5vw, 1.125rem); + line-height: 1.65; + color: var(--color-charcoal); +} + +.neon-case-actions { + display: flex; + flex-wrap: wrap; + gap: 0.75rem; + margin-top: 2rem; +} + +.neon-case-primary, +.neon-case-secondary { + display: inline-flex; + align-items: center; + min-height: 44px; + padding: 0.85rem 1.15rem; + font-family: var(--font-body); + font-size: 0.875rem; + font-weight: 700; + text-decoration: none; + transition: transform var(--duration-base) var(--ease-out), background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out); +} + +.neon-case-primary { + color: var(--color-paper); + background: var(--color-ink); +} + +.neon-case-secondary { + color: var(--color-ink); + border: 1px solid var(--color-mist); +} + +.neon-case-primary:hover, +.neon-case-secondary:hover { + transform: translateY(-2px); +} + +.neon-case-primary:hover { + background: var(--color-accent); +} + +.neon-case-secondary:hover { + color: var(--color-accent); + border-color: var(--color-accent); +} + +.neon-case-hero-shot { + display: block; + margin: 0; + border: 1px solid var(--color-mist); + background: var(--color-paper); + overflow: hidden; + transition: transform var(--duration-base) var(--ease-out), border-color var(--duration-fast) var(--ease-out); +} + +.neon-case-hero-shot:hover { + transform: translateY(-3px); + border-color: var(--color-accent); +} + +.neon-case-hero-shot img { + display: block; + width: 100%; + height: auto; +} + +.neon-case-strip { + display: grid; + grid-template-columns: 0.78fr 0.78fr 1fr; + gap: clamp(1rem, 2vw, 1.5rem); + margin: clamp(4rem, 9vw, 8rem) 0; + align-items: start; +} + +.neon-case-strip figure, +.neon-case-details figure { + margin: 0; +} + +.neon-case-strip img, +.neon-case-details img { + display: block; + width: 100%; + border: 1px solid var(--color-mist); + background: var(--color-paper); +} + +.neon-case-strip a, +.neon-case-details a { + display: block; + color: inherit; + text-decoration: none; +} + +.neon-case-strip img { + height: clamp(260px, 28vw, 430px); + object-fit: cover; + object-position: top center; + margin-top: 0.75rem; +} + +.neon-case-strip figure:first-child img, +.neon-case-strip figure:last-child img { + object-position: top left; +} + +.neon-case-strip figcaption, +.neon-case-details figcaption { + margin-top: 0.9rem; + font-family: var(--font-body); + font-size: 0.875rem; + line-height: 1.6; + color: var(--color-charcoal); +} + +.neon-case-body { + display: grid; + grid-template-columns: minmax(260px, 0.7fr) minmax(0, 1.3fr); + gap: clamp(2rem, 6vw, 5rem); + padding: clamp(3rem, 6vw, 5rem) 0; + border-top: 1px solid var(--color-mist); + border-bottom: 1px solid var(--color-mist); +} + +.neon-case-body h2, +.neon-case-command h2 { + margin: 0.8rem 0 0; + font-family: var(--font-display); + font-size: clamp(2.25rem, 5vw, 4.6rem); + font-style: italic; + font-weight: 400; + letter-spacing: -0.035em; + line-height: 0.98; + color: var(--color-ink); +} + +.neon-case-notes { + display: grid; + gap: 1px; + background: var(--color-mist); + border: 1px solid var(--color-mist); +} + +.neon-case-notes article { + padding: clamp(1.25rem, 3vw, 2rem); + background: var(--color-cream); +} + +.neon-case-notes h3 { + margin: 0 0 0.6rem; + font-family: var(--font-body); + font-size: 1rem; + color: var(--color-ink); +} + +.neon-case-notes p { + margin: 0; + font-family: var(--font-body); + font-size: 0.9375rem; + line-height: 1.65; + color: var(--color-charcoal); +} + +.neon-case-details { + display: grid; + grid-template-columns: minmax(0, 0.86fr) minmax(0, 1fr); + gap: clamp(1rem, 2.5vw, 2rem); + margin: clamp(4rem, 9vw, 8rem) 0; + align-items: start; +} + +.neon-case-details img { + height: auto; + object-fit: contain; + object-position: top center; +} + +.neon-case-details figcaption span { + display: block; + margin-bottom: 0.25rem; + font-weight: 700; + color: var(--color-ink); +} + +.neon-case-command { + display: grid; + grid-template-columns: minmax(260px, 0.9fr) minmax(320px, 1.1fr); + gap: clamp(2rem, 5vw, 4rem); + align-items: end; + padding: clamp(2rem, 5vw, 4rem); + color: var(--color-paper); + background: var(--color-ink); +} + +.neon-case-command h2, +.neon-case-command p, +.neon-case-command .neon-case-section-label { + color: inherit; +} + +.neon-case-command p { + margin-top: 1.1rem; + color: oklch(90% 0.005 350); +} + +.neon-case-command code { + color: inherit; +} + +.neon-case-command .code-block-wrap { + margin: 0; +} + +@media (max-width: 980px) { + .designing-visualize-spread, + .neon-case-hero, + .neon-case-strip, + .neon-case-body, + .neon-case-details, + .neon-case-command, + .craft-case-callout { + grid-template-columns: 1fr; + } + + .craft-case-images { + min-height: 320px; + } + + .neon-case-hero h1 { + max-width: 11ch; + } +} + +@media (max-width: 640px) { + .neon-case { + width: min(100% - 24px, 1360px); + } + + .neon-case-actions { + flex-direction: column; + } + + .neon-case-primary, + .neon-case-secondary { + justify-content: center; + } + + .craft-case-images img { + width: 74%; + } +} diff --git a/public/css/workflow.css b/public/css/workflow.css index a81706c07..2e82d78d7 100644 --- a/public/css/workflow.css +++ b/public/css/workflow.css @@ -2835,12 +2835,12 @@ margin-top: -2px; } -/* ─ Panel: Visualize, then build — two plates from GPT Image 2 ─ */ +/* ─ Panel: Visualize, then ship: generated inputs plus live build ─ */ .why-visual--vizfirst { display: grid; - grid-template-columns: 1fr 1fr; - gap: 16px; - align-items: start; + grid-template-columns: 0.88fr 0.68fr 1.18fr; + gap: clamp(10px, 1.5vw, 18px); + align-items: stretch; padding: 0; overflow: visible; } @@ -2863,10 +2863,17 @@ } .why-vz-plate-frame { + display: block; background: var(--color-cream); border: 1px solid var(--color-mist); overflow: hidden; - height: 240px; + height: 250px; + transition: border-color var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out); +} + +.why-vz-plate:hover .why-vz-plate-frame { + border-color: var(--color-accent); + transform: translateY(-2px); } .why-vz-plate-frame img { @@ -2877,8 +2884,13 @@ object-position: top center; } +.why-vz-plate--live .why-vz-plate-frame img { + object-position: top left; +} + @media (max-width: 720px) { .why-visual--vizfirst { + grid-template-columns: 1fr; gap: 12px; } .why-vz-plate-frame { @@ -3414,4 +3426,3 @@ @media (max-width: 860px) { .why-visual--antidote { grid-template-columns: 1fr; } } - diff --git a/public/designing/index.html b/public/designing/index.html index 3c0a39ecb..247419f46 100644 --- a/public/designing/index.html +++ b/public/designing/index.html @@ -151,13 +151,13 @@
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.

+

Since image generation crossed the reference-quality threshold, shape can draft a brand toolkit you review at a glance, and craft can code toward a hi-fi mock instead of a paragraph. Neon Mirai is the full loop: generated direction, implemented page, browser iteration.

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

@@ -165,17 +165,27 @@
-
+ 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 + Visualize

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.

+ +
+ + Full-page screenshot of the implemented Neon Mirai website. + +
+ Ship +

Live build. The mock became semantic markup, regenerated assets, responsive fixes, nav state, speaker carousel behavior, and browser-verified polish. Open the live site.

+
+
-

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.

+

The first two plates were generated by OpenAI GPT Image 2. The third is the implemented Neon Mirai page. 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 93393a11d..1c42163f7 100644 --- a/public/index.html +++ b/public/index.html @@ -271,8 +271,8 @@
    -
    2. -
    3. +
    4. +
    8. @@ -284,7 +284,7 @@
-
+ -
- + diff --git a/public/sitemap.xml b/public/sitemap.xml index 638e3b3e6..aee6208d4 100644 --- a/public/sitemap.xml +++ b/public/sitemap.xml @@ -33,6 +33,12 @@ weekly 0.9 + + https://impeccable.style/cases/neon-mirai + 2026-04-25 + monthly + 0.8 + https://impeccable.style/docs/impeccable2026-04-110.9 diff --git a/scripts/build-sub-pages.js b/scripts/build-sub-pages.js index 96d1b914e..326726fcd 100644 --- a/scripts/build-sub-pages.js +++ b/scripts/build-sub-pages.js @@ -64,6 +64,29 @@ function renderSkillDemo(skill) { `; } +function renderCraftCaseCallout() { + return ` +`; +} + /** * Render one skill detail page HTML body (without the site shell). */ @@ -78,6 +101,7 @@ function renderSkillDetail(skill, knownSkillIds) { : ''; const demoHtml = renderSkillDemo(skill); + const caseCalloutHtml = skill.id === 'craft' ? renderCraftCaseCallout() : ''; const tagline = skill.editorial?.frontmatter?.tagline || skill.description; const categoryLabel = CATEGORY_LABELS[skill.category] || skill.category; @@ -142,6 +166,8 @@ ${refBody} ${editorialHtml ? `
\n${editorialHtml}\n
` : ''} + ${caseCalloutHtml} +
${skill.isSubCommand ? 'reference/' + escapeHtml(skill.id) + '.md' : 'SKILL.md'} @@ -1020,13 +1046,13 @@ function renderDesigningMain() {
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.

+

Since image generation crossed the reference-quality threshold, shape can draft a brand toolkit you review at a glance, and craft can code toward a hi-fi mock instead of a paragraph. Neon Mirai is the full loop: generated direction, implemented page, browser iteration.

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

@@ -1034,17 +1060,27 @@ function renderDesigningMain() {
-
+ 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 + Visualize

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.

+ +
+ + Full-page screenshot of the implemented Neon Mirai website. + +
+ Ship +

Live build. The mock became semantic markup, regenerated assets, responsive fixes, nav state, speaker carousel behavior, and browser-verified polish. Open the live site.

+
+
-

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.

+

The first two plates were generated by OpenAI GPT Image 2. The third is the implemented Neon Mirai page. Gemini Nano Banana Pro, Imagen 4 Ultra, and Grok Imagen work the same way, via Codex, Gemini CLI, and compatible harnesses.

diff --git a/scripts/build.js b/scripts/build.js index 63ea66def..98809c0d5 100644 --- a/scripts/build.js +++ b/scripts/build.js @@ -564,8 +564,13 @@ async function build() { const { files: subPageFiles } = await generateSubPages(ROOT_DIR); console.log(`✓ Generated ${subPageFiles.length} sub-page(s)\n`); + const casePageFiles = [ + path.join(ROOT_DIR, 'public', 'cases', 'neon-mirai', 'index.html'), + path.join(ROOT_DIR, 'public', 'neon-mirai', 'index.html'), + ].filter((pagePath) => fs.existsSync(pagePath)); + // Bundle HTML, JS, and CSS with Bun (including generated sub-pages) - await buildStaticSite(subPageFiles); + await buildStaticSite([...subPageFiles, ...casePageFiles]); // Copy root-level static assets that need stable (unhashed) URLs const staticAssets = ['og-image.jpg', 'robots.txt', 'sitemap.xml', 'favicon.svg', 'apple-touch-icon.png']; diff --git a/server/index.js b/server/index.js index d9ff01b20..4400cc2db 100644 --- a/server/index.js +++ b/server/index.js @@ -52,14 +52,29 @@ const server = serve({ // Generated sub-pages — served directly from the pre-generated files "/docs": () => serveGenerated(path.join(ROOT_DIR, "public/docs/index.html")), + "/docs/": () => serveGenerated(path.join(ROOT_DIR, "public/docs/index.html")), "/docs/:id": (req) => { const id = req.params.id.replace(/[^a-z0-9-]/gi, ""); return serveGenerated(path.join(ROOT_DIR, `public/docs/${id}.html`)); }, "/slop": () => serveGenerated(path.join(ROOT_DIR, "public/slop/index.html")), + "/slop/": () => serveGenerated(path.join(ROOT_DIR, "public/slop/index.html")), "/live-mode": () => serveGenerated(path.join(ROOT_DIR, "public/live-mode/index.html")), + "/live-mode/": () => serveGenerated(path.join(ROOT_DIR, "public/live-mode/index.html")), "/designing": () => serveGenerated(path.join(ROOT_DIR, "public/designing/index.html")), + "/designing/": () => serveGenerated(path.join(ROOT_DIR, "public/designing/index.html")), + "/neon-mirai": () => Response.redirect("/neon-mirai/", 302), + "/neon-mirai/": () => serveGenerated(path.join(ROOT_DIR, "public/neon-mirai/index.html")), + "/cases/:slug": (req) => { + const slug = req.params.slug.replace(/[^a-z0-9-]/gi, ""); + return serveGenerated(path.join(ROOT_DIR, `public/cases/${slug}/index.html`)); + }, + "/cases/:slug/": (req) => { + const slug = req.params.slug.replace(/[^a-z0-9-]/gi, ""); + return serveGenerated(path.join(ROOT_DIR, `public/cases/${slug}/index.html`)); + }, "/tutorials": () => serveGenerated(path.join(ROOT_DIR, "public/tutorials/index.html")), + "/tutorials/": () => serveGenerated(path.join(ROOT_DIR, "public/tutorials/index.html")), "/tutorials/:slug": (req) => { const slug = req.params.slug.replace(/[^a-z0-9-]/gi, ""); return serveGenerated(path.join(ROOT_DIR, `public/tutorials/${slug}.html`)); @@ -212,4 +227,3 @@ const server = serve({ }); console.log(`🎨 impeccable.style running at ${server.url}`); - diff --git a/source/skills/impeccable/reference/craft.md b/source/skills/impeccable/reference/craft.md index 57e2f9882..3e6beb790 100644 --- a/source/skills/impeccable/reference/craft.md +++ b/source/skills/impeccable/reference/craft.md @@ -2,6 +2,18 @@ Build a feature with impeccable UX and UI quality through a structured process: shape the design, load the right references, then build and iterate visually until the result is delightful. +## Real Example: Neon Mirai + +Neon Mirai is the full craft loop in public. A retro-futurist AI design conference started with generated brand and hi-fi reference images, then shipped as a responsive static site in `public/neon-mirai`. + +Repro command: + +```bash +{{command_prefix}}impeccable craft retro-futurist AI design conference website +``` + +The important detail is the artifact chain: brand toolkit, north-star mock, semantic implementation, regenerated assets, browser iteration, responsive fixes. The mock was not treated as a screenshot to trace. It was used as direction for a real page. + ## Step 1: Shape the Design Run {{command_prefix}}impeccable shape, passing along whatever feature description the user provided.