跳到主要内容
NAVSMAP

AGENT SKILL

Frontend Design Skill

Anthropic 官方前端设计技能，为页面建立有方向的视觉与实现约束。

Markdown · SKILL.md初级 · 零代码配置

接入前准备

支持 Agent Skills 的当前 Cursor 或 Claude Code。
可以读取、编辑的前端项目与明确需求。
手动安装仅需官方技能文件夹；不要求单独运行 Node.js 或申请 MCP API Key。
Claude Code 插件指令需在 Claude Code 会话内执行。

能力介绍

Anthropic 官方 frontend-design Skill 是一组前端设计工作指引，帮助支持 Agent Skills 的客户端在实现界面前明确内容、用户、排版与视觉方向。它属于 Markdown 技能包，不是 MCP 服务器，也不需要填写 mcpServers JSON。

适用场景

  • 依据明确需求设计或优化网页界面。
  • 把已有品牌、组件与真实文案纳入实现约束。
  • 在开发后复查响应式、阅读层级与交互状态。

获取与使用

  1. 从右侧复制官方 Skill 地址，先阅读 SKILL.md 与 LICENSE.txt。
  2. Cursor：将官方 frontend-design 文件夹放入项目 .cursor/skills/，在 Customize 的 Skills 中确认已发现该技能。
  3. Claude Code：可使用右侧插件指令安装官方 example-skills 集合，或将单个文件夹放入项目 .claude/skills/。插件方式也包含其他示例技能。
  4. 在任务中明确提出使用 frontend-design，并提供页面目标、技术栈、既有组件和验收标准。

能力与平台边界

Skill 提供工作方法，不会凭空增加浏览器、设计工具或文件写入权限，也不会自动通过发布验收。客户端仍需具备项目访问与代码编辑能力。Claude Desktop 的聊天与 Cowork 技能入口、订阅及账号配置可能不同，不能把 Claude Code 插件指令直接粘贴为 Desktop MCP 配置。

此页提供官方来源与接入方法，不复制整份技能内容；复制链接也不会自动安装。最终界面仍需人工检查。官方仓库中的示例用于教学与演示，此页未宣称它在所有客户端表现一致。

官方资料

Skill 与许可文件 · 官方技能仓库与插件说明 · Cursor Skills 文档 · Claude Code Skills 文档