83.3K+下载
跳转到使用指南
frontend-design作者 Anthropic

Frontend Design Skill.

Claude Code 和 Codex 的独特 UI 设计 skill：有目的地选择排版、颜色和布局。

  • Web & UI
  • Websites
  • UI 重设计
  • Typography
下载 OpenDesign查看使用指南
DESIGN DIRECTION / 01BRIEF → INTERFACE
AaTYPE WITH INTENT
A quieter palette.
A clearer hierarchy.
● ● ●homepage.html ↗
scope®Made for independent designers
LESS ADMIN. MORE MAKING.Good work.
Clear scope.

A considered space for your next project, from the first quote to the final yes.

Create your quote ↗
YOUR NEXT PROJECTBrand &
website design
01 Define the work
02 Agree on the scope
03 Get the go-ahead
Ready when you are. ↗
THE STARTING POINT

“A quoting tool for freelance designers.
Make the next step feel clear.”

Illustrative composition · not a recorded skill output

01 从 brief 到界面

一个前端设计任务，从 brief 到界面。

告诉 Claude Code 或 Codex 产品、受众和内容；frontend-design skill 负责做出视觉决策。

示例 brief示意工作流 · 非实际运行记录

报价工具的主页

帮助自由设计师了解如何创建报价、协商范围变更并获得客户批准。

品牌资产定价FAQ 文案
查看完整提示词 ↗

Skill 的引导内容

  1. 01
    寻找视觉方向

    与产品相关的配色、字体层级和布局。

  2. 02
    审查计划

    在构建前对照 brief 检查方向。

  3. 03
    构建和完善

    具有清晰操作和无障碍状态的响应式界面。

02 找到适合场景

何时使用 frontend-design Skill

当视觉决策是工作的一部分时使用 frontend-design skill——在 Claude Code 或 Codex 中构建新页面，或重新设计看起来像模板的界面。

适合场景

  • 根据 brief 创建新页面或网站落地页、产品网站、作品集、小型应用——任何第一个问题是「这应该是什么样子？」的场景。
  • 对现有界面进行视觉重新设计你有可运行的 UI，但看起来像模板，希望获得植根于产品主题的设计方向。
  • 修正排版和层级字体比例、行长、字重和间距按照设计意图设置，而非框架默认值。
  • 附带真实内容的 brief该 skill 基于 brief 的实际文案和主题进行构建；你提供的真实素材越多，结果越具体。

了解边界

  • 你已有设计系统提供其规则和组件。该 skill 应遵循你的 brief，并在仍然开放的视觉选择范围内工作。
  • 工作重点是逻辑、数据或后端其重点是视觉设计。应用逻辑、API 和功能测试需要各自的实施工作。
  • 你想要组件库或模板它提供设计指导，而非现成的组件库或页面模板。
  • 你需要审查完成的 UI它的自我评判针对自己的计划。要审计他人的界面，请参阅下方的相关 skill。

需要提供的信息

  • 产品主题产品是什么以及所属行业。如果省略，该 skill 会提出建议并要求你确认。
  • 目标用户页面面向的用户群体。这比任何其他因素更能驱动视觉风格。
  • 页面目标页面需要完成的核心任务，以及主要操作。
  • 真实内容标题、文案、价格、FAQ 答案。占位文本会产生占位符式的设计。
  • 品牌资产与约束Logo、配色、字体以及任何已确定的内容。brief 本身的表述始终优先。

03 带着意图设计

Skill 为 UI 设计带来的能力

frontend-design skill 指导 Claude Code 或 Codex 执行的四件事，以及每件事如何转化你的输入。

  1. 基于主题的视觉方向

    Agent 会先弄清楚产品是什么、服务谁、以及它所在的世界是什么样子，然后再做任何选择。一款面向八岁儿童的玩具和一个面向分析师的仪表板不应该共享同一种外观。

    你提供
    产品主题、受众
    你获得
    一个在编写代码之前你可以接受或重新指导的方向

  2. 有目的地选择字体、颜色和布局

    一到两种带有真实比例的字体，一个 4-6 色的配色方案（以十六进制命名），以及一个带有对齐规则的布局概念。结构性设计元素——线条、编号、标签——仅在承载信息时使用。

    你提供
    品牌资产、限制条件
    你获得
    一个页面构建所基于的紧凑 token 系统

  3. 在构建前根据 Brief 审查的计划

    Skill 分两步工作。它先起草计划，然后根据「我会为任何类似页面制作这个吗？」这一问题检查每个部分，并修订那些读起来像默认选项的内容——说明改变了什么以及为什么。代码在之后生成。

    你提供
    brief
    你获得
    一份书面计划和一段你可以在记录中阅读的简短自我审查

  4. 无需要求的基线质量

    响应式适配至移动端，可见的键盘焦点，尊重减少动效偏好，无障碍配色，以及从用户视角以简明、主动的语言编写的文案。

    你提供
    你的无障碍要求
    你获得
    移动端和键盘使用的指南

