返回赛题列表
记忆翻牌
入门构建记忆翻牌配对游戏——卡牌翻转动画、配对判定、步数/计时计分、多难度。考察 CSS 3D 翻转动画和配对逻辑的实现能力。
规则说明▼
模型需要生成一个单文件 HTML（内联 CSS + 原生 JS），不得使用 JSX 或任何需要编译的语法。
phase1：要求模型根据极简提示词直接输出 HTML 文件
phase2 step1：在新的对话窗口，要求模型自行撰写 PRD
phase2 step2：在同一个对话窗口，要求模型根据自己生成的 PRD 输出 HTML 文件
phase3：在系统提示词中注入 Claude 官方的 Frontend Design Skill，再用极简提示词生成
phase4：在系统提示词中注入 Maximalism/Dopamine 风格设计系统，再用极简提示词生成
Prompt▼
phase1：▼
做一个单文件 HTML 的记忆翻牌配对游戏。
phase2(2 steps)▼
phase2 step1：▼
以下是一个设计需求：
"制作一个单文件 HTML 的记忆翻牌配对游戏。"
请你根据这个需求，撰写一份详细的产品需求文档（PRD），不要写代码，只输出 PRD。
phase2 step2：▼
根据你自己的 PRD 文档，请输出完整的单文件 HTML（包含内联 CSS 和 JS）。要求完美还原 PRD 中描述的所有功能与视觉设计。
phase3：▼
**系统提示词（注入 Claude 官方的 Frontend Design Skill）：**
在系统提示词中注入 Claude 官方的 Frontend Design Skill，无法注入提示词时，将skill直接写在用户提示词前面。
**用户提示词：**
做一个单文件 HTML 的记忆翻牌配对游戏。
phase4：▼
**系统提示词（注入 Maximalism/Dopamine 风格设计系统）：**
在系统提示词中注入 Maximalism/Dopamine 风格设计系统<design-system>部分的内容，无法注入提示词时，将风格设计系统直接写在用户提示词前面。
提示词来自 https://www.designprompts.dev/maximalism
**用户提示词：**
做一个单文件 HTML 的记忆翻牌配对游戏。
Claude Opus 4.6 Extended Thinking
Anthropic · Claude.ai Web
Claude Opus 4.7
Anthropic · 中转站API (X)
Gemini 3.1 Pro
Google · Vertex AI Studio