What does the Design Wizard generate?

A single HTML file with Tailwind-based structure, Google Fonts links, and a production-ready scaffold as demonstrated in the code generation step.

Which stages are involved in the workflow?

Discovery, Research, Moodboard, Colors/Type, Implementation, and Review, culminating in code generation.

How are colors and typography chosen and applied?

Selections are guided by color-curator and typography-selector tools and mapped to a Tailwind configuration for consistent styling.

Design Wizard

npx machina-cli add skill davepoon/buildwithclaude/design-wizard --openclaw

Files (1)

SKILL.md

6.1 KB

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

Source

git clone https://github.com/davepoon/buildwithclaude/blob/main/plugins/frontend-design-pro/skills/design-wizard/SKILL.md

View on GitHub

Overview

Design Wizard orchestrates the complete frontend design process from discovery to code generation. It covers Discovery, Research, Moodboard, Colors, Typography, Implementation, and Review to produce distinctive, production-ready UI.

How This Skill Works

The skill guides you through seven stages: Discovery, Research, Moodboard, Colors/Typography, Implementation, and Review. It can invoke specialized tools like color-curator and typography-selector, maps selections to Tailwind config, and generates a single HTML file ready for deployment with Google Fonts integration.

When to Use It

Building a marketing landing page for a startup and needing a cohesive aesthetic from discovery to production-ready code.
Designing a dashboard UI for a SaaS product with a distinctive visual language and modular layout.
Redesigning an existing brand’s UI to align with a refreshed moodboard and new typography/colors.
Creating a personal portfolio with a unique style and optimized typography and color palette.
Prototyping a mobile app UI with a fresh, bold aesthetic and a single-file HTML prototype.

Quick Start

Step 1: Launch the Design Wizard and answer the Discovery questions to define scope.
Step 2: Let the wizard perform Research and Moodboard, then select an aesthetic from the catalog and finalize Colors/Typography.
Step 3: Review the generated single HTML file (with Tailwind setup) and export or copy the code for deployment.

Best Practices

Begin with clear discovery questions to anchor scope and audience.
Synthesize research into a focused moodboard before selecting an aesthetic.
Choose colors and typography that align with the intended cataloged aesthetic.
Map selections to Tailwind config to ensure production-ready styling.
Review the generated single HTML file for accessibility and performance before export.

Example Use Cases

Landing page for a fintech startup with a premium dark & premium aesthetic.
Admin dashboard for analytics with a Bento Grid modular layout.
Brand redesign for a creative agency using Neobrutalism and a bold hero.
Designer portfolio site leveraging Scandinavian warmth and clean typography.
E-commerce product page prototype using Y2K/Cyber and vibrant colors.

Frequently Asked Questions

Add this skill to your agents