frontend-design
Spec compliantfrontend-design produces polished, non-generic UI with intentional typography, color, and motion. Install with npx skills add vercel-labs/agent-skills --skill frontend-design.
Build distinctive, production-grade frontend interfaces with high design quality.
Copy prompt for your AI
Send this to your agent to install the skill.
First read https://skill123.app/install/skill123.md. Then install the "frontend-design" agent skill by running:
npx skills add https://github.com/vercel-labs/agent-skills/tree/main/skills/frontend-designOther install methods
CLI install
npx skills add https://github.com/vercel-labs/agent-skills/tree/main/skills/frontend-designManual install
~/.cursor/skills/frontend-design/~/.claude/skills/frontend-design/~/.copilot/skills/frontend-design/~/.codeium/windsurf/skills/frontend-design/When to use
- → Building web UI
- → Landing pages
- → Design system work
Platforms
Resources
Source
https://github.com/vercel-labs/agent-skills/skills/frontend-designRelated Skills
web-design-guidelines encodes Vercel design standards for spacing, typography, accessibility, and performance in agent workflows.
Stageshow helps agents make faux product UI stills, cursor demos, and bento grids (benjitaylor/skills, MIT). Install: `npx skills add benjitaylor/skills --skill stageshow`.
baoyu-cover-image generates 公众号 / article covers across type, palette, rendering, text, and mood (JimLiu/baoyu-skills). Install with `npx skills add jimliu/baoyu-skills --skill baoyu-cover-image`.
Design vocabulary for coding agents (`polish`/`bolder`/`critique`/`audit`); catch AI slop. Install: `npx impeccable install` then `/impeccable init`. Docs: https://impeccable.style/docs
FAQ
How do I install frontend-design?
Send the install prompt to your AI, or run npx skills add https://github.com/vercel-labs/agent-skills/tree/main/skills/frontend-design.
Which platforms support frontend-design?
Cursor, Claude Code, GitHub Copilot, Windsurf