Buildwithclaude design-wizard

Interactive design wizard that guides through a complete frontend design process with discovery, aesthetic selection, and code generation. Use for creating distinctive, production-ready UI.

install

source · Clone the upstream repo

git clone https://github.com/davepoon/buildwithclaude

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/davepoon/buildwithclaude "$T" && mkdir -p ~/.claude/skills && cp -r "$T/plugins/frontend-design-pro/skills/design-wizard" ~/.claude/skills/davepoon-buildwithclaude-design-wizard && rm -rf "$T"

manifest: plugins/frontend-design-pro/skills/design-wizard/SKILL.md

Design Wizard

An interactive wizard that guides you through creating distinctive, production-ready frontend designs.

Purpose

This skill orchestrates the complete design process:

Discovery - Understanding what to build
Research - Analyzing trends and inspiration
Direction - Selecting aesthetic approach
Colors - Choosing color palette
Typography - Selecting fonts
Implementation - Generating code
Review - Validating quality

Process Overview

┌─────────────┐     ┌─────────────┐     ┌─────────────┐
│  Discovery  │ ──▶ │  Research   │ ──▶ │  Moodboard  │
└─────────────┘     └─────────────┘     └─────────────┘
                                              │
┌─────────────┐     ┌─────────────┐           ▼
│   Review    │ ◀── │  Generate   │ ◀── ┌─────────────┐
└─────────────┘     └─────────────┘     │ Colors/Type │
                                        └─────────────┘

Step 1: Discovery Questions

Ask the user about their project:

Question 1: What are you building?

Landing page
Dashboard
Blog/Content site
E-commerce
Portfolio
SaaS application
Mobile app UI
Other (describe)

Question 2: Project context

Personal project
Startup/new product
Established brand
Client work
Redesign of existing

Question 3: Target audience

Developers/technical
Business professionals
Creative/designers
General consumers
Young/Gen-Z
Luxury/premium market

Question 4: Background style preference

Pure white (#ffffff)
Off-white/warm (#faf8f5)
Light tinted (use lightest palette color)
Dark/moody (use darkest palette color)
Let me decide based on aesthetic

Question 5: Any specific inspiration?

URLs to analyze
Aesthetic keywords
Specific requirements
Skip (use trend research)

Step 2: Research Phase

Based on answers, optionally invoke:

```
trend-researcher
```
- For current design trends
```
inspiration-analyzer
```
- For specific URLs provided

Step 3: Moodboard Phase

Invoke

moodboard-creator

to:

Synthesize research into direction
Present options to user
Iterate until approved

Step 4: Aesthetic Selection

Based on discovery and moodboard, suggest aesthetics from catalog:

For Modern/Premium:

Dark & Premium - Sophisticated, high-contrast
Glassmorphism - Layered, translucent
Bento Grid - Structured, modular

For Bold/Distinctive:

Neobrutalism - Raw, impactful
Statement Hero - Typography-focused
Editorial - Magazine-inspired

For Minimal/Clean:

Scandinavian - Warm minimal
Swiss Typography - Grid-based clarity
Single-Page Focus - Concentrated impact

For Playful/Creative:

Y2K/Cyber - Retro-futuristic
Memphis - Colorful geometric
Kawaii - Cute, rounded

See

references/aesthetics-catalog.md

for full catalog.

Step 5: Color & Typography

Invoke specialized skills:

```
color-curator
```
- Browse Coolors or select from fallbacks
```
typography-selector
```
- Browse Google Fonts or use pairings

Map selections to Tailwind config.

Step 6: Code Generation

Generate single HTML file with:

Structure

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>[Project Title]</title>

  <!-- Google Fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=[Font1]&family=[Font2]&display=swap" rel="stylesheet">

  <!-- Tailwind CDN -->
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            // Custom colors from palette
          },
          fontFamily: {
            // Custom fonts
          }
        }
      }
    }
  </script>

  <style>
    /* Custom animations */
    /* Focus states */
    /* Reduced motion */
  </style>
</head>
<body>
  <!-- Semantic HTML structure -->
</body>
</html>

Requirements

Mobile-responsive (Tailwind breakpoints)
Semantic HTML (header, main, nav, footer, section)
Accessible (ARIA labels, focus states, contrast)
No Lorem ipsum (realistic placeholder content)
Animations respect prefers-reduced-motion
Keyboard navigable

Step 7: Self-Review

Check against

references/anti-patterns.md

Check

references/design-principles.md

Check

references/accessibility-guidelines.md

Output Format

Deliver:

Final HTML file
Brief explanation of design choices
List of fonts used (for reference)
Color palette summary

Iteration

If user requests changes:

Note specific feedback
Make targeted adjustments
Re-run self-review
Present updated version

Maximum 3 major iterations, then consolidate feedback.

References

```
references/design-principles.md
```
- Core design principles with code
```
references/aesthetics-catalog.md
```
- Full aesthetic catalog
```
references/anti-patterns.md
```
- What NOT to do
```
references/accessibility-guidelines.md
```
- WCAG compliance