产品落地页
产品落地页的视觉方向应来自产品定位、受众和访客需要作出的决定。结合已批准的文案与品牌素材，围绕这个目标组织内容和交互。完成后检查桌面及移动端实现，避免仅凭一张好看的画面判断整个页面是否适用。
Frontend Design by Anthropic
使用 Anthropic 的 Frontend Design，将具体产品需求转成有明确方向的前端界面。结合目标读者、品牌与页面用途，组织字体、配色、布局和交互，再对照真实内容与渲染结果核对设计，减少套用相同视觉方案的情况。
从明确的视觉方向开始构建页面
说明界面背后的产品、受众和约束，将请求组织为有依据的设计方向及实现检查。桌面、移动效果和已有内容都属于任务背景，必须保留的行为也应在开始前明确。
带入 Floatboat 的请求
请求可预览和复制，不会从此处自动发送。
参考来源: Frontend Design https://github.com/anthropics/skills/blob/main/skills/frontend-design/SKILL.md 先阅读原始说明并核对当前环境与依赖。需要安装或连接新工具时，先提出方案。 我的任务: 使用提供的文案和现有品牌色，为这个产品设计落地页。先说明视觉方向，再实现并检查桌面与移动布局。 期望交付: 先给出视觉方向，再按可用工具实现，并检查桌面与手机布局。
关于 Frontend Design
Frontend Design 是 Anthropic 用于构建新界面或重新确定视觉方向的 Skill。它引导 Agent 先理解产品主题、目标读者和页面用途，再组织字体、色彩、空间、动效与内容，形成连贯方案后实施。规则也强调响应式、可访问性以及对实际渲染结果的自查。它适合需要明确视觉表达的落地页、仪表盘和产品界面。使用时应提供真实文案、已有设计要求与需要保留的功能，让 Agent 围绕具体场景设计；Skill 提供的是操作指引，实际页面仍由项目的技术栈实现。
Frontend Design Skill的使用场景
落地页、仪表盘和已有页面改版需要服务不同的用户决定。了解 Frontend Design 如何结合产品背景、信息层级及功能约束，形成连贯界面，并通过实际屏幕检查实现效果。
仪表盘层级不清
优化仪表盘时，先识别关键指标和最常发生的操作，再结合截图与真实工作任务确定信息优先级。相应调整字体、间距和布局，让重要信息及控件更容易找到，同时保留使用者已经依赖的有效交互。
已有页面需要重做
已有页面可以更新视觉方向，但不能丢失产品内容和功能约束。提供当前界面、已知可用性问题及必须保留的内容，作为重构边界。通过有代表性的前后状态对比，核对新设计是否解决问题，并保留必要行为。
扩展已有设计系统
新增章节或页面可能需要延续已经批准的组件和视觉规则。提供现有参照及新用户任务，先比较哪些结构能够复用、哪些确实需要新模式。将实现与相邻界面一起检查，让新增内容属于同一产品，同时保留本次任务必须满足的内容和交互要求。
如何使用 Frontend Design
视觉方向应从产品背景、受众和功能约束中形成。按原始设计流程实现后，需要在代表性桌面与移动状态中检查内容及交互，不能只凭单张界面截图判断设计已经完成。
明确设计需求
提供主题、读者、主要任务与真实内容，补充品牌素材以及必须保留的要求。
确定方向并实现
审阅字体、配色、布局与交互的简洁方案，再让 Agent 使用项目已有技术栈实现。
检查渲染界面
检查代表性的桌面与移动视图，按原需求核对层级、内容适配、键盘操作与动效。
探索更多 Agent Skills
查看其他 Skill 指南，并在使用前核对原始来源。
Frontend Design 常见问题
它与 Vercel 的 Web Design Guidelines 相同吗？
不同。Frontend Design 指导界面视觉方向与实现；Vercel 的 Skill 按另一份界面规范审查指定源码文件。
设计请求需要提供什么信息？
提供产品主题、目标读者、主要任务、真实文案与约束。需要保留视觉身份或交互时，也应提供现有界面。
可以沿用现有设计系统吗？
可以。应说明哪些设计变量、组件、布局与品牌决定必须保留。原始说明优先遵循用户需求，因此可以明确要求沿用这些选择。
安装 Skill 就会生成可运行网站吗？
不会。安装获得的是宿主 Agent 使用的指令。页面运行仍需项目文件、合适的环境，以及用户要求的具体开发工作。
它是否涉及无障碍与响应式检查？
原始说明将响应式、键盘焦点、减少动态效果和视觉可访问性纳入质量要求。仍需在实际界面验证，读取 Skill 不能证明页面已经合格。
这个 Frontend Design Skill 来自哪里？
它来自 anthropics/skills 仓库中的 frontend-design。同名但来自其他发布者或仓库的 Skill，指令和安装路径可能不同。