Free Claude Code DESIGN.md generator

# DESIGN.md

## Product context
- Product: a B2B AI workflow product that helps teams review customer conversations
- Audience: operations leads and founders who need to spot issues quickly
- Surface: SaaS dashboard
- Stack: Next.js, React, Tailwind, shadcn-style components

## Design goal
Create a UI that feels specific to this product and workflow, not like a generic AI-generated SaaS template. Prioritize clear hierarchy, realistic product details, useful states, and fast comprehension.

## Visual direction
- Style: Dense, utilitarian B2B with restrained color
- Use a restrained palette with one strong accent.
- Use typography scale, spacing, and density that match the product's seriousness.
- Use realistic product copy and data labels.
- Make every card, table, button, and section serve a concrete user job.

## Sections to design
1. overview metrics
2. workflow table
3. filters
4. empty state

## Required states
- Default state with realistic data.
- Empty state with a useful next action.
- Loading state that preserves layout stability.
- Error state with recovery copy.
- Selected, hover, disabled, and active states for interactive controls.
- Mobile layout that preserves the primary action and content hierarchy.

## Components to prefer
- Clear navigation with visible current location.
- Compact cards with meaningful labels and values.
- Tables, lists, timelines, or forms when they fit the workflow.
- Buttons with specific verbs.
- Icons only where they clarify scanning.

## Components and patterns to avoid
avoid purple gradient hero sections, fake analytics, vague cards, excessive rounded corners, decorative blobs, and placeholder copy

## Implementation instructions for Claude Code
1. Read this file before changing UI code.
2. Identify the existing components, styles, and routes that should be reused.
3. Implement one screen section at a time.
4. Keep layout dimensions stable across loading, empty, and populated states.
5. Do not add decorative UI that is not tied to a product job.
6. After implementation, inspect the UI at desktop and mobile widths.

## Critique pass before final code
Before editing implementation files, compare the current UI against this DESIGN.md and list the specific gaps by layout, spacing, typography, color, component shape, copy, responsiveness, and interaction states. Then make the smallest code changes that close those gaps.

## Final acceptance checklist
- The first viewport explains the product and primary action without extra prose.
- The UI no longer relies on generic SaaS filler.
- The mobile version keeps the same story and action priority.
- Each visible module has realistic content and a reason to exist.
- The implemented code follows existing project patterns.