Zero to Interface / 从零到界面

把一个从零到一的新产品想法，逐步整理成 PRD 和一套可运行、高完成度的前端设计稿，在正式开发前确定产品流程、视觉与交互。

它会做什么

1. 以产品经理的方式追问并整理零散需求。
2. 创建一份与用户确认过的 prd.md。
3. 收集用户提供的视觉参考；没有参考时独立完成设计。
4. 使用原生 HTML、CSS 和 JavaScript 制作一套最佳的可运行前端设计稿。
5. 根据用户反馈持续修改，并在产品逻辑变化时同步 PRD。
6. 确认后创建 design-handoff.md，交给后续开发 Agent 使用正式前端技术栈一比一复刻。

边界

• 只服务于从零到一的新产品，不处理现有产品改版。
• 设计稿使用模拟数据，不接入真实 API、数据库、鉴权、支付或其他后端能力。
• 不进入 React、Next.js、Vue 等正式前端技术栈开发。
• HTML 是视觉与交互的事实来源，不是最终生产代码。

安装

将仓库克隆或复制到 Codex Skills 目录：

git clone https://github.com/Wanyi424/zero-to-interface.git ~/.codex/skills/zero-to-interface

使用

在 Codex 中调用：

$zero-to-interface 我有一个新的产品想法……

Skill 会先和你确认产品需求。PRD 未确认前，不会直接开始制作页面。

目录

• SKILL.md：Skill 主流程、阶段门槛与完成标准。
• references/product-discovery-and-prd.md：产品发现与 PRD 规范。
• references/visual-direction.md：视觉参考与独立设计规则。
• references/runnable-frontend-design.md：可运行前端设计稿规范。
• references/design-handoff.md：最终设计交接规范。
• agents/openai.yaml：Codex 展示元数据。