uizard-expert skill

---
name: UIzard Expert
description: UIzard - AI design tool, screenshot to design, wireframe to UI
allowed-tools: Read, Edit, Bash, WebFetch
model: sonnet
---

# UIzard Expert

AI-powered design tool for non-designers.

## What is UIzard?

Transform ideas into designs without design skills:
- Screenshot → editable design
- Text description → UI mockup
- Wireframe → polished design
- Design → code export

## Pricing (2026)

- **Free**: 3 projects
- **Pro**: $19/mo - Unlimited projects
- **Business**: $39/mo - Team features

## Key Features

### Screenshot to Design
1. Upload any app screenshot
2. UIzard converts to editable layers
3. Modify colors, text, layout
4. Export new design

### Text to Design (Autodesigner)
```
Prompt: "A fitness app dashboard with workout stats,
progress chart, and quick action buttons"
```
→ Generates complete UI screens

### Hand-Drawn to Digital
1. Sketch UI on paper
2. Take photo
3. UIzard converts to clean wireframe
4. Refine and polish

### Theme Generator
1. Upload brand colors/logo
2. UIzard creates design system
3. Apply to all screens

## Workflow for Vibe Coders

### 1. Rapid Prototyping
```
1. Describe app idea to UIzard
2. Get 5-10 screen designs
3. Share with friends for feedback
4. Iterate in UIzard
5. Export for development
```

### 2. Clone & Customize
```
1. Screenshot competitor app you like
2. Import to UIzard
3. Modify for your brand
4. Export components
```

### 3. Design System Creation
```
1. Design one screen perfectly
2. UIzard generates component library
3. Apply consistency across app
4. Export design tokens
```

## Export Options

### Developer Handoff
- CSS values
- React code (basic)
- Design specs
- Asset export

### Figma Export
- Move to Figma for refinement
- Keep iterating with team

### Image Export
- PNG for mockups
- SVG for icons

## Integration with Claude

### Workflow
```
1. Use UIzard to create visual design
2. Screenshot the design
3. Send to Claude: "Convert this UIzard design to SwiftUI"
4. Claude generates production code
```

### Design Review
```
1. Export UIzard screenshot
2. Send to Claude Vision
3. "Review this design for accessibility and usability"
4. Get improvement suggestions
5. Implement in UIzard
```

## Best Practices

### 1. Start with Templates
UIzard has templates for:
- Mobile apps (iOS/Android)
- Web apps
- Landing pages
- Dashboards

### 2. Use Components
- Create reusable components
- Maintain consistency
- Easier to update globally

### 3. Design Responsively
- Preview on multiple screen sizes
- Export appropriate assets
- Consider breakpoints

## Comparison

| Tool | AI Generation | Learning Curve | Price |
|------|--------------|----------------|-------|
| UIzard | Excellent | Very Low | $19/mo |
| Figma | Limited | Medium | $15/mo |
| Sketch | None | Medium | $120/yr |
| Framer | Good | Low | $20/mo |

## Limitations

- Not as precise as Figma
- Limited animation support
- Code export is basic
- Better for prototyping than production

## When to Use

✅ **Use UIzard for:**
- Quick prototypes
- Non-designer founders
- Idea validation
- Client presentations

❌ **Use Figma instead for:**
- Pixel-perfect designs
- Complex interactions
- Team collaboration
- Design systems at scale

Use when: Quick prototypes, non-designer teams, screenshot to design, idea validation