04 投入使用

在 Claude Code 或 Codex 中安装 frontend-design

一条 npx skills add 命令，然后在你的 Agent 中提供一个 brief，并对首次结果进行检查。

将 frontend-design 添加到 Claude Code、Codex 或你的 Agent

在你的项目中运行该命令，按照安装程序的 Agent 选择提示操作，然后检查你的 Agent 是否能够发现 frontend-design。

Terminal
npx skills add https://github.com/anthropics/skills --skill frontend-design

命令来源：skills.sh 上的 frontend-design 条目。按照安装程序操作并确认该 skill 出现在你的 Agent 中。

给 Skill 一个首次 UI 设计任务

根据你的产品细节调整此 brief，附上其中提到的品牌资产，然后在 Claude Code 或 Codex 中运行。

Example prompt
Use the frontend-design skill to design the homepage for a project-quoting tool for freelance designers. Goal: visitors should understand three things — how quotes are built, how scope changes are confirmed, and how clients approve — and then start creating a quote. Content: use the attached brand colors and logo. Include a hero, how it works, features, pricing, and FAQ. Use the real pricing tiers and FAQ answers I have provided; do not invent numbers or testimonials. Process: propose a visual direction that fits freelance designers and this product first, then build the desktop and mobile pages. Keep clear calls to action, visible keyboard focus, and a reduced-motion experience.

检查首次结果

一个好的首次运行结果很容易识别。在接受页面之前，在记录和输出中查找以下内容：

  • 计划先于代码，包含命名的调色板值和字体角色。
  • 自我审查至少指出了一个被替换的默认值，以及替换的原因。
  • 你的真实文案、价格和品牌资产会原样呈现。
  • 有一个元素令人印象深刻；页面的其余部分保持克制。
  • 页面在 390px 下正常工作，Tab 键显示可见的焦点环，动效遵循系统设置。
  • 如果某些内容读起来很通用，请指出是哪一部分 —— 该 skill 被设计为接受这种批评并进行修订。

正在使用 OpenDesign？frontend-design 已内置在 OpenDesign 中：打开 Plugins → Skills，在顶部栏中选择它，它的 SKILL.md 会与你的 DESIGN.md 一起组合到提示中。Claude Code、Codex、Cursor 或 OpenCode 会完成工作。

下载 OpenDesign阅读快速入门指南

05 开源、可追溯

来源、许可与验证

本页面事实的来源，以及最后检查时间。

Author
Anthropic
Repository
github.com/anthropics/skills 分支 main
Skill 文件
skills/frontend-design/SKILL.md 验证时记录的内容校验和；commit 34040c9
License
Apache-2.0 来自 skills/frontend-design/LICENSE.txt；SKILL.md 说明"完整条款见 LICENSE.txt"。代码库根目录未声明单独的许可证。
仓库星标数
176,183 GitHub 快照于 2026-09-14 拍摄，针对整个 anthropics/skills 代码库，其中包含多个 skill。不是 frontend-design 的评分或使用次数。
已由 OpenDesign 验证
2026-09-14 源文件、路径、许可证文本和 star 数已核查。已打包在 OpenDesign 主程序中（核查时间 2026-08-28）；本页面尚未记录在 OpenDesign 中的实际运行。
Skill 自身的描述
为构建新 UI 或重塑现有 UI 提供独特、有意图的视觉设计指导。帮助确定美学方向、排版，并做出不显得像模板化默认样式的选择。

Front-matter description from SKILL.md. The full instructions are about 9,400 characters and cover subject grounding, design principles, a plan → review → build → critique process, restraint, and writing in design. 在 GitHub 上阅读完整文件.

Frontend Design

给你的 Agent 一份值得为之设计的 brief。

frontend-design skill 内置于 OpenDesign。下载应用，在 Plugins → Skills 中选择该 skill，粘贴示例提示，在看代码前先读一读计划。

下载 OpenDesign浏览所有 skill
终端
npx skills add https://github.com/anthropics/skills --skill frontend-design