返回赛题列表
SQL炼金术
进阶可视化 SQL 查询执行过程的交互式教学工具——用动画拆解 SELECT / WHERE / JOIN / GROUP BY / ORDER BY 的逻辑执行步骤。
规则说明▼
phase1：要求模型根据简短提示词直接输出HTML文件（最少引导，测试模型自身理解力）
phase2：使用前端设计 skill 作为系统提示词，同样的用户 prompt 再生成一次（测试 skill 对输出质量的提升）
phase3 step1：在新的对话窗口，要求模型自行撰写PRD
phase3 step2：在同一个对话窗口，要求模型根据自己生成的PRD输出HTML文件（此产物上传至 phase3）
phase4：在 phase3 的同一个对话窗口中继续，注入 frontend-design skill 提示词，要求模型对 phase3 的代码进行视觉风格重构（此产物上传至 phase4）
Prompt▼
phase1：▼
创建一个 SQL 查询可视化执行器。左侧是一个可编辑的 SQL 编辑器（预置几条示例查询如 SELECT/WHERE/JOIN/GROUP BY），右侧用动画可视化展示 SQL 的逻辑执行过程：数据表显示为卡片网格，WHERE 过滤时不符合条件的行淡出消失，JOIN 时两张表的行滑动连接，GROUP BY 时行聚拢分组，ORDER BY 时行上下交换排序。配色要专业但不沉闷，像一个现代数据工具的风格。请输出完整的单文件 HTML。
phase2（Skill 加持）：▼
**系统提示词（System Prompt）：** 使用 `frontend-design` skill 内容
**用户消息：** 与 phase1 完全相同：
创建一个 SQL 查询可视化执行器。左侧是一个可编辑的 SQL 编辑器（预置几条示例查询如 SELECT/WHERE/JOIN/GROUP BY），右侧用动画可视化展示 SQL 的逻辑执行过程：数据表显示为卡片网格，WHERE 过滤时不符合条件的行淡出消失，JOIN 时两张表的行滑动连接，GROUP BY 时行聚拢分组，ORDER BY 时行上下交换排序。配色要专业但不沉闷，像一个现代数据工具的风格。请输出完整的单文件 HTML。
phase3(2 steps)▼
phase3 step1：▼
以下是一个设计需求：
"创建一个 SQL 查询可视化执行器。左侧是一个可编辑的 SQL 编辑器（预置几条示例查询），右侧用动画可视化展示 SQL 的逻辑执行过程：数据表显示为卡片网格，WHERE 过滤时不符合条件的行淡出消失，JOIN 时两张表的行滑动连接，GROUP BY 时行聚拢分组，ORDER BY 时行上下交换排序。配色要专业但不沉闷，像一个现代数据工具的风格。"
请你根据这个需求，撰写一份详细的产品需求文档（PRD），不要写代码，只输出 PRD。
phase3 step2：▼
根据你自己的 PRD 文档，请输出完整的单文件 HTML（包含内联 CSS 和 JS）。要求完美还原 PRD 中描述的所有功能与视觉设计。
phase4（在 phase3 的对话中继续）：▼
将 `frontend-design` skill 内容复制到用户消息中，然后追加：
请根据以上前端设计准则，对你刚才生成的代码进行视觉风格重构。保持所有功能逻辑不变，只重构视觉层面（配色、字体、布局、装饰细节、动画等），让整体设计更具辨识度和高级感。请输出完整的重构后的单文件 HTML。
Claude Opus 4.6 Extended Thinking
Anthropic · Claude.ai Web
Claude Opus 4.7
Anthropic · 中转站API (X)