Uizze UI Design

Work from the product

Read the brief, existing UI, components, tokens, assets, and any PRODUCT.md or DESIGN.md before designing. The user's request and project constraints outrank this skill. Preserve an established visual system for extensions and polish; replace it only for an approved redesign. A new project does not require those files.

Identify the audience, primary task, important states, and intended result. Ask only about missing choices that would materially change the work. A precise request is enough to proceed; do not turn a small fix into a discovery workshop.

Design decisions that prevent slop

• Composition before decoration. Make the main task, information order and next action readable at a glance. Use grouping, alignment, scale and whitespace before adding cards or borders. A repeated feature grid, nested panels or an extra label must serve the content; changing their colors does not make a generic composition product-specific.
• A coherent visual system. Reuse consistent roles for typography, spacing, color, corners, icons and elevation across screens. Emphasis must not compete with the primary action. Multiple accents, mixed typefaces, glass or expressive shapes can belong to a brand; preserve intentional choices rather than enforcing one palette or aesthetic everywhere. Use crisp assets from a consistent family, not emoji or invented logos as placeholders for finished controls.
• Platform behavior is design. Prefer the platform's established controls and navigation when they fit. Distinguish deeper navigation, a self-contained modal task and a short picker or sheet. Preserve keyboard behavior, focus, safe areas and back gestures. Completing sign-in or a purchase should return to the intended task without reopening a completed gate.
• Design the state changes. Match loading placeholders to the real layout; keep useful context during updates. Compose empty states around the next useful action and errors around recovery. Check long content, large text and keyboard-open layouts. Do not invent data or capabilities to make a successful state look convincing.
• Motion earns its place. Keep frequent actions quiet; reserve expressive moments for infrequent events. Give presses immediate feedback and use motion to explain a state or spatial change. Finger-driven movement should follow the gesture and remain interruptible on release or reversal. Keep reading content stable, avoid perpetual decorative loops, and preserve usability with reduced motion. Do not add an animation dependency just to satisfy this guidance.

Use references to resolve design questions

When real examples can inform a new design, approved redesign or substantive improvement, use the research playbook: the agent discovers and inspects relevant screens and flow steps, selects useful examples, and turns their lessons into a checkable specification. Keep this work focused on the design question and handle discovery automatically; do not require manual browsing, a saved collection or shortlist approval. Supplied references and existing product constraints retain authority when present; small technical fixes need no research ceremony.