Most small business websites look like they were built in 2005, but redesigning them usually requires a massive budget or endless hours of DIY struggle. What if you could use AI to bridge that gap without losing your brand's soul?
The Simple Version
Think of building a website like building a custom house. Most people try to start by picking out furniture (the website content) before they even have a blueprint or a foundation.
The process shown by Enovair involves three distinct stages: creating the blueprint (the design brief), establishing the building materials (the design system), and finally, the construction (coding the site). Instead of just asking an AI to "make a website," you are providing it with a specific set of rules, colors, and fonts to follow.
How It Actually Works
The workflow isn't a single prompt; it's a multi-step pipeline that moves from text-based strategy to visual design and finally to production-ready code.
Phase 1: The Strategic Brief
The process begins in Claude Co-work. Rather than jumping straight to design, the creator uses Co-work to organize a folder of assets—including logos, project photos, and business notes—into a structured Markdown (.md) file.
This file acts as the "source of truth." By asking Claude to review the existing website and the new assets, you create a concise design brief that includes color palettes, imagery suggestions, and structural requirements. As the video demonstrates, this step prevents the AI from hallucinating generic layouts by grounding it in real business facts.
Phase 2: The Design System
Once the brief is ready, the workflow moves to Claude Design. This is where the most critical step occurs: creating a design system.
A design system is a collection of reusable components and standards. Instead of designing page by page, you define the company's colors, typography, and button styles once. This ensures that whether you are building a homepage or a marketing flyer, the visual identity remains perfectly consistent.
Technical Deep Dive
For developers, the real power lies in the handoff between the visual interface and the terminal. The creator moves the project from Claude Design to Claude Code using a specific "handoff prompt."
This isn't just a copy-paste of text; it's a transfer of intent and structure. In the video, the project is implemented using a modern web stack: Next.js for the framework, Tailwind CSS for utility-first styling, Shadcn/ui for accessible interface components, and Docker for containerization. This approach moves the project from a "mockup" to a professional, deployable application.
To refine the site, the creator uses a combination of tools. While Claude handles the structural code, ChatGPT and Nano Banana are used to generate or polish specific assets, such as hero section images or product photos. This "multi-model" approach recognizes that while one AI might be better at logic, another might excel at specific visual refinements. The final step involves using Claude Code within a VS Code terminal to integrate these new assets and tweak the CSS directly through natural language commands.
Why This Matters
This workflow represents a shift from "AI as a chatbot" to "AI as a professional design partner." By separating the design system from the content generation, you solve the biggest problem in AI-generated media: the "generic AI look."
When you define your brand's constraints upfront, the AI stops guessing and starts executing. This allows small business owners to produce high-end marketing materials—like the educational flyer created in the video—that look like they were designed by a professional agency, all while staying strictly within the established brand guidelines.