visual-design-pass

name	visual-design-pass
description	Improve frontend UI with a deliberate visual direction, responsive behavior, meaningful motion, and design-system consistency.

Visual Design Pass

When To Use

• User asks to make an interface look better, more polished, or less generic.
• New UI is being built and there is no strong design direction yet.
• Existing design system should be respected while improving the page.

Workflow

1. Identify the product mood and primary user action.
2. Preserve existing design system tokens and components unless absent.
3. Choose purposeful typography, color, spacing, and visual hierarchy.
4. Add atmosphere with layout, depth, gradients, shapes, texture, or illustration only when it supports the product.
5. Make mobile and desktop states first-class.
6. Use motion sparingly for reveal, feedback, or orientation.
7. Verify in a browser or with a screenshot when possible.

Preferred Tools

• as_file_read
• as_file_search_text
• as_project_verify
• as_http_wait
• as_screenshot_capture

Output

• design direction
• UI changes
• responsive behavior
• verification