Brand to Build, Directed with AI

Lead UX Product Designer

High-Tech Electric LLC is a licensed NY electrical contractor serving all five boroughs. I directed Claude Code and Codex to take the brand from blank page to a live, production-ready web app in two days, with no traditional design-to-dev handoff.

Learn More

The Problem

After 27 years and 2,500 projects across all five boroughs, High-Tech Electric had no web presence. Homeowners, property managers and contractors searching for a licensed NYC electrician couldn't find them, so a reputation built over decades wasn't reaching anyone online.

The project was a deliberate test: could one designer take a brand from blank page to production code by directing AI, with no development team and no traditional handoff? Everything had to be designed and built from the ground up.

Business Goals

A trusted NYC contractor needed to be found, and trusted, online from day one.

  • Establish a brand from scratch
  • Build instant credibility: licensing, 27 years, 2,500+ projects
  • Capture 24/7 emergency calls
  • Get found in local search and AI answers

The Toolkit

Figma

Brand guidelines, logos, an AI style guide, high-fidelity screens and a clickable prototype: the source of truth for the build.

  • Brand guidelines
  • Logos
  • AI style guide
  • Hi-fi screens
  • Prototype

Claude Code

Wrote the entire front end from my Figma screens and style guide, then the interactions, motion and accessibility fixes as I refined them.

  • Front end
  • Interactions
  • Motion
  • Accessibility fixes

Codex

A second AI reviewer that checked Claude's work, so no code shipped on one model's word alone.

  • Code review
  • Second opinion on every change

Project Objectives

Accessible, fast and findable, by design.

Accessible to Everyone

Built to WCAG AA from the first screen: color contrast, keyboard access, screen reader labels and visible focus states.

Fast and Mobile-First

People with an electrical emergency reach for their phone, so every layout starts small-screen first and stays lightweight to load fast.

Found in Search and AI Answers

Structured content and markup so High-Tech Electric shows up in Google, local search and AI-generated answers (SEO, GEO and AEO).

Designer-Directed, AI-Built

Every line of code written by AI, every design decision made by me, and every change checked by a second model.

My Process, from Brand to Launch-Ready Code

  1. Brand Guidelines

    Logo, palette, type and iconography designed in Figma.

  2. AI Style Guide

    The brand translated into a design.md spec Claude could follow.

  3. Hi-Fi Screens & Prototype

    Every screen and interaction designed and clickable in Figma.

  4. AI-Directed Build

    Claude Code wrote the front end while I steered and refined.

  5. Review & QA

    Codex checked Claude's work, plus Puppeteer visual QA and accessibility testing.

Brand & Strategy

Building the brand system first, then turning it into a design.md spec the AI could follow. Defining the brand was much more involved than what is shown here, but it gives a general idea.

A Palette and Type System Pulled Straight from the Job Site

Signal Red

The red of warning labels, breakers and emergency response: urgency and safety in one color.

On the site: Primary buttons and emergency calls to action.

Safety Gold

Borrowed from hazard striping and hard hats: attention without alarm.

On the site: An accent across the brand guidelines and interface.

Midnight & Dark Grey

The black of electrical tape and panel housings: grounded, serious and professional.

On the site: Dark backgrounds that let red and gold carry the message.

Roboto Slab + Roboto

Slab serifs echo work-truck lettering and industrial signage; Roboto keeps everything else clean and legible.

On the site: Slab for headlines, Roboto for body copy and UI.

AI Style Guide Workflow

One design.md spec turned the brand into rules the AI could follow.

The spec lived in the project root, so every AI session started from the same source of truth.

  1. Step 1: Write design.md
  2. Step 2: Claude Code Builds
  3. Step 3: Codex Reviews
design.md

Color & Type Tokens

Every brand color and type style defined as a reusable token

Tone of Voice & Copy

How High-Tech Electric sounds, and the rules for writing like it

Components & Layout

How buttons, cards, grids and spacing are built and arranged

Accessibility Requirements

WCAG AA rules for contrast, focus states, labels and keyboard use

Illustrative recreation of the spec's sections.

Five Visitor Journeys

Each journey is designed to end in a call or a quote. Pick one to walk through it.

Emergency call

  1. VisitorHas an urgent electrical problem, usually on a phone.
  2. SiteShows the 24/7 line right away.
  3. Outcome
    • One tap to call, from any page

Designing for the Emergency

In an emergency, the call button is never more than a glance away. If users are not ready to make the call, they can request a quote, browse services, or view photos of on-site work.

For a visitor in an emergency: an urgent electrical problem, usually on a phone, and they need help now.

Access to the 24/7 Line, Wherever They Land

  • Accessible in the header on every page
  • Accessible from the sticky call button on mobile
  • Accessible in the homepage hero
  • Accessible at the end of every service page

