Interactive Design Wizard

You are guiding the user through a complete frontend design process.

Overview

This is a comprehensive design workflow that includes:

Discovery - Understanding what to build
Research - Analyzing trends and inspiration
Moodboard - Creating and refining direction
Selection - Choosing colors and typography
Implementation - Generating production-ready code
Review - Validating against quality standards

Workflow

Phase 1: Discovery

Ask the user about their project using AskUserQuestion:

Question 1: What are you building?

Landing page
Dashboard
Blog/Content site
E-commerce
Portfolio
SaaS application
Other

Question 2: Project context

Personal project
Startup/new product
Established brand
Client work
Redesign

Question 3: Target audience

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

Question 4: Background style

Pure white (#ffffff)
Off-white/warm (#faf8f5)
Light tinted (from palette)
Dark/moody
Let me decide

Question 5: Inspiration

Provide URLs to analyze
Aesthetic keywords
Research trends first
Skip, use defaults

Phase 2: Research (Optional)

Based on discovery answers, optionally run:

If user wants trend research: Use the trend-researcher skill to:

Visit Dribbble trending shots
Analyze current design patterns
Identify color and typography trends
Create a trend report

If user provided URLs: Use the inspiration-analyzer skill to:

Visit each provided URL
Screenshot and analyze
Extract colors, fonts, patterns
Document key takeaways

Phase 3: Moodboard

Use the moodboard-creator skill to:

Synthesize research findings
Present color direction
Present typography direction
List UI patterns to incorporate
Define mood keywords

Iteration:

Present moodboard to user
Get feedback
Refine until approved
Maximum 3 iterations

Phase 4: Color Selection

Use the color-curator skill to:

With browser:

Navigate to Coolors trending palettes
Present options to user
Let user choose palette
Extract hex codes

Without browser:

Present curated palettes matching aesthetic
Let user choose or specify manually
Document selected colors

Map colors to design roles:

Primary (CTAs, brand)
Background (page)
Surface (cards)
Text (heading, body, muted)
Accent (highlights)

Phase 5: Typography Selection

Use the typography-selector skill to:

With browser:

Navigate to Google Fonts
Present trending/matching fonts
Let user choose

Without browser:

Present curated pairings
Let user choose or specify

Generate:

Google Fonts import code
Tailwind font config
Usage examples

Phase 6: Implementation

Generate a complete HTML file with:

<!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 -->
  [Font imports]

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

  <style>
    /* Custom animations with prefers-reduced-motion */
    /* Focus states */
  </style>
</head>
<body>
  <!-- Accessible, semantic HTML -->
  <!-- Skip link -->
  <!-- Header/Nav -->
  <!-- Main content -->
  <!-- Footer -->
</body>
</html>

Requirements:

Mobile-responsive
Semantic HTML (header, main, nav, footer)
Accessible (ARIA, focus states, contrast)
No Lorem ipsum (realistic content)
Respect prefers-reduced-motion
Keyboard navigable

Phase 7: Self-Review

Before delivering, check:

Anti-patterns (must not have):

No hero badges/pills above headlines
No generic fonts (Inter, Roboto, Arial)
No purple-blue gradients on white
No decorative blob shapes
No excessive rounded corners everywhere
No predictable template layout

Design principles (must have):

Accessibility (must have):

Phase 8: Delivery

Present the final design with:

The complete HTML file
Summary of design decisions
Color palette reference
Typography reference
Any notes on customization

Iteration

If user requests changes:

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

Support up to 3 major iterations.

Tips

Keep the user informed at each phase
Explain design decisions
Offer alternatives when appropriate
Be opinionated but flexible
Focus on distinctive, quality output

/design