返回赛题列表
密钥生成器
进阶一个可视化的密码学密钥与随机数生成器，支持多种格式输出、强度评估和一键复制，用 Web Crypto API 替代命令行 `openssl rand`。考察模型对密码学工程常识、安全随机数生成和工具型产品设计的理解。
规则说明▼
phase1：仅给出一句话需求，看模型在面对极简提示词时的默认产出——会不会用 Web Crypto API？输出格式有几种？有没有安全提示？
phase2：给出详细的功能需求，考察模型按规格实现的能力，包括多种密钥类型预设、格式转换、批量生成、熵源可视化等。
phase3 step1：在新的对话窗口，要求模型自行撰写 PRD
phase3 step2：在同一个对话窗口，要求模型根据自己生成的 PRD 输出 HTML 文件
Prompt▼
phase1：▼
做一个密钥生成器网页工具：用户可以生成各种长度的随机密钥和密码，支持 hex、base64 等格式输出，可一键复制。单文件 HTML，所有的 CSS 和 JS 内联。
phase2：▼
做一个密钥生成器（Crypto Key Forge）：一个专业的密码学密钥与随机数生成器网页工具。单文件 HTML，所有 CSS 和 JS 内联。
以下是详细的功能需求：
**预设密钥类型（快捷按钮）：**
1. 提供常见密钥类型的一键生成预设，至少包括：
- AES-128 密钥（16 字节 hex）
- AES-256 密钥（32 字节 hex）
- HMAC 密钥（32 字节 hex）
- JWT Secret（32 字节 base64url）
- 初始化向量 IV（16 字节 hex）
- UUID v4
- 强密码（可配置长度和字符集）
2. 每个预设旁边用简短文字说明用途（如"适用于 AES-256-CBC 加密"）
3. 点击预设后自动填入对应的字节长度和输出格式
**自定义生成：**
4. 可自定义字节长度（1–128 字节），滑块 + 数字输入双控制
5. 输出格式至少支持 4 种，可同时显示多种格式的结果：
- Hex（小写，如 `a1b2c3d4...`）
- Hex（大写，如 `A1B2C3D4...`）
- Base64
- Base64url（URL 安全变体）
6. 每种格式的输出旁边都有独立的"复制"按钮，复制后有视觉反馈
**强密码生成器：**
7. 独立的强密码生成区域，可配置：
- 密码长度（8–128 字符）
- 字符集开关：大写字母 / 小写字母 / 数字 / 特殊符号
- 排除易混淆字符选项（如 `0O`, `1lI`）
8. 密码强度可视化评估（不只是简单的长度判断，要考虑字符集多样性和熵值）
9. 显示密码的信息熵（bits），并用通俗语言解释（如"暴力破解需要约 2^128 次尝试"）
**批量生成：**
10. 支持一次生成多个密钥（1–20 个），以列表形式展示
11. 批量结果支持"全部复制"（每行一个）和"导出为 .env 格式"
12. .env 导出时可自定义变量名前缀（如 `APP_KEY_1=xxx`）
**安全性：**
13. **必须使用 `crypto.getRandomValues()` 或 Web Crypto API** 生成随机数，绝不能用 `Math.random()`
14. 页面上明确标注随机数来源（如"使用 Web Crypto API (CSPRNG) 生成"）
15. 生成的密钥不做任何网络传输，页面上注明"所有生成均在本地完成，不会发送到服务器"
16. 提供一个"安全擦除"按钮，点击后清空页面上所有已生成的密钥内容
**熵源可视化（加分项）：**
17. 用动画展示随机字节的生成过程（如字节流瀑布、矩阵雨效果、或随机色块网格）
18. 显示本次生成的原始随机字节的分布直方图（0x00–0xFF 的频率分布），直观展示随机性质量
**UI/UX：**
19. 深色主题为主（密码学工具的专业感），但支持浅色切换
20. 等宽字体展示所有密钥输出
21. 响应式布局，移动端可用
22. 键盘快捷键：`Space` 或 `Enter` 重新生成当前配置的密钥
**技术约束：**
- 单文件 HTML，所有自己写的 CSS 和 JS 内联
- 不允许使用任何外部 CDN 或库——这道题的所有功能都可以用原生 Web API 实现
- 必须使用密码学安全的随机数生成器（CSPRNG）
phase3(2 steps)▼
phase3 step1：▼
以下是一个设计需求：
"做一个密钥生成器（Crypto Key Forge）：一个专业的密码学密钥与随机数生成器网页工具，支持常见密钥类型预设（AES/HMAC/JWT/IV/UUID）、自定义字节长度、多格式输出（hex/base64/base64url）、强密码生成、批量生成与 .env 导出，使用 Web Crypto API 确保安全随机性。单文件 HTML。"
请你根据这个需求，撰写一份详细的产品需求文档（PRD），不要写代码，只输出 PRD。
phase3 step2：▼
根据你自己的 PRD 文档，请输出完整的单文件 HTML（包含内联 CSS 和 JS）。要求完美还原 PRD 中描述的所有功能与视觉设计。
Claude Opus 4.7
Anthropic · 中转站API (C)
Kimi K2.6 Thinking
Moonshot AI · Kimi Web Chat