frontend-design-workflowlisted

Stops AI-generated websites from looking generic. Runs the frontend design and web design workflow before any markup exists: competitor and adjacent-niche research, a validated reference pool, user review mining, art direction, information architecture, the SSR/SSG/SPA rendering and stack decision, design system tokens with theming, accessibility, SEO and metadata, then a build-kickoff prompt and a tracked quality backlog. Use it whenever someone is starting, redesigning, restyling or planning a web product, site, landing page, dashboard or app UI, and especially when a PRD or feature list arrives with no design direction. Trigger on casual phrasings too, such as "build me a site for X", "make this look better", "this looks generic or AI-generated", "add some animation", "what stack should I use", or when a site is named as the feel they want. Do not use it for isolated tweaks inside a mature design system, for backend-only work, or for chart styling where a data-visualisation skill fits better.
AviOfLagos/frontend-design-workflow · ★ 1 · Web & Frontend · score 71

Install: claude install-skill AviOfLagos/frontend-design-workflow

# Frontend design workflow An agent handed a PRD starts writing markup, and a thousand design decisions get made implicitly, each at the moment of least information. The output is competent and anonymous. This skill moves those decisions in front of the code and grounds them in evidence. The blunt test at every stage: **could this be any other product's site?** If yes, you defaulted rather than decided — `references/direction.md` names the specific attractor states to check against. ## Routing | Situation | Go to | |---|---| | New project, or a PRD arrived | Phase 0, run the loop | | Redesign | Phase 0 with the current site as a competitor; skip Phase 3 if the stack is fixed | | "What stack should this be?" | `references/architecture.md` → *The rendering question* | | "Why does my site look generic?" | `references/direction.md` → *The attractor states* | | Direction agreed, ready to build | Phase 5, then `assets/BUILD-KICKOFF.md` | | Built, wants it checked | Phase 6, and `scripts/verify.mjs` | ## Precedence Higher wins: **the user's explicit instruction** → **an existing codebase's conventions** → **this skill's defaults**. If they want purple and brutalist, build purple and brutalist and spend your judgement on doing it well. Say once what you'd have chosen and why, then commit. ## Working style Decide and disclose rather than asking. Gate on the user only for irreversible actions, facts you cannot obtain, and the single direction question in Phase 2. If the user is