chore: rename all references Neon Mirai -> Neo Mirai to match site title
vivshaw
@@ -2,9 +2,9 @@
|
||||
|
||||
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
|
||||
## Real Example: Neo 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`.
|
||||
Neo 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/neo-mirai`.
|
||||
|
||||
Repro command:
|
||||
|
||||
|
||||
@@ -2,9 +2,9 @@
|
||||
|
||||
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
|
||||
## Real Example: Neo 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`.
|
||||
Neo 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/neo-mirai`.
|
||||
|
||||
Repro command:
|
||||
|
||||
|
||||
@@ -2,9 +2,9 @@
|
||||
|
||||
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
|
||||
## Real Example: Neo 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`.
|
||||
Neo 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/neo-mirai`.
|
||||
|
||||
Repro command:
|
||||
|
||||
|
||||
@@ -2,9 +2,9 @@
|
||||
|
||||
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
|
||||
## Real Example: Neo 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`.
|
||||
Neo 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/neo-mirai`.
|
||||
|
||||
Repro command:
|
||||
|
||||
|
||||
@@ -2,9 +2,9 @@
|
||||
|
||||
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
|
||||
## Real Example: Neo 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`.
|
||||
Neo 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/neo-mirai`.
|
||||
|
||||
Repro command:
|
||||
|
||||
|
||||
@@ -2,9 +2,9 @@
|
||||
|
||||
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
|
||||
## Real Example: Neo 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`.
|
||||
Neo 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/neo-mirai`.
|
||||
|
||||
Repro command:
|
||||
|
||||
|
||||
@@ -2,9 +2,9 @@
|
||||
|
||||
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
|
||||
## Real Example: Neo 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`.
|
||||
Neo 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/neo-mirai`.
|
||||
|
||||
Repro command:
|
||||
|
||||
|
||||
@@ -2,9 +2,9 @@
|
||||
|
||||
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
|
||||
## Real Example: Neo 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`.
|
||||
Neo 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/neo-mirai`.
|
||||
|
||||
Repro command:
|
||||
|
||||
|
||||
@@ -2,9 +2,9 @@
|
||||
|
||||
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
|
||||
## Real Example: Neo 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`.
|
||||
Neo 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/neo-mirai`.
|
||||
|
||||
Repro command:
|
||||
|
||||
|
||||
@@ -2,9 +2,9 @@
|
||||
|
||||
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
|
||||
## Real Example: Neo 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`.
|
||||
Neo 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/neo-mirai`.
|
||||
|
||||
Repro command:
|
||||
|
||||
|
||||
@@ -2,9 +2,9 @@
|
||||
|
||||
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
|
||||
## Real Example: Neo 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`.
|
||||
Neo 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/neo-mirai`.
|
||||
|
||||
Repro command:
|
||||
|
||||
|
||||
|
Before Width: | Height: | Size: 1.6 MiB After Width: | Height: | Size: 1.6 MiB |
|
Before Width: | Height: | Size: 1.7 MiB After Width: | Height: | Size: 1.7 MiB |
|
Before Width: | Height: | Size: 2.8 MiB After Width: | Height: | Size: 2.8 MiB |
|
Before Width: | Height: | Size: 3.6 MiB After Width: | Height: | Size: 3.6 MiB |
|
Before Width: | Height: | Size: 732 KiB After Width: | Height: | Size: 732 KiB |
|
Before Width: | Height: | Size: 686 KiB After Width: | Height: | Size: 686 KiB |
@@ -3,10 +3,10 @@
|
||||
<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.">
|
||||
<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/neon-mirai">
|
||||
<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>
|
||||
@@ -41,33 +41,33 @@
|
||||
<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>
|
||||
<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="/neon-mirai/">Open the live build</a>
|
||||
<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="/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 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 Neon Mirai conference page." loading="lazy" width="864" height="1821">
|
||||
<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 Neon Mirai brand toolkit plate with palette, typography, symbols, and application mockups." loading="lazy" width="1536" height="1024">
|
||||
<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="/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 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>
|
||||
@@ -96,12 +96,12 @@
|
||||
|
||||
<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">
|
||||
<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="/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 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>
|
||||
@@ -2942,7 +2942,7 @@
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Neon Mirai proof case: shared by Designing, Craft docs, and the case route. */
|
||||
/* Neo 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;
|
||||
|
||||
@@ -151,11 +151,11 @@
|
||||
|
||||
<div class="designing-start-step">
|
||||
<span class="designing-start-step-label">shape + craft · in pictures</span>
|
||||
<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>
|
||||
<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. Neo 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">
|
||||
<a class="designing-visualize-plate-frame" href="/cases/neon-mirai" aria-label="Read the Neon Mirai case study">
|
||||
<a class="designing-visualize-plate-frame" href="/cases/neo-mirai" aria-label="Read the Neo 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" />
|
||||
</a>
|
||||
<figcaption class="designing-visualize-plate-cap">
|
||||
@@ -165,7 +165,7 @@
|
||||
</figure>
|
||||
|
||||
<figure class="designing-visualize-plate designing-visualize-plate--hifi">
|
||||
<a class="designing-visualize-plate-frame" href="/cases/neon-mirai" aria-label="Read the Neon Mirai case study">
|
||||
<a class="designing-visualize-plate-frame" href="/cases/neo-mirai" aria-label="Read the Neo 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" />
|
||||
</a>
|
||||
<figcaption class="designing-visualize-plate-cap">
|
||||
@@ -175,17 +175,17 @@
|
||||
</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 class="designing-visualize-plate-frame" href="/neo-mirai/" aria-label="Open the Neo Mirai live site">
|
||||
<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 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>
|
||||
<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="/neo-mirai/">Open the live site</a>.</p>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<p class="designing-visualize-foot">The first two plates were generated by <strong>OpenAI GPT Image 2</strong>. The third is the implemented Neo 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>
|
||||
|
||||
@@ -325,28 +325,28 @@
|
||||
|
||||
<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>
|
||||
<p class="why-panel-body">Neo 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--hifi">
|
||||
<span class="why-vz-plate-kind">01 · Visualize</span>
|
||||
<a class="why-vz-plate-frame" href="/cases/neon-mirai" aria-label="Read the Neon Mirai case study">
|
||||
<a class="why-vz-plate-frame" href="/cases/neo-mirai" aria-label="Read the Neo 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" />
|
||||
</a>
|
||||
</figure>
|
||||
<figure class="why-vz-plate why-vz-plate--brand">
|
||||
<span class="why-vz-plate-kind">02 · Shape</span>
|
||||
<a class="why-vz-plate-frame" href="/cases/neon-mirai" aria-label="Read the Neon Mirai case study">
|
||||
<a class="why-vz-plate-frame" href="/cases/neo-mirai" aria-label="Read the Neo 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 · Live build</span>
|
||||
<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 class="why-vz-plate-frame" href="/neo-mirai/" aria-label="Open the Neo Mirai live build">
|
||||
<img src="assets/cases/neo-mirai/live-fold.png" alt="Finished Neo 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. · <a href="/cases/neon-mirai">Read the case →</a> · <a href="/neon-mirai/">Open the live build →</a></p>
|
||||
<p class="why-panel-meta">A generated reference became shipped HTML, CSS, assets, responsive fixes, and interaction polish. · <a href="/cases/neo-mirai">Read the case →</a> · <a href="/neo-mirai/">Open the live build →</a></p>
|
||||
</article>
|
||||
|
||||
<article class="why-panel why-panel--antidote" id="why-panel-1" role="tabpanel" data-index="1" hidden>
|
||||
|
||||
|
Before Width: | Height: | Size: 199 KiB After Width: | Height: | Size: 199 KiB |
|
Before Width: | Height: | Size: 261 KiB After Width: | Height: | Size: 261 KiB |
|
Before Width: | Height: | Size: 5.8 KiB After Width: | Height: | Size: 5.8 KiB |
|
Before Width: | Height: | Size: 5.0 KiB After Width: | Height: | Size: 5.0 KiB |
|
Before Width: | Height: | Size: 7.1 KiB After Width: | Height: | Size: 7.1 KiB |
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 20 KiB |
|
Before Width: | Height: | Size: 427 KiB After Width: | Height: | Size: 427 KiB |
|
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 18 KiB |
|
Before Width: | Height: | Size: 947 KiB After Width: | Height: | Size: 947 KiB |
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
|
Before Width: | Height: | Size: 33 KiB After Width: | Height: | Size: 33 KiB |
|
Before Width: | Height: | Size: 27 KiB After Width: | Height: | Size: 27 KiB |
|
Before Width: | Height: | Size: 23 KiB After Width: | Height: | Size: 23 KiB |
|
Before Width: | Height: | Size: 23 KiB After Width: | Height: | Size: 23 KiB |
|
Before Width: | Height: | Size: 31 KiB After Width: | Height: | Size: 31 KiB |
|
Before Width: | Height: | Size: 24 KiB After Width: | Height: | Size: 24 KiB |
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 28 KiB |
|
Before Width: | Height: | Size: 24 KiB After Width: | Height: | Size: 24 KiB |
|
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 21 KiB |
|
Before Width: | Height: | Size: 84 KiB After Width: | Height: | Size: 84 KiB |
|
Before Width: | Height: | Size: 90 KiB After Width: | Height: | Size: 90 KiB |
|
Before Width: | Height: | Size: 79 KiB After Width: | Height: | Size: 79 KiB |
|
Before Width: | Height: | Size: 75 KiB After Width: | Height: | Size: 75 KiB |
|
Before Width: | Height: | Size: 24 KiB After Width: | Height: | Size: 24 KiB |
|
Before Width: | Height: | Size: 24 KiB After Width: | Height: | Size: 24 KiB |
|
Before Width: | Height: | Size: 261 KiB After Width: | Height: | Size: 261 KiB |
|
Before Width: | Height: | Size: 27 KiB After Width: | Height: | Size: 27 KiB |
|
Before Width: | Height: | Size: 902 B After Width: | Height: | Size: 902 B |
@@ -34,7 +34,7 @@
|
||||
<priority>0.9</priority>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://impeccable.style/cases/neon-mirai</loc>
|
||||
<loc>https://impeccable.style/cases/neo-mirai</loc>
|
||||
<lastmod>2026-04-25</lastmod>
|
||||
<changefreq>monthly</changefreq>
|
||||
<priority>0.8</priority>
|
||||
|
||||
@@ -69,20 +69,20 @@ function renderCraftCaseCallout() {
|
||||
<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>
|
||||
<h2 id="craft-case-title">Neo 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>
|
||||
<a href="/cases/neo-mirai">Read the case</a>
|
||||
<a href="/neo-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" />
|
||||
<img src="../assets/cases/neo-mirai/home.png" alt="" loading="lazy" width="1440" height="1100" />
|
||||
</div>
|
||||
</aside>`;
|
||||
}
|
||||
@@ -1046,11 +1046,11 @@ function renderDesigningMain() {
|
||||
|
||||
<div class="designing-start-step">
|
||||
<span class="designing-start-step-label">shape + craft · in pictures</span>
|
||||
<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>
|
||||
<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. Neo 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">
|
||||
<a class="designing-visualize-plate-frame" href="/cases/neon-mirai" aria-label="Read the Neon Mirai case study">
|
||||
<a class="designing-visualize-plate-frame" href="/cases/neo-mirai" aria-label="Read the Neo 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" />
|
||||
</a>
|
||||
<figcaption class="designing-visualize-plate-cap">
|
||||
@@ -1060,7 +1060,7 @@ function renderDesigningMain() {
|
||||
</figure>
|
||||
|
||||
<figure class="designing-visualize-plate designing-visualize-plate--hifi">
|
||||
<a class="designing-visualize-plate-frame" href="/cases/neon-mirai" aria-label="Read the Neon Mirai case study">
|
||||
<a class="designing-visualize-plate-frame" href="/cases/neo-mirai" aria-label="Read the Neo 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" />
|
||||
</a>
|
||||
<figcaption class="designing-visualize-plate-cap">
|
||||
@@ -1070,17 +1070,17 @@ function renderDesigningMain() {
|
||||
</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 class="designing-visualize-plate-frame" href="/neo-mirai/" aria-label="Open the Neo Mirai live site">
|
||||
<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 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>
|
||||
<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="/neo-mirai/">Open the live site</a>.</p>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<p class="designing-visualize-foot">The first two plates were generated by <strong>OpenAI GPT Image 2</strong>. The third is the implemented Neo 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>
|
||||
|
||||
@@ -538,6 +538,9 @@ function generateCFConfig(buildDir) {
|
||||
/skills/:id /docs/:id 301
|
||||
/anti-patterns /slop#catalog 301
|
||||
/visual-mode /slop#see-it 301
|
||||
/neon-mirai /neo-mirai/ 301
|
||||
/neon-mirai/ /neo-mirai/ 301
|
||||
/cases/neon-mirai /cases/neo-mirai 301
|
||||
`;
|
||||
fs.writeFileSync(path.join(buildDir, '_redirects'), redirects);
|
||||
|
||||
@@ -565,8 +568,8 @@ async function build() {
|
||||
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'),
|
||||
path.join(ROOT_DIR, 'public', 'cases', 'neo-mirai', 'index.html'),
|
||||
path.join(ROOT_DIR, 'public', 'neo-mirai', 'index.html'),
|
||||
].filter((pagePath) => fs.existsSync(pagePath));
|
||||
|
||||
// Bundle HTML, JS, and CSS with Bun (including generated sub-pages)
|
||||
|
||||
@@ -63,8 +63,12 @@ const server = serve({
|
||||
"/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")),
|
||||
"/neo-mirai": () => Response.redirect("/neo-mirai/", 302),
|
||||
"/neo-mirai/": () => serveGenerated(path.join(ROOT_DIR, "public/neo-mirai/index.html")),
|
||||
"/neon-mirai": () => Response.redirect("/neo-mirai/", 301),
|
||||
"/neon-mirai/": () => Response.redirect("/neo-mirai/", 301),
|
||||
"/cases/neon-mirai": () => Response.redirect("/cases/neo-mirai", 301),
|
||||
"/cases/neon-mirai/": () => Response.redirect("/cases/neo-mirai", 301),
|
||||
"/cases/:slug": (req) => {
|
||||
const slug = req.params.slug.replace(/[^a-z0-9-]/gi, "");
|
||||
return serveGenerated(path.join(ROOT_DIR, `public/cases/${slug}/index.html`));
|
||||
|
||||
@@ -2,9 +2,9 @@
|
||||
|
||||
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
|
||||
## Real Example: Neo 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`.
|
||||
Neo 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/neo-mirai`.
|
||||
|
||||
Repro command:
|
||||
|
||||
|
||||