Code by Karun

Vibe Code to codebykarun.com: Designing Without Design Skills (Part 5)

•5 min read
designcssthemingvibe coding

Part 5 of 5 • Previously: Building the MDX Pipeline

In Part 4, we built a production-ready content pipeline. Now comes the part I dreaded most: design.

I'm a developer, not a designer. This usually means hours of tweaking CSS and never being satisfied. But vibe coding changed that.

The Design Challenge

As an iOS developer, I was comfortable with design patterns in iOS. But web design? That was different:

  • Different layout systems
  • Different typography scales
  • Different color management
  • Different everything

I needed a system that would:

  • Look professional without hours of tweaking
  • Support dark mode from day one
  • Be maintainable and easy to adjust
  • Work consistently across components

The Magic Prompt

Here's what worked:

My Design Prompt:

I want a clean, minimalist design for my blog. Think Hacker News meets 
Medium—lots of whitespace, excellent typography, and subtle use of color. 
I need dark mode support from day one. The design should feel professional 
but not corporate, modern but not trendy. Can you create a cohesive design 
system using CSS variables so I can easily adjust the theme later?

The Response: A complete design system with HSL-based CSS variables, typography scales, and spacing tokens.

The Color System That Blew My Mind

The AI introduced me to a pattern I'd never considered—HSL-based CSS variables:

:root {
  --background: 0 0% 100%;
  --foreground: 240 10% 3.9%;
  --card: 0 0% 100%;
  --card-foreground: 240 10% 3.9%;
  --primary: 240 5.9% 10%;
  --primary-foreground: 0 0% 98%;
  --muted: 240 4.8% 95.9%;
  --muted-foreground: 240 3.8% 46.1%;
  --accent: 240 4.8% 95.9%;
  --accent-foreground: 240 5.9% 10%;
  --border: 240 5.9% 90%;
}

[data-theme="dark"] {
  --background: 240 10% 3.9%;
  --foreground: 0 0% 98%;
  --card: 240 10% 3.9%;
  --card-foreground: 0 0% 98%;
  --primary: 0 0% 98%;
  --primary-foreground: 240 5.9% 10%;
  --muted: 240 3.7% 15.9%;
  --muted-foreground: 240 5% 64.9%;
  --accent: 240 3.7% 15.9%;
  --accent-foreground: 0 0% 98%;
  --border: 240 3.7% 15.9%;
}

Then in components:

className="bg-background text-foreground"
className="border-border"
className="text-muted-foreground"

Why This Works:

  • Semantic names that make sense
  • Easy to switch between themes
  • Adjust entire color scheme by changing a few values
  • Consistent across all components

Refining the Dark Mode

The first dark mode was too harsh. I refined it:

Refinement Prompt:

The color palette looks good, but I want the dark mode to be less harsh—
more of a deep gray rather than pure black. Also, can you ensure all the 
colors have proper contrast ratios for accessibility?

The AI adjusted the colors and even explained the contrast ratios. No design tools needed—just conversation.

The Theme System Discovery

The AI showed me how to set up theme switching:

My Prompt:

I want to implement dark mode, but I'm worried about maintaining color 
consistency across dozens of components. I don't want to spend a week 
tweaking colors. What's the best pattern for a maintainable, consistent 
theme system that works in both light and dark modes?

The response included:

  1. CSS variable setup (shown above)
  2. A theme context provider
  3. Persistent theme storage in localStorage
  4. Automatic system preference detection

All working together seamlessly.

Typography Without the Headache

My Typography Prompt:

The text feels generic. I want a typography system that feels modern and 
readable. Proper hierarchy for headings, good line heights, and optimal 
line lengths for reading. Use system fonts for performance.

The AI set up:

  • Font size scale (text-sm, text-base, text-lg, etc.)
  • Proper line heights for different text sizes
  • Max-width for optimal reading (65-75 characters)
  • Responsive sizing for mobile

All configured in tailwind.config.ts and ready to use.

Component Styling Pattern

A consistent pattern emerged for styling components:

// Consistent use of semantic color tokens
<div className="bg-card text-card-foreground border-border">
  <h2 className="text-foreground">Title</h2>
  <p className="text-muted-foreground">Description</p>
</div>

Every component used the same color tokens, ensuring consistency without thinking about it.

The Article Card Evolution

Initial Prompt:

Create an ArticleCard component that displays article metadata. It should 
look clean and modern.

Got a basic card. Then I refined:

Refinement Prompt:

The article cards feel cramped. Increase the vertical spacing between them 
to at least 2rem. Add subtle hover effects—maybe a slight lift and shadow. 
The excerpt text should be slightly muted (use text-muted-foreground) to 
create visual hierarchy. I want a clean, airy feel like Apple's design 
language.

Result: Beautiful cards that felt polished and professional.

What I Learned About Design with AI

Three key insights:

1. Reference Real Examples

Don't say "make it pretty." Say "like Medium's clean layout" or "like GitHub's subtle design."

2. Focus on System, Not Pixels

Instead of tweaking individual colors, build a color system. Instead of adjusting individual font sizes, create a typography scale.

3. Use Semantic Names

--primary and --background are better than --blue-500 and --gray-900. They convey meaning and purpose.

The Final Design System

After our conversations, I had:

  • Color system: Semantic tokens with perfect dark mode
  • Typography: Readable scales with proper hierarchy
  • Spacing: Consistent padding and margins
  • Components: All using the same design language
  • Accessibility: Proper contrast ratios throughout

No design paralysis. No hours of tweaking. Just a clear vision executed beautifully through conversation.

Series Conclusion: The Foundation is Complete

With a beautiful design system in place, we've completed the foundation series. We've gone from concept to a fully deployed, production-ready blog with:

  • A solid tech stack
  • Production-grade MDX pipeline
  • Modern design system with dark mode
  • All built through conversational development

Continue the Journey

👉 Continue to Part 2: Evolution & Growth

In the second series, discover how the blog evolved with lessons learned, best practices, series features, SEO optimization, and comprehensive analytics.

This series (Foundation): Part 1: What is Vibe Coding? • Part 2: Tech Stack • Part 3: First Hour • Part 4: MDX Pipeline • Part 5: Design System (You are here)