This project began with a practical question: how far can AI-assisted visual exploration go when it is paired with disciplined production engineering?
I used Claude and Claude Design to explore a new visual direction for JeffBilbrey.com. The concepts established a strong editorial system—warm typography, restrained color, technical details, and a more intentional way to present the work—but the mockup represented only part of the real site.
Claude helped shape the visual language. Codex took the handoff from design artifact to production system.
The production work expanded that direction across the complete content library, preserved the useful parts of the existing platform, and launched two related but distinct brands: JeffBilbrey.com as the deep portfolio and publishing platform, and Level99Design.com as the focused local-business landing page for Fenton and Southeast Michigan.
01The problem
The design handoff was compelling, but it was not yet a complete website specification. The live JeffBilbrey.com contained more pages, deeper case studies, a writing archive, video, service detail pages, project imagery, an inquiry path, administrative publishing tools, scheduling, and an AI assistant. Those systems could not be flattened into a visual demo or discarded during the redesign.
The second challenge was brand architecture. Level 99 Design needed to feel related to Jeff's personal site without becoming a duplicate. It had a narrower audience, a more direct sales job, and a strong local-search requirement centered on Fenton, Michigan.
The production brief therefore had four constraints:
Adapt the visual system to all current content, including pages the mockup did not define.
Preserve the working publishing, scheduling, inquiry, and assistant experiences.
Return meaningful HTML, metadata, and structured data before client-side JavaScript runs.
Launch a second, faster landing page with its own voice while keeping a clear family resemblance.
02The approach
I treated the mockup as a visual direction rather than a rigid page map. The first step was a content and capability audit: every route, case study, article, service, image, feed, and live interaction was mapped before the redesign was applied.
From there, the work became a systems handoff. The typography, amber accent, dark material palette, editorial spacing, bracket details, and technical labels were translated into reusable components that could stretch across the homepage, service pages, writing, video, portfolio, and long-form case studies.
JeffBilbrey.com remained a server-rendered application because it needed dynamic content and operational features. Level99Design.com was deliberately shipped as a compact static HTML experience because its job was different: explain the offer, establish credibility, support local search, and create a direct path to a conversation.
Both launches received page-specific metadata, canonical URLs, social previews, Schema.org markup, sitemap and robots coverage, responsive validation, and production checks against the actual HTML returned to search engines.
03The build
AI-Assisted Design Handoff
Claude and Claude Design accelerated visual exploration and established the art direction. Codex carried the handoff through content mapping, component implementation, integration, testing, and production launch.
Content-First Adaptation
The redesign was expanded around the real site rather than forcing real content into a small mockup. Missing layouts were designed from the same principles, and existing photography and project covers replaced placeholder imagery.
Two Brands, One Visual Lineage
JeffBilbrey.com uses an editorial, portfolio-led expression while Level 99 Design uses a bolder studio voice. Typography, color, technical labeling, and interaction details connect them without making the sites interchangeable.
Search-Ready Rendered HTML
Primary content, titles, descriptions, canonical links, social metadata, local Fenton signals, and structured data are present in the server response—giving readers and crawlers a complete page without depending on an empty JavaScript shell.
Operational Features Preserved
The redesign retained the publishing workflow, service inquiry path, scheduling link, article calls-to-action, video publishing, feeds, and AI assistant while restyling those experiences to match the new system.
Production Asset System
Real website captures, lightbox-ready project imagery, descriptive alternatives, and route-specific 1200×630 social covers make every case study and article shareable without falling back to generic artwork.
04Results
A complete personal platform and a focused local design landing page launched from one connected design direction.
Key content and search metadata are delivered as HTML on both properties rather than waiting for a client-side application to assemble the page.
The brands share a recognizable visual lineage while serving different audiences, content depths, and conversion goals.
Publishing, scheduling, inquiry, video, feed, and AI-assistant capabilities remained available through the redesign and launch.
05Project views
The lasting result is not just two websites. It is a repeatable way to work with AI across the full design-to-production arc.
AI design tools are strongest when they accelerate direction, while production delivery stays accountable to content, accessibility, operations, search, and the real user.
Three principles from the build now guide future handoffs:
A mockup is a starting point, not a content model. The final system has to fit the information and workflows that actually exist.
A design language has to stretch. The best test is not the homepage; it is whether the same principles still work on the tenth page and the longest article.
Production is part of the design. Rendered HTML, metadata, responsive behavior, preserved workflows, and a verified launch are all part of the reader's experience.
Claude and Claude Design made the visual exploration faster. Codex made the handoff executable. The value came from combining both.