mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-11 13:46:32 +03:00
Paul BakausandClaude Opus 4.7
a312da5ec7
Star count was 21k on sub-pages and the header partial, 22k on the homepage. Updated all seven source files to 23k (actual: 23,692). Changelog section gains a curated "Highlights since v3.0" block above the full version history, which now collapses behind a disclosure toggle. Fixes the vertical bloat from 9 entries in three weeks while keeping v3.0's anchor content visible. Also fixes a nesting bug where an orphan </div> from the old changelog-list wrapper prematurely closed the changelog-section, breaking the two-column changelog+FAQ grid layout. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
134 lines
8.7 KiB
HTML
134 lines
8.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Neo Mirai case study | Impeccable</title>
|
|
<meta name="description" content="How Impeccable turned generated brand and hi-fi references into the shipped Neo Mirai conference website.">
|
|
<meta name="theme-color" content="#fafafa">
|
|
<link rel="canonical" href="https://impeccable.style/cases/neo-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, 23k 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">23k</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>Neo 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="/neo-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="/neo-mirai/" aria-label="Open the Neo Mirai live build">
|
|
<img src="../../assets/cases/neo-mirai/live-fold.png" alt="The shipped Neo 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 · Visualize</span>
|
|
<img src="../../assets/openai_image_2_hifi.jpg" alt="Generated hi-fi website mock for the Neo 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 · Shape</span>
|
|
<img src="../../assets/openai_image_2_brand.jpg" alt="Generated Neo 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 · Ship</span>
|
|
<a href="/neo-mirai/" aria-label="Open the Neo Mirai live build">
|
|
<img src="../../assets/cases/neo-mirai/live-page.png" alt="Full-page screenshot of the implemented Neo Mirai website." loading="lazy" width="1440" height="3013">
|
|
</a>
|
|
<figcaption>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 Neo 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="/neo-mirai/" aria-label="Open the Neo Mirai live build">
|
|
<img src="../../assets/cases/neo-mirai/live-page.png" alt="Full-page screenshot of the implemented Neo Mirai website." loading="lazy" width="1440" height="3013">
|
|
</a>
|
|
<figcaption><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>
|