About this skill

The problem: usable UI without product polish

AI-generated frontend code often runs, but defaults to stacked Tailwind classes, arbitrary spacing, weak hierarchy, and missing motion. Frontend Design Pro turns design judgment and team conventions into executable constraints, reducing the chance that each generation depends on luck.

How it works

It generates or refactors UI around a design system:
- Visual hierarchy: size, color, whitespace, and font-weight signal what matters;
- Spacing system: 8px-based values such as gap-4 and p-6;
- Semantic color: primary, success, warning, error, info, and neutral scales;
- Component patterns: buttons, cards, forms, and tables stay consistent within a project;
- Responsive and accessibility: mobile-first, alt, aria-label, and :focus-visible.
If the project already has tokens, it can read design-tokens.json or .frontend-design-pro.yaml and override defaults.

Scope and cautions

It fits Tailwind CSS, React/Vue/Svelte page UI and component polish, with dark-mode variants. Complex business interactions, animation timing, and accessibility still need human review; if the project uses a non-Tailwind setup, state the target clearly before adapting.

Screenshots

Use Cases

Generate Tailwind and React pages like login and pricing with consistent spacing and hierarchy.
Refine an existing component library by unifying buttons, cards, forms, tables, and focus states.
Apply design-tokens.json values to generated code so business tokens override defaults.
Create responsive accessible UI with dark-mode variants, alt, aria-label, and :focus-visible.

Best For

Frontend engineers building Tailwind and React product pages who need stable, hierarchical UI.
Frontend teams maintaining component libraries who need consistent buttons, forms, and tables.
Product engineers reviewing AI-generated pages who want spacing and color decisions grounded.
Interface developers needing dark mode and accessibility, including focus and screen-reader labels.