Claude Academy 学习推荐示例：直接回答后链接至官方 Claude Code 学习入口
项目截图关于这个 Skill
围绕真实内容选择字体、构图与视觉方向，制作有辨识度的网页界面。需要项目的前端技术栈，以及用于视觉检查的浏览器。
为什么推荐
适合需要明确视觉方向的前端页面：将风格选择落实到可运行的界面，并关注字体、空间、动效和响应式表现。
适合用来做什么
- 制作产品落地页。
- 设计内容型网站。
- 改善界面组件的视觉质量。
工作方式
1. 根据主题与受众选择视觉语言
先确认页面用途，再选择具体的视觉方向。
2. 以真实内容和交互实现界面
用有特点的字体、构图和有目的的交互实现界面。
3. 检查响应式表现、可访问性和视觉一致性
继续完善视觉细节与响应式表现，避免套用通用布局公式。
示例任务
可以这样描述任务：“为虚构独立建筑杂志制作一张具有辨识度的落地页。”
预览是 SkillHey 为这类任务制作的原创示例，内容为虚构演示；并非 Anthropic 官方截图或 Agent 评测结果。
第二个示例
可以这样描述任务：“为虚构咖啡烘焙店 Common Ground 制作原创网店页面。”
安装单个 Skill 或官方插件
单独安装时，用上方命令把完整目录复制到项目 Skills 根目录，最终入口为 .claude/skills/frontend-design/SKILL.md。保留引用资料、脚本与素材。
| 命令 | 用途与使用时机 |
|---|---|
/plugin marketplace add anthropics/skills | 在 Claude Code 中注册官方插件市场。 |
/plugin install example-skills@anthropic-agent-skills | 安装官方插件；可能同时包含其他 Skill，具体以插件清单为准。 |
依赖与许可
需要项目的前端技术栈，以及用于视觉检查的浏览器。
方法文件可免费访问；运行 Agent 或外部服务可能产生相应费用。
再次分发文件前，请查看该 Skill 的 LICENSE.txt。
使用前需要了解
- 需要项目的前端技术栈，以及用于视觉检查的浏览器。
支持的 Agent
Claude Code
常见问题
这是独立的 Skill 吗？
是。frontend-design 有自己的 SKILL.md 和目录，同时属于「Anthropic 官方 Skills」专题。
资料与来源
原始资料见下方链接；文中的上手建议由 SkillHey 编辑整理。
