返回赛题列表
二维码工坊
进阶实时生成可自定义样式的二维码工坊，支持容错级别、颜色、圆角样式、中心 Logo 占位，可导出 PNG/SVG。考察 QR 编码算法理解与"好看但仍能扫"的平衡。
规则说明▼
phase1：仅给出一句话需求，看模型在面对极简提示词时的默认产出
phase2：给出详细的功能需求，考察模型按规格实现的能力，包括参数面板完整度、样式与容错的平衡、SVG 导出质量。
phase3 step1：在新的对话窗口，要求模型自行撰写 PRD
phase3 step2：在同一个对话窗口，要求模型根据自己生成的 PRD 输出 HTML 文件
Prompt▼
phase1：▼
做一个二维码生成工坊：用户输入文本实时生成二维码，可自定义前景色、背景色等样式，支持下载。单文件 HTML，所有的 CSS 和 JS 内联 。
phase2：▼
做一个二维码生成工坊：用户输入文本实时生成二维码，可自定义样式并支持下载。单文件 HTML。
以下是详细的功能需求：
**输入：**
1. 大面积多行文本输入框，支持任意文本/URL/联系人 vCard 等内容
2. 输入防抖（~150ms），避免每个按键都重算
3. 显示当前输入的字节数与二维码版本号（Version 1–40）
**实时预览：**
4. 输入变化时二维码实时更新，不需点击"生成"按钮
5. 预览区域足够大（≥ 320×320），背景为中性灰以便查看浅色二维码
6. 旁边显示小尺寸"扫码测试"预览（模拟手机屏幕或名片场景的实际显示效果）
**容错级别：**
7. 支持四档容错级别切换（L ~7% / M ~15% / Q ~25% / H ~30%），切换时实时重新编码
8. UI 上提示每档的含义（"更高容错 = 更大二维码 = 可贴更大 Logo"）
**颜色自定义：**
9. 前景色选择器（黑色模块，默认黑）
10. 背景色选择器（白色模块，默认白）
11. **对比度检测**：前背景色对比度不足时给出明确警告（扫码率会显著下降）
12. 提供若干"安全配色"预设（黑白、深蓝浅黄、深绿浅米等），每个都保证扫码成功率
**样式定制：**
13. 模块形状至少支持 3 种：方块（默认）/ 圆点 / 圆角方块（圆角半径可调 0–50%）
14. 三个"位置探测图形"（三个角的"回"字大方块）可单独设置样式：
- 是否保留标准方形（最安全）
- 外框圆角 + 内点圆形（优雅但需验证扫码率）
**中心 Logo：**
15. 支持上传一张本地图片作为中心 Logo（PNG/SVG/JPG），也可选"不加 Logo"
16. Logo 尺寸可调（占二维码总面积的 5%–25%）
17. Logo 周围可选白色圆形/方形底托
18. **容错量计算提示**：当前 Logo 面积 vs 当前容错级别可覆盖的冗余量，实时告诉用户"当前配置的扫码安全度：✅安全 / ⚠️边缘 / ❌有风险"
**导出：**
19. 导出 PNG：可选 256/512/1024/2048 四档分辨率
20. 导出 SVG：矢量，任意放大不失真，文件体积尽量小
21. 一键复制二维码图片到剪贴板
**技术约束：**
- 单文件 HTML，所有自己写的 CSS 和 JS 内联
- **允许使用 QR 编码库的 CDN**（如 `qrcode-generator`、`qrcode.js` 等）——QR 编码算法本身（Reed-Solomon 纠错、矩阵布局）是极其复杂的工业标准，不强制手写
- 但如果模型选择手写编码算法，会有额外加分
- UI 层面的 CDN（图标、颜色选择器库等）不做限制
phase3(2 steps)▼
phase3 step1：▼
以下是一个设计需求：
"做一个二维码生成工坊：用户输入文本实时生成二维码，可自定义前景/背景色、模块形状（方块/圆点）、圆角样式、容错级别（L/M/Q/H），支持中心 Logo 占位，并可导出 PNG 和 SVG。单文件 HTML。"
请你根据这个需求，撰写一份详细的产品需求文档（PRD），不要写代码，只输出 PRD。
phase3 step2：▼
根据你自己的 PRD 文档，请输出完整的单文件 HTML（包含内联 CSS 和 JS）。要求完美还原 PRD 中描述的所有功能与视觉设计。