123 Skill123
中文

frontend-design

frontend-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.

spec ✓ Global
QUALITY 96 /100
by Vercel Labs Last verified: 2026-06-22

What this skill does

→Building web UI
→Landing pages
→Design system work

Try saying this

Copy a prompt into your agent to trigger this skill.

Help me with building web UI
Help me with landing pages
Help me with design system work

Topics

frontend design ui

Platforms

Cursor Claude Code GitHub Copilot Windsurf

Install

CLI install

npx skills add https://github.com/vercel-labs/agent-skills/tree/main/skills/frontend-design

Manual install

~/.cursor/skills/frontend-design/
~/.claude/skills/frontend-design/
~/.copilot/skills/frontend-design/
~/.codeium/windsurf/skills/frontend-design/

Resources

skill-name/
├── SKILL.md

Source

https://github.com/vercel-labs/agent-skills/tree/main/skills/frontend-design

Related Skills

web-design-guidelines
Featured

web-design-guidelines encodes Vercel design standards for spacing, typography, accessibility, and performance in agent workflows.

Can help with

  • →UI review
  • →Design consistency checks
designaccessibilityguidelines
Creative Cursor Claude Code +1
Q94
spec ✓ Global
canvas

canvas skill produces standalone React Canvas apps for analyses, audits, timelines, and interactive explorations beside the chat.

Can help with

  • →Data-heavy analysis output
  • →Interactive reports
visualizationreactanalysis
Creative Cursor
Q89
spec ✓ Global