We didn't hire a designer for this website. We didn't spend weeks in Figma, either. Instead, we sat down with Claude Code and its frontend-design skill — and went from a completely blank screen to a polished, branded website in a handful of focused working sessions.
This isn't a tutorial. It's the honest story of what that process actually looked like — the false starts, the breakthroughs, and what surprised us along the way.
What exactly is the frontend-design skill?
Think of it as a design mode you can turn on inside Claude Code. Normally, AI coding assistants are great at logic and structure — building the plumbing. The frontend-design skill shifts the focus to aesthetics. It tells Claude to think like a designer: consider typography pairings, color relationships, spatial composition, motion, and all the small details that separate something that works from something that feels right.
You describe what you want, and it generates complete, working HTML and CSS — not mockups, not wireframes, but actual code you can open in a browser and interact with. Then you give feedback, and it iterates.
The design journey
Every design starts somewhere. Ours started with exploration.
Design Evolution
Exploration
First Design
Final Version
Starting with inspiration
Exploring an aesthetic direction
Before jumping into the real thing, we asked Claude to generate a design system exploration — the kind of reference page developers and designers use to establish visual foundations. Color palettes, typography scales, button styles, card variants, gradient treatments.
The first pass leaned into a dark, developer-centric aesthetic. Think glowing borders, monospace type, and neon accents. It was cool. It was polished. But it wasn't us.
The developer-centric look
A dark theme with glowing accents and sharp contrasts. It felt technically impressive but too niche for the audience we were trying to reach — business owners navigating AI for the first time.
The first design you get is almost never the one you keep. But it's essential — it shows you what you don't want.
Building the page, section by section
The first real Shipsmind design takes shape
With the aesthetic exploration behind us, we gave Claude a clearer brief: dark, warm, professional but approachable. We wanted the site to feel like a trusted advisor, not a Silicon Valley startup.
Claude started with the hero section — a bold headline, key statistics, and calls to action. Then, piece by piece, the rest of the page came together: a section addressing the common pain points businesses face with AI, a grid of services, proof points with real numbers, and a clear three-step process breakdown.
This is where we first saw the design system emerge — not something we planned on a whiteboard, but something that grew organically through the conversation.
The hero and structure
The first section established the dark palette, serif headings, and stat-forward layout. We could see the brand taking shape.
A complete landing page
Services, social proof, a clear process section, and a final call to action. Every section built on the same visual language.
The palette that emerged
Dark and warm, with blue for action and yellow for emphasis. Not your typical SaaS palette — and that was the point.
Display
Instrument Serif
With italic for warmth
Body
Outfit
Clean, modern, and easy on the eyes at any size. A quiet complement to the serif's personality.
Finding our voice
The warm redesign that clicked
The design looked good, but something was off. The structure was right, the colors were right — but the words felt stiff. Too corporate. Too much like every other consulting website.
So we went back and rethought the messaging. Instead of leading with statistics, we led with empathy. Instead of “we help businesses adopt AI,” we said “You bought the AI tools. We'll help you get results.”
That shift changed everything. The section headings became warmer. The services felt less like a menu and more like a conversation. The whole page went from informing to inviting.
The version that became the real site
Warmer copy. Empathetic tone. The same dark palette and design system, but now with personality behind it. This is the version you're reading on right now.
Design isn't just pixels. The moment the words matched the visuals, the whole site came alive.
From design to live site
With the final design nailed down as working HTML and CSS, moving to the production site was surprisingly smooth. The design file served as a complete reference — every color value, spacing decision, font size, and animation was already defined and tested in a browser.
We translated the static HTML into React components for our Next.js site, extracted the design tokens into a Tailwind configuration, and carried over the scroll animations and hover states. Because the design was already built in real code — not a static mockup — there was no guesswork about how things should behave.
What we learned
Start broad, then focus
The exploratory first pass felt like wasted time, but it wasn't. It clarified what we didn't want and set a baseline. Don't skip it.
Give feedback on feel, not just features
Saying "make it warmer" or "this feels too corporate" gave better results than pixel-level instructions. The skill interprets tone really well.
Let the design system emerge
We didn't plan the color palette or typography pairing upfront. They developed naturally through iteration — and ended up more cohesive than most hand-planned systems we've worked with.
Words and visuals are one design
The biggest leap in quality came when we changed the copy, not the layout. If the design looks right but feels wrong, the words might be the problem.
Code-first design removes handoff friction
Because the design was built in HTML and CSS from the start, the move to production was a translation, not a reinterpretation. No lost details, no pixel-matching guesswork.
AI-assisted design isn't about replacing designers. It's about making the design process accessible to teams that couldn't otherwise afford it — and giving everyone a faster path from idea to something real.
This site is proof it works.