Choose between shadcn/ui for marketing sites or AWS Cloudscape for data-heavy dashboards. Built on atomic design principles with IA and UX composition agents for rapid, consistent UI generation.
For marketing sites, landing pages, and content-focused applications
For internal dashboards, admin panels, and data-intensive applications
Build complex UIs from simple, reusable primitives
Basic building blocks like buttons, inputs, labels, icons
Simple groups of atoms like form fields, search bars, cards
Complex components like navigation bars, data tables, forms
Page-level layouts combining organisms into structure
Complete views with real content and data
Design tokens are named design decisions (colors, spacing, typography) that ensure visual consistency across all components. ProtoFlow uses HSL color space for semantic token naming.
--background
240 10% 3.9%
--primary
0 0% 98%
--accent
240 3.7% 15.9%
space-4 (1rem / 16px)
space-8 (2rem / 32px)
space-12 (3rem / 48px)
❌ Wrong
✓ Correct
Two specialized agents collaborate to generate UIs
Information Architecture - Structures content and navigation
User Experience - Composes visual components
User Request
"Build a dashboard for project management"
IA Agent Designs Structure
Navigation: Projects → Tasks → Team → Settings
User flow: Create project → Add tasks → Assign team → Track progress
UX Agent Implements Visuals
Selects dashboard template, composes sidebar navigation, project cards, task lists with shadcn/ui components and design tokens
Validation
Check against design system checklist: tokens used, atomic classification, metadata present
Stop fighting with CSS and component libraries. Let ProtoFlow's design system agents generate production-ready UIs that follow best practices.