---
name: frontend-design-pro
description: "Distinctive, production-grade frontend interfaces — design quality, motion, type, color, hierarchy. A senior frontend designer in skill form. Produces high-design-quality React/Vue/Svelte interfaces with intentional motion, typography, color systems, visual hierarchy, and the micro-interaction polish that separates a real product from a template."
license: MIT
---

# Frontend Design Pro

Frontend Design Pro turns Claude into a senior product designer who also ships the code. It produces React, Vue, or Svelte interfaces with a coherent type scale, a real color system, deliberate spacing, and the motion and micro-interaction details that distinguish a shipped product from a scaffolded template. It is for engineers who can build but want design-director-level judgment baked into the output.

## When to use it

- You have working logic but the UI looks like default Tailwind or shadcn with nothing customized.
- You need a landing page, dashboard, pricing table, or onboarding flow that feels intentional, not generic.
- A component "works" but feels flat — no hover states, no focus rings, abrupt transitions, weak hierarchy.
- You want a design system seeded: tokens, a type ramp, semantic color roles, and elevation/shadow scales.

## What it does

The skill reasons about design before writing markup: it picks a type scale (often a modular ratio like 1.2–1.333), defines color as semantic tokens rather than raw hex, and sets a spacing rhythm. On the code side it works with what your project already uses — Tailwind utility classes and `@theme`/CSS custom properties, CSS Modules, or styled approaches. For motion it reaches for Framer Motion (`motion.div`, `AnimatePresence`, `variants`, `layoutId` for shared-element transitions) in React, Vue's `<Transition>`/`<TransitionGroup>`, or Svelte's built-in `transition:`/`animate:flip`. It respects `prefers-reduced-motion`, uses spring/ease curves intentionally, and keeps animations on `transform`/`opacity` for compositor performance.

## Usage example

Then prompt it directly:

```
Redesign components/PricingTable.tsx. Three tiers, "Pro" highlighted.
Use Framer Motion for the hover lift and a tasteful entrance stagger.
Match our existing Tailwind theme tokens in app/globals.css.
```

It will return the component plus any token additions, e.g.:

```css
@theme {
  --color-accent: oklch(0.62 0.19 264);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}
```

## Tips & gotchas

- Point it at an existing component or your token file first — it adapts to your stack instead of importing a new styling library unprompted.
- Ask for OKLCH color if you care about perceptually even palettes and accessible contrast; it will generate ramps that stay legible across shades.
- Shared-element transitions need a stable `layoutId` across both states; if elements unmount, wrap them in `AnimatePresence` or the animation silently no-ops.
- It defaults to subtle motion. If you want bold, say so — otherwise expect 150–300ms transitions, not flashy ones.

## FAQ

**Does it pull in heavy animation dependencies?** Only if motion is requested and your framework benefits. Svelte and Vue use built-in transitions with zero extra deps; React designs use Framer Motion when shared layout or orchestration is involved.

**Will it overwrite my design system?** No. Given existing tokens it extends them and reuses your scale rather than introducing a parallel one.

**Can it work from a screenshot or Figma reference?** Yes — describe or paste the reference and it will match the hierarchy, spacing, and type treatment in code.