Design System UI

Build UI that fits the product's existing components, visual style, and interaction patterns.

For multi-step work, start with a short user-visible update that names the product context you are inspecting first.

Goal

Make the requested screen or component easier to read and use while keeping it consistent with the rest of the product. Use hierarchy, grouping, spacing, and interaction feedback to support its main task.

Context Budget

Before coding, inspect only the context needed to make the UI fit:

• nearby pages with a similar purpose
• shared components and page shells
• tokens, theme files, Tailwind/CSS config, and typography
• spacing, radius, borders, shadows, surfaces, icons, and motion
• existing loading, empty, error, disabled, focus, and responsive patterns