Directing the Build

How I Directed the Build

How I briefed, steered and reviewed Claude Code and Codex, from first commit to working site.

Key Decisions

  • Grounded in proven systems

    Rather than letting the AI invent patterns, I had Claude Code spin up the first iteration from my brand guidelines, using Google's Material Design as the reference for components, patterns and interaction models.

  • UX best practices as guardrails

    I pointed Claude to Nielsen Norman Group research for usability best practices, so layout and interaction decisions rested on established UX principles, not guesswork.

  • Accessibility from the first prompt

    W3C accessibility standards were part of the brief from day one, so contrast, semantics and keyboard support were built in rather than retrofitted.

  • Iteration, not one-shot generation

    The first build was a starting point. From there it was round after round of back-and-forth with Claude, fine-tuning layout, visual hierarchy and detail until every screen met the standard I set.

Two Directions for the Client

Iteration 1 Chosen by clientDark charcoal, Roboto Slab headlines with gold accents, and a Connect to Live Support form with a red call to action.
Iteration 2A warmer look: a geometric sans, gold accents and a simpler callback form. Gold buttons take over the calls to action.

The Result: One Responsive Build, from Desktop to Phone

Desktop
Mobile

Refinement

Tuning components, interactions and motion, and the moments I redirected the AI.

Fully responsive, desktop to mobile.

View Live Site

Edge Cases: Every State of the Live Support Form

The Connect to Live Support form is the main path to a call back, so every state had to be clear at a glance: no one in an emergency should have to guess what went wrong.

Switch the state

Validation. Missed required fields are flagged with Material Design's invalid-field pattern, so the fix is obvious before the form is sent.

Interaction and Motion: The Details I Tuned with Claude

Motion guides attention and confirms actions, never decorates, and every animation respects the reduce-motion setting.

Credibility stats. Years of service, projects completed, boroughs served and code compliance animate into view, turning 27 years of reputation into proof at a glance. This card loops the same count-up motion live; on the site it plays once as the section scrolls into view.
Scroll-triggered reveals. Elements across every page animate in as the visitor scrolls, guiding the eye down the page one section at a time. Scroll inside the frame to see it live on the real site.

QA & Accessibility

How the Build Was Verified

Visual QA, accessibility, performance and search, checked before launch.

What I Checked

  • Puppeteer visual QA
  • Codex review of Claude's code
  • WCAG AA accessibility
  • Performance and mobile speed
  • SEO, GEO and AEO integrity
  • Website security

What Passed

Puppeteer visual QA
The live build matched the Figma screens.
Lighthouse: 90–100
Accessibility, Best Practices and SEO all scored in the 90s or higher.
Codex code review
Minimal feedback on the quality of Claude's code.

What Got Fixed

Performance
The first Lighthouse run flagged performance issues. I had Claude fix them before launch.
Image optimization
Every image on the site was optimized to raise the Lighthouse performance score.

From Brief to Delivery

He asked for a simple brochure site. He got a direct line to his customers.

  1. The Client's Brief

    The ask: a simple, brochure-type site to give the business visibility on the web.

  2. The Delivery

    What shipped: a fast, accessible, search-ready site with a live-support form that texts the contractor the moment a customer needs help.

  3. The Outcome

    The result: the owner was very happy with the end result.

Outcomes

What one designer and two AI models shipped.

From brand guidelines to launch
2 days
Increase in website traffic in 30 days, alongside a new marketing push
400%
Lighthouse scores for accessibility, best practices and SEO
90–100
More leads connecting from the website
6×

Proved the workflow: one designer took a brand from blank page to production code, with no development team and no traditional handoff. Phase 2 will build on today's single page, divided into six sections, with deeper, more detailed content.

Recommendations and Next Steps

  1. Turn the error state into a backup path

    Show the phone number with tap-to-call when a request fails, so no emergency hits a dead end.

  2. Add phone format validation

    Reject numbers that can't be real before the request is sent, using the existing invalid-field pattern.

  3. Hold the passcode in reserve

    Layer in rate limiting first; add a one-time passcode only if spam gets through, and keep it off the emergency path.

  4. Phase 2: deepen the content

    Expand the single six-section page with more detailed content, giving search and AI answers more to work with as traffic grows.

  5. Track which channels drive leads

    Add analytics to the marketing plan, so budget follows the channels that bring in the most leads.

Reflection: Directing AI didn't replace design judgment; it raised the bar for it. My extensive understanding of art history and period-specific design aesthetics allowed me to vastly shorten the time from concept to high-fidelity mock. The biggest lesson wasn't speed; it was control. Grounding every session in a design.md spec with references to tone, design systems, UX best practices, and accessibility standards, then having Codex check the work, kept every decision mine.