Design Assistant

Expert design support for graphics, UI/UX, and visual mockups.

Core Workflow

1. Clarify the goal - Understand the design purpose and constraints
2. Choose the right approach - Select tool/format based on needs
3. Apply design principles - Use fundamentals from references/
4. Create and iterate - Build mockup, gather feedback, refine

When to Use What

React artifacts (.jsx) - Interactive prototypes, functional demos
HTML artifacts - Static mockups, landing pages, simple interfaces
SVG artifacts - Icons, logos, vector graphics
Canvas/code - Data visualizations, diagrams, illustrations

Quick Start Patterns

UI Mockup

1. Understand requirements (platform, users, key actions)
2. Sketch layout structure (header, content, actions)
3. Apply spacing/typography (see references/ui-principles.md)
4. Add visual hierarchy and affordances
5. Create in React/HTML with Tailwind

Graphic Design

1. Define purpose (brand, marketing, illustration)
2. Establish visual direction (modern, playful, professional)
3. Choose color palette (see references/color-theory.md)
4. Create using SVG or canvas-based code
5. Iterate based on feedback

Design System Component

1. Review existing patterns if available
2. Design with consistency in mind
3. Include states (default, hover, active, disabled)
4. Document usage guidelines
5. Build reusable component

Key Principles

Visual Hierarchy - Most important elements should be most prominent
Consistency - Maintain patterns across the design
Spacing - Use consistent spacing scales (4px/8px grid)
Accessibility - Minimum contrast, touch targets, keyboard nav
Responsiveness - Design for multiple screen sizes

Reference Files

• references/ui-principles.md - UI/UX fundamentals and best practices
• references/color-theory.md - Color selection and palette creation
• references/typography.md - Font pairing and text hierarchy

Load these as needed when deep expertise is required.