skills/pbakaus_impeccable
1
0
Fork 0
mirror of https://github.com/pbakaus/impeccable.git synced 2026-09-15 23:56:29 +03:00
Code Issues Packages Projects Releases Wiki Activity

Add Neon Mirai showcase

Browse Source
This commit is contained in:
Paul Bakaus
2026-04-25 01:23:51 -07:00
parent d26ccac1be
commit 74f16d6310
29 changed files with 839 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.agents/skills/impeccable/reference/craft.md
+12
View File
@@ -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.
.claude/skills/impeccable/reference/craft.md
+12
View File
@@ -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.
.cursor/skills/impeccable/reference/craft.md
+12
View File
@@ -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.
.gemini/skills/impeccable/reference/craft.md
+12
View File
@@ -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.
.github/skills/impeccable/reference/craft.md
+12
View File
@@ -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.
.kiro/skills/impeccable/reference/craft.md
+12
View File
@@ -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.
.opencode/skills/impeccable/reference/craft.md
+12
View File
@@ -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.
.pi/skills/impeccable/reference/craft.md
+12
View File
@@ -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.
.rovodev/skills/impeccable/reference/craft.md
+12
View File
@@ -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.
.trae-cn/skills/impeccable/reference/craft.md
+12
View File
@@ -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.
.trae/skills/impeccable/reference/craft.md
+12
View File
@@ -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.
public/app.js
+13 -7
View File
@@ -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 = () => {
public/assets/cases/neon-mirai/home.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 MiB

public/assets/cases/neon-mirai/live-fold.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 MiB

public/assets/cases/neon-mirai/live-full.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.8 MiB

public/assets/cases/neon-mirai/live-page.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.6 MiB

public/assets/cases/neon-mirai/manifesto-tickets.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 732 KiB

public/assets/cases/neon-mirai/speakers.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 686 KiB

public/cases/neon-mirai/index.html
+133
View File
@@ -0,0 +1,133 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Neon Mirai case study | Impeccable</title>
<meta name="description" content="How Impeccable turned generated brand and hi-fi references into the shipped Neon Mirai conference website.">
<meta name="theme-color" content="#fafafa">
<link rel="canonical" href="https://impeccable.style/cases/neon-mirai">
<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 neon-case-page">
<a href="#main" class="skip-link">Skip to content</a>
<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">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" class="neon-case">
<section class="neon-case-hero">
<div class="neon-case-hero-copy">
<a class="neon-case-back" href="/designing#start">Designing with Impeccable</a>
<span class="neon-case-eyebrow">Case study</span>
<h1>Neon Mirai: generated mock to shipped page.</h1>
<p>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.</p>
<div class="neon-case-actions">
<a class="neon-case-primary" href="/neon-mirai/">Open the live build</a>
<a class="neon-case-secondary" href="/docs/craft">Read the craft docs</a>
</div>
</div>
<a class="neon-case-hero-shot" href="/neon-mirai/" aria-label="Open the Neon Mirai live build">
<img src="../../assets/cases/neon-mirai/live-fold.png" alt="The shipped Neon Mirai conference website hero and agenda, showing a warm retro-futurist Tokyo skyline and large NEO MIRAI headline." width="1440" height="1100">
</a>
</section>
<section class="neon-case-strip" aria-label="From generated references to shipped website">
<figure>
<span>01 &middot; Visualize</span>
<img src="../../assets/openai_image_2_hifi.jpg" alt="Generated hi-fi website mock for the Neon Mirai conference page." loading="lazy" width="864" height="1821">
<figcaption>Hi-fi north star. A concrete composition to build toward, not a paragraph to interpret.</figcaption>
</figure>
<figure>
<span>02 &middot; Shape</span>
<img src="../../assets/openai_image_2_brand.jpg" alt="Generated Neon Mirai brand toolkit plate with palette, typography, symbols, and application mockups." loading="lazy" width="1536" height="1024">
<figcaption>Brand toolkit. Identity, palette, type, image language, and motion direction before code.</figcaption>
</figure>
<figure>
<span>03 &middot; Ship</span>
<a href="/neon-mirai/" aria-label="Open the Neon Mirai live build">
<img src="../../assets/cases/neon-mirai/live-page.png" alt="Full-page screenshot of the implemented Neon Mirai website." loading="lazy" width="1440" height="3013">
</a>
<figcaption>Implemented page. Semantic HTML, responsive layout, regenerated assets, real states, and polish.</figcaption>
</figure>
</section>
<section class="neon-case-body">
<div class="neon-case-column">
<span class="neon-case-section-label">What changed</span>
<h2>The mock did not become a screenshot. It became a system.</h2>
</div>
<div class="neon-case-notes">
<article>
<h3>Composition matching</h3>
<p>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.</p>
</article>
<article>
<h3>Asset regeneration</h3>
<p>Image-native pieces stayed image-native. The manifesto city, speaker portraits, pine overlay, and supporting illustrations were regenerated or isolated where raster detail mattered.</p>
</article>
<article>
<h3>Browser iteration</h3>
<p>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.</p>
</article>
</div>
</section>
<section class="neon-case-details" aria-label="Mock and live page comparison">
<figure>
<img src="../../assets/openai_image_2_hifi.jpg" alt="Generated hi-fi Neon Mirai page mock." loading="lazy" width="864" height="1821">
<figcaption><span>North-star mock</span> The reference image preserved the intended rhythm: full-bleed hero, dark agenda, speaker carousel, installation field, manifesto, and tickets.</figcaption>
</figure>
<figure>
<a href="/neon-mirai/" aria-label="Open the Neon Mirai live build">
<img src="../../assets/cases/neon-mirai/live-page.png" alt="Full-page screenshot of the implemented Neon Mirai website." loading="lazy" width="1440" height="3013">
</a>
<figcaption><span>Live build</span> The shipped page keeps the same visual ambition while becoming responsive markup, real links, carousel controls, hover states, and browser-tested layout.</figcaption>
</figure>
</section>
<section class="neon-case-command">
<div>
<span class="neon-case-section-label">Reproduce the loop</span>
<h2>Use craft when the output has to feel designed.</h2>
<p><code>/impeccable craft</code> is the right command when a feature needs shaping, visual direction, implementation, and browser iteration in one run.</p>
</div>
<div class="code-block-wrap"><pre class="code-block"><code>/impeccable craft retro-futurist AI design conference website</code></pre><button class="code-block-copy" type="button" data-copy="/impeccable craft retro-futurist AI design conference website" aria-label="Copy to clipboard"></button></div>
</section>
</main>
<script>
document.addEventListener('click', (event) => {
const button = event.target.closest('[data-copy]');
if (!button) return;
const text = button.getAttribute('data-copy');
if (!text) return;
navigator.clipboard.writeText(text).then(() => {
button.classList.add('is-copied');
setTimeout(() => button.classList.remove('is-copied'), 1500);
}).catch(() => {});
});
</script>
</body>
</html>
public/css/docs-visuals.css
+426
View File
@@ -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%;
}
}
public/css/workflow.css
+17 -6
View File
@@ -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; }
}
public/designing/index.html
+17 -7
View File
@@ -151,13 +151,13 @@
<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>
<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. Neon 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">
<div class="designing-visualize-plate-frame">
<a class="designing-visualize-plate-frame" href="/cases/neon-mirai" aria-label="Read the Neon 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" />
</div>
</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>
@@ -165,17 +165,27 @@
</figure>
<figure class="designing-visualize-plate designing-visualize-plate--hifi">
<div class="designing-visualize-plate-frame">
<a class="designing-visualize-plate-frame" href="/cases/neon-mirai" aria-label="Read the Neon 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" />
</div>
</a>
<figcaption class="designing-visualize-plate-cap">
<span class="designing-visualize-plate-kind">Craft</span>
<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="/neon-mirai/" aria-label="Open the Neon Mirai live site">
<img src="../assets/cases/neon-mirai/live-page.png" alt="Full-page screenshot of the implemented Neon 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="/neon-mirai/">Open the live site</a>.</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>
<p class="designing-visualize-foot">The first two plates were generated by <strong>OpenAI GPT Image 2</strong>. The third is the implemented Neon 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>
public/index.html
+17 -17
View File
@@ -271,8 +271,8 @@
<div class="why-layout">
<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="vz" aria-selected="false" aria-controls="why-panel-vz"><span class="why-tab-num">02</span><span class="why-tab-label">Visualize, then ship</span><span class="why-tab-progress" aria-hidden="true"></span></button></li>
<li><button role="tab" class="why-tab is-active" data-index="vz" aria-selected="true" aria-controls="why-panel-vz"><span class="why-tab-num">01</span><span class="why-tab-label">Visualize, then ship</span><span class="why-tab-progress" aria-hidden="true"></span></button></li>
<li><button role="tab" class="why-tab" data-index="0" aria-selected="false" aria-controls="why-panel-0"><span class="why-tab-num">02</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">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>
@@ -284,7 +284,7 @@
</div>
<div class="why-panels">
<article class="why-panel is-active" id="why-panel-0" role="tabpanel" data-index="0">
<article class="why-panel" id="why-panel-0" role="tabpanel" data-index="0" hidden>
<h3 class="why-panel-title">Design that knows who it's for.</h3>
<p class="why-panel-body">Most AI tools one-shot a plausible-looking mock. Impeccable starts with a conversation: audience, brand personality, anti-references, aesthetic direction. It captures the answer in <code>PRODUCT.md</code> and <code>DESIGN.md</code> and loads them on every command. The output is design that fits the actual business, not a generic impression of one.</p>
<div class="why-visual why-visual--productmd">
@@ -321,30 +321,30 @@
</div>
</article>
<article class="why-panel why-panel--vizfirst" id="why-panel-vz" role="tabpanel" data-index="vz" hidden>
<article class="why-panel why-panel--vizfirst is-active" id="why-panel-vz" role="tabpanel" data-index="vz">
<h3 class="why-panel-title">Picture it. Build it. Ship the page.</h3>
<p class="why-panel-body">Neon Mirai started as generated reference images: a brand toolkit and a hi-fi conference mock. <code>/impeccable craft</code> turned them into a real responsive website, then iterated in the browser until the live page matched the direction.</p>
<div class="why-visual why-visual--vizfirst">
<figure class="why-vz-plate why-vz-plate--brand">
<span class="why-vz-plate-kind">01 &middot; Shape</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">02 &middot; Mock</span>
<div class="why-vz-plate-frame">
<span class="why-vz-plate-kind">01 &middot; Visualize</span>
<a class="why-vz-plate-frame" href="/cases/neon-mirai" aria-label="Read the Neon Mirai case study">
<img src="assets/openai_image_2_hifi.jpg" alt="Auto-generated hi-fi landing-page mock in editorial warm-paper style." loading="lazy" width="864" height="1821" />
</div>
</a>
</figure>
<figure class="why-vz-plate why-vz-plate--brand">
<span class="why-vz-plate-kind">02 &middot; Shape</span>
<a class="why-vz-plate-frame" href="/cases/neon-mirai" aria-label="Read the Neon Mirai case study">
<img src="assets/openai_image_2_brand.jpg" alt="Auto-generated brand toolkit: identity lockups, palette, type, icon system, and application mocks for a fictional AI design conference." loading="lazy" width="1536" height="1024" />
</a>
</figure>
<figure class="why-vz-plate why-vz-plate--live">
<span class="why-vz-plate-kind">03 &middot; Live build</span>
<div class="why-vz-plate-frame">
<img src="assets/cases/neon-mirai/home.png" alt="Finished Neon Mirai website hero, implemented from the generated conference mock." loading="lazy" width="1440" height="1100" />
</div>
<a class="why-vz-plate-frame" href="/neon-mirai/" aria-label="Open the Neon Mirai live build">
<img src="assets/cases/neon-mirai/live-fold.png" alt="Finished Neon Mirai website hero and agenda, implemented from the generated conference mock." loading="lazy" width="1440" height="1100" />
</a>
</figure>
</div>
<p class="why-panel-meta">A generated reference became shipped HTML, CSS, assets, responsive fixes, and interaction polish. &middot; <a href="/cases/neon-mirai">Read the case &rarr;</a> &middot; <a href="/neon-mirai">Open the live build &rarr;</a></p>
<p class="why-panel-meta">A generated reference became shipped HTML, CSS, assets, responsive fixes, and interaction polish. &middot; <a href="/cases/neon-mirai">Read the case &rarr;</a> &middot; <a href="/neon-mirai/">Open the live build &rarr;</a></p>
</article>
<article class="why-panel why-panel--antidote" id="why-panel-1" role="tabpanel" data-index="1" hidden>
public/neon-mirai/index.html
+2 -2
View File
@@ -9,7 +9,7 @@
<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=Azeret+Mono:wght@400;500;600;700&family=Chakra+Petch:wght@300;400;500;600&family=Zen+Old+Mincho:wght@400;500;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./styles.css?v=20260424-nav-active-fix">
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<a class="skip-link" href="#main">Skip to content</a>
@@ -338,6 +338,6 @@
</div>
</footer>
<script src="./script.js?v=20260424-nav-active-fix"></script>
<script src="./script.js"></script>
</body>
</html>
public/sitemap.xml
+6
View File
@@ -33,6 +33,12 @@
<changefreq>weekly</changefreq>
<priority>0.9</priority>
</url>
<url>
<loc>https://impeccable.style/cases/neon-mirai</loc>
<lastmod>2026-04-25</lastmod>
<changefreq>monthly</changefreq>
<priority>0.8</priority>
</url>
<!-- Command detail pages (the impeccable skill + 22 commands) -->
<url><loc>https://impeccable.style/docs/impeccable</loc><lastmod>2026-04-11</lastmod><priority>0.9</priority></url>
scripts/build-sub-pages.js
+43 -7
View File
@@ -64,6 +64,29 @@ function renderSkillDemo(skill) {
</section>`;
}
function renderCraftCaseCallout() {
return `
<aside class="craft-case-callout" aria-labelledby="craft-case-title">
<div class="craft-case-copy">
<span class="craft-case-eyebrow">Real example</span>
<h2 id="craft-case-title">Neon Mirai: generated reference to shipped page.</h2>
<p>A retro-futurist AI design conference moved through the full loop: brand toolkit, hi-fi mock, semantic implementation, regenerated assets, responsive fixes, and browser polish.</p>
<div class="code-block-wrap craft-case-command">
<pre class="code-block code-block--bash"><code>npx impeccable craft retro-futurist AI design conference website</code></pre>
<button class="code-block-copy" type="button" data-copy="npx impeccable craft retro-futurist AI design conference website" aria-label="Copy to clipboard"></button>
</div>
<p class="craft-case-link-row">
<a href="/cases/neon-mirai">Read the case</a>
<a href="/neon-mirai/">Open the build</a>
</p>
</div>
<div class="craft-case-images" aria-hidden="true">
<img src="../assets/openai_image_2_hifi.jpg" alt="" loading="lazy" width="864" height="1821" />
<img src="../assets/cases/neon-mirai/home.png" alt="" loading="lazy" width="1440" height="1100" />
</div>
</aside>`;
}
/**
* 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 ? `<section class="skill-detail-editorial prose">\n${editorialHtml}\n</section>` : ''}
${caseCalloutHtml}
<section class="skill-source-card">
<header class="skill-source-card-header">
<span class="skill-source-card-label">${skill.isSubCommand ? 'reference/' + escapeHtml(skill.id) + '.md' : 'SKILL.md'}</span>
@@ -1020,13 +1046,13 @@ function renderDesigningMain() {
<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>
<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. Neon 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">
<div class="designing-visualize-plate-frame">
<a class="designing-visualize-plate-frame" href="/cases/neon-mirai" aria-label="Read the Neon 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" />
</div>
</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>
@@ -1034,17 +1060,27 @@ function renderDesigningMain() {
</figure>
<figure class="designing-visualize-plate designing-visualize-plate--hifi">
<div class="designing-visualize-plate-frame">
<a class="designing-visualize-plate-frame" href="/cases/neon-mirai" aria-label="Read the Neon 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" />
</div>
</a>
<figcaption class="designing-visualize-plate-cap">
<span class="designing-visualize-plate-kind">Craft</span>
<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="/neon-mirai/" aria-label="Open the Neon Mirai live site">
<img src="../assets/cases/neon-mirai/live-page.png" alt="Full-page screenshot of the implemented Neon 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="/neon-mirai/">Open the live site</a>.</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>
<p class="designing-visualize-foot">The first two plates were generated by <strong>OpenAI GPT Image 2</strong>. The third is the implemented Neon 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>
scripts/build.js
+6 -1
View File
@@ -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'];
server/index.js
+15 -1
View File
@@ -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}`);
source/skills/impeccable/reference/craft.md
+12
View File
@@ -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.