AI PICKS / AGENT SKILL

frontend-design

让 Agent 设计并实现有辨识度的网页界面。

anthropics/skills

使用前确认：需要支持 Skills 的 Agent；本站尚未独立验证全部运行环境。查看要求与许可 ↗ · 安装指南

添加到你的 Agent

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

在终端执行命令，按提示选择支持 Skills 的 Agent。部分技能需要额外运行环境，详见源仓库。

试试这样提问

为 AI 工具导航设计一个蓝色强调色的首页。

本站编写的使用示例，非实际运行结果。

先看答案

Frontend Design Skill：安装与使用

frontend-design 是 Anthropic 发布的界面设计 Skill。先说明用户、内容、框架与视觉约束，让 Agent 给出方向，再在浏览器里检查实现。

内容核对: 2026-10-02

从安装，到用起来

使用上方命令安装目标 Skill，保留配套文件，在 CLI 中选择正确客户端。
提供具体需求：React 工具导航、蓝色强调、清晰搜索、键盘可操作、390px 移动布局。编辑文件前，先看字体、布局和配色方案。
在桌面和手机尺寸检查首版。一次解决一个问题，优先调整层级与可读性，再考虑装饰效果。

怎样检查结果

检查标题换行、对比度、焦点可见性、长文本与窄屏溢出，并走通主要操作。视觉审查不能替代可访问性或功能测试。

继续探索

前端开发，如何选择 Claude Code Skills 如何安装 Claude Code Skills Claude Code Skills 无法加载或触发？

常见问题

frontend-design 能帮助我做什么？

让 Agent 设计并实现有辨识度的网页界面。

如何安装 frontend-design？

在终端运行以下命令。执行前先阅读源文件和仓库说明。

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

哪些 Agent 可以使用 frontend-design？

请先确认你的 Agent 支持 SKILL.md。部分 Skill 还需要额外工具或运行环境，具体要求以作者仓库为准。查看源仓库 ↗

它是 UI 组件库吗？

它是给 Agent 的方法说明。实际实现仍取决于项目框架、组件和约束。

怎样确认调用成功？

在 Claude Code 中显式调用 /frontend-design，先执行小任务并检查做法与输出。未出现或未调用时，可按排障指南检查。

RESOURCE NOTES

使用前，了解这些

价格与许可: 价格与许可请以资源发布方说明为准；本站暂不出售此资源。
兼容性: 请查看发布方说明；本站尚未独立验证全部运行环境。
资料核对日期: 2026-10-01

Skill 提供设计方法，输出取决于需求、模型与可用工具。AI Picks 尚未为本页记录实际执行或进行基准测试，上方提示词是编写示例。

anthropics/skills ↗Repository / Skill source ↗

机器可读资料 · JSON

GitHub skills.sh

好发现，留给下一次。