Generate a workflow cursor rule `.cursor/rules/workflows/uiux/visual-design-and-UI-refinement.mdc`, guide AI assistants to go through the Visual Design and UI Refinement phase for UX/UI design in a step-by-step and single question only iterative conversational process. **Goal**: Create a visually cohesive and engaging interface aligned with the brand identity. **Tasks**: 1. **Develop a Design System**: - Create reusable UI components (e.g., buttons, forms, cards) with consistent styles. - Define rules for component usage (e.g., primary button for main actions, secondary for less critical). - Ensure components are modular and scalable for future updates. 2. **Create a Style Guide**: - Specify typography (e.g., font families, sizes, weights), color schemes (e.g., primary, secondary, accent colors), and iconography. - Include guidelines for spacing, grid systems, and visual hierarchy. - Align styles with the brand’s visual identity (e.g., logo, tone, values). 3. **Design High-Fidelity Mockups**: - Transform wireframes and prototypes into polished screens with brand-aligned visuals. - Apply color, typography, and imagery to enhance aesthetics and usability. - Ensure visual hierarchy supports user tasks (e.g., prominent call-to-action buttons). 4. **Ensure Accessibility Compliance**: - Verify designs meet WCAG 2.1 standards (e.g., minimum 4.5:1 contrast ratio for text). - Check for colorblind-friendly palettes and sufficient font sizes (e.g., 16px minimum for body text). - Suggest accessibility improvements (e.g., alt text for images, keyboard navigation support). 5. **Gather Stakeholder Feedback**: - Present mockups to stakeholders, highlighting how designs align with brand and user needs. - Summarize feedback and propose revisions (e.g., adjust colors for better contrast). - Finalize designs after incorporating approved changes. **Rationales**: - A design system ensures consistency across the app, reducing design debt and speeding up development. - A style guide provides a single source of truth for visual decisions, ensuring brand alignment. - High-fidelity mockups validate the aesthetic and functional experience, building stakeholder confidence. - Accessibility compliance makes the app inclusive, expanding the user base and meeting legal standards. - Stakeholder feedback ensures designs meet business expectations, avoiding last-minute changes. **Deliverables**: # Design System and Style Guide ## Design System ### Components - **Primary Button**: - Style: [e.g., Solid fill, rounded corners, 16px padding] - Usage: Main actions (e.g., Submit, Save) - **Text Input**: - Style: [e.g., 1px border, 16px text] - Usage: Form fields for user input - **[Other components, e.g., Cards, Modals]** ## Style Guide - **Typography**: - Headings: [e.g., Font: Sans-serif, 24px, Bold] - Body: [e.g., Font: Sans-serif, 16px, Regular] - **Colors**: - Primary: [e.g., #007AFF, used for main actions] - Secondary: [e.g., #6B7280, used for supporting elements] - Accent: [e.g., #34C759, used for highlights] - **Iconography**: - Style: [e.g., 24x24px, outline, 2px stroke] - Usage: [e.g., Consistent across navigation] - **Spacing**: - Grid: [e.g., 8px base unit, 16px margins] - Padding: [e.g., 16px for containers] ## High-Fidelity Mockups - **Screen: Homepage**: - Visuals: [e.g., Blue header with white logo, centered search bar] - Hierarchy: [e.g., Search bar most prominent, followed by featured content] - **Screen: User Dashboard**: - [Similar structure as above] ## Accessibility Compliance - **Contrast**: [e.g., 4.7:1 for body text] - **Font Size**: [e.g., Minimum 16px for readability] - **Recommendations**: [e.g., Add alt text for icons] ## Stakeholder Feedback - **Input**: [e.g., “Increase button contrast”] - **Revisions**: [e.g., Changed primary button color to #005BB5] --- ### **Guidance for AI Assistant** - **Proactivity**: Anticipate designer needs by suggesting additional tasks (e.g., “Would you like me to generate more user flow variations?”) without overwhelming them. - **Clarity**: Provide concise, actionable suggestions and deliverables, avoiding vague or generic advice. - **Iterative Support**: Continuously check in with the designer to validate outputs and incorporate feedback. - **User-Centric Focus**: Always tie recommendations back to user needs and research findings. - **Consistency**: Ensure deliverables align across phases (e.g., wireframes reflect sitemap, mockups reflect prototype). - **Accessibility**: Proactively include accessibility considerations in all deliverables.