VibeHarness: Command for Claude Code

UI Design — Clean MVP Design

This command is part of the VibeHarness framework. Check docs/biz/ for screen flow before designing. Update Progress.md after UI completion.

Design guide for making non-developer MVPs look professional.

Design Principles

1. Keep it simple: Fewer elements = more professional. Only show what's necessary
2. Be consistent: Unify colors, fonts, spacing. Using shadcn/ui default theme handles this
3. Mobile first: Build for small screens first, expand to larger with breakpoints
4. Generous whitespace: Tight spacing looks cramped. Use padding and gap generously

Color System

Use shadcn/ui default theme, customize only the brand color:

/* globals.css */
@layer base {
  :root {
    --primary: 222.2 47.4% 11.2%;      /* Main color */
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96.1%;
    --accent: 210 40% 96.1%;
    --destructive: 0 84.2% 60.2%;       /* Error/delete */
  }
  .dark {
    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 11.2%;
  }
}

When non-developer says "make it blue" — just change --primary.

Common Layout

Nav + Content + Footer:

<div className="min-h-screen flex flex-col">
  <nav className="border-b px-4 py-3 flex items-center justify-between">
    <h1 className="text-lg font-bold">{App Name}</h1>
    <div className="flex gap-2">{Nav buttons}</div>
  </nav>
  <main className="flex-1 container mx-auto px-4 py-8">
    {Content}
  </main>
  <footer className="border-t px-4 py-4 text-center text-sm text-muted-foreground">
    {Footer}
  </footer>
</div>

Common UI Patterns

Card List

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  {items.map(item => (
    <Card key={item.id} className="hover:shadow-lg transition-shadow">
      <CardHeader>
        <CardTitle>{item.title}</CardTitle>
        <CardDescription>{item.description}</CardDescription>
      </CardHeader>
      <CardContent>{item.content}</CardContent>
      <CardFooter>
        <Button>View Details</Button>
      </CardFooter>
    </Card>
  ))}
</div>