mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-20 10:06:54 +03:00
397d3cb4b7
* Add copy confirmation animation * Add live mode copy confirmation * Add Neo Mirai copy confirmation * Fix Neo Mirai command overflow on narrow screens * Link footer logo to homepage * Fix copy feedback helper --------- Co-authored-by: Paul Bakaus <43004+pbakaus@users.noreply.github.com>
109 lines
6.1 KiB
Plaintext
109 lines
6.1 KiB
Plaintext
---
|
|
import Base from '../../layouts/Base.astro';
|
|
import '../../styles/sub-pages.css';
|
|
---
|
|
|
|
<Base
|
|
title="Neo Mirai case study | Impeccable"
|
|
description="How Impeccable turned generated brand and hi-fi references into the shipped Neo Mirai conference website."
|
|
canonicalPath="/cases/neo-mirai"
|
|
bodyClass="sub-page neon-case-page kinpaku-chrome"
|
|
>
|
|
|
|
<div 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>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>
|
|
<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 HTML, CSS, regenerated assets, and the responsive behavior a static image only suggests.</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">
|
|
<svg class="code-block-copy-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
|
|
<rect x="9" y="9" width="13" height="13" rx="2"></rect>
|
|
<path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"></path>
|
|
</svg>
|
|
<svg class="code-block-check-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.1" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
|
<path d="M20 6 9 17l-5-5"></path>
|
|
</svg>
|
|
</button></div>
|
|
</section>
|
|
</div>
|
|
|
|
<script>
|
|
import { initCopyFeedback } from "../../scripts/utils/copy-feedback.js";
|
|
|
|
initCopyFeedback();
|
|
</script>
|
|
|
|
</Base>
|