产品落地页
结合产品主题与目标用户确定视觉方向，再围绕访客需要作出的决定组织文案和交互。
Frontend Design by Anthropic
使用 Anthropic 的 Frontend Design，将具体产品需求转成有明确方向的前端界面。结合目标读者、品牌与页面用途，组织字体、配色、布局和交互，再对照真实内容与渲染结果核对设计，减少套用相同视觉方案的情况。
安装与快速上手
选择你使用的 Agent，查看对应的安装或使用方式。在 Floatboat 中，可复制请求让 Agent 读取原始说明；其他选项会显示该 Skill 的安装命令或发布者提供的原生步骤。
选择 Agent
在 Floatboat 中开始
复制请求，粘贴到 Floatboat 对话
请阅读 https://github.com/anthropics/skills/blob/main/skills/frontend-design/SKILL.md 中的 Frontend Design 原始说明，介绍它的用途、所需工具和安装方式，再协助我使用。由 Agent 读取原始说明，再确认当前环境的使用方式。
下载 Floatboat ↗试试这样提问
使用提供的文案和现有品牌色，为这个产品设计落地页。先说明视觉方向，再实现并检查桌面与移动布局。
关于 Frontend Design
Frontend Design 是 Anthropic 用于构建新界面或重新确定视觉方向的 Skill。它引导 Agent 先理解产品主题、目标读者和页面用途，再组织字体、色彩、空间、动效与内容，形成连贯方案后实施。规则也强调响应式、可访问性以及对实际渲染结果的自查。它适合需要明确视觉表达的落地页、仪表盘和产品界面。使用时应提供真实文案、已有设计要求与需要保留的功能，让 Agent 围绕具体场景设计；Skill 提供的是操作指引，实际页面仍由项目的技术栈实现。
Frontend Design 的使用场景
探索需要体现产品主题和用户需求的界面任务，例如构建产品落地页、梳理仪表盘层级，或为已有页面重新确定视觉方向。结合真实内容、功能约束和响应式要求，判断哪些设计选择能够帮助用户理解与操作。
仪表盘层级不清
优先呈现用户最常查看的信息与操作，通过字体和间距让工作界面更容易浏览。
已有页面需要重做
提供当前界面及必须保留的要求，让 Agent 重新设计视觉表达，同时保留产品内容与功能。
如何使用 Frontend Design
先说明目标读者、主要任务、真实内容和已确定的视觉要求。让 Agent 提出简洁的设计方向，再进入实现；完成后检查渲染页面，在需要支持的尺寸下核对层级、可读性、交互与响应式表现，并修正具体问题。
- 01
明确设计需求
提供主题、读者、主要任务与真实内容，补充品牌素材以及必须保留的要求。
- 02
确定方向并实现
审阅字体、配色、布局与交互的简洁方案，再让 Agent 使用项目已有技术栈实现。
- 03
检查渲染界面
检查代表性的桌面与移动视图，按原需求核对层级、内容适配、键盘操作与动效。
探索更多 Agent Skills
查看其他 Skill 指南，并在使用前核对原始来源。
Frontend Design 常见问题
它与 Vercel 的 Web Design Guidelines 相同吗？
不同。Frontend Design 指导界面视觉方向与实现；Vercel 的 Skill 按另一份界面规范审查指定源码文件。
设计请求需要提供什么信息？
提供产品主题、目标读者、主要任务、真实文案与约束。需要保留视觉身份或交互时，也应提供现有界面。
可以沿用现有设计系统吗？
可以。应说明哪些设计变量、组件、布局与品牌决定必须保留。原始说明优先遵循用户需求，因此可以明确要求沿用这些选择。
安装 Skill 就会生成可运行网站吗？
不会。安装获得的是宿主 Agent 使用的指令。页面运行仍需项目文件、合适的环境，以及用户要求的具体开发工作。
它是否涉及无障碍与响应式检查？
原始说明将响应式、键盘焦点、减少动态效果和视觉可访问性纳入质量要求。仍需在实际界面验证，读取 Skill 不能证明页面已经合格。
这个 Frontend Design Skill 来自哪里？
它来自 anthropics/skills 仓库中的 frontend-design。同名但来自其他发布者或仓库的 Skill，指令和安装路径可能不同。