# 能力演示：从简短需求到可点击单页原型

## 定位

这是 2026-09-19 制作的内部能力演示，不是客户项目。它验证 Wade 当前能否把一段模糊需求收窄为可验收范围，并交付一个无需构建、可在桌面和手机运行的小型前端原型。

## 客户输入

原始模拟输入见 `CLIENT_INPUT.md`。核心问题是：页面既要说明工作坊，也要让访问者选择目标与交付范围，最后得到一段可复制的项目摘要。

## 最终输出

- `index.html`：语义化单页结构；
- `styles.css`：响应式布局、颜色、排版与交互状态；
- `app.js`：目标/范围选择、动态摘要与复制反馈；
- `output/playwright/desktop.png` 与 `output/playwright/mobile.png`：实际浏览器截图；
- `VERIFICATION.md`：运行与验收结果。

## 操作过程

1. 把“做一个 AI 工作坊页面”拆成受众、主要动作、内容结构、交互和明确不做的范围。
2. 先写验收标准，再写页面，避免边做边扩大范围。
3. 用原生 HTML/CSS/JS 实现一个完整首屏、说明模块、三步流程、范围选择和动态摘要。
4. 在真实浏览器中用桌面与移动视口回读，点击选项并检查摘要变化。
5. 保存截图、代码和交付说明，不依赖私有素材或线上服务。

## 常见错误

- 一开始就讨论框架，尚未确认页面目的和主要动作。
- 把“可点击原型”误写成带支付、账号和数据库的生产系统。
- 只在桌面看效果，移动端出现文字溢出、按钮太小或信息顺序错误。
- AI 生成的文案、数字或功能没有来源，却被当成客户事实。
- 只交截图，没有源码、启动方法、验收标准和可修改位置。
- 只计算编码时间，漏掉需求澄清、准备、沟通、修改和售后。

## 能力边界

- 能稳定交付：限定范围的需求拆解、静态/轻交互单页、响应式适配、浏览器核验、交付说明和小范围修改。
- 需要单独评估：React 状态复杂度、第三方 API、部署、表单服务、CMS 接入和较多页面。
- 本试单不承诺：账号体系、支付、数据库、生产级安全审计、长期运维、SEO 排名、商业结果或无限修改。
- 本演示不证明：完成过真实客户项目、获得过客户评价、实现过盈利闭环。