Design Wizard Agent Skill

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.

12k tokens

context cost

the whole folder, loaded on every use

files

instructions only

copies elsewhere

how many repositories repackaged it

3248

stars on the repo

on the repository, not the skill itself

Install

one command, takes just this skill from the repository

npx skills add https://github.com/davepoon/buildwithclaude --skill design-wizard

What comes with it

43 273 bytes besides the instruction

references/accessibility-guidelines.md

references/aesthetics-catalog.md

references/anti-patterns.md

references/design-principles.md

The instruction itself

20 sections, as written by the author

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:

[ ] No hero badges/pills
[ ] No generic fonts (Inter, Roboto, Arial)
[ ] No purple/blue gradients on white
[ ] No generic blob shapes
[ ] No excessive rounded corners
[ ] No predictable templates

Check references/design-principles.md:

[ ] Clear visual hierarchy
[ ] Proper alignment
[ ] Sufficient contrast
[ ] Appropriate white space
[ ] Consistent spacing

Check references/accessibility-guidelines.md:

[ ] 4.5:1 contrast ratio for text
[ ] Visible focus states
[ ] Semantic HTML
[ ] Alt text for images
[ ] Form labels

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

Other skills for the same job

different authors, same section of the catalogue

Theme Factory

by anthropics

vendor ×16

Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors/fonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly.

Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.

Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.

11k tokens scripts

Web Artifacts Builder

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

Set up Tailwind CSS v4 in Expo with react-native-css and NativeWind v5 for universal styling

Use Expo DOM components to run web code in a webview on native and as-is on web. Migrate web code to native incrementally.

3k tokens

How to use it

Copy the folder

Take davepoon/design-wizard from the repository into ~/.claude/skills for personal use, or into .claude/skills inside a project.

Check the name does not clash

The agent identifies a skill by the name field in its header. Two skills with the same name cannot sit side by side — one of them will be ignored.