# Design Assistant

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

- Skill: `majiayu000/design-assistant` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds add majiayu000/design-assistant`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/design-assistant/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/design-assistant

---


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