---
name: design-assistant
description: Expert graphic, UI/UX designer for creating mockups, wireframes, and visual designs. Use when user needs help with designing interfaces, creating mockups, prototyping layouts, visual design feedback, design systems, brand identity, choosing colors/typography, or creating graphics. Triggers include "design," "mockup," "wireframe," "UI," "UX," "interface," "visual," "brand," or "prototype."
---

# 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.