Agent Skills 教程 01：frontend-design 前端设计技能

Skill 地址：https://www.skills.sh/anthropics/skills/frontend-design

frontend-design 是一个专门面向前端界面设计与实现的 Agent Skill。它的重点不是让 Agent 随机生成一段“看起来能运行”的页面代码，而是帮助 Agent 按更接近真实产品设计的方式工作：先理解页面目标，再规划信息层级，确定视觉风格，拆分组件结构，补齐交互状态，最后落到可维护的前端实现。

如果你经常让 AI 生成页面，就会遇到一个典型问题：代码能跑，元素也齐全，但页面缺少产品感。比如间距混乱、视觉层级不清、按钮状态缺失、移动端布局崩掉、表单没有错误态。这正是 frontend-design 这类 Skill 适合解决的问题。

它主要解决什么问题

frontend-design 的作用可以理解为给 Agent 增加一套前端设计判断力。普通代码生成通常更关注“功能是否实现”，而这个 Skill 会提醒 Agent 同时关注“用户是否容易理解和使用”。

它适合处理这些任务：

• 设计 SaaS 官网、产品落地页、活动页；
• 构建 Dashboard、管理后台、数据分析页面；
• 优化表单、弹窗、卡片、导航、表格等组件；
• 为已有页面做 UI/UX review；
• 改善颜色、字体、间距、层级和响应式；
• 检查页面是否包含 loading、empty、error、disabled 等状态；
• 让一个粗糙页面更接近成熟产品。

它的价值不是“让页面更花哨”，而是让页面更清晰、更一致、更符合用户目标。

安装与启用方式

安装方式取决于你使用的 Agent 平台。大多数 Skills 都遵循类似结构：一个 skill 目录中包含 SKILL.md，里面定义 skill 名称、触发说明和使用规则。

如果你从 Skills 平台安装，可以打开 frontend-design 的页面，复制平台提供的安装命令，安装到当前 Agent 的 skills 目录。常见安装方式是使用 「npx skills add」。例如可以执行：

bash
npx skills add anthropics/frontend-design

安装完成后，通常需要重启或刷新 Agent，让它重新加载 skill metadata。

如果手动安装，可以把 skill 放到类似这样的目录：

text
~/.agents/skills/frontend-design/SKILL.md

或者放到项目约定的本地 skills 目录中。关键是 Agent 启动时能扫描到它的 name 和 description。

安装后可以用一个简单任务验证：

text
帮我设计一个 AI 工具产品的 landing page，面向开发者，包含 Hero、功能介绍、使用流程、价格和 FAQ。

如果 Agent 开始先分析页面目标、用户群体、模块结构和视觉风格，而不是直接输出一坨代码，说明这个 Skill 已经发挥作用。

推荐使用方式

使用 frontend-design 时，提示词越具体，效果越稳定。不要只说“帮我写个页面”，最好说明产品类型、目标用户、视觉风格、技术栈和页面模块。

比如可以这样写：

text
帮我设计一个 AI Agent 产品落地页，目标用户是开发者。风格要专业、有科技感，但不要过度炫酷。技术栈使用 React + Tailwind。页面包含 Hero、核心能力、使用流程、价格和 FAQ。

如果是优化已有页面，可以这样写：

text
请 review 这个 Dashboard 页面，重点检查信息层级、间距、按钮状态、响应式和可访问性，并给出可以直接落地的修改建议。

如果是组件级任务，可以这样写：

text
帮我设计一个文件上传组件，需要支持拖拽、上传中、上传失败、空状态和成功状态，风格要和现有后台系统一致。

更推荐的工作流是：先让 Agent 给出设计方案和组件拆分，再进入实现。这样你可以先确认方向，避免它直接生成大量不符合预期的代码。

实战中应该关注的细节

第一，要明确页面目标。落地页要突出价值主张和转化按钮，后台页面要突出效率和数据密度，设置页要突出清晰分组和安全感。不同页面不能用同一套视觉套路。

第二，要遵守现有设计系统。如果项目已经使用 Ant Design、shadcn/ui、Material UI 或内部组件库，就应该优先复用已有组件、颜色 token、间距和交互规范。不要让 Agent 重新发明一套风格。

第三，要补齐真实状态。一个产品级组件至少要考虑默认态、hover、focus、disabled、loading、empty、error 和 success。很多 AI 页面看起来像截图，就是因为只有理想状态，没有真实数据状态。

第四，要考虑响应式。桌面端三栏布局在移动端可能需要变成单列；复杂表格在小屏可能需要横向滚动或卡片化展示；按钮组也需要考虑换行和触控尺寸。

第五，要关注可访问性。按钮要有明确文案，表单要有 label，颜色对比度要足够，交互元素要能键盘访问。可访问性不是额外加分项，而是产品质量的一部分。

常见误区

一个常见误区是过度追求“AI 感”。大量渐变、发光边框、玻璃拟态和复杂动画并不一定高级。如果产品是 B2B 工具，清晰、稳定、专业往往比炫酷更重要。

另一个误区是只看首屏。很多页面首屏不错，但价格区、FAQ、表单状态、移动端表现很弱。frontend-design 更适合帮助你系统性检查整页体验。

还有一个误区是让 Agent 直接改代码，但不给项目上下文。实际项目中，应该先让 Agent 读取现有组件和样式约定，再做修改。否则生成的 UI 可能和项目风格割裂。

与其他 Skill 的配合

frontend-design 可以和代码实现类 Skill 配合。它负责设计判断、页面结构和体验建议，代码类 Skill 负责落地实现、重构和测试。

如果项目涉及复杂图表，也可以配合数据可视化类 Skill；如果涉及文案和品牌表达，可以配合写作类 Skill；如果涉及组件库规范，可以配合设计系统相关 Skill。

小结

frontend-design 的价值在于让 Agent 不只是“会写前端”，而是更懂“如何设计一个可用、好用、像产品的前端界面”。它适合用于页面设计、组件实现、UI 优化和体验审查。正确使用它时，你应该提供清晰业务目标和项目约束，让 Agent 先做设计判断，再进入代码实现。