Build a Production Design System in React + Tailwind — 50 Prompts From Senior Frontend Engineers
Every React + Tailwind project starts well and ends with a mess of inconsistent components, duplicated styles, and accessibility violations. These 50 prompts prevent that — giving you the architecture, patterns, and component blueprints that maintain consistency from 10 components to 500.
Each prompt produces real, production-ready React + Tailwind code with TypeScript, proper accessibility, responsive design, and testing — not generic examples that need hours of adaptation.
What's Inside — 50 Expert Prompts
Design System Foundation (Prompts 1-12)
- 1. Tailwind Config Architect — Creates a comprehensive tailwind.config.ts for {{brand}}: color palette with semantic tokens, typography scale, spacing system, breakpoints, and animation definitions. Uses CRTSE framework.
- 2. Design Token System — Implements design tokens for {{brand}}: color, spacing, typography, shadow, and border radius tokens with CSS custom properties bridge.
- 3. Theme System Builder — Dark/light mode + custom themes for {{app}}: theme provider, CSS variable strategy, transition animations, and system preference detection.
- 4. Typography System — Complete typography scale for {{app}}: heading hierarchy, body text, captions, labels with responsive sizing and font loading optimization.
- 5. Color System Designer — Accessible color palette for {{brand}}: primary, secondary, neutral, semantic colors with WCAG AA/AAA contrast ratios verified.
- 6-12. Additional prompts covering: icon system, spacing/layout system, elevation/shadow system, border radius system, animation tokens, responsive breakpoint strategy, and CSS reset/base styles.
Component Patterns (Prompts 13-28)
- 13. Button Component System — Complete button library: variants (primary, secondary, ghost, destructive), sizes, states (loading, disabled), icon support, and compound button patterns.
- 14. Form Component Architecture — Form system with {{form_library}} (React Hook Form/Formik): input, select, checkbox, radio, textarea, file upload with validation, error handling, and accessibility.
- 15. Modal/Dialog System — Accessible modal implementation: focus trapping, keyboard navigation, scroll locking, animation, nested modals, and confirmation dialogs.
- 16. Data Table Component — Production data table for {{data_type}}: sorting, filtering, pagination, column resizing, row selection, virtual scrolling, and export.
- 17. Navigation System — Complete navigation for {{app_type}}: header, sidebar, breadcrumbs, mobile menu, command palette, and keyboard shortcuts.
- 18. Toast/Notification System — Notification system: toast variants, auto-dismiss, action buttons, queue management, and screen reader announcements.
- 19-28. Additional prompts covering: card patterns, dropdown menus, tabs/accordions, avatar/badge, progress/loading states, empty states, error boundaries, skeleton loading, infinite scroll, and command palette/search.
Advanced Patterns (Prompts 29-40)
- 29. Animation System — Tailwind + Framer Motion integration for {{app}}: micro-interactions, page transitions, list animations, and gesture-based interactions.
- 30. Responsive Component Patterns — Components that adapt across breakpoints: layout shifts, content reflow, touch targets, and container queries.
- 31. Compound Component Pattern — Implements compound components for {{complex_ui}}: context-based communication, flexible composition, and type-safe API.
- 32. Headless Component Pattern — Separates logic from presentation for {{component}}: hooks for behavior, unstyled primitives, and theme-able wrappers.
- 33-40. Additional prompts covering: polymorphic components, render prop patterns, controlled/uncontrolled components, virtualized lists, drag and drop, rich text editor integration, chart/visualization components, and map integration.
Quality & Performance (Prompts 41-50)
- 41. Component Testing Strategy — Testing approach for {{component_library}}: unit tests, integration tests, visual regression, accessibility testing with Testing Library and Playwright.
- 42. Storybook Documentation — Storybook setup for {{design_system}}: stories, controls, documentation, a11y addon, and visual regression with Chromatic.
- 43. Performance Optimization — React + Tailwind performance for {{app}}: code splitting, lazy loading, memoization, Tailwind purging, and bundle analysis.
- 44-50. Additional prompts covering: accessibility audit, keyboard navigation system, screen reader optimization, internationalization patterns, SSR/SSG considerations, micro-frontend architecture, and design system documentation site.
Each Prompt Includes
- {{Variable}} slots — Brand, app type, complexity level customizable
- Production-ready code — TypeScript, proper types, JSDoc, and exports
- Technique annotation — Chain-of-thought, few-shot, CRTSE
- Accessibility built-in — WCAG 2.1 AA compliance in every component
- Anti-patterns — React + Tailwind mistakes that cause maintenance nightmares
Who This Is For
- Frontend developers building design systems from scratch
- Full-stack developers who need consistent UI patterns
- Design engineers translating Figma designs to code
- Tech leads establishing frontend architecture for their team
What Makes This Different
- System-level thinking — Not individual components but how they work together
- Accessibility-first — Every component meets WCAG 2.1 AA, not "add aria-labels later"
- Tailwind-native — Leverages Tailwind's design system capabilities, not fighting them
Works With
ChatGPT (GPT-4+), Claude (Sonnet/Opus), Gemini Pro, Cursor IDE, GitHub Copilot. Best with Claude for complex component architecture.
React
Tailwind
