Is the code generated by Design Wizard accessible?

Yes, accessibility is a core part of the process. The skill validates the output against WCAG guidelines, ensuring proper contrast ratios, semantic HTML, and keyboard navigability.

Can I provide my own design inspiration?

Absolutely. During the Discovery phase, you can provide specific URLs or aesthetic keywords which the skill will analyze to influence the research and moodboard phases.

How does Design Wizard avoid generic-looking templates?

The skill utilizes a specialized aesthetic catalog and a 'Self-Review' phase that explicitly checks for and removes common design anti-patterns like generic fonts, predictable gradients, and overused blob shapes.

Does this skill only generate Tailwind CSS code?

Yes, Design Wizard is optimized to generate single-file HTML solutions using the Tailwind CSS CDN, ensuring rapid prototyping and easy integration into modern web projects.

Can I iterate on a design after it's generated?

Yes, the skill supports up to three major iterations based on your feedback, allowing you to fine-tune colors, layout, and components until the design meets your needs.

Design Wizard

Name: Design Wizard
Author: davepoon

bydavepoon

•

2,257

•

Design Tools

Orchestrates an interactive end-to-end frontend design process to generate distinctive, production-ready user interfaces.

Design Wizard is a comprehensive frontend orchestration skill that transforms initial project ideas into polished, high-fidelity UI code. By guiding users through discovery questions, aesthetic research, and curated color and typography selection, it moves beyond generic templates to create professional, accessible, and trend-aligned designs. It is specifically designed for developers who need to produce unique, production-grade landing pages, dashboards, or SaaS interfaces with built-in accessibility and performance best practices, ensuring that the final output is both visually striking and technically sound.

Key Features

01Guided multi-step discovery process to capture project-specific context and audience.

02Curated aesthetic catalog featuring modern styles like Bento Grid, Neobrutalism, and Glassmorphism.

03Integrated color curation and typography pairing using specialized design sub-skills.

042,257 GitHub stars

05Automated quality assurance checks against design anti-patterns and WCAG accessibility guidelines.

06Production-ready HTML/Tailwind code generation with semantic structure and responsive layouts.

Use Cases

01Building high-conversion landing pages that avoid common 'AI-generated' visual tropes.

02Rapidly prototyping a unique SaaS dashboard with a premium, high-contrast aesthetic.

03Creating accessible and mobile-responsive web interfaces with specialized typography and color palettes.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add davepoon/buildwithclaude design-wizard

For use in Claude.ai and ChatGPT

Download Skill