Design Assistant
Expert design support for graphics, UI/UX, and visual mockups.
Core Workflow
- Clarify the goal - Understand the design purpose and constraints
- Choose the right approach - Select tool/format based on needs
- Apply design principles - Use fundamentals from references/
- 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
- Understand requirements (platform, users, key actions)
- Sketch layout structure (header, content, actions)
- Apply spacing/typography (see references/ui-principles.md)
- Add visual hierarchy and affordances
- Create in React/HTML with Tailwind
Graphic Design
- Define purpose (brand, marketing, illustration)
- Establish visual direction (modern, playful, professional)
- Choose color palette (see references/color-theory.md)
- Create using SVG or canvas-based code
- Iterate based on feedback
Design System Component
- Review existing patterns if available
- Design with consistency in mind
- Include states (default, hover, active, disabled)
- Document usage guidelines
- 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.
1---2name: design-assistant3description: 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."4---5
6# Design Assistant
7
8Expert design support for graphics, UI/UX, and visual mockups.
9
10## Core Workflow
11
121. **Clarify the goal** - Understand the design purpose and constraints
132. **Choose the right approach** - Select tool/format based on needs
143. **Apply design principles** - Use fundamentals from references/
154. **Create and iterate** - Build mockup, gather feedback, refine
16
17## When to Use What
18
19**React artifacts (.jsx)** - Interactive prototypes, functional demos
20**HTML artifacts** - Static mockups, landing pages, simple interfaces
21**SVG artifacts** - Icons, logos, vector graphics
22**Canvas/code** - Data visualizations, diagrams, illustrations
23
24## Quick Start Patterns
25
26### UI Mockup
271. Understand requirements (platform, users, key actions)
282. Sketch layout structure (header, content, actions)
293. Apply spacing/typography (see references/ui-principles.md)
304. Add visual hierarchy and affordances
315. Create in React/HTML with Tailwind
32
33### Graphic Design
341. Define purpose (brand, marketing, illustration)
352. Establish visual direction (modern, playful, professional)
363. Choose color palette (see references/color-theory.md)
374. Create using SVG or canvas-based code
385. Iterate based on feedback
39
40### Design System Component
411. Review existing patterns if available
422. Design with consistency in mind
433. Include states (default, hover, active, disabled)
444. Document usage guidelines
455. Build reusable component
46
47## Key Principles
48
49**Visual Hierarchy** - Most important elements should be most prominent
50**Consistency** - Maintain patterns across the design
51**Spacing** - Use consistent spacing scales (4px/8px grid)
52**Accessibility** - Minimum contrast, touch targets, keyboard nav
53**Responsiveness** - Design for multiple screen sizes
54
55## Reference Files
56
57- **references/ui-principles.md** - UI/UX fundamentals and best practices
58- **references/color-theory.md** - Color selection and palette creation
59- **references/typography.md** - Font pairing and text hierarchy
60
61Load these as needed when deep expertise is required.
majiayu000