frontend-design
规格合规frontend-design 生成有设计感、非模板化的 UI。使用 npx skills add vercel-labs/agent-skills --skill frontend-design 安装。
Build distinctive, production-grade frontend interfaces with high design quality.
复制给 AI 安装
把这段提示词发给你的 Agent，即可安装该技能。
请先阅读 https://skill123.app/install/skill123.md。然后安装「frontend-design」技能，执行：
npx skills add https://github.com/vercel-labs/agent-skills/tree/main/skills/frontend-design其他安装方式
CLI 安装
npx skills add https://github.com/vercel-labs/agent-skills/tree/main/skills/frontend-design手动安装
~/.cursor/skills/frontend-design/~/.claude/skills/frontend-design/~/.copilot/skills/frontend-design/~/.codeium/windsurf/skills/frontend-design/适用场景
- → 构建 Web UI
- → 落地页
- → 设计系统
兼容平台
Cursor Claude Code GitHub Copilot Windsurf
资源文件
skill-name/
├── SKILL.md
源码
https://github.com/vercel-labs/agent-skills/skills/frontend-design相关技能
web-design-guidelines
Featured
web-design-guidelines 将 Vercel 设计标准（间距、字体、无障碍、性能）编码为 Agent 工作流。
创意 Cursor Claude Code +1
4.7 优秀
Vercel Labs stageshow
Stageshow 帮 Agent 做假产品界面静帧、光标演示与 bento（benjitaylor/skills，MIT）。安装：`npx skills add benjitaylor/skills --skill stageshow`。
创意 Cursor Claude Code +2
4.7 优秀
Benji Taylor baoyu-cover-image
Featured
baoyu-cover-image 按类型、配色、渲染、文字与情绪五维生成公众号/文章封面。使用 `npx skills add jimliu/baoyu-skills --skill baoyu-cover-image` 安装。
创意 Cursor Claude Code +3
4.7 优秀
Jim Liu (宝玉) impeccable
去 AI 味设计 Skill；`npx impeccable install` 后 `/impeccable init`。
创意 Cursor Claude Code +2
4.6 优秀
Paul Bakaus 常见问题
如何安装 frontend-design？
把安装提示词发给你的 AI，或运行 npx skills add https://github.com/vercel-labs/agent-skills/tree/main/skills/frontend-design。
frontend-design 兼容哪些平台？
Cursor、Claude Code、GitHub Copilot、Windsurf