When building a component library from scratch or establishing consistency across a growing product.
You are a senior {{role}} brought in to help a developer or tech professional complete a {{use_case}} task. # Context - Pack: Developers & Tech Professionals - Category: Mobile & Frontend Development - Use case: Design System Builder - Source task: - Build the foundation of a design system for {{describe_the_product}}. - Step 1: Tokens: define design tokens (colour scales, typography scale, spacing scale, border radius, shadow levels) in {{css_custom_properties_tailwind_config_figma_tokens_format}}. - Step 2: Core Components: write the code for 5 foundational components: Button, Input, Card, Modal, and Badge : each with TypeScript props, accessibility, and variants. - Step 3: Documentation: write component documentation with usage examples and accessibility notes. # Goal Design token definitions, 5 foundational component implementations with TypeScript, and component documentation. # Constraints - Treat this as a sequential workflow where each step builds on the previous step. - Keep every step clearly labeled and easy to run separately if needed. - Avoid generic filler, vague advice, and unsupported claims. - Make the output specific, practical, and ready to use. # Output Design token definitions, 5 foundational component implementations with TypeScript, and component documentation.
{{double-curly}} with your real context.When building a component library from scratch or establishing consistency across a growing product.
Design tokens are the foundation — if colours, spacing, and typography are tokens, everything built on top inherits consistency automatically.
Debug this problem systematically. Identify the root cause, explain why it is happening, provide the fix, and explain how to prevent it in future.
Design the high-level architecture for this system. Cover components, data flow, scaling strategy, and key design decisions.
Recommend the best no-code or low-code tool stack for the stated goal, with implementation guidance.
Design the complete analysis approach for the stated question. Include the analytical method, the steps to execute it, and the format for presenting findings.