Responsive Design System
Generating a full design system page in one prompt establishes visual consistency for your entire project. The specific token values ensure v0 outputs a cohesive system.
Create a design system showcase page that demonstrates these components at all breakpoints:\n\n1. Button variants: primary, secondary, outline, ghost, destructive — each in sm, md, lg sizes\n2. Input variants: text, email, password with show/hide toggle, textarea, select dropdown\n3. Card component: image top, title, description, tags row, action buttons\n4. Modal/Dialog: centered overlay with close button, title, body, footer with Cancel/Confirm\n5. Toast notifications: success (green), error (red), info (blue) — positioned top-right\n\nDesign tokens:\n- Colors: {{primary_color}} primary, slate gray neutral, semantic colors for success/error/warning\n- Radius: 6px default, 12px for cards, full for badges\n- Shadows: sm for cards, md for modals, lg for dropdowns\n\nLayout: Grid each component category in its own section with a label. Responsive — 3 columns on desktop, 2 on tablet, 1 on mobile. Use Tailwind and shadcn/ui exclusively.Variables to customize
Why this prompt works
Generating a full design system page in one prompt establishes visual consistency for your entire project. The specific token values ensure v0 outputs a cohesive system.
Save this prompt to your library
Organize, version, and access your best prompts across ChatGPT, Claude, and Cursor.
Related prompts
Forcing the agent to plan before acting prevents premature execution and wasted steps. Explicit dependency mapping enables parallel execution and catches logical gaps early.
Tool Selection AgentThe ReAct pattern (Reason + Act) creates an explicit reasoning trace that improves tool selection accuracy. The error-handling rule prevents infinite retry loops.
Prompt CompressorExplicitly requiring all functional requirements to be preserved prevents the model from over-compressing and losing critical instructions.
Memory Management AgentExplicit memory read/write instructions create agents that improve over time. Categorization keeps memories organized, and the deduplication rule prevents context bloat.