EN
全部 Agent 工程

Skill

frontend-design：让界面设计避开模板默认

Anthropic 官方 frontend-design 技能：做界面前先出设计方案并对照需求自查，避开模板化默认。未实测，以官方原文为准。

frontend-design 是 Anthropic 在 anthropics/skills 仓库里放的一个技能，只有 SKILL.md 和 LICENSE.txt 两个文件。本页只转述官方原文写了什么，没有在本站运行过它（未实测）。

核验日期
· 未实测
适用于
  • Claude Code 适用于 Claude Code：同一固定提交的 anthropics/skills README 写明可把该仓库注册为 Claude Code 插件市场，marketplace.json 的 example-skills 插件清单含 ./skills/frontend-design；Claude Code 文档说明技能调用方式（依据是官方整包与技能清单，不是格式相同）。本次只核了这些 Claude Code 相关来源，本页只核了 Claude Code 的调用流程，其他平台（如 Claude.ai、API）的具体流程本次未核。[1][4][5][6]
触发方式
官方未提供命令

Claude 按 description 在相关时自动加载，也可用 /skill-name 直接调用；插件内技能的命名空间写法见 Claude Code 文档（/plugin-name:skill-name）。该技能没有官方单独命令。[1][6]

安装
/plugin install example-skills@anthropic-agent-skills

README 写明先在 Claude Code 里执行 /plugin marketplace add anthropics/skills 注册仓库，再安装插件；这条命令装的是整个 example-skills 插件，不是单个技能。[4][5]

前置条件
  • 账号 官方未写明[1]
  • 命令行工具 官方未写明（正文没有要求运行命令）[1]
  • 权限 官方未写明（frontmatter 没有 allowed-tools）[1]
  • 费用 官方未写明[1]
  • 可选：环境支持时用截图自查（正文原话 if your environment supports it）[1]
核验版本
dbd4588
涉及工具

什么时候用

  • 新做一个界面，或改造已有界面，希望视觉上有明确取向而不是常见模板。[1]
  • 想让 Claude 先给出一份包含色板、字体、版式和原则的设计方案，再写代码。[1]
  • 需求已经写明视觉方向时也可以用：此时要完全照需求来，SKILL.md 写明需求原话优先于技能自己的默认偏好（这是使用限制，不是不适用）。[1]

什么时候不用

  • 与界面视觉无关的任务（例如后端、数据处理）。官方没有单独列出不适用场景；这一条是按 description 只写“新建或改造界面”做的推断（任务边界，有 description 为据）。[1]

它做什么

官方 description 一句话：用于新建或改造界面时，帮助确定审美方向、字体，并避免“像模板默认值”的选择。[1]

  • 先弄清主题：需求没说明产品或主题是什么时，要先自己判断，并向客户确认。
  • 分两轮：先写一份简短的设计方案（色板 4–6 个命名的十六进制色值、字体及分工、版式、原则），再对照需求检查，哪部分像“任何同类页面都会出的默认答案”就改掉，并说明改了什么、为什么。
  • 写代码时留意 CSS 选择器优先级，避免类名互相抵消。
  • 控制克制：把“大胆”用在一个地方，其余保持安静；做到手机可用、键盘焦点可见、尊重减少动效设置。
  • 使用限制：需求已写明视觉方向时，仍用这个技能，但要完全照需求来（SKILL.md 原话 follow it exactly），即使需求要的正是技能列为“默认”的那类外观。

[1]

怎么调用、怎么装

调用与安装要点
项目官方写法（摘要）
调用Claude 在相关时自动使用技能；也可以用 /skill-name 直接调用（Claude Code 文档）
安装README：先 /plugin marketplace add anthropics/skills，再装 example-skills 插件；marketplace.json 显示该插件含 frontend-design
单独装这一个技能官方未写明
许可证目录内 LICENSE.txt 为 Apache License 2.0
目录内容LICENSE.txt、SKILL.md

[1][6][4][5][2][3]

示例：README 给出的安装方式（example-skills 插件）
/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills

[4][5]

依赖与没写明的事

SKILL.md 的 frontmatter 只有 name、description、license 三项，正文没有要求安装额外软件或运行命令；文中只提到“如果环境支持，可以截图自查”。账号、权限、费用官方都没写明。需要注意：官方 README 里的安装单位是整个 example-skills 插件，里面还有其他技能，不是单个技能。[1][4][5]

Claude Code 文档把个人技能放在 ~/.claude/skills/<skill-name>/SKILL.md、项目技能放在 .claude/skills/<skill-name>/SKILL.md。是否可以手动复制本技能到这些目录，官方对该技能没有单独说明，请自行按文档核对。[6]

来源

以下均为官方页面，核验日期见各条；链接指向核验时的版本。

  1. Anthropic · frontend-design/SKILL.md
    dbd4588
  2. Anthropic · frontend-design/LICENSE.txt
    dbd4588
  3. Anthropic · skills/frontend-design (directory)
    dbd4588
  4. Anthropic · anthropics/skills README.md
    dbd4588
  5. Anthropic · anthropics/skills marketplace.json
    dbd4588
  6. Anthropic (Claude Code Docs) · Extend Claude with skills

发现错误？告诉我们 →

Claude Code

Anthropic 的编程 Agent，可围绕代码库读取上下文、修改文件、运行命令并协助开发任务。