琥珀手账套件——使用指南

你会得到什么

一个收进单个自包含 HTML 文件的完整 SaaS 产品站点，采用「琥珀手账」风格——那种被反复打磨的开源起步模板站的模样：

• #/ ——落地页：渐变公告条、滚动时收缩成悬浮胶囊的导航栏、带一处渐变短语的 Hero、内联 SVG 贴纸和手写风「100%」徽章、纯 CSS 绘制的产品后台浏览器截图、灰度「Used by」展示行、四段大幅倾斜样机特性分栏、带中心 logo 格的奶油色 bento 功能网格、路线图看板、瀑布流用户评价、FAQ，以及一张坦诚的 Cookie 卡
• #/pricing ——三档方案，配「最划算」高亮描边和等宽字体测试卡号提示
• #/signin ——坦诚的演示登录页，带一键演示账号
• #/app ——真正可用的演示应用（默认是 AI 日程助手）：添加任务、循环切换优先级、消耗积分生成日程
• #/admin ——四张统计卡、一张收入折线图和两个表格

明暗双主题齐备且可切换。无构建步骤、无框架、零网络请求——文件可从磁盘直接打开，也能在沙箱 iframe 中运行。在真实项目内，Skill 会按你自己的技术栈（React、Vue、Svelte、Astro 等）生成同一套设计体系，用真实路由替代 hash 路由。

怎么下需求

1. 产品名 + 一句话承诺——承诺会成为 Hero 主标题，其中的关键短语用琥珀色渐变呈现。
2. 8–10 个功能填充 bento 网格，外加值得大幅倾斜样机分栏的 3–4 个旗舰功能。
3. 定价结构——默认是两档订阅加一个一次性积分包。
4. 路线图条目，以及你想改编的用户评价（不提供则自动生成虚构身份）。

拿到产出之后

• 纯 HTML/CSS/JS——可以直接改文案，也可以让它继续修改。
• 演示状态（积分、任务、登录）存在内存里，刷新即重置，这是有意为之；原型从不假装拥有后端。
• 手动修改后，运行 node scripts/validate-suite.mjs your-file.html 确认文件仍然自包含且结构完整。