Frontend Design Pro

One-command composition layer for premium frontend output.

Execution Order (Strict)

1. Apply design-taste-frontend first.
   • Enforce anti-slop constraints, architecture discipline, motion/perf guardrails, and QA gates.
2. Run frontend-design-ultimate second.
   • Execute the full generation workflow (aesthetic direction, scaffolding/build path, responsive implementation).

Never invert this order.

Quick Usage Prompts

• "Use frontend-design-pro to build a SaaS landing page with strict anti-slop guardrails and a complete production-ready React/Tailwind implementation."
• "Use frontend-design-pro to redesign this dashboard: enforce taste guardrails first, then generate a bold but maintainable frontend."
• "Apply frontend-design-pro for a mobile-first marketing site with strong typography, disciplined motion, and clean deployment-ready output."

When To Use

• You want one-command UX that combines strict design guardrails plus end-to-end frontend generation.
• You need high-quality React/Next.js/Vite UI output with explicit anti-generic constraints.
• You want consistent production discipline across layout, motion, responsiveness, and implementation.

When Not To Use

• You only need guardrails/compliance checks without full generation (use design-taste-frontend directly).
• You only need scaffolding/generation workflow without strict taste enforcement (use frontend-design-ultimate directly).
• You are not doing frontend/UI work.