skills.rest
davepoon
davepoonCOMMUNITY
Explore all skills by this author →
Website𝕏@davepoonGitHub

design-wizard

Guides an interactive frontend design workflow from discovery through accessible HTML code generation.

3.4k|487|Updated Jul 25, 2025
Search Tags:#tailwind CSS#HTML generation# accessibility#Typography#UI Design#Frontend design#design wizard
One-click install
npx skills add https://github.com/davepoon/buildwithclaude --skill design-wizard
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-wizard
Source: https://github.com/davepoon/buildwithclaude/tree/main/plugins/frontend-design-pro/skills/design-wizard
Command: npx skills add https://github.com/davepoon/buildwithclaude --skill design-wizard

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Creating distinctive, accessible frontend designs requires coordinating research, aesthetic selection, color and typography choices, and code generation, which is difficult to do consistently without a structured process.

Core Features & Use Cases

  • Guided Discovery: Asks structured questions about project type, audience, and style preferences before designing.
  • Aesthetic Catalog: Selects from documented aesthetics like Neobrutalism, Glassmorphism, Swiss Typography, and Bento Grid with code examples.
  • Code Generation with Review: Produces a single responsive HTML file using Tailwind CDN and Google Fonts, then self-reviews against anti-patterns, design principles, and WCAG accessibility guidelines.
  • Use Case: Ask the wizard to design a landing page for a startup; it interviews you, picks an aesthetic and palette, and delivers a complete accessible HTML file.

Quick Start

Use the design wizard to create a landing page for my SaaS product and walk me through the design decisions.

Frequently Asked Questions about design-wizard

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a landing page design with an interactive wizard?▼

Invoke the design wizard and answer its discovery questions about project type, audience, and style preferences. It then researches trends, selects an aesthetic, picks colors and fonts, and generates a complete responsive HTML file.

What design aesthetics can I choose for a frontend project?▼

The catalog includes Dark & Premium, Glassmorphism, Neobrutalism, Bento Grid, Editorial, Y2K/Cyber, Swiss Typography, Scandinavian, Japanese Zen, Statement Hero, and Type-Only, each with characteristics and code examples.

Does the generated HTML meet WCAG accessibility standards?▼

Yes, the self-review step checks against WCAG 2.1 guidelines including 4.5:1 text contrast, visible focus states, semantic HTML, alt text, form labels, and respect for prefers-reduced-motion.

What design anti-patterns does the wizard avoid?▼

It avoids hero badges, generic fonts like Inter and Roboto, purple-blue gradients on white, decorative blob shapes, excessive rounded corners, predictable template layouts, and generic marketing copy.

How many design revisions can I request?▼

The wizard supports up to 3 major iterations. After each round of feedback it makes targeted adjustments, re-runs its self-review checklist, and presents the updated version.

Related Skills

Explore More Design & Creative Skills→
rampstackcorampstackco
523

brand-discovery

Coordinate upstream brand discovery to clarify audience, competitors, and positioning.

Official
Advanced
paarths-collabpaarths-collab
13

integration-render

Connect Render to a self-hosted Hermes agent over SSH with bearer-auth MCP registration.

Community
Advanced
samymitysamymity
1

browser-qa

Automate end-to-end browser QA for web applications with smoke, interaction, visual regression, and accessibility checks.

Community
Intermediate
alguaritoalguarito

frontend-design

Design and build custom frontend interfaces using HTML/CSS/JS or React/Vue.

Community
Advanced