返回赛题列表
Markdown编辑剪贴板
入门一个支持实时预览的 Markdown 编辑器网页，让浏览器 AI 助手既能读取 Markdown 源码也能看到渲染结果，方便快速分享和协作编辑 MD 文件。
规则说明▼
phase1：仅给出功能性要求，不提供任何视觉/交互设计细节，看模型"裸奔"时的默认审美与工程判断
phase2：在 phase1 的功能基础上追加详细的 UI/UX 设计规范，在新的对话窗口给出提示词，考察模型在明确设计约束下的还原能力
Prompt▼
phase1：▼
制作一个单文件 HTML Markdown 编辑剪贴板，核心用途是在网页上编辑和预览 Markdown 内容，让 Edge Copilot、Chrome Gemini 等浏览器内置 AI 助手能同时读取源码和渲染结果，充当 Markdown 文件与 AI 之间的桥梁。
phase2：▼
制作一个单文件 HTML Markdown 编辑剪贴板，核心用途是在网页上编辑和预览 Markdown 内容，让 Edge Copilot、Chrome Gemini 等浏览器内置 AI 助手能同时读取源码和渲染结果，充当 Markdown 文件与 AI 之间的桥梁。
功能要求：
1. 左右分栏布局：左侧为 Markdown 源码编辑区，右侧为实时渲染预览区
2. 实时预览：编辑区内容变化时，预览区即时更新渲染结果
3. Markdown 解析：支持完整的 CommonMark 语法，包括标题、列表、粗体/斜体、链接、图片、代码块（带语法高亮）、表格、引用块、水平线等
4. 代码块语法高亮：Markdown 中的围栏代码块应在预览时显示语法高亮
5. 一键复制：分别提供"复制源码"和"复制渲染 HTML"两个按钮
6. 导入/导出：支持通过文件选择器导入 `.md` 文件，支持将当前内容导出下载为 `.md` 文件
7. 本地暂存：使用 localStorage 自动保存编辑内容，刷新页面不丢失
8. 清晰的语义化 HTML 结构：确保源码和渲染结果都以浏览器 AI 助手最容易解析的方式呈现在 DOM 中
设计要求：
- 编辑区采用等宽字体（类似代码编辑器风格）
- 预览区采用优雅的排版样式（类似 GitHub Markdown 渲染风格）
- 整体界面干净无干扰，纯粹聚焦于内容编辑
- 响应式布局：桌面端左右分栏，移动端上下堆叠并支持切换编辑/预览模式
Claude Opus 4.6 Extended Thinking
Anthropic · Claude.ai Web