design-taste-frontend
Claude Code 前端设计技能：搭建并检查预约落地页
Claude Code 安装步骤
- 在 Claude Code 里添加 Leonxlnx/taste-skill marketplace，再按仓库 README 安装 `taste-skill@taste-skill`。
- 对照固定提交的 `skills/taste-skill/`，保留浏览器脚本、参考和资源目录。
- 在 `/skills` 查看插件加载项。项目中可用名称空间下的 design-taste-frontend，先用本地样例核对。
中文摘要
将业务目标转成页面结构、界面组件和视觉检查。仓库的浏览器脚本可检查不同宽度下的版式、交互和可访问性。
SKILL.md 中文导读
可复现示例
为虚构的青禾陶艺工作室搭建预约落地页。首屏说明 90 分钟体验课，后面放课程流程、价格和常见问题。只使用自备图片，预约按钮跳到页面内表单。检查 390px 和 1440px。工作步骤
- 先明确预约入口和页面区块，再选择已有的 CSS 变量或一套新的字体、配色和间距。
- 实现首屏、课程、价格和常见问题，保持主按钮动作一致。
- 用本地 HTTP 服务打开页面，按原文的浏览器检查方法核对窄屏、宽屏和键盘操作。
验收方法
390px 页面没有横向溢出。宽屏主要区块边缘对齐，预约按钮能到达表单，键盘可操作常见问题。
GitHub 原文 · 更新日期
适用环境
Claude Code 本地项目，Node.js 22+ 和 Chrome、Edge 或 Chromium。生成 WebP 时可使用 FFmpeg。
常见问题
怎么在 Claude Code 用 design-taste-frontend 做一个预约页？
从业务目标、预约入口和页面区块开始，用仓库的 Chromium 检查流程复查窄屏、宽屏和键盘交互。