设计产品落地页
提供真实的产品简报、目标受众和获准截图。让 Agent 建立信息层级并实现页面，再检查核心信息在宽屏和窄屏是否都能读清。
Design Taste Frontend
从受众与产品简报出发，确定落地页的视觉方向、实现方式和浏览器验收条件。使用原有技术栈，保留页面必须传达的产品信息。
根据视觉简报调整落地页
让 Agent 使用真实简报、现有组件和获准素材，并在代表性屏幕宽度下检查。
带入 Floatboat 的请求
请求可预览和复制，不会从此处自动发送。
参考来源: Design Taste Frontend https://github.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md 先阅读原始说明并核对当前环境与依赖。需要安装或连接新工具时，先提出方案。 我的任务: 用 Design Taste Frontend 调整现有产品落地页。保留导航和批准的文案，只用我提供的产品截图。在手机与桌面宽度复核，先报告可见回归再继续修改。 期望交付: 可运行的页面和带依据的多宽度复核记录。
关于 Design Taste Frontend
这项 MIT 许可的 Skill 为新建或重设计网站提供前端流程。它使用项目内工作文件、获准参考图和浏览器检查，把简报落实成可验收的页面。现行主 Skill 同时覆盖改版场景。
Design Taste Frontend 的网页设计场景
新建页面、改版和交接检查的起点不同。先选定页面范围与获准素材，再说明需要验证的屏幕宽度和交互状态。
改版过时的首页
标出必须保留的内容与导航，在已有页面中挑一个需要改进的区域。对比改版前后渲染结果，检查新布局是否仍然符合原有信息结构。
打磨响应式作品集
提供现有布局与图片，检查代表性屏幕宽度下的边线对齐和裁切情况。记录具体影响阅读或图像识别的问题及修正结果。
交接前复核网页
在本地打开实现页面，对照已批准的视觉方向。让 Agent 标出遗漏素材或布局回归，并附上对应屏幕宽度的截图。
如何根据设计简报实现并检查页面
提供真实的产品内容和一个明确的视觉方向。实现后打开网页检查排版、图片和交互状态，并记录尚需人工核验的细节。
说明设计边界
给出页面路径、目标读者、技术栈、获准素材和必须保留的章节。 内置检查脚本需要 Node.js 22 或更高版本，以及已安装的 Chrome、Edge 或 Chromium。
落实一个视觉方向
适用时复用项目组件和已有设计决策。把草稿放在项目内，替换缺失素材之前先核对许可和用途。
验证真实渲染
在浏览器打开获准页面，检查桌面和窄屏布局，并标记当前检查工具无法覆盖的问题。
探索更多 Agent Skills
查看其他 Skill 指南，并在使用前核对原始来源。
Design Taste Frontend 常见问题
现行 Skill 覆盖改版吗？
覆盖。Design Taste Frontend 主 Skill 同时用于新建、改版、打磨和检查网页。
需要换前端框架吗？
上游支持不同网页技术栈。实现时应先遵守项目现有的路由、框架与组件约束。
应该提供哪些素材？
提供获准使用的参考图、已有产品截图，并说明新素材的生成或来源限制。
只看代码能验收吗？
浏览器检查用来核对布局、图片表现和响应式状态。代码检查可用于追查渲染问题的原因。
草稿文件保存在哪里？
现行指引将工作文件放在项目内的 .taste-skill 目录。提交前先核对生成文件的范围。
安装就能使用外部图像服务吗？
安装提供工作指引。若任务需要外部图像服务，宿主仍需另行配置对应权限。