网页设计与实现
frontend-design · Anthropic为网站或 UI 确定视觉方向、字体与布局，适合从需求开始做页面。
- 输出
- 网页代码
- 需要
- 可编辑的网页项目与编程 agent
ZIP · 11 KB · Apache-2.0
用途与边界
- 准备什么
- 目标用户、页面用途、真实文案，以及一个可编辑的网页项目。
- 运行条件
- 能编辑项目文件的 AI 编程工具，以及网页项目所需的运行环境。
- 使用边界
- 它指导 AI 编程工具，不会直接生成 Figma 文件，也不保证一次生成就能上线。
实测案例
Codex CLI · 2026-10-19 · 虚构项目样例
陶艺工作室首页
制作中文响应式首页，展示三门课程，并提供本地预约说明弹层。
已生成单文件 HTML，通过离线内容和 JavaScript 语法检查。
预约仅演示；浏览器交互和手机布局仍需复核。
试一个设计任务
技能加载后，复制任务并替换为你的需求。
使用 frontend-design，在当前项目中做一个陶艺工作室首页。目标是让访客了解课程并预约体验。沿用现有技术，先提出与陶艺相关的视觉方向，再实现响应式页面。包含手机布局、键盘焦点和清晰的预约入口。不要虚构评价或预约人数。安装说明
适用于 Claude 的 Code／项目入口；聊天和 Cowork 的技能在账户设置中管理。
放入技能目录，或使用安装命令
下载并解压，保留完整的 frontend-design 文件夹，放入项目的 .claude/skills/ 目录。
或在项目终端运行命令，需要 Node.js / npx。命令获取作者最新版本，可能与下载包不同。
查看原作者安装说明npx skills add anthropics/skills --skill frontend-design --agent claude-code确认技能已加载
重新打开工具，在技能列表中确认 frontend-design 可用。若没有出现，请按原作者说明检查安装目录。
检查结果
- 首屏能说明服务对象和下一步行动。
- 手机上没有横向溢出。
- 主要操作可以通过键盘完成。