落地页系统

一个完整的单文件落地页:转化结构加统一视觉系统,交付前用渲染后页面审查把关。

落地页系统

把一份产品需求变成完整的单文件落地页:转化结构、统一的视觉系统和随滚动点亮的标语,交付前再用渲染后页面审查,找出结构、对比度、溢出和动效问题。

使用方法

  1. 写出页面策略:承诺、证明、顾虑和唯一的行动按钮

  2. 用随包的 system.css 和 motion.js 设计变量与组件搭建

  3. 对渲染后的页面运行 scripts/audit.mjs,修掉所有错误和警告

常见问题

审查检查什么?

它在 Chrome 里按桌面和手机尺寸打开渲染后的页面,检查版块结构、是否只有一个主行动、对比度、横向溢出、点击区域大小、图片替代文本和减少动效时的处理。我们测试用的一个故意做坏的页面触发了 18 组规则;两个示例都是 0 错误 0 警告。

需要模型 Key 吗?

不需要。这个 Skill 是说明文档加一套 CSS/JS 系统和本地审查脚本,运行审查需要 Node.js 和 Chrome。

示例是真实产品吗?

不是。Pocketkiln 和 Shiftnote 都是为这个 Skill 虚构的,里面的数字也是编的。