Play 3: A Pragmatic Design System

If you're like me, the design part is the most intimidating. Staring at a blank canvas and trying to pick colors and fonts is paralyzing. But a design system isn't some mystical art form; it's a set of rules. And AIs are very, very good at helping you create and follow rules.

This play is about creating a "good enough" design system that solves 95% of your UI problems. It's not about winning design awards; it's about building a consistent, trustworthy interface that lets your product shine. This is the system I used for UpvoteVibe.

The Play-by-Play: From Vibe to Visuals

The goal is to turn your abstract brand values into concrete design tokens (colors, fonts, spacing) that you can give to your AI collaborator.

Step 1: Define Your Brand's Vibe (15 mins)

Before you can design anything, you need to know what you stand for. Your brand values are the emotional and philosophical foundation of your design system.

I started by looking at my product vision and asking the AI:

"Based on the UpvoteVibe vision—a place for honest, community-driven signal on AI-built projects—what should our brand values be?"

This led directly to the principles in specs/brand-spec.md:

• We champion makers...
• We lead with honesty.
• We keep the door open.
• We value signal over spectacle.
• We build trust through community.
• We spark curiosity.

These values became the design brief for the AI.

Step 2: Translate Vibe into Tokens (30 mins)

This is where the magic happens. You can use the AI to translate your abstract values into a concrete design system.

My prompt was:

"Given these brand values—especially 'honesty', 'community', 'signal over spectacle'—recommend a color palette and typography system. It should feel trustworthy but not corporate, and approachable but not childish. It must also meet WCAG AA accessibility standards."

The AI's recommendations were excellent because they were grounded in established design theory:

• Colors: A warm orange for the primary action ("community," "curiosity") and a set of neutral grays for the UI ("honesty," "signal over spectacle").
• Typography: System fonts for familiarity and performance. A clear, readable body font and a slightly more distinct heading font.
• Spacing: A 4px grid system for consistency.

I then worked with the AI to generate the actual Tailwind CSS color tokens, ensuring they were implemented with OKLCH for perceptual uniformity.

Step 3: Build Core Components (15 mins)

With your tokens defined, you can now ask the AI to build your first few core components. This validates your design system and gives you a set of reusable building blocks.

I started with the most important ones, based on my user stories:

• The Vibe Button: The primary call to action. It needed to use the primary orange, have clear hover/active states, and be fully accessible.
• Project Cards: The core of the discovery experience. The design needed to align with "signal over spectacle," prioritizing clarity over flash.
• Status Badges: A key part of "leading with honesty," these needed to clearly distinguish between a Prototype and a Live project.

My prompt looked something like this:

"Create a 'Vibe Button' React component using Tailwind CSS. It should use our primary-600 color for the background, have a slightly darker primary-700 for the hover state, and include a loading spinner state. Ensure it is fully accessible with focus rings using our focus-500 color."

Your Design System Is Your AI's Style Guide

This simple, token-based system is now a powerful constraint you can apply to every AI prompt.

Instead of vague requests like "make the page look nice," you can be specific and directive:

• "Use our neutral-100 for the card background and neutral-900 for the body text."
• "The spacing between these elements should be our space-4 token."
• "All interactive elements must have a focus state using our focus-500 color."

This is how you, as a non-designer, can art-direct an AI to produce a clean, consistent, and professional-looking application. It's not about having a perfect design eye; it's about having a solid system and applying it consistently.

With your design system in place, you're ready to start building features.

Next: Break Down Features & Build