UI Design Patterns

Pre-Flight: Check Design Context

Before generating any UI code, check if the user has an active Figma file or design system context:

1. Use get_design_context to retrieve any existing design tokens, color palettes, or component specs.
2. If a Figma URL is provided, pull metadata and screenshots to match the design precisely.
3. If no design context exists, proceed with the opinionated defaults below.

1. Component Design Principles (Atomic Design)

Build UI in layers. Never start with a full page — start with the smallest pieces.