frontend-design
Produce frontend UI that actually looks designed — a working spacing/type system, deliberate color use, real states, and restraint — instead of the generic AI-generated interface. Use when asked to build or restyle a UI, landing page, dashboard, or component, when output 'works but looks like a prototype', or to establish the visual system for a new app. Produces working HTML/CSS (or framework components) built on an explicit token system, with hover/focus/empty/loading states included. For critiquing an existing design use design-critique; for auditing a design system use design-system-audit.
npx skills add mohitagw15856/pm-claude-skills --skill frontend-design --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# Frontend Design Skill AI-generated UI has a recognisable smell: default blues, five different paddings, everything the same visual weight, no states. This skill produces interfaces that look *decided* — by making the decisions explicit as a token system, then spending contrast deliberately instead of everywhere. ## What This Skill Produces - **Working UI code** (single-file HTML/CSS or framework components) built on an explicit token block - The **token system**: type scale, spacing scale, color roles, radius/shadow levels — small and consistent - The **states**: hover, focus-visible, active, disabled, empty, loading, error — designed, not defaulted ## Required Inputs Ask for (if not already provided): - **What's being built** and its emotional register (dense pro tool? calm consumer? playful?) - **Brand constraints** if any (colors, fonts, an existing product to match) — else the skill picks a deliberate palette and says so - **The framework target** (vanilla/React/Vue/Tailwind) — vanilla single-file is the default demo form ## The System (build this first, then the UI) 1. **Type scale, one ratio.** Pick a base (16px) and a ratio (1.25 for product UI, 1.333 for marketing); deriv
- What This Skill Produces
- Required Inputs
- The System (build this first, then the UI)
- The Craft Moves (what separates designed from default)
- Output Format
- Quality Checks
- Anti-Patterns
What does the frontend-design skill do?
Produce frontend UI that actually looks designed — a working spacing/type system, deliberate color use, real states, and restraint — instead of the generic AI-generated interface. Use when asked to build or restyle a UI, landing page, dashboard, or component, when output 'works but looks like a prototype', or to establish the visual system for a new app. Produces working HTML/CSS (or framework components) built on an explicit token system, with hover/focus/empty/loading states included. For critiquing an existing design use design-critique; for auditing a design system use design-system-audit.
How do I install it?
Run `npx skills add mohitagw15856/pm-claude-skills --skill frontend-design --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From mohitagw15856/pm-claude-skills, a repository with 1,255 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.