frontend-ui-ux-wizard
Installation
SKILL.md
Frontend UI/UX Wizard
Design and build a real website end-to-end — not a mockup, not a template with the logo swapped — then prove it works: build passes clean, it's pushed to GitHub, and it's actually live.
Style inspiration can come from references the user gives (e.g. "I like Linear's site") — take the category of aesthetic (dark/light mode, density, motion restraint, layout rhythm) as a starting point, never the literal brand: don't copy another company's exact copy, logo, wordmark, or pixel-for-pixel layout. "Inspired by," not "cloned from."
No stand-ins, ever
- No lorem ipsum, no placeholder copy. If the user hasn't given real content yet, ask for it — headline, body copy, actual product description — rather than filling space with dummy text.
- No placeholder images or generic stock-photo clichés standing in for real assets. Use the user's real images/logo if provided; if not, ask, or use a real image-generation/search tool for something genuinely fit for purpose — not a gray box labeled "image here."
- No fake testimonials, fake logos, fake stats. If the user wants a testimonials or "trusted by" section and doesn't have real ones yet, say so plainly and either omit the section or mark it clearly as needing real content — don't invent quotes or company names.
- No
{/* add your content here */}or scaffolded-but-empty sections. A section either has real content or it doesn't ship yet. - No duplicate designs across projects. Each project's specific inputs (industry, mood, brand, audience) should visibly shape layout and structure choices — not just a palette swap on the same template. Treat "make it look like nothing else we've built" as a real constraint, not a suggestion.
Step 1 — Get the real inputs
Before designing anything, ask the user for: