AI-Assisted Web Design: Electrical Contractor Brochure Site
Overview
A New York City electrical contracting company had no web presence, no online marketing strategy, and no way for potential customers to find or evaluate them digitally. This project involved designing and launching a production-ready brochure website from the ground up — on an accelerated timeline — using an AI-assisted workflow that maintained the highest standards of UX, visual design, accessibility, security, and search optimization.
The site is live and actively generating leads.
The Problem
Without a website, the business was invisible online at a time when even trade and contracting clients vet vendors digitally before making contact. There was no brand presence to speak of, no way to capture inbound leads, and no foundation for future digital marketing efforts.
The challenge wasn't just building a website — it was building the right website: one that reflected a credible, professional brand, performed well in search, and converted visitors into real inquiries.
My Process
Brand Grounding. The project started with the client's branding guidelines, which I used as the design source of truth throughout. Rather than interpreting brand standards loosely, I built a structured design.md file — a detailed design specification I authored that codified front-end design decisions: typography, color application, spacing, component behavior, and visual tone. This file became the bridge between brand intent and built output.
AI-Assisted Development with Claude Code. Using Claude Code, I translated the design.md specification into a fully realized front-end. This wasn't a prompt-and-hope workflow — the design spec I wrote gave the AI a precise, structured brief to execute against. I used Puppeteer to take and analyze screenshots at key breakpoints, allowing me to visually QA the output, catch inconsistencies, and iterate rapidly. The result was a site that looked and felt like it was designed by hand, because the design direction was.
UX Best Practices & Accessibility. Throughout design and development, the site was held to established UX standards and W3C accessibility guidelines. This included semantic HTML structure, sufficient color contrast ratios, keyboard navigability, descriptive alt text, and accessible form labeling — ensuring the site works for all users regardless of ability or assistive technology. Accessibility wasn't treated as a checklist item at the end; it was built into the design specification from the start.
Security & Compliance. Web forms were reviewed and hardened against common vulnerabilities. All phone number instances on the site were implemented in a way that prevents automated spam harvesting — a practical consideration for a local trade business that relies on phone inquiries as a primary lead channel.
Search Optimization: SEO, GEO & AEO. The site was optimized across three dimensions. Traditional SEO ensured strong crawlability and keyword relevance for NYC electrical contracting searches. GEO (Generative Engine Optimization) prepared the site's content for AI-driven search surfaces that increasingly surface direct answers rather than blue links. AEO (Answer Engine Optimization) structured content so that voice and AI assistants can accurately represent the business in response to relevant queries. This layered approach future-proofs the site's discoverability as search behavior continues to evolve.
Key Design Decisions
Design spec first, build second. The design.md file was the most important artifact of this project. By writing a thorough front-end design specification before any code was generated, I maintained creative control over the output and ensured the final site reflected deliberate design decisions — not AI defaults. The spec is reusable and scalable for future site updates.
Designing for trust in a trade context. Electrical contracting clients are evaluating credibility, professionalism, and local expertise in seconds. Every design decision — from typography weight to how services were structured and described — was made with that trust-building moment in mind.
Performance and protection as UX. Security compliance, spam prevention, and accessibility aren't typically framed as UX decisions, but they are. A compromised form, a harvested phone number, or a site that excludes users with disabilities all degrade the experience for real people. These were treated as design requirements, not afterthoughts.
Outcome
- Site is live and actively generating inbound leads for the client
- Full brochure website delivered on an accelerated timeline using an AI-assisted workflow
- Passed security compliance checks across all web forms
- Built to W3C accessibility standards, ensuring an inclusive experience for all users
- Optimized for SEO, GEO, and AEO — positioning the client for discoverability across traditional and AI-driven search surfaces
- Demonstrated that production-quality digital products built with AI can meet the highest standards of UX, design craft, and accessibility when guided by a skilled designer
Reflection
This project is proof of concept for a new way of working. AI didn't replace the design process — it executed it. The quality of the output was a direct function of the quality of the brief: a structured design specification, a clear brand reference, a commitment to accessibility from day one, and a systematic QA process using Puppeteer to catch and correct what needed refinement. The result is a live product generating real business results for a client who had nothing before.
As AI tools become more capable, the designer's role shifts toward authorship and direction — knowing what to specify, what to scrutinize, and what good looks like. This project is a demonstration of that skillset in practice.