1---
2import Base from '../../layouts/Base.astro';
3import '../../styles/sub-pages.css';
4---
5
6<Base
7 title="Neo Mirai case study | Impeccable"
8 description="How Impeccable turned generated brand and hi-fi references into the shipped Neo Mirai conference website."
9 canonicalPath="/cases/neo-mirai"
10 bodyClass="sub-page neon-case-page"
11>
12
13 <section class="neon-case-hero">
14 <div class="neon-case-hero-copy">
15 <a class="neon-case-back" href="/designing#start">Designing with Impeccable</a>
16 <span class="neon-case-eyebrow">Case study</span>
17 <h1>Neo Mirai: generated mock to shipped page.</h1>
18 <p>Neo Mirai started as a single hi-fi mock from OpenAI GPT Image 2 and a generated brand toolkit. <code>/impeccable craft</code> turned it into the live conference site: brand interpretation, semantic implementation, regenerated assets, responsive fixes, and browser iteration in one run.</p>
19 <div class="neon-case-actions">
20 <a class="neon-case-primary" href="/neo-mirai/">Open the live build</a>
21 <a class="neon-case-secondary" href="/docs/craft">Read the craft docs</a>
22 </div>
23 </div>
24 <a class="neon-case-hero-shot" href="/neo-mirai/" aria-label="Open the Neo Mirai live build">
25 <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">
26 </a>
27 </section>
28
29 <section class="neon-case-strip" aria-label="From generated references to shipped website">
30 <figure>
31 <span>01 · Visualize</span>
32 <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">
33 <figcaption>Hi-fi north star. A concrete composition to build toward, not a paragraph to interpret.</figcaption>
34 </figure>
35 <figure>
36 <span>02 · Shape</span>
37 <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">
38 <figcaption>Brand toolkit. Identity, palette, type, image language, and motion direction before code.</figcaption>
39 </figure>
40 <figure>
41 <span>03 · Ship</span>
42 <a href="/neo-mirai/" aria-label="Open the Neo Mirai live build">
43 <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">
44 </a>
45 <figcaption>Implemented page. Semantic HTML, responsive layout, regenerated assets, real states, and polish.</figcaption>
46 </figure>
47 </section>
48
49 <section class="neon-case-body">
50 <div class="neon-case-column">
51 <span class="neon-case-section-label">What changed</span>
52 <h2>The mock did not become a screenshot. It became HTML, CSS, regenerated assets, and the responsive behavior a static image only suggests.</h2>
53 </div>
54 <div class="neon-case-notes">
55 <article>
56 <h3>Composition matching</h3>
57 <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>
58 </article>
59 <article>
60 <h3>Asset regeneration</h3>
61 <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>
62 </article>
63 <article>
64 <h3>Browser iteration</h3>
65 <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>
66 </article>
67 </div>
68 </section>
69
70 <section class="neon-case-details" aria-label="Mock and live page comparison">
71 <figure>
72 <img src="/assets/openai_image_2_hifi.jpg" alt="Generated hi-fi Neo Mirai page mock." loading="lazy" width="864" height="1821">
73 <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>
74 </figure>
75 <figure>
76 <a href="/neo-mirai/" aria-label="Open the Neo Mirai live build">
77 <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">
78 </a>
79 <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>
80 </figure>
81 </section>
82
83 <section class="neon-case-command">
84 <div>
85 <span class="neon-case-section-label">Reproduce the loop</span>
86 <h2>Use craft when the output has to feel designed.</h2>
87 <p><code>/impeccable craft</code> is the right command when a feature needs shaping, visual direction, implementation, and browser iteration in one run.</p>
88 </div>
89 <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>
90 </section>
91
92 <script is:inline>
93 document.addEventListener('click', (event) => {
94 const button = event.target.closest('[data-copy]');
95 if (!button) return;
96 const text = button.getAttribute('data-copy');
97 if (!text) return;
98 navigator.clipboard.writeText(text).then(() => {
99 button.classList.add('is-copied');
100 setTimeout(() => button.classList.remove('is-copied'), 1500);
101 }).catch(() => {});
102 });
103 </script>
104
105</Base>