{"schemaVersion":"drillso.agent.session.v1","scope":"node","resource":{"type":"shared-session","shareId":"ESSwPpca9yBg","title":"使用 Claude Code：HTML 难以置信的奇效【译】","canonicalUrl":"https://drillso.com/en/share/sessions/ESSwPpca9yBg/html-%E9%9A%BE%E4%BB%A5%E7%BD%AE%E4%BF%A1%E7%9A%84%E5%A5%87%E6%95%88-e3acd2c3","agentUrl":"https://drillso.com/en/share/sessions/ESSwPpca9yBg/agent.json?node=html-%E9%9A%BE%E4%BB%A5%E7%BD%AE%E4%BF%A1%E7%9A%84%E5%A5%87%E6%95%88-e3acd2c3","ownerName":"pyth0nb3st","updatedAt":"2026-05-12T11:29:26.804Z"},"currentNode":{"id":"e3acd2c3-0618-4199-a8b8-dfbb2ed12c6c","slug":"html-难以置信的奇效-e3acd2c3","title":"HTML 难以置信的奇效","type":"deck","url":"https://drillso.com/en/share/sessions/ESSwPpca9yBg/html-%E9%9A%BE%E4%BB%A5%E7%BD%AE%E4%BF%A1%E7%9A%84%E5%A5%87%E6%95%88-e3acd2c3","agentUrl":"https://drillso.com/en/share/sessions/ESSwPpca9yBg/agent.json?node=html-%E9%9A%BE%E4%BB%A5%E7%BD%AE%E4%BF%A1%E7%9A%84%E5%A5%87%E6%95%88-e3acd2c3","text":"{\n  \"style\": \"Neo-Retro Dev Deck / Pixel-Infographic Editorial\",\n  \"title\": \"HTML：AI 智能体输出的新画布\",\n  \"format\": \"presenter_slides\",\n  \"slides\": [\n    {\n      \"size\": \"1536x864\",\n      \"model\": \"gpt-image-2\",\n      \"title\": \"Markdown 开始不够用了\",\n      \"layout\": \"封面式单句大标题，左侧像终端窗口一样显示 Markdown 文件堆叠，右侧出现一个更大的 HTML 画布预览。\",\n      \"status\": \"completed\",\n      \"message\": \"当 AI 智能体输出越来越复杂，Markdown 的优势正在变成限制。\",\n      \"imageUrl\": \"https://cdn.drillso.com/generated/drill/chkqq20lhm498yajlybnv244-9a04c1bad336d900c755338cf43287a7.png\",\n      \"storageKey\": \"generated/drill/chkqq20lhm498yajlybnv244-9a04c1bad336d900c755338cf43287a7.png\",\n      \"imagePrompt\": \"Create exactly one complete presentation slide image.\\n\\nUse the following NotebookLM / Kael style prompt as the dominant art direction. Follow it closely.\\n\\nSTYLE TEMPLATE START\\nOverall style name: Neo-Retro Dev Deck / Pixel-Infographic Editorial.\\n\\nCore visual identity:\\n- Retro-futuristic, developer-centric, editorial infographic style.\\n- Feels like 90s computer manuals mixed with modern AI dev tools marketing.\\n- Pixel art meets startup slide deck.\\n- Mood: confident, playful, opinionated, slightly rebellious.\\n- Builders explaining the future, not selling fluff.\\n\\nCanvas and background:\\n- Use a light cream or off-white grid paper background.\\n- Add subtle square grid lines like an engineering notebook.\\n- Slides should feel like annotated engineering notes, not corporate PPTs.\\n\\nTypography:\\n- Primary headline: bold, heavy geometric sans serif, black text, slightly condensed.\\n- Headlines may mix the requested language and English.\\n- English sub-labels sit under requested-language titles in small clean type.\\n- Use huge bold headline blocks, medium subtitles, and small explanatory captions below icons or boxes.\\n\\nStrict color palette:\\n- Hot pink for agent, brain, intelligence concepts.\\n- Bright yellow for editor, code, and tools.\\n- Cyan or light blue for browser, web, and execution.\\n- Black for text and borders.\\n- White or cream for background.\\n- Each section should have one dominant color block.\\n\\nLayout language:\\n- Stacked modular blocks.\\n- Rectangles with thick black borders.\\n- Slight intentional overlaps and collage-like assembly.\\n- Horizontal section header bars.\\n- Card structures for steps, evolution, layers.\\n- Controlled imperfection: assembled, not perfectly sterile.\\n\\nIconography and graphics:\\n- Pixel-art style icons: rocket, robot, agent, gear, code brackets, browser window, chat bubbles.\\n- Icons should look low-resolution, 8-bit or 16-bit inspired, flat colors, black outline.\\n- Decorative elements: small gears, arrows, chevrons, pixel sparks, motion lines.\\n\\nContent patterns:\\n- System architecture slides: stacked layers, each with one color, one icon, one bold title, one short line.\\n- Evolution slides: left-to-right progression, each step in its own box; final step is larger and more colorful.\\n- Manifesto slides: one huge headline in a boxed frame, minimal text, playful icons around it.\\n\\nTone:\\n- Short, declarative, slightly opinionated.\\n- Good: Agents execute tasks autonomously. Coding enters the agent era.\\n- Bad: Empowering users with cutting-edge solutions.\\n\\nAvoid gradients, realistic photos, soft shadows, corporate templates, and quiet minimalism.\\nGenerate cohesive multi-slide visuals with consistent grid background, color usage, icon style, and typography hierarchy.\\nSTYLE TEMPLATE END\\n\\nDeck title: HTML：AI 智能体输出的新画布\\nDeck summary: 这套短演示面向使用 Claude Code 或类似 AI 智能体的开发者、产品和技术团队，围绕“为什么 HTML 正在比 Markdown 更适合作为复杂 AI 输出格式”展开：从信息密度、可读性、分享、交互、数据摄取到实际使用场景。\\nDeck format: presenter_slides\\nChosen style: Neo-Retro Dev Deck / Pixel-Infographic Editorial\\n\\nSlide 1: Markdown 开始不够用了\\nMain message: 当 AI 智能体输出越来越复杂，Markdown 的优势正在变成限制。\\n\\nVisible text must be exactly these lines, with no extra words:\\nMarkdown 很方便\\n但复杂工作需要更强的画布\\nHTML 开始接管\\n\\nLayout:\\n封面式单句大标题，左侧像终端窗口一样显示 Markdown 文件堆叠，右侧出现一个更大的 HTML 画布预览。\\n\\nVisual style:\\n复古开发者杂志封面感，像 90 年代电脑手册与现代 AI 工具宣传页混合；网格纸背景、像素化小图标、终端窗口、HTML 标签符号作为视觉线索。\\n\\nAdditional image direction:\\n制作一张封面幻灯片：浅奶油色工程网格背景，左侧是几张拥挤的 Markdown 文档卡片，上面有 ASCII 图表和长文本行；右侧是一块明亮的 HTML 画布，包含彩色图表、卡片和小型交互控件。标题大而清晰，构图偏编辑杂志封面，带像素风小箭头和代码标签装饰。\\n\\nRequirements:\\n- Canvas: 1536x864 landscape presentation slide.\\n- Generate one slide only, not a contact sheet and not multiple slide candidates.\\n- Make it presentation-ready, high-sensibility, and coherent with the chosen style template.\\n- Make it visually finished, not a sparse wireframe or placeholder diagram.\\n- Use the strongest signature elements of the style template: palette, typography, composition language, icon/illustration treatment, and editorial rhythm.\\n- Keep all visible text readable at presentation distance.\\n- Use low text density, strong hierarchy, and source-grounded diagrams, editorial composition, or template-specific visuals.\\n- Do not add markdown symbols, fake logos, watermarks, signatures, UI browser chrome, or extra captions.\\n- Match the source/user instruction language for all visible slide text and speaker-facing copy.\",\n      \"slideNumber\": 1,\n      \"visibleText\": [\n        \"Markdown 很方便\",\n        \"但复杂工作需要更强的画布\",\n        \"HTML 开始接管\"\n      ],\n      \"visualStyle\": \"复古开发者杂志封面感，像 90 年代电脑手册与现代 AI 工具宣传页混合；网格纸背景、像素化小图标、终端窗口、HTML 标签符号作为视觉线索。\",\n      \"speakerNotes\": \"原文的起点很清楚：Markdown 已经成为 AI 智能体与人沟通时最常用的格式，因为它简单、便携、具备一定富文本能力，也容易人工修改。但作者发现，随着 AI 智能体能力增强，动辄上百行的 Markdown 文件很难让人有耐心读下去。更关键的是，作者现在越来越少亲自编辑这些文件，而是让 Claude 通过提示词修改，因此 Markdown 最核心的人工可编辑优势变弱了。\",\n      \"revisedPrompt\": \"Create a single 16:9 presentation slide image (1536x864) in the Neo-Retro Dev Deck / Pixel-Infographic Editorial style. Landscape cover slide for a developer presentation.\\n\\nOverall composition: editorial magazine cover with engineering notebook grid paper background in light cream/off-white, subtle square grid lines. Strong retro-futuristic, developer-centric, playful but polished. Thick black borders, modular collage blocks, slight overlaps, pixel-art accents. No gradients, no photos, no soft shadows, no corporate template feel.\\n\\nVisible text must be EXACTLY these three lines and nothing else anywhere on the slide:\\nMarkdown 很方便\\n但复杂工作需要更强的画布\\nHTML 开始接管\\nUse large bold geometric sans serif Chinese typography, black, high contrast, presentation readable. Place as a dominant headline block centered slightly left or center-left, with strong hierarchy and plenty of breathing room. Do not add any extra captions, labels, logos, watermarks, browser chrome, or other text.\\n\\nLayout: left side resembles a terminal-like stack of cramped Markdown document cards, each card with dense long text lines and ASCII chart-like strokes, but keep any text on those cards illegible / decorative enough to avoid extra readable words. Right side: a larger bright HTML canvas preview, with colorful chart blocks, cards, and small interactive control shapes, plus visible HTML tag symbols as decorative iconography (<> , braces, brackets), rendered in pixel-art style. The HTML side should feel more spacious, more structured, and more powerful than the Markdown stack.\\n\\nColor palette: cream background, black borders/text, hot pink for intelligence/agent accents, bright yellow for editor/code/tool accents, cyan/light blue for browser/web/execution accents. Each major section should have one dominant color block. Use pixel-art icons such as small arrows, code brackets, spark lines, gears, and a tiny robot/agent symbol. Controlled imperfection, assembled collage feel.\\n\\nStyle cues: 90s computer manual mixed with modern AI dev tools marketing, notebook grid paper, bold headline blocks, modular rectangles, editorial rhythm, pixel-infographic treatment. The slide should feel finished, polished, and visually dense but not cluttered. Ensure the three required Chinese lines are crisp and readable, and avoid any additional readable text.\",\n      \"storageFileId\": \"chkqq20lhm498yajlybnv244-9a04c1bad336d900c755338cf43287a7\"\n    },\n    {\n      \"size\": \"1536x864\",\n      \"model\": \"gpt-image-2\",\n      \"title\": \"核心转变：从文本文件到视觉制品\",\n      \"layout\": \"左右对比图。左边是单色 Markdown 文档，右边是模块化 HTML 页面。中间用箭头表示工作流迁移。\",\n      \"status\": \"completed\",\n      \"message\": \"HTML 不只是另一种格式，而是更适合承载复杂 AI 输出的视觉制品。\",\n      \"imageUrl\": \"https://cdn.drillso.com/generated/drill/zme5p3ldhhj31t1zetnxnbqw-f299989cc39de04253f0b0ee912816db.png\",\n      \"storageKey\": \"generated/drill/zme5p3ldhhj31t1zetnxnbqw-f299989cc39de04253f0b0ee912816db.png\",\n      \"imagePrompt\": \"Create exactly one complete presentation slide image.\\n\\nUse the following NotebookLM / Kael style prompt as the dominant art direction. Follow it closely.\\n\\nSTYLE TEMPLATE START\\nOverall style name: Neo-Retro Dev Deck / Pixel-Infographic Editorial.\\n\\nCore visual identity:\\n- Retro-futuristic, developer-centric, editorial infographic style.\\n- Feels like 90s computer manuals mixed with modern AI dev tools marketing.\\n- Pixel art meets startup slide deck.\\n- Mood: confident, playful, opinionated, slightly rebellious.\\n- Builders explaining the future, not selling fluff.\\n\\nCanvas and background:\\n- Use a light cream or off-white grid paper background.\\n- Add subtle square grid lines like an engineering notebook.\\n- Slides should feel like annotated engineering notes, not corporate PPTs.\\n\\nTypography:\\n- Primary headline: bold, heavy geometric sans serif, black text, slightly condensed.\\n- Headlines may mix the requested language and English.\\n- English sub-labels sit under requested-language titles in small clean type.\\n- Use huge bold headline blocks, medium subtitles, and small explanatory captions below icons or boxes.\\n\\nStrict color palette:\\n- Hot pink for agent, brain, intelligence concepts.\\n- Bright yellow for editor, code, and tools.\\n- Cyan or light blue for browser, web, and execution.\\n- Black for text and borders.\\n- White or cream for background.\\n- Each section should have one dominant color block.\\n\\nLayout language:\\n- Stacked modular blocks.\\n- Rectangles with thick black borders.\\n- Slight intentional overlaps and collage-like assembly.\\n- Horizontal section header bars.\\n- Card structures for steps, evolution, layers.\\n- Controlled imperfection: assembled, not perfectly sterile.\\n\\nIconography and graphics:\\n- Pixel-art style icons: rocket, robot, agent, gear, code brackets, browser window, chat bubbles.\\n- Icons should look low-resolution, 8-bit or 16-bit inspired, flat colors, black outline.\\n- Decorative elements: small gears, arrows, chevrons, pixel sparks, motion lines.\\n\\nContent patterns:\\n- System architecture slides: stacked layers, each with one color, one icon, one bold title, one short line.\\n- Evolution slides: left-to-right progression, each step in its own box; final step is larger and more colorful.\\n- Manifesto slides: one huge headline in a boxed frame, minimal text, playful icons around it.\\n\\nTone:\\n- Short, declarative, slightly opinionated.\\n- Good: Agents execute tasks autonomously. Coding enters the agent era.\\n- Bad: Empowering users with cutting-edge solutions.\\n\\nAvoid gradients, realistic photos, soft shadows, corporate templates, and quiet minimalism.\\nGenerate cohesive multi-slide visuals with consistent grid background, color usage, icon style, and typography hierarchy.\\nSTYLE TEMPLATE END\\n\\nDeck title: HTML：AI 智能体输出的新画布\\nDeck summary: 这套短演示面向使用 Claude Code 或类似 AI 智能体的开发者、产品和技术团队，围绕“为什么 HTML 正在比 Markdown 更适合作为复杂 AI 输出格式”展开：从信息密度、可读性、分享、交互、数据摄取到实际使用场景。\\nDeck format: presenter_slides\\nChosen style: Neo-Retro Dev Deck / Pixel-Infographic Editorial\\n\\nSlide 2: 核心转变：从文本文件到视觉制品\\nMain message: HTML 不只是另一种格式，而是更适合承载复杂 AI 输出的视觉制品。\\n\\nVisible text must be exactly these lines, with no extra words:\\nMarkdown\\n文本为主\\nHTML\\n结构、视觉、交互\\n\\nLayout:\\n左右对比图。左边是单色 Markdown 文档，右边是模块化 HTML 页面。中间用箭头表示工作流迁移。\\n\\nVisual style:\\n像素信息图风格，使用复古 UI 框、粗黑边、网格标尺和小标签，强调格式迁移。\\n\\nAdditional image direction:\\n设计一张左右对比幻灯片：左侧标题 Markdown，下方是单栏长文本、简单标题和 ASCII 图；右侧标题 HTML，下方是分区卡片、表格、SVG 图表、Tabs、按钮和图片占位。中间有一条像素风数据管道箭头，从文本文件流向视觉制品。\\n\\nRequirements:\\n- Canvas: 1536x864 landscape presentation slide.\\n- Generate one slide only, not a contact sheet and not multiple slide candidates.\\n- Make it presentation-ready, high-sensibility, and coherent with the chosen style template.\\n- Make it visually finished, not a sparse wireframe or placeholder diagram.\\n- Use the strongest signature elements of the style template: palette, typography, composition language, icon/illustration treatment, and editorial rhythm.\\n- Keep all visible text readable at presentation distance.\\n- Use low text density, strong hierarchy, and source-grounded diagrams, editorial composition, or template-specific visuals.\\n- Do not add markdown symbols, fake logos, watermarks, signatures, UI browser chrome, or extra captions.\\n- Match the source/user instruction language for all visible slide text and speaker-facing copy.\",\n      \"slideNumber\": 2,\n      \"visibleText\": [\n        \"Markdown\",\n        \"文本为主\",\n        \"HTML\",\n        \"结构、视觉、交互\"\n      ],\n      \"visualStyle\": \"像素信息图风格，使用复古 UI 框、粗黑边、网格标尺和小标签，强调格式迁移。\",\n      \"speakerNotes\": \"作者偏爱 HTML 的原因，不是因为 Markdown 完全不好，而是因为需求变了。AI 生成的内容越来越像需求文档、参考资料、头脑风暴结果、计划、审查说明和报告。这些内容往往不再需要人手工一行行编辑，而更需要被阅读、审查、分享和复用。HTML 可以把这些输出变成一个视觉制品，而不是一段长文本。\",\n      \"revisedPrompt\": \"A single complete presentation slide image, 1536x864 landscape, in Neo-Retro Dev Deck / Pixel-Infographic Editorial style. Light cream off-white grid paper background with subtle engineering notebook grid. Strong retro-futuristic developer editorial composition, thick black borders, modular collage layout, pixel-infographic treatment, controlled imperfections. No browser chrome, no watermark, no logos, no extra captions.\\n\\nSlide topic: contrasting Markdown text file vs HTML visual artifact. Layout: left and right comparison with a central pixel-data pipeline arrow moving from left to right.\\n\\nOnly visible readable text on the entire slide must be exactly these four lines, and nothing else readable:\\nMarkdown\\n文本为主\\nHTML\\n结构、视觉、交互\\n\\nPlace the text as large bold headline blocks with black heavy geometric sans serif. Left side: a monochrome Markdown document panel, single-column long text represented by dense black horizontal bars and a tiny minimalist code/document graphic, simple stacked paragraphs, and a small abstract ASCII-like block diagram rendered only as shapes/bars (not readable letters), all contained in a thick black framed card. Right side: a vibrant HTML page panel with modular sections represented by colorful boxes: a tab strip made of colored tabs without text, a table grid made of cells, an SVG chart with line and bars, button-like rounded rectangles without labels, and an image placeholder tile with pixel-art framing. Use dominant cyan/light blue for the HTML side, and muted grayscale for the Markdown side, with hot pink and bright yellow accents on the right for agents/tools/editor energy. Center: a retro pixel pipeline arrow, chunky and directional, with motion lines and small spark pixels, transitioning from text file to visual artifact.\\n\\nStrong signature elements: thick black outlines, stacked modular blocks, horizontal header bars, pixel-art icons (document, browser window, code brackets, small gear) but no text labels on icons. Editorial rhythm, playful rebellious confident tone. Keep the slide visually finished, dense enough, but maintain low text density. Avoid gradients, realistic photos, soft shadows, corporate template aesthetics. Ensure the four required text lines are readable at presentation distance and no other text appears anywhere on the slide. Use only those exact lines as readable typography.\\n\\nComposition: left 46%, center 10%, right 44%. The left panel should feel like a plain text file with one dominant tall document block and minimal structure. The right panel should feel like a polished HTML page with multiple clearly separated modules and stronger color. Use slight overlaps and collage-like assembly. Add small pixel sparks around the arrow. Make it look like a complete, high-sensibility keynote slide.\",\n      \"storageFileId\": \"zme5p3ldhhj31t1zetnxnbqw-f299989cc39de04253f0b0ee912816db\"\n    },\n    {\n      \"size\": \"1536x864\",\n      \"model\": \"gpt-image-2\",\n      \"title\": \"HTML 的信息密度更高\",\n      \"layout\": \"中心放一个 HTML 容器，周围用六个模块化小卡片环绕，像系统能力雷达图。\",\n      \"status\": \"completed\",\n      \"message\": \"HTML 能同时承载结构、数据、设计、图表、图片、代码与动态交互。\",\n      \"imageUrl\": \"https://cdn.drillso.com/generated/drill/ugz3e6b9ceovvd3dr3xsua16-04f8abbccba336ad6d79ae277a6a920d.png\",\n      \"storageKey\": \"generated/drill/ugz3e6b9ceovvd3dr3xsua16-04f8abbccba336ad6d79ae277a6a920d.png\",\n      \"imagePrompt\": \"Create exactly one complete presentation slide image.\\n\\nUse the following NotebookLM / Kael style prompt as the dominant art direction. Follow it closely.\\n\\nSTYLE TEMPLATE START\\nOverall style name: Neo-Retro Dev Deck / Pixel-Infographic Editorial.\\n\\nCore visual identity:\\n- Retro-futuristic, developer-centric, editorial infographic style.\\n- Feels like 90s computer manuals mixed with modern AI dev tools marketing.\\n- Pixel art meets startup slide deck.\\n- Mood: confident, playful, opinionated, slightly rebellious.\\n- Builders explaining the future, not selling fluff.\\n\\nCanvas and background:\\n- Use a light cream or off-white grid paper background.\\n- Add subtle square grid lines like an engineering notebook.\\n- Slides should feel like annotated engineering notes, not corporate PPTs.\\n\\nTypography:\\n- Primary headline: bold, heavy geometric sans serif, black text, slightly condensed.\\n- Headlines may mix the requested language and English.\\n- English sub-labels sit under requested-language titles in small clean type.\\n- Use huge bold headline blocks, medium subtitles, and small explanatory captions below icons or boxes.\\n\\nStrict color palette:\\n- Hot pink for agent, brain, intelligence concepts.\\n- Bright yellow for editor, code, and tools.\\n- Cyan or light blue for browser, web, and execution.\\n- Black for text and borders.\\n- White or cream for background.\\n- Each section should have one dominant color block.\\n\\nLayout language:\\n- Stacked modular blocks.\\n- Rectangles with thick black borders.\\n- Slight intentional overlaps and collage-like assembly.\\n- Horizontal section header bars.\\n- Card structures for steps, evolution, layers.\\n- Controlled imperfection: assembled, not perfectly sterile.\\n\\nIconography and graphics:\\n- Pixel-art style icons: rocket, robot, agent, gear, code brackets, browser window, chat bubbles.\\n- Icons should look low-resolution, 8-bit or 16-bit inspired, flat colors, black outline.\\n- Decorative elements: small gears, arrows, chevrons, pixel sparks, motion lines.\\n\\nContent patterns:\\n- System architecture slides: stacked layers, each with one color, one icon, one bold title, one short line.\\n- Evolution slides: left-to-right progression, each step in its own box; final step is larger and more colorful.\\n- Manifesto slides: one huge headline in a boxed frame, minimal text, playful icons around it.\\n\\nTone:\\n- Short, declarative, slightly opinionated.\\n- Good: Agents execute tasks autonomously. Coding enters the agent era.\\n- Bad: Empowering users with cutting-edge solutions.\\n\\nAvoid gradients, realistic photos, soft shadows, corporate templates, and quiet minimalism.\\nGenerate cohesive multi-slide visuals with consistent grid background, color usage, icon style, and typography hierarchy.\\nSTYLE TEMPLATE END\\n\\nDeck title: HTML：AI 智能体输出的新画布\\nDeck summary: 这套短演示面向使用 Claude Code 或类似 AI 智能体的开发者、产品和技术团队，围绕“为什么 HTML 正在比 Markdown 更适合作为复杂 AI 输出格式”展开：从信息密度、可读性、分享、交互、数据摄取到实际使用场景。\\nDeck format: presenter_slides\\nChosen style: Neo-Retro Dev Deck / Pixel-Infographic Editorial\\n\\nSlide 3: HTML 的信息密度更高\\nMain message: HTML 能同时承载结构、数据、设计、图表、图片、代码与动态交互。\\n\\nVisible text must be exactly these lines, with no extra words:\\n表格\\nCSS\\nSVG\\n代码片段\\n工作流图\\n交互控件\\n\\nLayout:\\n中心放一个 HTML 容器，周围用六个模块化小卡片环绕，像系统能力雷达图。\\n\\nVisual style:\\n开发者信息图，像复古软件说明书的功能矩阵；小图标使用像素风，线条清晰。\\n\\nAdditional image direction:\\n制作一张能力地图幻灯片：中心是一个写着 HTML 的代码容器，周围连接六个像素风模块卡片，分别表示表格、CSS、SVG、代码片段、工作流图和交互控件。每张卡片用简短中文标签和小图标表达，整体像工程蓝图上的功能雷达图。\\n\\nRequirements:\\n- Canvas: 1536x864 landscape presentation slide.\\n- Generate one slide only, not a contact sheet and not multiple slide candidates.\\n- Make it presentation-ready, high-sensibility, and coherent with the chosen style template.\\n- Make it visually finished, not a sparse wireframe or placeholder diagram.\\n- Use the strongest signature elements of the style template: palette, typography, composition language, icon/illustration treatment, and editorial rhythm.\\n- Keep all visible text readable at presentation distance.\\n- Use low text density, strong hierarchy, and source-grounded diagrams, editorial composition, or template-specific visuals.\\n- Do not add markdown symbols, fake logos, watermarks, signatures, UI browser chrome, or extra captions.\\n- Match the source/user instruction language for all visible slide text and speaker-facing copy.\",\n      \"slideNumber\": 3,\n      \"visibleText\": [\n        \"表格\",\n        \"CSS\",\n        \"SVG\",\n        \"代码片段\",\n        \"工作流图\",\n        \"交互控件\"\n      ],\n      \"visualStyle\": \"开发者信息图，像复古软件说明书的功能矩阵；小图标使用像素风，线条清晰。\",\n      \"speakerNotes\": \"原文列举了 HTML 的信息承载能力：表格可以展示数据列，CSS 可以表达设计细节，SVG 可以绘制清晰插图，script 标签可以嵌入代码片段，HTML、JavaScript 和 CSS 可以实现动态交互，SVG 和 HTML 可以绘制工作流图，画布和绝对定位可以展示空间分布数据，image 标签可以插入图片。作者甚至说，只要 Claude 能读懂的信息，几乎都能用 HTML 高效展现。\",\n      \"revisedPrompt\": \"Create exactly one complete presentation slide image, landscape 1536x864, Neo-Retro Dev Deck / Pixel-Infographic Editorial style. Light cream/off-white background with subtle engineering notebook grid lines. Retro-futuristic developer-centric editorial infographic feel, like a 90s computer manual mixed with modern AI dev tools marketing. Thick black borders, stacked modular blocks, controlled collage overlaps, pixel-art icons, black text, hot pink, bright yellow, cyan/light blue accents, no gradients, no shadows, no photos.\\n\\nSlide topic: HTML 的信息密度更高. Main message visually implied: HTML 能同时承载结构、数据、设计、图表、图片、代码与动态交互.\\n\\nComposition: a central large HTML code-container box in the middle, designed like a chunky code window / module with thick black border and hot pink + cyan accent blocks. Inside the center box, big bold text: HTML. Around it, connect six modular small cards in a radar/map layout, evenly distributed in a ring around center, each connected by black lines/arrows, like a system capability radar chart. Each card should have a distinct dominant color block and a small pixel-art icon. Use short Chinese labels only, exactly these six and no extra visible words anywhere: 表格, CSS, SVG, 代码片段, 工作流图, 交互控件. Make each label readable and prominent on its card.\\n\\nCard ideas: 表格 with pixel table/grid icon, CSS with style brush/slider icon, SVG with vector shape icon, 代码片段 with code bracket icon, 工作流图 with flow arrows/boxes icon, 交互控件 with button/toggle icon. Each card should feel like a functional capability module from a retro software manual, crisp and polished.\\n\\nTypography: bold heavy geometric sans serif for the central HTML title and the six Chinese labels, black text, slightly condensed. Minimal small technical markers only if they do not add extra readable words. Strong hierarchy, presentation-ready.\\n\\nOverall visual rhythm: engineered infographic, not corporate PPT, not minimal. Add small pixel sparks, chevrons, gear motifs, and blueprint-like annotation marks around the module network. Ensure the slide is finished, balanced, legible at presentation distance, cohesive, and contains exactly one slide only. No browser chrome, no watermark, no signatures, no extra captions, no markdown symbols, no English labels besides HTML if visible inside center box.\",\n      \"storageFileId\": \"ugz3e6b9ceovvd3dr3xsua16-04f8abbccba336ad6d79ae277a6a920d\"\n    },\n    {\n      \"size\": \"1536x864\",\n      \"model\": \"gpt-image-2\",\n      \"title\": \"可读性决定团队会不会看\",\n      \"layout\": \"上半部分是一条阅读路径图：长文迷宫变成清晰导航。下半部分显示桌面与手机两个设备上的同一 HTML 文档。\",\n      \"status\": \"completed\",\n      \"message\": \"当文档超过 100 行，HTML 的导航和视觉结构更容易让人读完。\",\n      \"imageUrl\": \"https://cdn.drillso.com/generated/drill/t7ygtzhh095osfp4813fkdxp-c33b2cacc67ec39ec5eccf21f26bb73e.png\",\n      \"storageKey\": \"generated/drill/t7ygtzhh095osfp4813fkdxp-c33b2cacc67ec39ec5eccf21f26bb73e.png\",\n      \"imagePrompt\": \"Create exactly one complete presentation slide image.\\n\\nUse the following NotebookLM / Kael style prompt as the dominant art direction. Follow it closely.\\n\\nSTYLE TEMPLATE START\\nOverall style name: Neo-Retro Dev Deck / Pixel-Infographic Editorial.\\n\\nCore visual identity:\\n- Retro-futuristic, developer-centric, editorial infographic style.\\n- Feels like 90s computer manuals mixed with modern AI dev tools marketing.\\n- Pixel art meets startup slide deck.\\n- Mood: confident, playful, opinionated, slightly rebellious.\\n- Builders explaining the future, not selling fluff.\\n\\nCanvas and background:\\n- Use a light cream or off-white grid paper background.\\n- Add subtle square grid lines like an engineering notebook.\\n- Slides should feel like annotated engineering notes, not corporate PPTs.\\n\\nTypography:\\n- Primary headline: bold, heavy geometric sans serif, black text, slightly condensed.\\n- Headlines may mix the requested language and English.\\n- English sub-labels sit under requested-language titles in small clean type.\\n- Use huge bold headline blocks, medium subtitles, and small explanatory captions below icons or boxes.\\n\\nStrict color palette:\\n- Hot pink for agent, brain, intelligence concepts.\\n- Bright yellow for editor, code, and tools.\\n- Cyan or light blue for browser, web, and execution.\\n- Black for text and borders.\\n- White or cream for background.\\n- Each section should have one dominant color block.\\n\\nLayout language:\\n- Stacked modular blocks.\\n- Rectangles with thick black borders.\\n- Slight intentional overlaps and collage-like assembly.\\n- Horizontal section header bars.\\n- Card structures for steps, evolution, layers.\\n- Controlled imperfection: assembled, not perfectly sterile.\\n\\nIconography and graphics:\\n- Pixel-art style icons: rocket, robot, agent, gear, code brackets, browser window, chat bubbles.\\n- Icons should look low-resolution, 8-bit or 16-bit inspired, flat colors, black outline.\\n- Decorative elements: small gears, arrows, chevrons, pixel sparks, motion lines.\\n\\nContent patterns:\\n- System architecture slides: stacked layers, each with one color, one icon, one bold title, one short line.\\n- Evolution slides: left-to-right progression, each step in its own box; final step is larger and more colorful.\\n- Manifesto slides: one huge headline in a boxed frame, minimal text, playful icons around it.\\n\\nTone:\\n- Short, declarative, slightly opinionated.\\n- Good: Agents execute tasks autonomously. Coding enters the agent era.\\n- Bad: Empowering users with cutting-edge solutions.\\n\\nAvoid gradients, realistic photos, soft shadows, corporate templates, and quiet minimalism.\\nGenerate cohesive multi-slide visuals with consistent grid background, color usage, icon style, and typography hierarchy.\\nSTYLE TEMPLATE END\\n\\nDeck title: HTML：AI 智能体输出的新画布\\nDeck summary: 这套短演示面向使用 Claude Code 或类似 AI 智能体的开发者、产品和技术团队，围绕“为什么 HTML 正在比 Markdown 更适合作为复杂 AI 输出格式”展开：从信息密度、可读性、分享、交互、数据摄取到实际使用场景。\\nDeck format: presenter_slides\\nChosen style: Neo-Retro Dev Deck / Pixel-Infographic Editorial\\n\\nSlide 4: 可读性决定团队会不会看\\nMain message: 当文档超过 100 行，HTML 的导航和视觉结构更容易让人读完。\\n\\nVisible text must be exactly these lines, with no extra words:\\n100 行 Markdown\\n很少有人读\\nTabs、插图、链接\\n更容易浏览\\n\\nLayout:\\n上半部分是一条阅读路径图：长文迷宫变成清晰导航。下半部分显示桌面与手机两个设备上的同一 HTML 文档。\\n\\nVisual style:\\n像素化用户旅程图，带终端迷宫、Tabs 导航条和响应式设备框。\\n\\nAdditional image direction:\\n设计一张可读性对比幻灯片：左上是一个由密密麻麻文本行组成的迷宫，标注 100 行 Markdown；右上是一条清晰的 Tabs 导航路径，配有插图和链接节点。底部展示一个桌面屏幕和一个手机屏幕，里面是同一份自适应 HTML 文档。\\n\\nRequirements:\\n- Canvas: 1536x864 landscape presentation slide.\\n- Generate one slide only, not a contact sheet and not multiple slide candidates.\\n- Make it presentation-ready, high-sensibility, and coherent with the chosen style template.\\n- Make it visually finished, not a sparse wireframe or placeholder diagram.\\n- Use the strongest signature elements of the style template: palette, typography, composition language, icon/illustration treatment, and editorial rhythm.\\n- Keep all visible text readable at presentation distance.\\n- Use low text density, strong hierarchy, and source-grounded diagrams, editorial composition, or template-specific visuals.\\n- Do not add markdown symbols, fake logos, watermarks, signatures, UI browser chrome, or extra captions.\\n- Match the source/user instruction language for all visible slide text and speaker-facing copy.\",\n      \"slideNumber\": 4,\n      \"visibleText\": [\n        \"100 行 Markdown\",\n        \"很少有人读\",\n        \"Tabs、插图、链接\",\n        \"更容易浏览\"\n      ],\n      \"visualStyle\": \"像素化用户旅程图，带终端迷宫、Tabs 导航条和响应式设备框。\",\n      \"speakerNotes\": \"作者在实际工作中发现，自己基本不会读超过 100 行的 Markdown 文件，也很难指望团队其他人去读。但 HTML 文档可以通过选项卡、插图、链接等视觉元素，把结构整理得更清楚，方便导航浏览。它还可以做到移动端自适应，让不同尺寸设备上都有更好的阅读体验。\",\n      \"revisedPrompt\": \"Create exactly one complete presentation slide image, 1536x864 landscape, in the dominant art direction of Neo-Retro Dev Deck / Pixel-Infographic Editorial.\\n\\nSlide topic: readability decides whether teams will actually read it.\\n\\nStrictly include ONLY these visible text lines, and no extra words anywhere:\\n100 行 Markdown\\n很少有人读\\nTabs、插图、链接\\n更容易浏览\\n\\nComposition:\\n- Light cream/off-white engineering notebook background with subtle square grid.\\n- Strong editorial layout with thick black borders, stacked modular blocks, slight overlaps, collage feel.\\n- Top half: a reading-path diagram. On the left, a dense terminal-like text maze made from many tiny horizontal text lines and pixel blocks, clearly labeled with the exact text \\\"100 行 Markdown\\\". On the right, a clear navigation path using Tabs: a bold yellow tab bar, a few crisp section blocks, illustration node, and link node connected by arrows/chevrons, conveying easier browsing. Add pixel-art maze arrows and terminal maze motifs.\\n- Bottom half: show the same HTML document displayed on two devices side by side: a desktop screen and a smartphone screen. Both screens should show the same responsive HTML document structure, with strong black outlines, cyan/blue browser/execution color, and yellow tab accents. No browser chrome, no fake logos, no watermark.\\n- Use pixel-art style icons and graphics: tabs, link nodes, small illustration icon, arrows, motion lines, tiny sparks. Flat colors, black outline, 8-bit/16-bit inspired.\\n- Visual metaphor: messy long Markdown becomes navigable, structured HTML.\\n\\nTypography:\\n- Huge heavy geometric sans headline treatment is implied by the exact text lines; make the Chinese text large, bold, black, slightly condensed, with editorial emphasis.\\n- Keep text readable at presentation distance and balanced with illustration.\\n\\nPalette:\\n- Hot pink reserved for brain/agent/intelligence accents only if needed.\\n- Bright yellow for editor/code/tools/tab structures.\\n- Cyan/light blue for browser/web/execution/device screens.\\n- Black for text and borders.\\n- Cream background.\\n- No gradients, no soft shadows, no realistic photos.\\n\\nStyle:\\n- Retro-futuristic, developer-centric, opinionated, playful, slightly rebellious.\\n- Annotated engineering notes, not corporate PPT.\\n- Cohesive, finished, presentation-ready, with strong hierarchy and visual rhythm.\\n\\nDo not add any extra captions, labels, logos, or UI chrome beyond the exact four text lines.\",\n      \"storageFileId\": \"t7ygtzhh095osfp4813fkdxp-c33b2cacc67ec39ec5eccf21f26bb73e\"\n    },\n    {\n      \"size\": \"1536x864\",\n      \"model\": \"gpt-image-2\",\n      \"title\": \"HTML 更容易被分享\",\n      \"layout\": \"分享流程图：AI 输出 HTML 文件，上传云端，生成链接，分发给团队设备。\",\n      \"status\": \"completed\",\n      \"message\": \"把 HTML 上传到云端后，团队成员可以用链接在任何设备打开。\",\n      \"imageUrl\": \"https://cdn.drillso.com/generated/drill/a2vyrq7pkj3p6q8h24v2p1mo-aa505c116799b9ff2689804ff1fcb4b5.png\",\n      \"storageKey\": \"generated/drill/a2vyrq7pkj3p6q8h24v2p1mo-aa505c116799b9ff2689804ff1fcb4b5.png\",\n      \"imagePrompt\": \"Create exactly one complete presentation slide image.\\n\\nUse the following NotebookLM / Kael style prompt as the dominant art direction. Follow it closely.\\n\\nSTYLE TEMPLATE START\\nOverall style name: Neo-Retro Dev Deck / Pixel-Infographic Editorial.\\n\\nCore visual identity:\\n- Retro-futuristic, developer-centric, editorial infographic style.\\n- Feels like 90s computer manuals mixed with modern AI dev tools marketing.\\n- Pixel art meets startup slide deck.\\n- Mood: confident, playful, opinionated, slightly rebellious.\\n- Builders explaining the future, not selling fluff.\\n\\nCanvas and background:\\n- Use a light cream or off-white grid paper background.\\n- Add subtle square grid lines like an engineering notebook.\\n- Slides should feel like annotated engineering notes, not corporate PPTs.\\n\\nTypography:\\n- Primary headline: bold, heavy geometric sans serif, black text, slightly condensed.\\n- Headlines may mix the requested language and English.\\n- English sub-labels sit under requested-language titles in small clean type.\\n- Use huge bold headline blocks, medium subtitles, and small explanatory captions below icons or boxes.\\n\\nStrict color palette:\\n- Hot pink for agent, brain, intelligence concepts.\\n- Bright yellow for editor, code, and tools.\\n- Cyan or light blue for browser, web, and execution.\\n- Black for text and borders.\\n- White or cream for background.\\n- Each section should have one dominant color block.\\n\\nLayout language:\\n- Stacked modular blocks.\\n- Rectangles with thick black borders.\\n- Slight intentional overlaps and collage-like assembly.\\n- Horizontal section header bars.\\n- Card structures for steps, evolution, layers.\\n- Controlled imperfection: assembled, not perfectly sterile.\\n\\nIconography and graphics:\\n- Pixel-art style icons: rocket, robot, agent, gear, code brackets, browser window, chat bubbles.\\n- Icons should look low-resolution, 8-bit or 16-bit inspired, flat colors, black outline.\\n- Decorative elements: small gears, arrows, chevrons, pixel sparks, motion lines.\\n\\nContent patterns:\\n- System architecture slides: stacked layers, each with one color, one icon, one bold title, one short line.\\n- Evolution slides: left-to-right progression, each step in its own box; final step is larger and more colorful.\\n- Manifesto slides: one huge headline in a boxed frame, minimal text, playful icons around it.\\n\\nTone:\\n- Short, declarative, slightly opinionated.\\n- Good: Agents execute tasks autonomously. Coding enters the agent era.\\n- Bad: Empowering users with cutting-edge solutions.\\n\\nAvoid gradients, realistic photos, soft shadows, corporate templates, and quiet minimalism.\\nGenerate cohesive multi-slide visuals with consistent grid background, color usage, icon style, and typography hierarchy.\\nSTYLE TEMPLATE END\\n\\nDeck title: HTML：AI 智能体输出的新画布\\nDeck summary: 这套短演示面向使用 Claude Code 或类似 AI 智能体的开发者、产品和技术团队，围绕“为什么 HTML 正在比 Markdown 更适合作为复杂 AI 输出格式”展开：从信息密度、可读性、分享、交互、数据摄取到实际使用场景。\\nDeck format: presenter_slides\\nChosen style: Neo-Retro Dev Deck / Pixel-Infographic Editorial\\n\\nSlide 5: HTML 更容易被分享\\nMain message: 把 HTML 上传到云端后，团队成员可以用链接在任何设备打开。\\n\\nVisible text must be exactly these lines, with no extra words:\\nMarkdown 常变成附件\\nHTML 可以变成链接\\n任何设备\\n随时参考\\n\\nLayout:\\n分享流程图：AI 输出 HTML 文件，上传云端，生成链接，分发给团队设备。\\n\\nVisual style:\\n复古网络拓扑图，使用像素云、链接线、设备节点和小型浏览器窗口。\\n\\nAdditional image direction:\\n制作一张分享工作流幻灯片：左侧是 Claude Code 终端生成 HTML 文件，中间是像素风云端存储图标，右侧分叉到笔记本、手机和平板浏览器窗口。用一条清晰数据线表示从文件到链接再到团队阅读的路径。\\n\\nRequirements:\\n- Canvas: 1536x864 landscape presentation slide.\\n- Generate one slide only, not a contact sheet and not multiple slide candidates.\\n- Make it presentation-ready, high-sensibility, and coherent with the chosen style template.\\n- Make it visually finished, not a sparse wireframe or placeholder diagram.\\n- Use the strongest signature elements of the style template: palette, typography, composition language, icon/illustration treatment, and editorial rhythm.\\n- Keep all visible text readable at presentation distance.\\n- Use low text density, strong hierarchy, and source-grounded diagrams, editorial composition, or template-specific visuals.\\n- Do not add markdown symbols, fake logos, watermarks, signatures, UI browser chrome, or extra captions.\\n- Match the source/user instruction language for all visible slide text and speaker-facing copy.\",\n      \"slideNumber\": 5,\n      \"visibleText\": [\n        \"Markdown 常变成附件\",\n        \"HTML 可以变成链接\",\n        \"任何设备\",\n        \"随时参考\"\n      ],\n      \"visualStyle\": \"复古网络拓扑图，使用像素云、链接线、设备节点和小型浏览器窗口。\",\n      \"speakerNotes\": \"原文指出，分享 Markdown 文件比较麻烦，因为大多数浏览器本身不能很好地渲染它们，通常只能当附件塞进邮件或聊天消息。HTML 的优势是，上传到云端后，比如云存储服务 S3，就能通过链接分享。同事可以随时随地用任何设备打开，也更可能真正耐心阅读需求文档、分析报告或代码审查说明。\",\n      \"revisedPrompt\": \"Create exactly one complete presentation slide image, 1536x864 landscape, in a Neo-Retro Dev Deck / Pixel-Infographic Editorial style. Single slide only, finished and presentation-ready.\\n\\nCanvas/background: light cream off-white engineering notebook paper with subtle square grid lines, slightly warm tint. Thick black borders, modular blocks, slight overlaps, collage-like assembly, retro-futuristic editorial infographic feel.\\n\\nColor palette: hot pink for intelligence/agent concepts, bright yellow for code/tools, cyan/light blue for browser/web/execution, black for text and borders, cream background. One dominant color block per section.\\n\\nComposition: a visual sharing workflow diagram spanning left to right. Left side: a pixel-art terminal / code panel suggesting AI code generation, with a stylized HTML file icon emerging from it. Middle: a pixel-art cloud storage icon as the hub. Right side: three device nodes branching from the cloud—laptop, smartphone, and tablet—each shown as small browser-window-like pixel illustrations. Connect them with a clear data line path: file → cloud → link distribution → team devices. Use link lines, arrows, chevrons, pixel sparks, and small motion marks. Retro network topology aesthetic. Make the workflow visually obvious and editorial, not a wireframe.\\n\\nTypography and text: Use bold heavy geometric sans serif for the main Chinese lines, black text, slightly condensed, with high legibility. The ONLY visible text on the slide must be exactly these four lines and nothing else, with no extra words, labels, captions, logos, or watermarks:\\nMarkdown 常变成附件\\nHTML 可以变成链接\\n任何设备\\n随时参考\\nPlace the first two lines as the large headline block near the left or center-left, and the last two lines near the right-side device area as medium emphasis captions. Do not add any other text anywhere.\\n\\nVisual details: pixel-art cloud, browser windows, device screens, code brackets, small arrows, subtle gears, and link-chain motifs. Controlled imperfection, assembled engineering-note style. Strong hierarchy, clean readable spacing, no corporate minimalism, no gradients, no realistic photos, no soft shadows.\\n\\nMake the slide feel like a confident opinionated developer presentation about sharing HTML via cloud links across devices. Ensure all text remains readable from presentation distance and the overall slide is cohesive and polished.\",\n      \"storageFileId\": \"a2vyrq7pkj3p6q8h24v2p1mo-aa505c116799b9ff2689804ff1fcb4b5\"\n    },\n    {\n      \"size\": \"1536x864\",\n      \"model\": \"gpt-image-2\",\n      \"title\": \"HTML 可以双向互动\",\n      \"layout\": \"产品式界面示意图：左边是参数控制面板，右边是实时预览，底部有复制按钮回到 Claude Code。\",\n      \"status\": \"completed\",\n      \"message\": \"文档不只能被阅读，还能用滑块、旋钮、按钮帮助你调整结果。\",\n      \"imageUrl\": \"https://cdn.drillso.com/generated/drill/zfs9j3z82e6948o3d46fq1a0-769b9c519c3c88d714c3f6822b7a651c.png\",\n      \"storageKey\": \"generated/drill/zfs9j3z82e6948o3d46fq1a0-769b9c519c3c88d714c3f6822b7a651c.png\",\n      \"imagePrompt\": \"Create exactly one complete presentation slide image.\\n\\nUse the following NotebookLM / Kael style prompt as the dominant art direction. Follow it closely.\\n\\nSTYLE TEMPLATE START\\nOverall style name: Neo-Retro Dev Deck / Pixel-Infographic Editorial.\\n\\nCore visual identity:\\n- Retro-futuristic, developer-centric, editorial infographic style.\\n- Feels like 90s computer manuals mixed with modern AI dev tools marketing.\\n- Pixel art meets startup slide deck.\\n- Mood: confident, playful, opinionated, slightly rebellious.\\n- Builders explaining the future, not selling fluff.\\n\\nCanvas and background:\\n- Use a light cream or off-white grid paper background.\\n- Add subtle square grid lines like an engineering notebook.\\n- Slides should feel like annotated engineering notes, not corporate PPTs.\\n\\nTypography:\\n- Primary headline: bold, heavy geometric sans serif, black text, slightly condensed.\\n- Headlines may mix the requested language and English.\\n- English sub-labels sit under requested-language titles in small clean type.\\n- Use huge bold headline blocks, medium subtitles, and small explanatory captions below icons or boxes.\\n\\nStrict color palette:\\n- Hot pink for agent, brain, intelligence concepts.\\n- Bright yellow for editor, code, and tools.\\n- Cyan or light blue for browser, web, and execution.\\n- Black for text and borders.\\n- White or cream for background.\\n- Each section should have one dominant color block.\\n\\nLayout language:\\n- Stacked modular blocks.\\n- Rectangles with thick black borders.\\n- Slight intentional overlaps and collage-like assembly.\\n- Horizontal section header bars.\\n- Card structures for steps, evolution, layers.\\n- Controlled imperfection: assembled, not perfectly sterile.\\n\\nIconography and graphics:\\n- Pixel-art style icons: rocket, robot, agent, gear, code brackets, browser window, chat bubbles.\\n- Icons should look low-resolution, 8-bit or 16-bit inspired, flat colors, black outline.\\n- Decorative elements: small gears, arrows, chevrons, pixel sparks, motion lines.\\n\\nContent patterns:\\n- System architecture slides: stacked layers, each with one color, one icon, one bold title, one short line.\\n- Evolution slides: left-to-right progression, each step in its own box; final step is larger and more colorful.\\n- Manifesto slides: one huge headline in a boxed frame, minimal text, playful icons around it.\\n\\nTone:\\n- Short, declarative, slightly opinionated.\\n- Good: Agents execute tasks autonomously. Coding enters the agent era.\\n- Bad: Empowering users with cutting-edge solutions.\\n\\nAvoid gradients, realistic photos, soft shadows, corporate templates, and quiet minimalism.\\nGenerate cohesive multi-slide visuals with consistent grid background, color usage, icon style, and typography hierarchy.\\nSTYLE TEMPLATE END\\n\\nDeck title: HTML：AI 智能体输出的新画布\\nDeck summary: 这套短演示面向使用 Claude Code 或类似 AI 智能体的开发者、产品和技术团队，围绕“为什么 HTML 正在比 Markdown 更适合作为复杂 AI 输出格式”展开：从信息密度、可读性、分享、交互、数据摄取到实际使用场景。\\nDeck format: presenter_slides\\nChosen style: Neo-Retro Dev Deck / Pixel-Infographic Editorial\\n\\nSlide 6: HTML 可以双向互动\\nMain message: 文档不只能被阅读，还能用滑块、旋钮、按钮帮助你调整结果。\\n\\nVisible text must be exactly these lines, with no extra words:\\n滑块\\n旋钮\\n参数微调\\n一键复制回 Claude Code\\n\\nLayout:\\n产品式界面示意图：左边是参数控制面板，右边是实时预览，底部有复制按钮回到 Claude Code。\\n\\nVisual style:\\n复古交互式控制台，带像素滑块、拨盘、预览窗口和命令行回流箭头。\\n\\nAdditional image direction:\\n设计一张交互文档幻灯片：一个 HTML playground 界面占据画面中央，左侧有滑块、旋钮和选项开关，右侧是动画或算法结果预览，底部有醒目的按钮文字 一键复制为提示词。按钮旁有箭头回流到 Claude Code 终端窗口。\\n\\nRequirements:\\n- Canvas: 1536x864 landscape presentation slide.\\n- Generate one slide only, not a contact sheet and not multiple slide candidates.\\n- Make it presentation-ready, high-sensibility, and coherent with the chosen style template.\\n- Make it visually finished, not a sparse wireframe or placeholder diagram.\\n- Use the strongest signature elements of the style template: palette, typography, composition language, icon/illustration treatment, and editorial rhythm.\\n- Keep all visible text readable at presentation distance.\\n- Use low text density, strong hierarchy, and source-grounded diagrams, editorial composition, or template-specific visuals.\\n- Do not add markdown symbols, fake logos, watermarks, signatures, UI browser chrome, or extra captions.\\n- Match the source/user instruction language for all visible slide text and speaker-facing copy.\",\n      \"slideNumber\": 6,\n      \"visibleText\": [\n        \"滑块\",\n        \"旋钮\",\n        \"参数微调\",\n        \"一键复制回 Claude Code\"\n      ],\n      \"visualStyle\": \"复古交互式控制台，带像素滑块、拨盘、预览窗口和命令行回流箭头。\",\n      \"speakerNotes\": \"双向交互是 HTML 相比 Markdown 的关键优势。原文提到，可以让 Claude 在页面上加滑块或旋钮，用来调整设计效果；也可以提供选项来微调算法参数，并观察结果变化。甚至可以加一个按钮，把微调后的完美参数一键复制为提示词，再粘贴回 Claude Code 继续工作。\",\n      \"revisedPrompt\": \"Create exactly one complete presentation slide image, 1536x864 landscape, in the Neo-Retro Dev Deck / Pixel-Infographic Editorial style. Light cream off-white engineering notebook grid background with subtle square grid lines. Retro-futuristic, developer-centric, playful, opinionated, slightly rebellious. Thick black borders, stacked modular blocks, slight overlaps, editorial composition.\\n\\nSlide topic: HTML 可以双向互动. Show a polished HTML playground interface centered on the slide: left side is a parameter control panel in bright yellow with pixel-art sliders, a dial/knob, toggle switches, and small control indicators; right side is a cyan/light-blue live preview window showing an animated algorithm/result visualization, like moving bars, nodes, or a responsive layout preview; bottom area has a bold hot-pink copy button that sends changes back to Claude Code, with a thick black arrow flow from the button toward a small retro terminal window labeled only by context, no extra words visible.\\n\\nUse strong signature elements: hot pink for agent/intelligence controls, bright yellow for editor/tools, cyan for browser/preview, black outlines and text, cream background. Add pixel-art icons, motion lines, chevrons, and small sparks. Make it look like a finished product UI mockup inside an editorial slide, not a wireframe.\\n\\nVisible text must be exactly these four lines and nothing else anywhere on the slide:\\n滑块\\n旋钮\\n参数微调\\n一键复制回 Claude Code\\n\\nPlace “滑块” near the slider control, “旋钮” near the dial, “参数微调” as a small section label above or within the control panel, and “一键复制回 Claude Code” on the large bottom button. No other words, labels, numbers, or captions. No markdown, no logos, no watermarks, no browser chrome. Keep text large, crisp, and readable at presentation distance. Cohesive, presentation-ready, high sensibility, visually finished.\",\n      \"storageFileId\": \"zfs9j3z82e6948o3d46fq1a0-769b9c519c3c88d714c3f6822b7a651c\"\n    },\n    {\n      \"size\": \"1536x864\",\n      \"model\": \"gpt-image-2\",\n      \"title\": \"Claude Code 让 HTML 吃进大上下文\",\n      \"layout\": \"数据摄取架构图：多源上下文流入 Claude Code，再输出 HTML 报告页面。\",\n      \"status\": \"completed\",\n      \"message\": \"HTML 的价值会随着 Claude Code 能读取更多上下文而放大。\",\n      \"imageUrl\": \"https://cdn.drillso.com/generated/drill/ja8mrrewgnt58dxtonguo9bt-14c485624fc4c17a213467f9be81e1f6.png\",\n      \"storageKey\": \"generated/drill/ja8mrrewgnt58dxtonguo9bt-14c485624fc4c17a213467f9be81e1f6.png\",\n      \"imagePrompt\": \"Create exactly one complete presentation slide image.\\n\\nUse the following NotebookLM / Kael style prompt as the dominant art direction. Follow it closely.\\n\\nSTYLE TEMPLATE START\\nOverall style name: Neo-Retro Dev Deck / Pixel-Infographic Editorial.\\n\\nCore visual identity:\\n- Retro-futuristic, developer-centric, editorial infographic style.\\n- Feels like 90s computer manuals mixed with modern AI dev tools marketing.\\n- Pixel art meets startup slide deck.\\n- Mood: confident, playful, opinionated, slightly rebellious.\\n- Builders explaining the future, not selling fluff.\\n\\nCanvas and background:\\n- Use a light cream or off-white grid paper background.\\n- Add subtle square grid lines like an engineering notebook.\\n- Slides should feel like annotated engineering notes, not corporate PPTs.\\n\\nTypography:\\n- Primary headline: bold, heavy geometric sans serif, black text, slightly condensed.\\n- Headlines may mix the requested language and English.\\n- English sub-labels sit under requested-language titles in small clean type.\\n- Use huge bold headline blocks, medium subtitles, and small explanatory captions below icons or boxes.\\n\\nStrict color palette:\\n- Hot pink for agent, brain, intelligence concepts.\\n- Bright yellow for editor, code, and tools.\\n- Cyan or light blue for browser, web, and execution.\\n- Black for text and borders.\\n- White or cream for background.\\n- Each section should have one dominant color block.\\n\\nLayout language:\\n- Stacked modular blocks.\\n- Rectangles with thick black borders.\\n- Slight intentional overlaps and collage-like assembly.\\n- Horizontal section header bars.\\n- Card structures for steps, evolution, layers.\\n- Controlled imperfection: assembled, not perfectly sterile.\\n\\nIconography and graphics:\\n- Pixel-art style icons: rocket, robot, agent, gear, code brackets, browser window, chat bubbles.\\n- Icons should look low-resolution, 8-bit or 16-bit inspired, flat colors, black outline.\\n- Decorative elements: small gears, arrows, chevrons, pixel sparks, motion lines.\\n\\nContent patterns:\\n- System architecture slides: stacked layers, each with one color, one icon, one bold title, one short line.\\n- Evolution slides: left-to-right progression, each step in its own box; final step is larger and more colorful.\\n- Manifesto slides: one huge headline in a boxed frame, minimal text, playful icons around it.\\n\\nTone:\\n- Short, declarative, slightly opinionated.\\n- Good: Agents execute tasks autonomously. Coding enters the agent era.\\n- Bad: Empowering users with cutting-edge solutions.\\n\\nAvoid gradients, realistic photos, soft shadows, corporate templates, and quiet minimalism.\\nGenerate cohesive multi-slide visuals with consistent grid background, color usage, icon style, and typography hierarchy.\\nSTYLE TEMPLATE END\\n\\nDeck title: HTML：AI 智能体输出的新画布\\nDeck summary: 这套短演示面向使用 Claude Code 或类似 AI 智能体的开发者、产品和技术团队，围绕“为什么 HTML 正在比 Markdown 更适合作为复杂 AI 输出格式”展开：从信息密度、可读性、分享、交互、数据摄取到实际使用场景。\\nDeck format: presenter_slides\\nChosen style: Neo-Retro Dev Deck / Pixel-Infographic Editorial\\n\\nSlide 7: Claude Code 让 HTML 吃进大上下文\\nMain message: HTML 的价值会随着 Claude Code 能读取更多上下文而放大。\\n\\nVisible text must be exactly these lines, with no extra words:\\n代码文件夹\\nSlack\\nLinear\\n浏览器\\nGit 历史\\n汇成 HTML 报告\\n\\nLayout:\\n数据摄取架构图：多源上下文流入 Claude Code，再输出 HTML 报告页面。\\n\\nVisual style:\\n开发者架构图，像旧式系统手册中的数据管线；节点带像素图标，线条清楚。\\n\\nAdditional image direction:\\n制作一张架构图幻灯片：左侧六个数据源节点分别是代码文件夹、Slack、Linear、浏览器、Git 历史、MCP；所有节点通过管线流入中央 Claude Code 引擎；右侧输出一个 HTML 报告页面，页面内有图表、分类卡片和摘要。整体像复古计算机系统图。\\n\\nRequirements:\\n- Canvas: 1536x864 landscape presentation slide.\\n- Generate one slide only, not a contact sheet and not multiple slide candidates.\\n- Make it presentation-ready, high-sensibility, and coherent with the chosen style template.\\n- Make it visually finished, not a sparse wireframe or placeholder diagram.\\n- Use the strongest signature elements of the style template: palette, typography, composition language, icon/illustration treatment, and editorial rhythm.\\n- Keep all visible text readable at presentation distance.\\n- Use low text density, strong hierarchy, and source-grounded diagrams, editorial composition, or template-specific visuals.\\n- Do not add markdown symbols, fake logos, watermarks, signatures, UI browser chrome, or extra captions.\\n- Match the source/user instruction language for all visible slide text and speaker-facing copy.\",\n      \"slideNumber\": 7,\n      \"visibleText\": [\n        \"代码文件夹\",\n        \"Slack\",\n        \"Linear\",\n        \"浏览器\",\n        \"Git 历史\",\n        \"汇成 HTML 报告\"\n      ],\n      \"visualStyle\": \"开发者架构图，像旧式系统手册中的数据管线；节点带像素图标，线条清楚。\",\n      \"speakerNotes\": \"作者解释了为什么要用 Claude Code 生成 HTML，而不是只用网页版 Claude 或 Claude Design。关键原因是 Claude Code 能摄取庞大的上下文。例如，作者让 Claude Code 自动遍历电脑里的代码文件夹，找出由它生成的 HTML 文件，分组归类，再生成一个新 HTML 页面，用图表展示每类文件的特征。原文还提到 Claude Code 可以通过 MCP 接入 Slack、Linear 等上下文，也能结合浏览器和 Git 历史记录。\",\n      \"revisedPrompt\": \"Create a single 16:9 presentation slide image, 1536x864, in the dominant style of Neo-Retro Dev Deck / Pixel-Infographic Editorial: light cream engineering notebook grid background, thick black borders, stacked modular blocks, retro-computing manual vibe, pixel-art icons, hot pink / bright yellow / cyan palette, confident editorial composition, slightly rebellious startup-dev aesthetic.\\n\\nSlide topic: data ingestion architecture showing many context sources flowing into a Claude Code engine and then into an HTML report page.\\n\\nComposition:\\n- Left side: six source nodes arranged vertically or in a staggered cluster, each in a thick black bordered box with one dominant color block and a pixel icon. The only visible text on the slide must be exactly these Chinese lines, one per source/output box, and no other words anywhere:\\n代码文件夹\\nSlack\\nLinear\\n浏览器\\nGit 历史\\n汇成 HTML 报告\\n- These text lines should be large, bold, highly readable, and each placed next to or inside the corresponding node boxes.\\n- The source nodes visually represent: code folder, Slack chat, Linear task card, browser window, Git history timeline, and MCP as an unlabeled small pixel chip/connector icon if needed, but do not add any extra visible label text.\\n- All source pipes/flow lines should move from the left nodes into a central engine.\\n\\nCenter:\\n- A large central retro machine / engine / Claude Code core, drawn like an old system manual diagram, with pixel-art circuitry, gears, and a bold hot-pink or yellow core. No text label on the engine.\\n- Multiple clear pipes / arrows converge into this engine from the left. Use black lines with cyan and pink accents.\\n\\nRight side:\\n- Output a finished HTML report page shown as a large framed browser-like page, but without browser chrome or any text labels.\\n- Inside the report page, show a polished editorial layout made of abstract charts, category cards, summary blocks, tiny graph bars, and data chips, all with black outlines and bright accent colors. It should feel like a real report page, visually rich, but use no extra readable text.\\n\\nOverall style:\\n- Looks like a retro computer system diagram from an old technical manual, upgraded with modern AI developer deck energy.\\n- Clear pipeline, modular blocks, slight overlaps, thick black outlines, crisp pixel-art icons, strong hierarchy, low text density, cohesive and presentation-ready.\\n- No gradients, no photorealism, no soft shadows, no extra captions, no watermark, no logo, no UI chrome, no markdown symbols.\\n- Keep the slide clean but visually full, with strong editorial rhythm and obvious left-to-right flow from inputs to engine to output report.\\n- Ensure the only visible text is exactly the six lines listed above and nothing else.\",\n      \"storageFileId\": \"ja8mrrewgnt58dxtonguo9bt-14c485624fc4c17a213467f9be81e1f6\"\n    },\n    {\n      \"size\": \"1536x864\",\n      \"model\": \"gpt-image-2\",\n      \"title\": \"从最简单的提示词开始\",\n      \"layout\": \"收束页。中间是一条最短提示词，周围浮现四类使用场景：需求计划、代码审查、设计原型、报告学习。\",\n      \"status\": \"completed\",\n      \"message\": \"不需要复杂设置，只要明确这个 HTML 制品要做什么。\",\n      \"imageUrl\": \"https://cdn.drillso.com/generated/drill/l51egrv6udsur0l6d1v4e54m-4fe674822c333cd24d4f75a03a6bbb4e.png\",\n      \"storageKey\": \"generated/drill/l51egrv6udsur0l6d1v4e54m-4fe674822c333cd24d4f75a03a6bbb4e.png\",\n      \"imagePrompt\": \"Create exactly one complete presentation slide image.\\n\\nUse the following NotebookLM / Kael style prompt as the dominant art direction. Follow it closely.\\n\\nSTYLE TEMPLATE START\\nOverall style name: Neo-Retro Dev Deck / Pixel-Infographic Editorial.\\n\\nCore visual identity:\\n- Retro-futuristic, developer-centric, editorial infographic style.\\n- Feels like 90s computer manuals mixed with modern AI dev tools marketing.\\n- Pixel art meets startup slide deck.\\n- Mood: confident, playful, opinionated, slightly rebellious.\\n- Builders explaining the future, not selling fluff.\\n\\nCanvas and background:\\n- Use a light cream or off-white grid paper background.\\n- Add subtle square grid lines like an engineering notebook.\\n- Slides should feel like annotated engineering notes, not corporate PPTs.\\n\\nTypography:\\n- Primary headline: bold, heavy geometric sans serif, black text, slightly condensed.\\n- Headlines may mix the requested language and English.\\n- English sub-labels sit under requested-language titles in small clean type.\\n- Use huge bold headline blocks, medium subtitles, and small explanatory captions below icons or boxes.\\n\\nStrict color palette:\\n- Hot pink for agent, brain, intelligence concepts.\\n- Bright yellow for editor, code, and tools.\\n- Cyan or light blue for browser, web, and execution.\\n- Black for text and borders.\\n- White or cream for background.\\n- Each section should have one dominant color block.\\n\\nLayout language:\\n- Stacked modular blocks.\\n- Rectangles with thick black borders.\\n- Slight intentional overlaps and collage-like assembly.\\n- Horizontal section header bars.\\n- Card structures for steps, evolution, layers.\\n- Controlled imperfection: assembled, not perfectly sterile.\\n\\nIconography and graphics:\\n- Pixel-art style icons: rocket, robot, agent, gear, code brackets, browser window, chat bubbles.\\n- Icons should look low-resolution, 8-bit or 16-bit inspired, flat colors, black outline.\\n- Decorative elements: small gears, arrows, chevrons, pixel sparks, motion lines.\\n\\nContent patterns:\\n- System architecture slides: stacked layers, each with one color, one icon, one bold title, one short line.\\n- Evolution slides: left-to-right progression, each step in its own box; final step is larger and more colorful.\\n- Manifesto slides: one huge headline in a boxed frame, minimal text, playful icons around it.\\n\\nTone:\\n- Short, declarative, slightly opinionated.\\n- Good: Agents execute tasks autonomously. Coding enters the agent era.\\n- Bad: Empowering users with cutting-edge solutions.\\n\\nAvoid gradients, realistic photos, soft shadows, corporate templates, and quiet minimalism.\\nGenerate cohesive multi-slide visuals with consistent grid background, color usage, icon style, and typography hierarchy.\\nSTYLE TEMPLATE END\\n\\nDeck title: HTML：AI 智能体输出的新画布\\nDeck summary: 这套短演示面向使用 Claude Code 或类似 AI 智能体的开发者、产品和技术团队，围绕“为什么 HTML 正在比 Markdown 更适合作为复杂 AI 输出格式”展开：从信息密度、可读性、分享、交互、数据摄取到实际使用场景。\\nDeck format: presenter_slides\\nChosen style: Neo-Retro Dev Deck / Pixel-Infographic Editorial\\n\\nSlide 8: 从最简单的提示词开始\\nMain message: 不需要复杂设置，只要明确这个 HTML 制品要做什么。\\n\\nVisible text must be exactly these lines, with no extra words:\\n给我做一个 HTML 文件\\n生成一个 HTML 制品\\n先从简单提示词开始\\n\\nLayout:\\n收束页。中间是一条最短提示词，周围浮现四类使用场景：需求计划、代码审查、设计原型、报告学习。\\n\\nVisual style:\\n像素风结尾海报，中心是命令行输入框，周围是四个应用场景小窗口。\\n\\nAdditional image direction:\\n设计一张收束幻灯片：中央是一条大号命令行输入框，文字是 给我做一个 HTML 文件。四周分布四个小窗口，分别表现需求与计划、代码审查、设计原型、报告与学习。每个窗口只用简短中文标签和小图标，不要拥挤，形成从一个简单提示词扩展到多个工作流的感觉。\\n\\nRequirements:\\n- Canvas: 1536x864 landscape presentation slide.\\n- Generate one slide only, not a contact sheet and not multiple slide candidates.\\n- Make it presentation-ready, high-sensibility, and coherent with the chosen style template.\\n- Make it visually finished, not a sparse wireframe or placeholder diagram.\\n- Use the strongest signature elements of the style template: palette, typography, composition language, icon/illustration treatment, and editorial rhythm.\\n- Keep all visible text readable at presentation distance.\\n- Use low text density, strong hierarchy, and source-grounded diagrams, editorial composition, or template-specific visuals.\\n- Do not add markdown symbols, fake logos, watermarks, signatures, UI browser chrome, or extra captions.\\n- Match the source/user instruction language for all visible slide text and speaker-facing copy.\",\n      \"slideNumber\": 8,\n      \"visibleText\": [\n        \"给我做一个 HTML 文件\",\n        \"生成一个 HTML 制品\",\n        \"先从简单提示词开始\"\n      ],\n      \"visualStyle\": \"像素风结尾海报，中心是命令行输入框，周围是四个应用场景小窗口。\",\n      \"speakerNotes\": \"原文最后特别强调，不必把这件事做成复杂的 /html 技能指令。你可以直接像平时聊天一样告诉 Claude：给我做一个 HTML 文件，或者生成一个 HTML 制品。真正的诀窍是清楚自己希望这个制品做什么，以及你会如何使用它。可以先从简单提示词开始，再逐渐探索适合自己场景的模板。\",\n      \"revisedPrompt\": \"Create exactly one complete presentation slide image, landscape 1536x864, as a finished Neo-Retro Dev Deck / Pixel-Infographic Editorial slide. Overall feel: retro-futuristic developer-centric editorial infographic, 90s computer manual mixed with modern AI dev tools marketing, pixel art meets startup slide deck, confident playful opinionated slightly rebellious.\\n\\nBackground: light cream/off-white engineering notebook paper with subtle square grid lines across the entire slide. Thick black borders, stacked modular blocks, slight intentional overlaps, collage-like assembly, controlled imperfection. No gradients, no realistic photos, no soft shadows, no corporate template feel.\\n\\nTitle/content direction: 收束页. Centerpiece is a large command-line input box with thick black border, bright yellow fill or cream with yellow highlight, slightly pixelated terminal look. Inside the main input box, the only central large text is exactly: 给我做一个 HTML 文件. Make it bold, heavy geometric sans serif, black, slightly condensed. Nearby small sublabel in English is allowed but keep text density low.\\n\\nAround the center, place four small window cards evenly distributed with plenty of breathing room, each a pixel-art mini window with thick black border and one dominant accent color. Each window has a short Chinese label and a tiny icon only, representing:\\n1) 需求与计划 — icon: checklist / clipboard / gears\\n2) 代码审查 — icon: code brackets / magnifier / bug\\n3) 设计原型 — icon: layout wireframe / pencil / cursor\\n4) 报告与学习 — icon: book / chart / lightbulb\\nEach window should feel like a distinct workflow orbiting the main prompt. Use hot pink for agent/brain/intelligence concepts, bright yellow for editor/code/tools, cyan/light blue for browser/web/execution, black text and borders, cream background. Decorative pixel sparks, arrows, motion lines, tiny gears. Strong editorial rhythm, not crowded.\\n\\nVisible text must be exactly these lines and no extra words anywhere else:\\n给我做一个 HTML 文件\\n生成一个 HTML 制品\\n先从简单提示词开始\\n\\nUse those two additional lines as smaller supporting text blocks, placed cleanly in the composition. Keep all text readable at presentation distance. Ensure no extra captions or labels beyond these exact lines. No fake logos, no watermarks, no browser chrome, no markdown symbols.\\n\\nTypography hierarchy: huge bold headline block for the main prompt, medium subtitle blocks for the two supporting lines, small clean type in window cards if needed but avoid adding any text beyond the allowed lines. Pixel-art style icons, flat colors, black outline, 8-bit/16-bit inspired. Presentation-ready and cohesive, one single slide only.\",\n      \"storageFileId\": \"l51egrv6udsur0l6d1v4e54m-4fe674822c333cd24d4f75a03a6bbb4e\"\n    }\n  ],\n  \"styleId\": \"neo_retro_dev\",\n  \"summary\": \"这套短演示面向使用 Claude Code 或类似 AI 智能体的开发者、产品和技术团队，围绕“为什么 HTML 正在比 Markdown 更适合作为复杂 AI 输出格式”展开：从信息密度、可读性、分享、交互、数据摄取到实际使用场景。\",\n  \"audience\": \"使用 Claude Code、AI Agent 或 AI 辅助开发工作流的开发者、产品经理、技术负责人和团队协作者\",\n  \"imageSize\": \"1536x864\",\n  \"imageModel\": \"gpt-image-2\",\n  \"plannerModel\": \"gpt-5.5\"\n}","markdown":"# HTML 难以置信的奇效\n\n{\n  \"style\": \"Neo-Retro Dev Deck / Pixel-Infographic Editorial\",\n  \"title\": \"HTML：AI 智能体输出的新画布\",\n  \"format\": \"presenter_slides\",\n  \"slides\": [\n    {\n      \"size\": \"1536x864\",\n      \"model\": \"gpt-image-2\",\n      \"title\": \"Markdown 开始不够用了\",\n      \"layout\": \"封面式单句大标题，左侧像终端窗口一样显示 Markdown 文件堆叠，右侧出现一个更大的 HTML 画布预览。\",\n      \"status\": \"completed\",\n      \"message\": \"当 AI 智能体输出越来越复杂，Markdown 的优势正在变成限制。\",\n      \"imageUrl\": \"https://cdn.drillso.com/generated/drill/chkqq20lhm498yajlybnv244-9a04c1bad336d900c755338cf43287a7.png\",\n      \"storageKey\": \"generated/drill/chkqq20lhm498yajlybnv244-9a04c1bad336d900c755338cf43287a7.png\",\n      \"imagePrompt\": \"Create exactly one complete presentation slide image.\\n\\nUse the following NotebookLM / Kael style prompt as the dominant art direction. Follow it closely.\\n\\nSTYLE TEMPLATE START\\nOverall style name: Neo-Retro Dev Deck / Pixel-Infographic Editorial.\\n\\nCore visual identity:\\n- Retro-futuristic, developer-centric, editorial infographic style.\\n- Feels like 90s computer manuals mixed with modern AI dev tools marketing.\\n- Pixel art meets startup slide deck.\\n- Mood: confident, playful, opinionated, slightly rebellious.\\n- Builders explaining the future, not selling fluff.\\n\\nCanvas and background:\\n- Use a light cream or off-white grid paper background.\\n- Add subtle square grid lines like an engineering notebook.\\n- Slides should feel like annotated engineering notes, not corporate PPTs.\\n\\nTypography:\\n- Primary headline: bold, heavy geometric sans serif, black text, slightly condensed.\\n- Headlines may mix the requested language and English.\\n- English sub-labels sit under requested-language titles in small clean type.\\n- Use huge bold headline blocks, medium subtitles, and small explanatory captions below icons or boxes.\\n\\nStrict color palette:\\n- Hot pink for agent, brain, intelligence concepts.\\n- Bright yellow for editor, code, and tools.\\n- Cyan or light blue for browser, web, and execution.\\n- Black for text and borders.\\n- White or cream for background.\\n- Each section should have one dominant color block.\\n\\nLayout language:\\n- Stacked modular blocks.\\n- Rectangles with thick black borders.\\n- Slight intentional overlaps and collage-like assembly.\\n- Horizontal section header bars.\\n- Card structures for steps, evolution, layers.\\n- Controlled imperfection: assembled, not perfectly sterile.\\n\\nIconography and graphics:\\n- Pixel-art style icons: rocket, robot, agent, gear, code brackets, browser window, chat bubbles.\\n- Icons should look low-resolution, 8-bit or 16-bit inspired, flat colors, black outline.\\n- Decorative elements: small gears, arrows, chevrons, pixel sparks, motion lines.\\n\\nContent patterns:\\n- System architecture slides: stacked layers, each with one color, one icon, one bold title, one short line.\\n- Evolution slides: left-to-right progression, each step in its own box; final step is larger and more colorful.\\n- Manifesto slides: one huge headline in a boxed frame, minimal text, playful icons around it.\\n\\nTone:\\n- Short, declarative, slightly opinionated.\\n- Good: Agents execute tasks autonomously. Coding enters the agent era.\\n- Bad: Empowering users with cutting-edge solutions.\\n\\nAvoid gradients, realistic photos, soft shadows, corporate templates, and quiet minimalism.\\nGenerate cohesive multi-slide visuals with consistent grid background, color usage, icon style, and typography hierarchy.\\nSTYLE TEMPLATE END\\n\\nDeck title: HTML：AI 智能体输出的新画布\\nDeck summary: 这套短演示面向使用 Claude Code 或类似 AI 智能体的开发者、产品和技术团队，围绕“为什么 HTML 正在比 Markdown 更适合作为复杂 AI 输出格式”展开：从信息密度、可读性、分享、交互、数据摄取到实际使用场景。\\nDeck format: presenter_slides\\nChosen style: Neo-Retro Dev Deck / Pixel-Infographic Editorial\\n\\nSlide 1: Markdown 开始不够用了\\nMain message: 当 AI 智能体输出越来越复杂，Markdown 的优势正在变成限制。\\n\\nVisible text must be exactly these lines, with no extra words:\\nMarkdown 很方便\\n但复杂工作需要更强的画布\\nHTML 开始接管\\n\\nLayout:\\n封面式单句大标题，左侧像终端窗口一样显示 Markdown 文件堆叠，右侧出现一个更大的 HTML 画布预览。\\n\\nVisual style:\\n复古开发者杂志封面感，像 90 年代电脑手册与现代 AI 工具宣传页混合；网格纸背景、像素化小图标、终端窗口、HTML 标签符号作为视觉线索。\\n\\nAdditional image direction:\\n制作一张封面幻灯片：浅奶油色工程网格背景，左侧是几张拥挤的 Markdown 文档卡片，上面有 ASCII 图表和长文本行；右侧是一块明亮的 HTML 画布，包含彩色图表、卡片和小型交互控件。标题大而清晰，构图偏编辑杂志封面，带像素风小箭头和代码标签装饰。\\n\\nRequirements:\\n- Canvas: 1536x864 landscape presentation slide.\\n- Generate one slide only, not a contact sheet and not multiple slide candidates.\\n- Make it presentation-ready, high-sensibility, and coherent with the chosen style template.\\n- Make it visually finished, not a sparse wireframe or placeholder diagram.\\n- Use the strongest signature elements of the style template: palette, typography, composition language, icon/illustration treatment, and editorial rhythm.\\n- Keep all visible text readable at presentation distance.\\n- Use low text density, strong hierarchy, and source-grounded diagrams, editorial composition, or template-specific visuals.\\n- Do not add markdown symbols, fake logos, watermarks, signatures, UI browser chrome, or extra captions.\\n- Match the source/user instruction language for all visible slide text and speaker-facing copy.\",\n      \"slideNumber\": 1,\n      \"visibleText\": [\n        \"Markdown 很方便\",\n        \"但复杂工作需要更强的画布\",\n        \"HTML 开始接管\"\n      ],\n      \"visualStyle\": \"复古开发者杂志封面感，像 90 年代电脑手册与现代 AI 工具宣传页混合；网格纸背景、像素化小图标、终端窗口、HTML 标签符号作为视觉线索。\",\n      \"speakerNotes\": \"原文的起点很清楚：Markdown 已经成为 AI 智能体与人沟通时最常用的格式，因为它简单、便携、具备一定富文本能力，也容易人工修改。但作者发现，随着 AI 智能体能力增强，动辄上百行的 Markdown 文件很难让人有耐心读下去。更关键的是，作者现在越来越少亲自编辑这些文件，而是让 Claude 通过提示词修改，因此 Markdown 最核心的人工可编辑优势变弱了。\",\n      \"revisedPrompt\": \"Create a single 16:9 presentation slide image (1536x864) in the Neo-Retro Dev Deck / Pixel-Infographic Editorial style. Landscape cover slide for a developer presentation.\\n\\nOverall composition: editorial magazine cover with engineering notebook grid paper background in light cream/off-white, subtle square grid lines. Strong retro-futuristic, developer-centric, playful but polished. Thick black borders, modular collage blocks, slight overlaps, pixel-art accents. No gradients, no photos, no soft shadows, no corporate template feel.\\n\\nVisible text must be EXACTLY these three lines and nothing else anywhere on the slide:\\nMarkdown 很方便\\n但复杂工作需要更强的画布\\nHTML 开始接管\\nUse large bold geometric sans serif Chinese typography, black, high contrast, presentation readable. Place as a dominant headline block centered slightly left or center-left, with strong hierarchy and plenty of breathing room. Do not add any extra captions, labels, logos, watermarks, browser chrome, or other text.\\n\\nLayout: left side resembles a terminal-like stack of cramped Markdown document cards, each card with dense long text lines and ASCII chart-like strokes, but keep any text on those cards illegible / decorative enough to avoid extra readable words. Right side: a larger bright HTML canvas preview, with colorful chart blocks, cards, and small interactive control shapes, plus visible HTML tag symbols as decorative iconography (<> , braces, brackets), rendered in pixel-art style. The HTML side should feel more spacious, more structured, and more powerful than the Markdown stack.\\n\\nColor palette: cream background, black borders/text, hot pink for intelligence/agent accents, bright yellow for editor/code/tool accents, cyan/light blue for browser/web/execution accents. Each major section should have one dominant color block. Use pixel-art icons such as small arrows, code brackets, spark lines, gears, and a tiny robot/agent symbol. Controlled imperfection, assembled collage feel.\\n\\nStyle cues: 90s computer manual mixed with modern AI dev tools marketing, notebook grid paper, bold headline blocks, modular rectangles, editorial rhythm, pixel-infographic treatment. The slide should feel finished, polished, and visually dense but not cluttered. Ensure the three required Chinese lines are crisp and readable, and avoid any additional readable text.\",\n      \"storageFileId\": \"chkqq20lhm498yajlybnv244-9a04c1bad336d900c755338cf43287a7\"\n    },\n    {\n      \"size\": \"1536x864\",\n      \"model\": \"gpt-image-2\",\n      \"title\": \"核心转变：从文本文件到视觉制品\",\n      \"layout\": \"左右对比图。左边是单色 Markdown 文档，右边是模块化 HTML 页面。中间用箭头表示工作流迁移。\",\n      \"status\": \"completed\",\n      \"message\": \"HTML 不只是另一种格式，而是更适合承载复杂 AI 输出的视觉制品。\",\n      \"imageUrl\": \"https://cdn.drillso.com/generated/drill/zme5p3ldhhj31t1zetnxnbqw-f299989cc39de04253f0b0ee912816db.png\",\n      \"storageKey\": \"generated/drill/zme5p3ldhhj31t1zetnxnbqw-f299989cc39de04253f0b0ee912816db.png\",\n      \"imagePrompt\": \"Create exactly one complete presentation slide image.\\n\\nUse the following NotebookLM / Kael style prompt as the dominant art direction. Follow it closely.\\n\\nSTYLE TEMPLATE START\\nOverall style name: Neo-Retro Dev Deck / Pixel-Infographic Editorial.\\n\\nCore visual identity:\\n- Retro-futuristic, developer-centric, editorial infographic style.\\n- Feels like 90s computer manuals mixed with modern AI dev tools marketing.\\n- Pixel art meets startup slide deck.\\n- Mood: confident, playful, opinionated, slightly rebellious.\\n- Builders explaining the future, not selling fluff.\\n\\nCanvas and background:\\n- Use a light cream or off-white grid paper background.\\n- Add subtle square grid lines like an engineering notebook.\\n- Slides should feel like annotated engineering notes, not corporate PPTs.\\n\\nTypography:\\n- Primary headline: bold, heavy geometric sans serif, black text, slightly condensed.\\n- Headlines may mix the requested language and English.\\n- English sub-labels sit under requested-language titles in small clean type.\\n- Use huge bold headline blocks, medium subtitles, and small explanatory captions below icons or boxes.\\n\\nStrict color palette:\\n- Hot pink for agent, brain, intelligence concepts.\\n- Bright yellow for editor, code, and tools.\\n- Cyan or light blue for browser, web, and execution.\\n- Black for text and borders.\\n- White or cream for background.\\n- Each section should have one dominant color block.\\n\\nLayout language:\\n- Stacked modular blocks.\\n- Rectangles with thick black borders.\\n- Slight intentional overlaps and collage-like assembly.\\n- Horizontal section header bars.\\n- Card structures for steps, evolution, layers.\\n- Controlled imperfection: assembled, not perfectly sterile.\\n\\nIconography and graphics:\\n- Pixel-art style icons: rocket, robot, agent, gear, code brackets, browser window, chat bubbles.\\n- Icons should look low-resolution, 8-bit or 16-bit inspired, flat colors, black outline.\\n- Decorative elements: small gears, arrows, chevrons, pixel sparks, motion lines.\\n\\nContent patterns:\\n- System architecture slides: stacked layers, each with one color, one icon, one bold title, one short line.\\n- Evolution slides: left-to-right progression, each step in its own box; final step is larger and more colorful.\\n- Manifesto slides: one huge headline in a boxed frame, minimal text, playful icons around it.\\n\\nTone:\\n- Short, declarative, slightly opinionated.\\n- Good: Agents execute tasks autonomously. Coding enters the agent era.\\n- Bad: Empowering users with cutting-edge solutions.\\n\\nAvoid gradients, realistic photos, soft shadows, corporate templates, and quiet minimalism.\\nGenerate cohesive multi-slide visuals with consistent grid background, color usage, icon style, and typography hierarchy.\\nSTYLE TEMPLATE END\\n\\nDeck title: HTML：AI 智能体输出的新画布\\nDeck summary: 这套短演示面向使用 Claude Code 或类似 AI 智能体的开发者、产品和技术团队，围绕“为什么 HTML 正在比 Markdown 更适合作为复杂 AI 输出格式”展开：从信息密度、可读性、分享、交互、数据摄取到实际使用场景。\\nDeck format: presenter_slides\\nChosen style: Neo-Retro Dev Deck / Pixel-Infographic Editorial\\n\\nSlide 2: 核心转变：从文本文件到视觉制品\\nMain message: HTML 不只是另一种格式，而是更适合承载复杂 AI 输出的视觉制品。\\n\\nVisible text must be exactly these lines, with no extra words:\\nMarkdown\\n文本为主\\nHTML\\n结构、视觉、交互\\n\\nLayout:\\n左右对比图。左边是单色 Markdown 文档，右边是模块化 HTML 页面。中间用箭头表示工作流迁移。\\n\\nVisual style:\\n像素信息图风格，使用复古 UI 框、粗黑边、网格标尺和小标签，强调格式迁移。\\n\\nAdditional image direction:\\n设计一张左右对比幻灯片：左侧标题 Markdown，下方是单栏长文本、简单标题和 ASCII 图；右侧标题 HTML，下方是分区卡片、表格、SVG 图表、Tabs、按钮和图片占位。中间有一条像素风数据管道箭头，从文本文件流向视觉制品。\\n\\nRequirements:\\n- Canvas: 1536x864 landscape presentation slide.\\n- Generate one slide only, not a contact sheet and not multiple slide candidates.\\n- Make it presentation-ready, high-sensibility, and coherent with the chosen style template.\\n- Make it visually finished, not a sparse wireframe or placeholder diagram.\\n- Use the strongest signature elements of the style template: palette, typography, composition language, icon/illustration treatment, and editorial rhythm.\\n- Keep all visible text readable at presentation distance.\\n- Use low text density, strong hierarchy, and source-grounded diagrams, editorial composition, or template-specific visuals.\\n- Do not add markdown symbols, fake logos, watermarks, signatures, UI browser chrome, or extra captions.\\n- Match the source/user instruction language for all visible slide text and speaker-facing copy.\",\n      \"slideNumber\": 2,\n      \"visibleText\": [\n        \"Markdown\",\n        \"文本为主\",\n        \"HTML\",\n        \"结构、视觉、交互\"\n      ],\n      \"visualStyle\": \"像素信息图风格，使用复古 UI 框、粗黑边、网格标尺和小标签，强调格式迁移。\",\n      \"speakerNotes\": \"作者偏爱 HTML 的原因，不是因为 Markdown 完全不好，而是因为需求变了。AI 生成的内容越来越像需求文档、参考资料、头脑风暴结果、计划、审查说明和报告。这些内容往往不再需要人手工一行行编辑，而更需要被阅读、审查、分享和复用。HTML 可以把这些输出变成一个视觉制品，而不是一段长文本。\",\n      \"revisedPrompt\": \"A single complete presentation slide image, 1536x864 landscape, in Neo-Retro Dev Deck / Pixel-Infographic Editorial style. Light cream off-white grid paper background with subtle engineering notebook grid. Strong retro-futuristic developer editorial composition, thick black borders, modular collage layout, pixel-infographic treatment, controlled imperfections. No browser chrome, no watermark, no logos, no extra captions.\\n\\nSlide topic: contrasting Markdown text file vs HTML visual artifact. Layout: left and right comparison with a central pixel-data pipeline arrow moving from left to right.\\n\\nOnly visible readable text on the entire slide must be exactly these four lines, and nothing else readable:\\nMarkdown\\n文本为主\\nHTML\\n结构、视觉、交互\\n\\nPlace the text as large bold headline blocks with black heavy geometric sans serif. Left side: a monochrome Markdown document panel, single-column long text represented by dense black horizontal bars and a tiny minimalist code/document graphic, simple stacked paragraphs, and a small abstract ASCII-like block diagram rendered only as shapes/bars (not readable letters), all contained in a thick black framed card. Right side: a vibrant HTML page panel with modular sections represented by colorful boxes: a tab strip made of colored tabs without text, a table grid made of cells, an SVG chart with line and bars, button-like rounded rectangles without labels, and an image placeholder tile with pixel-art framing. Use dominant cyan/light blue for the HTML side, and muted grayscale for the Markdown side, with hot pink and bright yellow accents on the right for agents/tools/editor energy. Center: a retro pixel pipeline arrow, chunky and directional, with motion lines and small spark pixels, transitioning from text file to visual artifact.\\n\\nStrong signature elements: thick black outlines, stacked modular blocks, horizontal header bars, pixel-art icons (document, browser window, code brackets, small gear) but no text labels on icons. Editorial rhythm, playful rebellious confident tone. Keep the slide visually finished, dense enough, but maintain low text density. Avoid gradients, realistic photos, soft shadows, corporate template aesthetics. Ensure the four required text lines are readable at presentation distance and no other text appears anywhere on the slide. Use only those exact lines as readable typography.\\n\\nComposition: left 46%, center 10%, right 44%. The left panel should feel like a plain text file with one dominant tall document block and minimal structure. The right panel should feel like a polished HTML page with multiple clearly separated modules and stronger color. Use slight overlaps and collage-like assembly. Add small pixel sparks around the arrow. Make it look like a complete, high-sensibility keynote slide.\",\n      \"storageFileId\": \"zme5p3ldhhj31t1zetnxnbqw-f299989cc39de04253f0b0ee912816db\"\n    },\n    {\n      \"size\": \"1536x864\",\n      \"model\": \"gpt-image-2\",\n      \"title\": \"HTML 的信息密度更高\",\n      \"layout\": \"中心放一个 HTML 容器，周围用六个模块化小卡片环绕，像系统能力雷达图。\",\n      \"status\": \"completed\",\n      \"message\": \"HTML 能同时承载结构、数据、设计、图表、图片、代码与动态交互。\",\n      \"imageUrl\": \"https://cdn.drillso.com/generated/drill/ugz3e6b9ceovvd3dr3xsua16-04f8abbccba336ad6d79ae277a6a920d.png\",\n      \"storageKey\": \"generated/drill/ugz3e6b9ceovvd3dr3xsua16-04f8abbccba336ad6d79ae277a6a920d.png\",\n      \"imagePrompt\": \"Create exactly one complete presentation slide image.\\n\\nUse the following NotebookLM / Kael style prompt as the dominant art direction. Follow it closely.\\n\\nSTYLE TEMPLATE START\\nOverall style name: Neo-Retro Dev Deck / Pixel-Infographic Editorial.\\n\\nCore visual identity:\\n- Retro-futuristic, developer-centric, editorial infographic style.\\n- Feels like 90s computer manuals mixed with modern AI dev tools marketing.\\n- Pixel art meets startup slide deck.\\n- Mood: confident, playful, opinionated, slightly rebellious.\\n- Builders explaining the future, not selling fluff.\\n\\nCanvas and background:\\n- Use a light cream or off-white grid paper background.\\n- Add subtle square grid lines like an engineering notebook.\\n- Slides should feel like annotated engineering notes, not corporate PPTs.\\n\\nTypography:\\n- Primary headline: bold, heavy geometric sans serif, black text, slightly condensed.\\n- Headlines may mix the requested language and English.\\n- English sub-labels sit under requested-language titles in small clean type.\\n- Use huge bold headline blocks, medium subtitles, and small explanatory captions below icons or boxes.\\n\\nStrict color palette:\\n- Hot pink for agent, brain, intelligence concepts.\\n- Bright yellow for editor, code, and tools.\\n- Cyan or light blue for browser, web, and execution.\\n- Black for text and borders.\\n- White or cream for background.\\n- Each section should have one dominant color block.\\n\\nLayout language:\\n- Stacked modular blocks.\\n- Rectangles with thick black borders.\\n- Slight intentional overlaps and collage-like assembly.\\n- Horizontal section header bars.\\n- Card structures for steps, evolution, layers.\\n- Controlled imperfection: assembled, not perfectly sterile.\\n\\nIconography and graphics:\\n- Pixel-art style icons: rocket, robot, agent, gear, code brackets, browser window, chat bubbles.\\n- Icons should look low-resolution, 8-bit or 16-bit inspired, flat colors, black outline.\\n- Decorative elements: small gears, arrows, chevrons, pixel sparks, motion lines.\\n\\nContent patterns:\\n- System architecture slides: stacked layers, each with one color, one icon, one bold title, one short line.\\n- Evolution slides: left-to-right progression, each step in its own box; final step is larger and more colorful.\\n- Manifesto slides: one huge headline in a boxed frame, minimal text, playful icons around it.\\n\\nTone:\\n- Short, declarative, slightly opinionated.\\n- Good: Agents execute tasks autonomously. Coding enters the agent era.\\n- Bad: Empowering users with cutting-edge solutions.\\n\\nAvoid gradients, realistic photos, soft shadows, corporate templates, and quiet minimalism.\\nGenerate cohesive multi-slide visuals with consistent grid background, color usage, icon style, and typography hierarchy.\\nSTYLE TEMPLATE END\\n\\nDeck title: HTML：AI 智能体输出的新画布\\nDeck summary: 这套短演示面向使用 Claude Code 或类似 AI 智能体的开发者、产品和技术团队，围绕“为什么 HTML 正在比 Markdown 更适合作为复杂 AI 输出格式”展开：从信息密度、可读性、分享、交互、数据摄取到实际使用场景。\\nDeck format: presenter_slides\\nChosen style: Neo-Retro Dev Deck / Pixel-Infographic Editorial\\n\\nSlide 3: HTML 的信息密度更高\\nMain message: HTML 能同时承载结构、数据、设计、图表、图片、代码与动态交互。\\n\\nVisible text must be exactly these lines, with no extra words:\\n表格\\nCSS\\nSVG\\n代码片段\\n工作流图\\n交互控件\\n\\nLayout:\\n中心放一个 HTML 容器，周围用六个模块化小卡片环绕，像系统能力雷达图。\\n\\nVisual style:\\n开发者信息图，像复古软件说明书的功能矩阵；小图标使用像素风，线条清晰。\\n\\nAdditional image direction:\\n制作一张能力地图幻灯片：中心是一个写着 HTML 的代码容器，周围连接六个像素风模块卡片，分别表示表格、CSS、SVG、代码片段、工作流图和交互控件。每张卡片用简短中文标签和小图标表达，整体像工程蓝图上的功能雷达图。\\n\\nRequirements:\\n- Canvas: 1536x864 landscape presentation slide.\\n- Generate one slide only, not a contact sheet and not multiple slide candidates.\\n- Make it presentation-ready, high-sensibility, and coherent with the chosen style template.\\n- Make it visually finished, not a sparse wireframe or placeholder diagram.\\n- Use the strongest signature elements of the style template: palette, typography, composition language, icon/illustration treatment, and editorial rhythm.\\n- Keep all visible text readable at presentation distance.\\n- Use low text density, strong hierarchy, and source-grounded diagrams, editorial composition, or template-specific visuals.\\n- Do not add markdown symbols, fake logos, watermarks, signatures, UI browser chrome, or extra captions.\\n- Match the source/user instruction language for all visible slide text and speaker-facing copy.\",\n      \"slideNumber\": 3,\n      \"visibleText\": [\n        \"表格\",\n        \"CSS\",\n        \"SVG\",\n        \"代码片段\",\n        \"工作流图\",\n        \"交互控件\"\n      ],\n      \"visualStyle\": \"开发者信息图，像复古软件说明书的功能矩阵；小图标使用像素风，线条清晰。\",\n      \"speakerNotes\": \"原文列举了 HTML 的信息承载能力：表格可以展示数据列，CSS 可以表达设计细节，SVG 可以绘制清晰插图，script 标签可以嵌入代码片段，HTML、JavaScript 和 CSS 可以实现动态交互，SVG 和 HTML 可以绘制工作流图，画布和绝对定位可以展示空间分布数据，image 标签可以插入图片。作者甚至说，只要 Claude 能读懂的信息，几乎都能用 HTML 高效展现。\",\n      \"revisedPrompt\": \"Create exactly one complete presentation slide image, landscape 1536x864, Neo-Retro Dev Deck / Pixel-Infographic Editorial style. Light cream/off-white background with subtle engineering notebook grid lines. Retro-futuristic developer-centric editorial infographic feel, like a 90s computer manual mixed with modern AI dev tools marketing. Thick black borders, stacked modular blocks, controlled collage overlaps, pixel-art icons, black text, hot pink, bright yellow, cyan/light blue accents, no gradients, no shadows, no photos.\\n\\nSlide topic: HTML 的信息密度更高. Main message visually implied: HTML 能同时承载结构、数据、设计、图表、图片、代码与动态交互.\\n\\nComposition: a central large HTML code-container box in the middle, designed like a chunky code window / module with thick black border and hot pink + cyan accent blocks. Inside the center box, big bold text: HTML. Around it, connect six modular small cards in a radar/map layout, evenly distributed in a ring around center, each connected by black lines/arrows, like a system capability radar chart. Each card should have a distinct dominant color block and a small pixel-art icon. Use short Chinese labels only, exactly these six and no extra visible words anywhere: 表格, CSS, SVG, 代码片段, 工作流图, 交互控件. Make each label readable and prominent on its card.\\n\\nCard ideas: 表格 with pixel table/grid icon, CSS with style brush/slider icon, SVG with vector shape icon, 代码片段 with code bracket icon, 工作流图 with flow arrows/boxes icon, 交互控件 with button/toggle icon. Each card should feel like a functional capability module from a retro software manual, crisp and polished.\\n\\nTypography: bold heavy geometric sans serif for the central HTML title and the six Chinese labels, black text, slightly condensed. Minimal small technical markers only if they do not add extra readable words. Strong hierarchy, presentation-ready.\\n\\nOverall visual rhythm: engineered infographic, not corporate PPT, not minimal. Add small pixel sparks, chevrons, gear motifs, and blueprint-like annotation marks around the module network. Ensure the slide is finished, balanced, legible at presentation distance, cohesive, and contains exactly one slide only. No browser chrome, no watermark, no signatures, no extra captions, no markdown symbols, no English labels besides HTML if visible inside center box.\",\n      \"storageFileId\": \"ugz3e6b9ceovvd3dr3xsua16-04f8abbccba336ad6d79ae277a6a920d\"\n    },\n    {\n      \"size\": \"1536x864\",\n      \"model\": \"gpt-image-2\",\n      \"title\": \"可读性决定团队会不会看\",\n      \"layout\": \"上半部分是一条阅读路径图：长文迷宫变成清晰导航。下半部分显示桌面与手机两个设备上的同一 HTML 文档。\",\n      \"status\": \"completed\",\n      \"message\": \"当文档超过 100 行，HTML 的导航和视觉结构更容易让人读完。\",\n      \"imageUrl\": \"https://cdn.drillso.com/generated/drill/t7ygtzhh095osfp4813fkdxp-c33b2cacc67ec39ec5eccf21f26bb73e.png\",\n      \"storageKey\": \"generated/drill/t7ygtzhh095osfp4813fkdxp-c33b2cacc67ec39ec5eccf21f26bb73e.png\",\n      \"imagePrompt\": \"Create exactly one complete presentation slide image.\\n\\nUse the following NotebookLM / Kael style prompt as the dominant art direction. Follow it closely.\\n\\nSTYLE TEMPLATE START\\nOverall style name: Neo-Retro Dev Deck / Pixel-Infographic Editorial.\\n\\nCore visual identity:\\n- Retro-futuristic, developer-centric, editorial infographic style.\\n- Feels like 90s computer manuals mixed with modern AI dev tools marketing.\\n- Pixel art meets startup slide deck.\\n- Mood: confident, playful, opinionated, slightly rebellious.\\n- Builders explaining the future, not selling fluff.\\n\\nCanvas and background:\\n- Use a light cream or off-white grid paper background.\\n- Add subtle square grid lines like an engineering notebook.\\n- Slides should feel like annotated engineering notes, not corporate PPTs.\\n\\nTypography:\\n- Primary headline: bold, heavy geometric sans serif, black text, slightly condensed.\\n- Headlines may mix the requested language and English.\\n- English sub-labels sit under requested-language titles in small clean type.\\n- Use huge bold headline blocks, medium subtitles, and small explanatory captions below icons or boxes.\\n\\nStrict color palette:\\n- Hot pink for agent, brain, intelligence concepts.\\n- Bright yellow for editor, code, and tools.\\n- Cyan or light blue for browser, web, and execution.\\n- Black for text and borders.\\n- White or cream for background.\\n- Each section should have one dominant color block.\\n\\nLayout language:\\n- Stacked modular blocks.\\n- Rectangles with thick black borders.\\n- Slight intentional overlaps and collage-like assembly.\\n- Horizontal section header bars.\\n- Card structures for steps, evolution, layers.\\n- Controlled imperfection: assembled, not perfectly sterile.\\n\\nIconography and graphics:\\n- Pixel-art style icons: rocket, robot, agent, gear, code brackets, browser window, chat bubbles.\\n- Icons should look low-resolution, 8-bit or 16-bit inspired, flat colors, black outline.\\n- Decorative elements: small gears, arrows, chevrons, pixel sparks, motion lines.\\n\\nContent patterns:\\n- System architecture slides: stacked layers, each with one color, one icon, one bold title, one short line.\\n- Evolution slides: left-to-right progression, each step in its own box; final step is larger and more colorful.\\n- Manifesto slides: one huge headline in a boxed frame, minimal text, playful icons around it.\\n\\nTone:\\n- Short, declarative, slightly opinionated.\\n- Good: Agents execute tasks autonomously. Coding enters the agent era.\\n- Bad: Empowering users with cutting-edge solutions.\\n\\nAvoid gradients, realistic photos, soft shadows, corporate templates, and quiet minimalism.\\nGenerate cohesive multi-slide visuals with consistent grid background, color usage, icon style, and typography hierarchy.\\nSTYLE TEMPLATE END\\n\\nDeck title: HTML：AI 智能体输出的新画布\\nDeck summary: 这套短演示面向使用 Claude Code 或类似 AI 智能体的开发者、产品和技术团队，围绕“为什么 HTML 正在比 Markdown 更适合作为复杂 AI 输出格式”展开：从信息密度、可读性、分享、交互、数据摄取到实际使用场景。\\nDeck format: presenter_slides\\nChosen style: Neo-Retro Dev Deck / Pixel-Infographic Editorial\\n\\nSlide 4: 可读性决定团队会不会看\\nMain message: 当文档超过 100 行，HTML 的导航和视觉结构更容易让人读完。\\n\\nVisible text must be exactly these lines, with no extra words:\\n100 行 Markdown\\n很少有人读\\nTabs、插图、链接\\n更容易浏览\\n\\nLayout:\\n上半部分是一条阅读路径图：长文迷宫变成清晰导航。下半部分显示桌面与手机两个设备上的同一 HTML 文档。\\n\\nVisual style:\\n像素化用户旅程图，带终端迷宫、Tabs 导航条和响应式设备框。\\n\\nAdditional image direction:\\n设计一张可读性对比幻灯片：左上是一个由密密麻麻文本行组成的迷宫，标注 100 行 Markdown；右上是一条清晰的 Tabs 导航路径，配有插图和链接节点。底部展示一个桌面屏幕和一个手机屏幕，里面是同一份自适应 HTML 文档。\\n\\nRequirements:\\n- Canvas: 1536x864 landscape presentation slide.\\n- Generate one slide only, not a contact sheet and not multiple slide candidates.\\n- Make it presentation-ready, high-sensibility, and coherent with the chosen style template.\\n- Make it visually finished, not a sparse wireframe or placeholder diagram.\\n- Use the strongest signature elements of the style template: palette, typography, composition language, icon/illustration treatment, and editorial rhythm.\\n- Keep all visible text readable at presentation distance.\\n- Use low text density, strong hierarchy, and source-grounded diagrams, editorial composition, or template-specific visuals.\\n- Do not add markdown symbols, fake logos, watermarks, signatures, UI browser chrome, or extra captions.\\n- Match the source/user instruction language for all visible slide text and speaker-facing copy.\",\n      \"slideNumber\": 4,\n      \"visibleText\": [\n        \"100 行 Markdown\",\n        \"很少有人读\",\n        \"Tabs、插图、链接\",\n        \"更容易浏览\"\n      ],\n      \"visualStyle\": \"像素化用户旅程图，带终端迷宫、Tabs 导航条和响应式设备框。\",\n      \"speakerNotes\": \"作者在实际工作中发现，自己基本不会读超过 100 行的 Markdown 文件，也很难指望团队其他人去读。但 HTML 文档可以通过选项卡、插图、链接等视觉元素，把结构整理得更清楚，方便导航浏览。它还可以做到移动端自适应，让不同尺寸设备上都有更好的阅读体验。\",\n      \"revisedPrompt\": \"Create exactly one complete presentation slide image, 1536x864 landscape, in the dominant art direction of Neo-Retro Dev Deck / Pixel-Infographic Editorial.\\n\\nSlide topic: readability decides whether teams will actually read it.\\n\\nStrictly include ONLY these visible text lines, and no extra words anywhere:\\n100 行 Markdown\\n很少有人读\\nTabs、插图、链接\\n更容易浏览\\n\\nComposition:\\n- Light cream/off-white engineering notebook background with subtle square grid.\\n- Strong editorial layout with thick black borders, stacked modular blocks, slight overlaps, collage feel.\\n- Top half: a reading-path diagram. On the left, a dense terminal-like text maze made from many tiny horizontal text lines and pixel blocks, clearly labeled with the exact text \\\"100 行 Markdown\\\". On the right, a clear navigation path using Tabs: a bold yellow tab bar, a few crisp section blocks, illustration node, and link node connected by arrows/chevrons, conveying easier browsing. Add pixel-art maze arrows and terminal maze motifs.\\n- Bottom half: show the same HTML document displayed on two devices side by side: a desktop screen and a smartphone screen. Both screens should show the same responsive HTML document structure, with strong black outlines, cyan/blue browser/execution color, and yellow tab accents. No browser chrome, no fake logos, no watermark.\\n- Use pixel-art style icons and graphics: tabs, link nodes, small illustration icon, arrows, motion lines, tiny sparks. Flat colors, black outline, 8-bit/16-bit inspired.\\n- Visual metaphor: messy long Markdown becomes navigable, structured HTML.\\n\\nTypography:\\n- Huge heavy geometric sans headline treatment is implied by the exact text lines; make the Chinese text large, bold, black, slightly condensed, with editorial emphasis.\\n- Keep text readable at presentation distance and balanced with illustration.\\n\\nPalette:\\n- Hot pink reserved for brain/agent/intelligence accents only if needed.\\n- Bright yellow for editor/code/tools/tab structures.\\n- Cyan/light blue for browser/web/execution/device screens.\\n- Black for text and borders.\\n- Cream background.\\n- No gradients, no soft shadows, no realistic photos.\\n\\nStyle:\\n- Retro-futuristic, developer-centric, opinionated, playful, slightly rebellious.\\n- Annotated engineering notes, not corporate PPT.\\n- Cohesive, finished, presentation-ready, with strong hierarchy and visual rhythm.\\n\\nDo not add any extra captions, labels, logos, or UI chrome beyond the exact four text lines.\",\n      \"storageFileId\": \"t7ygtzhh095osfp4813fkdxp-c33b2cacc67ec39ec5eccf21f26bb73e\"\n    },\n    {\n      \"size\": \"1536x864\",\n      \"model\": \"gpt-image-2\",\n      \"title\": \"HTML 更容易被分享\",\n      \"layout\": \"分享流程图：AI 输出 HTML 文件，上传云端，生成链接，分发给团队设备。\",\n      \"status\": \"completed\",\n      \"message\": \"把 HTML 上传到云端后，团队成员可以用链接在任何设备打开。\",\n      \"imageUrl\": \"https://cdn.drillso.com/generated/drill/a2vyrq7pkj3p6q8h24v2p1mo-aa505c116799b9ff2689804ff1fcb4b5.png\",\n      \"storageKey\": \"generated/drill/a2vyrq7pkj3p6q8h24v2p1mo-aa505c116799b9ff2689804ff1fcb4b5.png\",\n      \"imagePrompt\": \"Create exactly one complete presentation slide image.\\n\\nUse the following NotebookLM / Kael style prompt as the dominant art direction. Follow it closely.\\n\\nSTYLE TEMPLATE START\\nOverall style name: Neo-Retro Dev Deck / Pixel-Infographic Editorial.\\n\\nCore visual identity:\\n- Retro-futuristic, developer-centric, editorial infographic style.\\n- Feels like 90s computer manuals mixed with modern AI dev tools marketing.\\n- Pixel art meets startup slide deck.\\n- Mood: confident, playful, opinionated, slightly rebellious.\\n- Builders explaining the future, not selling fluff.\\n\\nCanvas and background:\\n- Use a light cream or off-white grid paper background.\\n- Add subtle square grid lines like an engineering notebook.\\n- Slides should feel like annotated engineering notes, not corporate PPTs.\\n\\nTypography:\\n- Primary headline: bold, heavy geometric sans serif, black text, slightly condensed.\\n- Headlines may mix the requested language and English.\\n- English sub-labels sit under requested-language titles in small clean type.\\n- Use huge bold headline blocks, medium subtitles, and small explanatory captions below icons or boxes.\\n\\nStrict color palette:\\n- Hot pink for agent, brain, intelligence concepts.\\n- Bright yellow for editor, code, and tools.\\n- Cyan or light blue for browser, web, and execution.\\n- Black for text and borders.\\n- White or cream for background.\\n- Each section should have one dominant color block.\\n\\nLayout language:\\n- Stacked modular blocks.\\n- Rectangles with thick black borders.\\n- Slight intentional overlaps and collage-like assembly.\\n- Horizontal section header bars.\\n- Card structures for steps, evolution, layers.\\n- Controlled imperfection: assembled, not perfectly sterile.\\n\\nIconography and graphics:\\n- Pixel-art style icons: rocket, robot, agent, gear, code brackets, browser window, chat bubbles.\\n- Icons should look low-resolution, 8-bit or 16-bit inspired, flat colors, black outline.\\n- Decorative elements: small gears, arrows, chevrons, pixel sparks, motion lines.\\n\\nContent patterns:\\n- System architecture slides: stacked layers, each with one color, one icon, one bold title, one short line.\\n- Evolution slides: left-to-right progression, each step in its own box; final step is larger and more colorful.\\n- Manifesto slides: one huge headline in a boxed frame, minimal text, playful icons around it.\\n\\nTone:\\n- Short, declarative, slightly opinionated.\\n- Good: Agents execute tasks autonomously. Coding enters the agent era.\\n- Bad: Empowering users with cutting-edge solutions.\\n\\nAvoid gradients, realistic photos, soft shadows, corporate templates, and quiet minimalism.\\nGenerate cohesive multi-slide visuals with consistent grid background, color usage, icon style, and typography hierarchy.\\nSTYLE TEMPLATE END\\n\\nDeck title: HTML：AI 智能体输出的新画布\\nDeck summary: 这套短演示面向使用 Claude Code 或类似 AI 智能体的开发者、产品和技术团队，围绕“为什么 HTML 正在比 Markdown 更适合作为复杂 AI 输出格式”展开：从信息密度、可读性、分享、交互、数据摄取到实际使用场景。\\nDeck format: presenter_slides\\nChosen style: Neo-Retro Dev Deck / Pixel-Infographic Editorial\\n\\nSlide 5: HTML 更容易被分享\\nMain message: 把 HTML 上传到云端后，团队成员可以用链接在任何设备打开。\\n\\nVisible text must be exactly these lines, with no extra words:\\nMarkdown 常变成附件\\nHTML 可以变成链接\\n任何设备\\n随时参考\\n\\nLayout:\\n分享流程图：AI 输出 HTML 文件，上传云端，生成链接，分发给团队设备。\\n\\nVisual style:\\n复古网络拓扑图，使用像素云、链接线、设备节点和小型浏览器窗口。\\n\\nAdditional image direction:\\n制作一张分享工作流幻灯片：左侧是 Claude Code 终端生成 HTML 文件，中间是像素风云端存储图标，右侧分叉到笔记本、手机和平板浏览器窗口。用一条清晰数据线表示从文件到链接再到团队阅读的路径。\\n\\nRequirements:\\n- Canvas: 1536x864 landscape presentation slide.\\n- Generate one slide only, not a contact sheet and not multiple slide candidates.\\n- Make it presentation-ready, high-sensibility, and coherent with the chosen style template.\\n- Make it visually finished, not a sparse wireframe or placeholder diagram.\\n- Use the strongest signature elements of the style template: palette, typography, composition language, icon/illustration treatment, and editorial rhythm.\\n- Keep all visible text readable at presentation distance.\\n- Use low text density, strong hierarchy, and source-grounded diagrams, editorial composition, or template-specific visuals.\\n- Do not add markdown symbols, fake logos, watermarks, signatures, UI browser chrome, or extra captions.\\n- Match the source/user instruction language for all visible slide text and speaker-facing copy.\",\n      \"slideNumber\": 5,\n      \"visibleText\": [\n        \"Markdown 常变成附件\",\n        \"HTML 可以变成链接\",\n        \"任何设备\",\n        \"随时参考\"\n      ],\n      \"visualStyle\": \"复古网络拓扑图，使用像素云、链接线、设备节点和小型浏览器窗口。\",\n      \"speakerNotes\": \"原文指出，分享 Markdown 文件比较麻烦，因为大多数浏览器本身不能很好地渲染它们，通常只能当附件塞进邮件或聊天消息。HTML 的优势是，上传到云端后，比如云存储服务 S3，就能通过链接分享。同事可以随时随地用任何设备打开，也更可能真正耐心阅读需求文档、分析报告或代码审查说明。\",\n      \"revisedPrompt\": \"Create exactly one complete presentation slide image, 1536x864 landscape, in a Neo-Retro Dev Deck / Pixel-Infographic Editorial style. Single slide only, finished and presentation-ready.\\n\\nCanvas/background: light cream off-white engineering notebook paper with subtle square grid lines, slightly warm tint. Thick black borders, modular blocks, slight overlaps, collage-like assembly, retro-futuristic editorial infographic feel.\\n\\nColor palette: hot pink for intelligence/agent concepts, bright yellow for code/tools, cyan/light blue for browser/web/execution, black for text and borders, cream background. One dominant color block per section.\\n\\nComposition: a visual sharing workflow diagram spanning left to right. Left side: a pixel-art terminal / code panel suggesting AI code generation, with a stylized HTML file icon emerging from it. Middle: a pixel-art cloud storage icon as the hub. Right side: three device nodes branching from the cloud—laptop, smartphone, and tablet—each shown as small browser-window-like pixel illustrations. Connect them with a clear data line path: file → cloud → link distribution → team devices. Use link lines, arrows, chevrons, pixel sparks, and small motion marks. Retro network topology aesthetic. Make the workflow visually obvious and editorial, not a wireframe.\\n\\nTypography and text: Use bold heavy geometric sans serif for the main Chinese lines, black text, slightly condensed, with high legibility. The ONLY visible text on the slide must be exactly these four lines and nothing else, with no extra words, labels, captions, logos, or watermarks:\\nMarkdown 常变成附件\\nHTML 可以变成链接\\n任何设备\\n随时参考\\nPlace the first two lines as the large headline block near the left or center-left, and the last two lines near the right-side device area as medium emphasis captions. Do not add any other text anywhere.\\n\\nVisual details: pixel-art cloud, browser windows, device screens, code brackets, small arrows, subtle gears, and link-chain motifs. Controlled imperfection, assembled engineering-note style. Strong hierarchy, clean readable spacing, no corporate minimalism, no gradients, no realistic photos, no soft shadows.\\n\\nMake the slide feel like a confident opinionated developer presentation about sharing HTML via cloud links across devices. Ensure all text remains readable from presentation distance and the overall slide is cohesive and polished.\",\n      \"storageFileId\": \"a2vyrq7pkj3p6q8h24v2p1mo-aa505c116799b9ff2689804ff1fcb4b5\"\n    },\n    {\n      \"size\": \"1536x864\",\n      \"model\": \"gpt-image-2\",\n      \"title\": \"HTML 可以双向互动\",\n      \"layout\": \"产品式界面示意图：左边是参数控制面板，右边是实时预览，底部有复制按钮回到 Claude Code。\",\n      \"status\": \"completed\",\n      \"message\": \"文档不只能被阅读，还能用滑块、旋钮、按钮帮助你调整结果。\",\n      \"imageUrl\": \"https://cdn.drillso.com/generated/drill/zfs9j3z82e6948o3d46fq1a0-769b9c519c3c88d714c3f6822b7a651c.png\",\n      \"storageKey\": \"generated/drill/zfs9j3z82e6948o3d46fq1a0-769b9c519c3c88d714c3f6822b7a651c.png\",\n      \"imagePrompt\": \"Create exactly one complete presentation slide image.\\n\\nUse the following NotebookLM / Kael style prompt as the dominant art direction. Follow it closely.\\n\\nSTYLE TEMPLATE START\\nOverall style name: Neo-Retro Dev Deck / Pixel-Infographic Editorial.\\n\\nCore visual identity:\\n- Retro-futuristic, developer-centric, editorial infographic style.\\n- Feels like 90s computer manuals mixed with modern AI dev tools marketing.\\n- Pixel art meets startup slide deck.\\n- Mood: confident, playful, opinionated, slightly rebellious.\\n- Builders explaining the future, not selling fluff.\\n\\nCanvas and background:\\n- Use a light cream or off-white grid paper background.\\n- Add subtle square grid lines like an engineering notebook.\\n- Slides should feel like annotated engineering notes, not corporate PPTs.\\n\\nTypography:\\n- Primary headline: bold, heavy geometric sans serif, black text, slightly condensed.\\n- Headlines may mix the requested language and English.\\n- English sub-labels sit under requested-language titles in small clean type.\\n- Use huge bold headline blocks, medium subtitles, and small explanatory captions below icons or boxes.\\n\\nStrict color palette:\\n- Hot pink for agent, brain, intelligence concepts.\\n- Bright yellow for editor, code, and tools.\\n- Cyan or light blue for browser, web, and execution.\\n- Black for text and borders.\\n- White or cream for background.\\n- Each section should have one dominant color block.\\n\\nLayout language:\\n- Stacked modular blocks.\\n- Rectangles with thick black borders.\\n- Slight intentional overlaps and collage-like assembly.\\n- Horizontal section header bars.\\n- Card structures for steps, evolution, layers.\\n- Controlled imperfection: assembled, not perfectly sterile.\\n\\nIconography and graphics:\\n- Pixel-art style icons: rocket, robot, agent, gear, code brackets, browser window, chat bubbles.\\n- Icons should look low-resolution, 8-bit or 16-bit inspired, flat colors, black outline.\\n- Decorative elements: small gears, arrows, chevrons, pixel sparks, motion lines.\\n\\nContent patterns:\\n- System architecture slides: stacked layers, each with one color, one icon, one bold title, one short line.\\n- Evolution slides: left-to-right progression, each step in its own box; final step is larger and more colorful.\\n- Manifesto slides: one huge headline in a boxed frame, minimal text, playful icons around it.\\n\\nTone:\\n- Short, declarative, slightly opinionated.\\n- Good: Agents execute tasks autonomously. Coding enters the agent era.\\n- Bad: Empowering users with cutting-edge solutions.\\n\\nAvoid gradients, realistic photos, soft shadows, corporate templates, and quiet minimalism.\\nGenerate cohesive multi-slide visuals with consistent grid background, color usage, icon style, and typography hierarchy.\\nSTYLE TEMPLATE END\\n\\nDeck title: HTML：AI 智能体输出的新画布\\nDeck summary: 这套短演示面向使用 Claude Code 或类似 AI 智能体的开发者、产品和技术团队，围绕“为什么 HTML 正在比 Markdown 更适合作为复杂 AI 输出格式”展开：从信息密度、可读性、分享、交互、数据摄取到实际使用场景。\\nDeck format: presenter_slides\\nChosen style: Neo-Retro Dev Deck / Pixel-Infographic Editorial\\n\\nSlide 6: HTML 可以双向互动\\nMain message: 文档不只能被阅读，还能用滑块、旋钮、按钮帮助你调整结果。\\n\\nVisible text must be exactly these lines, with no extra words:\\n滑块\\n旋钮\\n参数微调\\n一键复制回 Claude Code\\n\\nLayout:\\n产品式界面示意图：左边是参数控制面板，右边是实时预览，底部有复制按钮回到 Claude Code。\\n\\nVisual style:\\n复古交互式控制台，带像素滑块、拨盘、预览窗口和命令行回流箭头。\\n\\nAdditional image direction:\\n设计一张交互文档幻灯片：一个 HTML playground 界面占据画面中央，左侧有滑块、旋钮和选项开关，右侧是动画或算法结果预览，底部有醒目的按钮文字 一键复制为提示词。按钮旁有箭头回流到 Claude Code 终端窗口。\\n\\nRequirements:\\n- Canvas: 1536x864 landscape presentation slide.\\n- Generate one slide only, not a contact sheet and not multiple slide candidates.\\n- Make it presentation-ready, high-sensibility, and coherent with the chosen style template.\\n- Make it visually finished, not a sparse wireframe or placeholder diagram.\\n- Use the strongest signature elements of the style template: palette, typography, composition language, icon/illustration treatment, and editorial rhythm.\\n- Keep all visible text readable at presentation distance.\\n- Use low text density, strong hierarchy, and source-grounded diagrams, editorial composition, or template-specific visuals.\\n- Do not add markdown symbols, fake logos, watermarks, signatures, UI browser chrome, or extra captions.\\n- Match the source/user instruction language for all visible slide text and speaker-facing copy.\",\n      \"slideNumber\": 6,\n      \"visibleText\": [\n        \"滑块\",\n        \"旋钮\",\n        \"参数微调\",\n        \"一键复制回 Claude Code\"\n      ],\n      \"visualStyle\": \"复古交互式控制台，带像素滑块、拨盘、预览窗口和命令行回流箭头。\",\n      \"speakerNotes\": \"双向交互是 HTML 相比 Markdown 的关键优势。原文提到，可以让 Claude 在页面上加滑块或旋钮，用来调整设计效果；也可以提供选项来微调算法参数，并观察结果变化。甚至可以加一个按钮，把微调后的完美参数一键复制为提示词，再粘贴回 Claude Code 继续工作。\",\n      \"revisedPrompt\": \"Create exactly one complete presentation slide image, 1536x864 landscape, in the Neo-Retro Dev Deck / Pixel-Infographic Editorial style. Light cream off-white engineering notebook grid background with subtle square grid lines. Retro-futuristic, developer-centric, playful, opinionated, slightly rebellious. Thick black borders, stacked modular blocks, slight overlaps, editorial composition.\\n\\nSlide topic: HTML 可以双向互动. Show a polished HTML playground interface centered on the slide: left side is a parameter control panel in bright yellow with pixel-art sliders, a dial/knob, toggle switches, and small control indicators; right side is a cyan/light-blue live preview window showing an animated algorithm/result visualization, like moving bars, nodes, or a responsive layout preview; bottom area has a bold hot-pink copy button that sends changes back to Claude Code, with a thick black arrow flow from the button toward a small retro terminal window labeled only by context, no extra words visible.\\n\\nUse strong signature elements: hot pink for agent/intelligence controls, bright yellow for editor/tools, cyan for browser/preview, black outlines and text, cream background. Add pixel-art icons, motion lines, chevrons, and small sparks. Make it look like a finished product UI mockup inside an editorial slide, not a wireframe.\\n\\nVisible text must be exactly these four lines and nothing else anywhere on the slide:\\n滑块\\n旋钮\\n参数微调\\n一键复制回 Claude Code\\n\\nPlace “滑块” near the slider control, “旋钮” near the dial, “参数微调” as a small section label above or within the control panel, and “一键复制回 Claude Code” on the large bottom button. No other words, labels, numbers, or captions. No markdown, no logos, no watermarks, no browser chrome. Keep text large, crisp, and readable at presentation distance. Cohesive, presentation-ready, high sensibility, visually finished.\",\n      \"storageFileId\": \"zfs9j3z82e6948o3d46fq1a0-769b9c519c3c88d714c3f6822b7a651c\"\n    },\n    {\n      \"size\": \"1536x864\",\n      \"model\": \"gpt-image-2\",\n      \"title\": \"Claude Code 让 HTML 吃进大上下文\",\n      \"layout\": \"数据摄取架构图：多源上下文流入 Claude Code，再输出 HTML 报告页面。\",\n      \"status\": \"completed\",\n      \"message\": \"HTML 的价值会随着 Claude Code 能读取更多上下文而放大。\",\n      \"imageUrl\": \"https://cdn.drillso.com/generated/drill/ja8mrrewgnt58dxtonguo9bt-14c485624fc4c17a213467f9be81e1f6.png\",\n      \"storageKey\": \"generated/drill/ja8mrrewgnt58dxtonguo9bt-14c485624fc4c17a213467f9be81e1f6.png\",\n      \"imagePrompt\": \"Create exactly one complete presentation slide image.\\n\\nUse the following NotebookLM / Kael style prompt as the dominant art direction. Follow it closely.\\n\\nSTYLE TEMPLATE START\\nOverall style name: Neo-Retro Dev Deck / Pixel-Infographic Editorial.\\n\\nCore visual identity:\\n- Retro-futuristic, developer-centric, editorial infographic style.\\n- Feels like 90s computer manuals mixed with modern AI dev tools marketing.\\n- Pixel art meets startup slide deck.\\n- Mood: confident, playful, opinionated, slightly rebellious.\\n- Builders explaining the future, not selling fluff.\\n\\nCanvas and background:\\n- Use a light cream or off-white grid paper background.\\n- Add subtle square grid lines like an engineering notebook.\\n- Slides should feel like annotated engineering notes, not corporate PPTs.\\n\\nTypography:\\n- Primary headline: bold, heavy geometric sans serif, black text, slightly condensed.\\n- Headlines may mix the requested language and English.\\n- English sub-labels sit under requested-language titles in small clean type.\\n- Use huge bold headline blocks, medium subtitles, and small explanatory captions below icons or boxes.\\n\\nStrict color palette:\\n- Hot pink for agent, brain, intelligence concepts.\\n- Bright yellow for editor, code, and tools.\\n- Cyan or light blue for browser, web, and execution.\\n- Black for text and borders.\\n- White or cream for background.\\n- Each section should have one dominant color block.\\n\\nLayout language:\\n- Stacked modular blocks.\\n- Rectangles with thick black borders.\\n- Slight intentional overlaps and collage-like assembly.\\n- Horizontal section header bars.\\n- Card structures for steps, evolution, layers.\\n- Controlled imperfection: assembled, not perfectly sterile.\\n\\nIconography and graphics:\\n- Pixel-art style icons: rocket, robot, agent, gear, code brackets, browser window, chat bubbles.\\n- Icons should look low-resolution, 8-bit or 16-bit inspired, flat colors, black outline.\\n- Decorative elements: small gears, arrows, chevrons, pixel sparks, motion lines.\\n\\nContent patterns:\\n- System architecture slides: stacked layers, each with one color, one icon, one bold title, one short line.\\n- Evolution slides: left-to-right progression, each step in its own box; final step is larger and more colorful.\\n- Manifesto slides: one huge headline in a boxed frame, minimal text, playful icons around it.\\n\\nTone:\\n- Short, declarative, slightly opinionated.\\n- Good: Agents execute tasks autonomously. Coding enters the agent era.\\n- Bad: Empowering users with cutting-edge solutions.\\n\\nAvoid gradients, realistic photos, soft shadows, corporate templates, and quiet minimalism.\\nGenerate cohesive multi-slide visuals with consistent grid background, color usage, icon style, and typography hierarchy.\\nSTYLE TEMPLATE END\\n\\nDeck title: HTML：AI 智能体输出的新画布\\nDeck summary: 这套短演示面向使用 Claude Code 或类似 AI 智能体的开发者、产品和技术团队，围绕“为什么 HTML 正在比 Markdown 更适合作为复杂 AI 输出格式”展开：从信息密度、可读性、分享、交互、数据摄取到实际使用场景。\\nDeck format: presenter_slides\\nChosen style: Neo-Retro Dev Deck / Pixel-Infographic Editorial\\n\\nSlide 7: Claude Code 让 HTML 吃进大上下文\\nMain message: HTML 的价值会随着 Claude Code 能读取更多上下文而放大。\\n\\nVisible text must be exactly these lines, with no extra words:\\n代码文件夹\\nSlack\\nLinear\\n浏览器\\nGit 历史\\n汇成 HTML 报告\\n\\nLayout:\\n数据摄取架构图：多源上下文流入 Claude Code，再输出 HTML 报告页面。\\n\\nVisual style:\\n开发者架构图，像旧式系统手册中的数据管线；节点带像素图标，线条清楚。\\n\\nAdditional image direction:\\n制作一张架构图幻灯片：左侧六个数据源节点分别是代码文件夹、Slack、Linear、浏览器、Git 历史、MCP；所有节点通过管线流入中央 Claude Code 引擎；右侧输出一个 HTML 报告页面，页面内有图表、分类卡片和摘要。整体像复古计算机系统图。\\n\\nRequirements:\\n- Canvas: 1536x864 landscape presentation slide.\\n- Generate one slide only, not a contact sheet and not multiple slide candidates.\\n- Make it presentation-ready, high-sensibility, and coherent with the chosen style template.\\n- Make it visually finished, not a sparse wireframe or placeholder diagram.\\n- Use the strongest signature elements of the style template: palette, typography, composition language, icon/illustration treatment, and editorial rhythm.\\n- Keep all visible text readable at presentation distance.\\n- Use low text density, strong hierarchy, and source-grounded diagrams, editorial composition, or template-specific visuals.\\n- Do not add markdown symbols, fake logos, watermarks, signatures, UI browser chrome, or extra captions.\\n- Match the source/user instruction language for all visible slide text and speaker-facing copy.\",\n      \"slideNumber\": 7,\n      \"visibleText\": [\n        \"代码文件夹\",\n        \"Slack\",\n        \"Linear\",\n        \"浏览器\",\n        \"Git 历史\",\n        \"汇成 HTML 报告\"\n      ],\n      \"visualStyle\": \"开发者架构图，像旧式系统手册中的数据管线；节点带像素图标，线条清楚。\",\n      \"speakerNotes\": \"作者解释了为什么要用 Claude Code 生成 HTML，而不是只用网页版 Claude 或 Claude Design。关键原因是 Claude Code 能摄取庞大的上下文。例如，作者让 Claude Code 自动遍历电脑里的代码文件夹，找出由它生成的 HTML 文件，分组归类，再生成一个新 HTML 页面，用图表展示每类文件的特征。原文还提到 Claude Code 可以通过 MCP 接入 Slack、Linear 等上下文，也能结合浏览器和 Git 历史记录。\",\n      \"revisedPrompt\": \"Create a single 16:9 presentation slide image, 1536x864, in the dominant style of Neo-Retro Dev Deck / Pixel-Infographic Editorial: light cream engineering notebook grid background, thick black borders, stacked modular blocks, retro-computing manual vibe, pixel-art icons, hot pink / bright yellow / cyan palette, confident editorial composition, slightly rebellious startup-dev aesthetic.\\n\\nSlide topic: data ingestion architecture showing many context sources flowing into a Claude Code engine and then into an HTML report page.\\n\\nComposition:\\n- Left side: six source nodes arranged vertically or in a staggered cluster, each in a thick black bordered box with one dominant color block and a pixel icon. The only visible text on the slide must be exactly these Chinese lines, one per source/output box, and no other words anywhere:\\n代码文件夹\\nSlack\\nLinear\\n浏览器\\nGit 历史\\n汇成 HTML 报告\\n- These text lines should be large, bold, highly readable, and each placed next to or inside the corresponding node boxes.\\n- The source nodes visually represent: code folder, Slack chat, Linear task card, browser window, Git history timeline, and MCP as an unlabeled small pixel chip/connector icon if needed, but do not add any extra visible label text.\\n- All source pipes/flow lines should move from the left nodes into a central engine.\\n\\nCenter:\\n- A large central retro machine / engine / Claude Code core, drawn like an old system manual diagram, with pixel-art circuitry, gears, and a bold hot-pink or yellow core. No text label on the engine.\\n- Multiple clear pipes / arrows converge into this engine from the left. Use black lines with cyan and pink accents.\\n\\nRight side:\\n- Output a finished HTML report page shown as a large framed browser-like page, but without browser chrome or any text labels.\\n- Inside the report page, show a polished editorial layout made of abstract charts, category cards, summary blocks, tiny graph bars, and data chips, all with black outlines and bright accent colors. It should feel like a real report page, visually rich, but use no extra readable text.\\n\\nOverall style:\\n- Looks like a retro computer system diagram from an old technical manual, upgraded with modern AI developer deck energy.\\n- Clear pipeline, modular blocks, slight overlaps, thick black outlines, crisp pixel-art icons, strong hierarchy, low text density, cohesive and presentation-ready.\\n- No gradients, no photorealism, no soft shadows, no extra captions, no watermark, no logo, no UI chrome, no markdown symbols.\\n- Keep the slide clean but visually full, with strong editorial rhythm and obvious left-to-right flow from inputs to engine to output report.\\n- Ensure the only visible text is exactly the six lines listed above and nothing else.\",\n      \"storageFileId\": \"ja8mrrewgnt58dxtonguo9bt-14c485624fc4c17a213467f9be81e1f6\"\n    },\n    {\n      \"size\": \"1536x864\",\n      \"model\": \"gpt-image-2\",\n      \"title\": \"从最简单的提示词开始\",\n      \"layout\": \"收束页。中间是一条最短提示词，周围浮现四类使用场景：需求计划、代码审查、设计原型、报告学习。\",\n      \"status\": \"completed\",\n      \"message\": \"不需要复杂设置，只要明确这个 HTML 制品要做什么。\",\n      \"imageUrl\": \"https://cdn.drillso.com/generated/drill/l51egrv6udsur0l6d1v4e54m-4fe674822c333cd24d4f75a03a6bbb4e.png\",\n      \"storageKey\": \"generated/drill/l51egrv6udsur0l6d1v4e54m-4fe674822c333cd24d4f75a03a6bbb4e.png\",\n      \"imagePrompt\": \"Create exactly one complete presentation slide image.\\n\\nUse the following NotebookLM / Kael style prompt as the dominant art direction. Follow it closely.\\n\\nSTYLE TEMPLATE START\\nOverall style name: Neo-Retro Dev Deck / Pixel-Infographic Editorial.\\n\\nCore visual identity:\\n- Retro-futuristic, developer-centric, editorial infographic style.\\n- Feels like 90s computer manuals mixed with modern AI dev tools marketing.\\n- Pixel art meets startup slide deck.\\n- Mood: confident, playful, opinionated, slightly rebellious.\\n- Builders explaining the future, not selling fluff.\\n\\nCanvas and background:\\n- Use a light cream or off-white grid paper background.\\n- Add subtle square grid lines like an engineering notebook.\\n- Slides should feel like annotated engineering notes, not corporate PPTs.\\n\\nTypography:\\n- Primary headline: bold, heavy geometric sans serif, black text, slightly condensed.\\n- Headlines may mix the requested language and English.\\n- English sub-labels sit under requested-language titles in small clean type.\\n- Use huge bold headline blocks, medium subtitles, and small explanatory captions below icons or boxes.\\n\\nStrict color palette:\\n- Hot pink for agent, brain, intelligence concepts.\\n- Bright yellow for editor, code, and tools.\\n- Cyan or light blue for browser, web, and execution.\\n- Black for text and borders.\\n- White or cream for background.\\n- Each section should have one dominant color block.\\n\\nLayout language:\\n- Stacked modular blocks.\\n- Rectangles with thick black borders.\\n- Slight intentional overlaps and collage-like assembly.\\n- Horizontal section header bars.\\n- Card structures for steps, evolution, layers.\\n- Controlled imperfection: assembled, not perfectly sterile.\\n\\nIconography and graphics:\\n- Pixel-art style icons: rocket, robot, agent, gear, code brackets, browser window, chat bubbles.\\n- Icons should look low-resolution, 8-bit or 16-bit inspired, flat colors, black outline.\\n- Decorative elements: small gears, arrows, chevrons, pixel sparks, motion lines.\\n\\nContent patterns:\\n- System architecture slides: stacked layers, each with one color, one icon, one bold title, one short line.\\n- Evolution slides: left-to-right progression, each step in its own box; final step is larger and more colorful.\\n- Manifesto slides: one huge headline in a boxed frame, minimal text, playful icons around it.\\n\\nTone:\\n- Short, declarative, slightly opinionated.\\n- Good: Agents execute tasks autonomously. Coding enters the agent era.\\n- Bad: Empowering users with cutting-edge solutions.\\n\\nAvoid gradients, realistic photos, soft shadows, corporate templates, and quiet minimalism.\\nGenerate cohesive multi-slide visuals with consistent grid background, color usage, icon style, and typography hierarchy.\\nSTYLE TEMPLATE END\\n\\nDeck title: HTML：AI 智能体输出的新画布\\nDeck summary: 这套短演示面向使用 Claude Code 或类似 AI 智能体的开发者、产品和技术团队，围绕“为什么 HTML 正在比 Markdown 更适合作为复杂 AI 输出格式”展开：从信息密度、可读性、分享、交互、数据摄取到实际使用场景。\\nDeck format: presenter_slides\\nChosen style: Neo-Retro Dev Deck / Pixel-Infographic Editorial\\n\\nSlide 8: 从最简单的提示词开始\\nMain message: 不需要复杂设置，只要明确这个 HTML 制品要做什么。\\n\\nVisible text must be exactly these lines, with no extra words:\\n给我做一个 HTML 文件\\n生成一个 HTML 制品\\n先从简单提示词开始\\n\\nLayout:\\n收束页。中间是一条最短提示词，周围浮现四类使用场景：需求计划、代码审查、设计原型、报告学习。\\n\\nVisual style:\\n像素风结尾海报，中心是命令行输入框，周围是四个应用场景小窗口。\\n\\nAdditional image direction:\\n设计一张收束幻灯片：中央是一条大号命令行输入框，文字是 给我做一个 HTML 文件。四周分布四个小窗口，分别表现需求与计划、代码审查、设计原型、报告与学习。每个窗口只用简短中文标签和小图标，不要拥挤，形成从一个简单提示词扩展到多个工作流的感觉。\\n\\nRequirements:\\n- Canvas: 1536x864 landscape presentation slide.\\n- Generate one slide only, not a contact sheet and not multiple slide candidates.\\n- Make it presentation-ready, high-sensibility, and coherent with the chosen style template.\\n- Make it visually finished, not a sparse wireframe or placeholder diagram.\\n- Use the strongest signature elements of the style template: palette, typography, composition language, icon/illustration treatment, and editorial rhythm.\\n- Keep all visible text readable at presentation distance.\\n- Use low text density, strong hierarchy, and source-grounded diagrams, editorial composition, or template-specific visuals.\\n- Do not add markdown symbols, fake logos, watermarks, signatures, UI browser chrome, or extra captions.\\n- Match the source/user instruction language for all visible slide text and speaker-facing copy.\",\n      \"slideNumber\": 8,\n      \"visibleText\": [\n        \"给我做一个 HTML 文件\",\n        \"生成一个 HTML 制品\",\n        \"先从简单提示词开始\"\n      ],\n      \"visualStyle\": \"像素风结尾海报，中心是命令行输入框，周围是四个应用场景小窗口。\",\n      \"speakerNotes\": \"原文最后特别强调，不必把这件事做成复杂的 /html 技能指令。你可以直接像平时聊天一样告诉 Claude：给我做一个 HTML 文件，或者生成一个 HTML 制品。真正的诀窍是清楚自己希望这个制品做什么，以及你会如何使用它。可以先从简单提示词开始，再逐渐探索适合自己场景的模板。\",\n      \"revisedPrompt\": \"Create exactly one complete presentation slide image, landscape 1536x864, as a finished Neo-Retro Dev Deck / Pixel-Infographic Editorial slide. Overall feel: retro-futuristic developer-centric editorial infographic, 90s computer manual mixed with modern AI dev tools marketing, pixel art meets startup slide deck, confident playful opinionated slightly rebellious.\\n\\nBackground: light cream/off-white engineering notebook paper with subtle square grid lines across the entire slide. Thick black borders, stacked modular blocks, slight intentional overlaps, collage-like assembly, controlled imperfection. No gradients, no realistic photos, no soft shadows, no corporate template feel.\\n\\nTitle/content direction: 收束页. Centerpiece is a large command-line input box with thick black border, bright yellow fill or cream with yellow highlight, slightly pixelated terminal look. Inside the main input box, the only central large text is exactly: 给我做一个 HTML 文件. Make it bold, heavy geometric sans serif, black, slightly condensed. Nearby small sublabel in English is allowed but keep text density low.\\n\\nAround the center, place four small window cards evenly distributed with plenty of breathing room, each a pixel-art mini window with thick black border and one dominant accent color. Each window has a short Chinese label and a tiny icon only, representing:\\n1) 需求与计划 — icon: checklist / clipboard / gears\\n2) 代码审查 — icon: code brackets / magnifier / bug\\n3) 设计原型 — icon: layout wireframe / pencil / cursor\\n4) 报告与学习 — icon: book / chart / lightbulb\\nEach window should feel like a distinct workflow orbiting the main prompt. Use hot pink for agent/brain/intelligence concepts, bright yellow for editor/code/tools, cyan/light blue for browser/web/execution, black text and borders, cream background. Decorative pixel sparks, arrows, motion lines, tiny gears. Strong editorial rhythm, not crowded.\\n\\nVisible text must be exactly these lines and no extra words anywhere else:\\n给我做一个 HTML 文件\\n生成一个 HTML 制品\\n先从简单提示词开始\\n\\nUse those two additional lines as smaller supporting text blocks, placed cleanly in the composition. Keep all text readable at presentation distance. Ensure no extra captions or labels beyond these exact lines. No fake logos, no watermarks, no browser chrome, no markdown symbols.\\n\\nTypography hierarchy: huge bold headline block for the main prompt, medium subtitle blocks for the two supporting lines, small clean type in window cards if needed but avoid adding any text beyond the allowed lines. Pixel-art style icons, flat colors, black outline, 8-bit/16-bit inspired. Presentation-ready and cohesive, one single slide only.\",\n      \"storageFileId\": \"l51egrv6udsur0l6d1v4e54m-4fe674822c333cd24d4f75a03a6bbb4e\"\n    }\n  ],\n  \"styleId\": \"neo_retro_dev\",\n  \"summary\": \"这套短演示面向使用 Claude Code 或类似 AI 智能体的开发者、产品和技术团队，围绕“为什么 HTML 正在比 Markdown 更适合作为复杂 AI 输出格式”展开：从信息密度、可读性、分享、交互、数据摄取到实际使用场景。\",\n  \"audience\": \"使用 Claude Code、AI Agent 或 AI 辅助开发工作流的开发者、产品经理、技术负责人和团队协作者\",\n  \"imageSize\": \"1536x864\",\n  \"imageModel\": \"gpt-image-2\",\n  \"plannerModel\": \"gpt-5.5\"\n}","structured":{"style":"Neo-Retro Dev Deck / Pixel-Infographic Editorial","title":"HTML：AI 智能体输出的新画布","format":"presenter_slides","slides":[{"size":"1536x864","model":"gpt-image-2","title":"Markdown 开始不够用了","layout":"封面式单句大标题，左侧像终端窗口一样显示 Markdown 文件堆叠，右侧出现一个更大的 HTML 画布预览。","status":"completed","message":"当 AI 智能体输出越来越复杂，Markdown 的优势正在变成限制。","imageUrl":"https://cdn.drillso.com/generated/drill/chkqq20lhm498yajlybnv244-9a04c1bad336d900c755338cf43287a7.png","storageKey":"generated/drill/chkqq20lhm498yajlybnv244-9a04c1bad336d900c755338cf43287a7.png","imagePrompt":"Create exactly one complete presentation slide image.\n\nUse the following NotebookLM / Kael style prompt as the dominant art direction. Follow it closely.\n\nSTYLE TEMPLATE START\nOverall style name: Neo-Retro Dev Deck / Pixel-Infographic Editorial.\n\nCore visual identity:\n- Retro-futuristic, developer-centric, editorial infographic style.\n- Feels like 90s computer manuals mixed with modern AI dev tools marketing.\n- Pixel art meets startup slide deck.\n- Mood: confident, playful, opinionated, slightly rebellious.\n- Builders explaining the future, not selling fluff.\n\nCanvas and background:\n- Use a light cream or off-white grid paper background.\n- Add subtle square grid lines like an engineering notebook.\n- Slides should feel like annotated engineering notes, not corporate PPTs.\n\nTypography:\n- Primary headline: bold, heavy geometric sans serif, black text, slightly condensed.\n- Headlines may mix the requested language and English.\n- English sub-labels sit under requested-language titles in small clean type.\n- Use huge bold headline blocks, medium subtitles, and small explanatory captions below icons or boxes.\n\nStrict color palette:\n- Hot pink for agent, brain, intelligence concepts.\n- Bright yellow for editor, code, and tools.\n- Cyan or light blue for browser, web, and execution.\n- Black for text and borders.\n- White or cream for background.\n- Each section should have one dominant color block.\n\nLayout language:\n- Stacked modular blocks.\n- Rectangles with thick black borders.\n- Slight intentional overlaps and collage-like assembly.\n- Horizontal section header bars.\n- Card structures for steps, evolution, layers.\n- Controlled imperfection: assembled, not perfectly sterile.\n\nIconography and graphics:\n- Pixel-art style icons: rocket, robot, agent, gear, code brackets, browser window, chat bubbles.\n- Icons should look low-resolution, 8-bit or 16-bit inspired, flat colors, black outline.\n- Decorative elements: small gears, arrows, chevrons, pixel sparks, motion lines.\n\nContent patterns:\n- System architecture slides: stacked layers, each with one color, one icon, one bold title, one short line.\n- Evolution slides: left-to-right progression, each step in its own box; final step is larger and more colorful.\n- Manifesto slides: one huge headline in a boxed frame, minimal text, playful icons around it.\n\nTone:\n- Short, declarative, slightly opinionated.\n- Good: Agents execute tasks autonomously. Coding enters the agent era.\n- Bad: Empowering users with cutting-edge solutions.\n\nAvoid gradients, realistic photos, soft shadows, corporate templates, and quiet minimalism.\nGenerate cohesive multi-slide visuals with consistent grid background, color usage, icon style, and typography hierarchy.\nSTYLE TEMPLATE END\n\nDeck title: HTML：AI 智能体输出的新画布\nDeck summary: 这套短演示面向使用 Claude Code 或类似 AI 智能体的开发者、产品和技术团队，围绕“为什么 HTML 正在比 Markdown 更适合作为复杂 AI 输出格式”展开：从信息密度、可读性、分享、交互、数据摄取到实际使用场景。\nDeck format: presenter_slides\nChosen style: Neo-Retro Dev Deck / Pixel-Infographic Editorial\n\nSlide 1: Markdown 开始不够用了\nMain message: 当 AI 智能体输出越来越复杂，Markdown 的优势正在变成限制。\n\nVisible text must be exactly these lines, with no extra words:\nMarkdown 很方便\n但复杂工作需要更强的画布\nHTML 开始接管\n\nLayout:\n封面式单句大标题，左侧像终端窗口一样显示 Markdown 文件堆叠，右侧出现一个更大的 HTML 画布预览。\n\nVisual style:\n复古开发者杂志封面感，像 90 年代电脑手册与现代 AI 工具宣传页混合；网格纸背景、像素化小图标、终端窗口、HTML 标签符号作为视觉线索。\n\nAdditional image direction:\n制作一张封面幻灯片：浅奶油色工程网格背景，左侧是几张拥挤的 Markdown 文档卡片，上面有 ASCII 图表和长文本行；右侧是一块明亮的 HTML 画布，包含彩色图表、卡片和小型交互控件。标题大而清晰，构图偏编辑杂志封面，带像素风小箭头和代码标签装饰。\n\nRequirements:\n- Canvas: 1536x864 landscape presentation slide.\n- Generate one slide only, not a contact sheet and not multiple slide candidates.\n- Make it presentation-ready, high-sensibility, and coherent with the chosen style template.\n- Make it visually finished, not a sparse wireframe or placeholder diagram.\n- Use the strongest signature elements of the style template: palette, typography, composition language, icon/illustration treatment, and editorial rhythm.\n- Keep all visible text readable at presentation distance.\n- Use low text density, strong hierarchy, and source-grounded diagrams, editorial composition, or template-specific visuals.\n- Do not add markdown symbols, fake logos, watermarks, signatures, UI browser chrome, or extra captions.\n- Match the source/user instruction language for all visible slide text and speaker-facing copy.","slideNumber":1,"visibleText":["Markdown 很方便","但复杂工作需要更强的画布","HTML 开始接管"],"visualStyle":"复古开发者杂志封面感，像 90 年代电脑手册与现代 AI 工具宣传页混合；网格纸背景、像素化小图标、终端窗口、HTML 标签符号作为视觉线索。","speakerNotes":"原文的起点很清楚：Markdown 已经成为 AI 智能体与人沟通时最常用的格式，因为它简单、便携、具备一定富文本能力，也容易人工修改。但作者发现，随着 AI 智能体能力增强，动辄上百行的 Markdown 文件很难让人有耐心读下去。更关键的是，作者现在越来越少亲自编辑这些文件，而是让 Claude 通过提示词修改，因此 Markdown 最核心的人工可编辑优势变弱了。","revisedPrompt":"Create a single 16:9 presentation slide image (1536x864) in the Neo-Retro Dev Deck / Pixel-Infographic Editorial style. Landscape cover slide for a developer presentation.\n\nOverall composition: editorial magazine cover with engineering notebook grid paper background in light cream/off-white, subtle square grid lines. Strong retro-futuristic, developer-centric, playful but polished. Thick black borders, modular collage blocks, slight overlaps, pixel-art accents. No gradients, no photos, no soft shadows, no corporate template feel.\n\nVisible text must be EXACTLY these three lines and nothing else anywhere on the slide:\nMarkdown 很方便\n但复杂工作需要更强的画布\nHTML 开始接管\nUse large bold geometric sans serif Chinese typography, black, high contrast, presentation readable. Place as a dominant headline block centered slightly left or center-left, with strong hierarchy and plenty of breathing room. Do not add any extra captions, labels, logos, watermarks, browser chrome, or other text.\n\nLayout: left side resembles a terminal-like stack of cramped Markdown document cards, each card with dense long text lines and ASCII chart-like strokes, but keep any text on those cards illegible / decorative enough to avoid extra readable words. Right side: a larger bright HTML canvas preview, with colorful chart blocks, cards, and small interactive control shapes, plus visible HTML tag symbols as decorative iconography (<> , braces, brackets), rendered in pixel-art style. The HTML side should feel more spacious, more structured, and more powerful than the Markdown stack.\n\nColor palette: cream background, black borders/text, hot pink for intelligence/agent accents, bright yellow for editor/code/tool accents, cyan/light blue for browser/web/execution accents. Each major section should have one dominant color block. Use pixel-art icons such as small arrows, code brackets, spark lines, gears, and a tiny robot/agent symbol. Controlled imperfection, assembled collage feel.\n\nStyle cues: 90s computer manual mixed with modern AI dev tools marketing, notebook grid paper, bold headline blocks, modular rectangles, editorial rhythm, pixel-infographic treatment. The slide should feel finished, polished, and visually dense but not cluttered. Ensure the three required Chinese lines are crisp and readable, and avoid any additional readable text.","storageFileId":"chkqq20lhm498yajlybnv244-9a04c1bad336d900c755338cf43287a7"},{"size":"1536x864","model":"gpt-image-2","title":"核心转变：从文本文件到视觉制品","layout":"左右对比图。左边是单色 Markdown 文档，右边是模块化 HTML 页面。中间用箭头表示工作流迁移。","status":"completed","message":"HTML 不只是另一种格式，而是更适合承载复杂 AI 输出的视觉制品。","imageUrl":"https://cdn.drillso.com/generated/drill/zme5p3ldhhj31t1zetnxnbqw-f299989cc39de04253f0b0ee912816db.png","storageKey":"generated/drill/zme5p3ldhhj31t1zetnxnbqw-f299989cc39de04253f0b0ee912816db.png","imagePrompt":"Create exactly one complete presentation slide image.\n\nUse the following NotebookLM / Kael style prompt as the dominant art direction. Follow it closely.\n\nSTYLE TEMPLATE START\nOverall style name: Neo-Retro Dev Deck / Pixel-Infographic Editorial.\n\nCore visual identity:\n- Retro-futuristic, developer-centric, editorial infographic style.\n- Feels like 90s computer manuals mixed with modern AI dev tools marketing.\n- Pixel art meets startup slide deck.\n- Mood: confident, playful, opinionated, slightly rebellious.\n- Builders explaining the future, not selling fluff.\n\nCanvas and background:\n- Use a light cream or off-white grid paper background.\n- Add subtle square grid lines like an engineering notebook.\n- Slides should feel like annotated engineering notes, not corporate PPTs.\n\nTypography:\n- Primary headline: bold, heavy geometric sans serif, black text, slightly condensed.\n- Headlines may mix the requested language and English.\n- English sub-labels sit under requested-language titles in small clean type.\n- Use huge bold headline blocks, medium subtitles, and small explanatory captions below icons or boxes.\n\nStrict color palette:\n- Hot pink for agent, brain, intelligence concepts.\n- Bright yellow for editor, code, and tools.\n- Cyan or light blue for browser, web, and execution.\n- Black for text and borders.\n- White or cream for background.\n- Each section should have one dominant color block.\n\nLayout language:\n- Stacked modular blocks.\n- Rectangles with thick black borders.\n- Slight intentional overlaps and collage-like assembly.\n- Horizontal section header bars.\n- Card structures for steps, evolution, layers.\n- Controlled imperfection: assembled, not perfectly sterile.\n\nIconography and graphics:\n- Pixel-art style icons: rocket, robot, agent, gear, code brackets, browser window, chat bubbles.\n- Icons should look low-resolution, 8-bit or 16-bit inspired, flat colors, black outline.\n- Decorative elements: small gears, arrows, chevrons, pixel sparks, motion lines.\n\nContent patterns:\n- System architecture slides: stacked layers, each with one color, one icon, one bold title, one short line.\n- Evolution slides: left-to-right progression, each step in its own box; final step is larger and more colorful.\n- Manifesto slides: one huge headline in a boxed frame, minimal text, playful icons around it.\n\nTone:\n- Short, declarative, slightly opinionated.\n- Good: Agents execute tasks autonomously. Coding enters the agent era.\n- Bad: Empowering users with cutting-edge solutions.\n\nAvoid gradients, realistic photos, soft shadows, corporate templates, and quiet minimalism.\nGenerate cohesive multi-slide visuals with consistent grid background, color usage, icon style, and typography hierarchy.\nSTYLE TEMPLATE END\n\nDeck title: HTML：AI 智能体输出的新画布\nDeck summary: 这套短演示面向使用 Claude Code 或类似 AI 智能体的开发者、产品和技术团队，围绕“为什么 HTML 正在比 Markdown 更适合作为复杂 AI 输出格式”展开：从信息密度、可读性、分享、交互、数据摄取到实际使用场景。\nDeck format: presenter_slides\nChosen style: Neo-Retro Dev Deck / Pixel-Infographic Editorial\n\nSlide 2: 核心转变：从文本文件到视觉制品\nMain message: HTML 不只是另一种格式，而是更适合承载复杂 AI 输出的视觉制品。\n\nVisible text must be exactly these lines, with no extra words:\nMarkdown\n文本为主\nHTML\n结构、视觉、交互\n\nLayout:\n左右对比图。左边是单色 Markdown 文档，右边是模块化 HTML 页面。中间用箭头表示工作流迁移。\n\nVisual style:\n像素信息图风格，使用复古 UI 框、粗黑边、网格标尺和小标签，强调格式迁移。\n\nAdditional image direction:\n设计一张左右对比幻灯片：左侧标题 Markdown，下方是单栏长文本、简单标题和 ASCII 图；右侧标题 HTML，下方是分区卡片、表格、SVG 图表、Tabs、按钮和图片占位。中间有一条像素风数据管道箭头，从文本文件流向视觉制品。\n\nRequirements:\n- Canvas: 1536x864 landscape presentation slide.\n- Generate one slide only, not a contact sheet and not multiple slide candidates.\n- Make it presentation-ready, high-sensibility, and coherent with the chosen style template.\n- Make it visually finished, not a sparse wireframe or placeholder diagram.\n- Use the strongest signature elements of the style template: palette, typography, composition language, icon/illustration treatment, and editorial rhythm.\n- Keep all visible text readable at presentation distance.\n- Use low text density, strong hierarchy, and source-grounded diagrams, editorial composition, or template-specific visuals.\n- Do not add markdown symbols, fake logos, watermarks, signatures, UI browser chrome, or extra captions.\n- Match the source/user instruction language for all visible slide text and speaker-facing copy.","slideNumber":2,"visibleText":["Markdown","文本为主","HTML","结构、视觉、交互"],"visualStyle":"像素信息图风格，使用复古 UI 框、粗黑边、网格标尺和小标签，强调格式迁移。","speakerNotes":"作者偏爱 HTML 的原因，不是因为 Markdown 完全不好，而是因为需求变了。AI 生成的内容越来越像需求文档、参考资料、头脑风暴结果、计划、审查说明和报告。这些内容往往不再需要人手工一行行编辑，而更需要被阅读、审查、分享和复用。HTML 可以把这些输出变成一个视觉制品，而不是一段长文本。","revisedPrompt":"A single complete presentation slide image, 1536x864 landscape, in Neo-Retro Dev Deck / Pixel-Infographic Editorial style. Light cream off-white grid paper background with subtle engineering notebook grid. Strong retro-futuristic developer editorial composition, thick black borders, modular collage layout, pixel-infographic treatment, controlled imperfections. No browser chrome, no watermark, no logos, no extra captions.\n\nSlide topic: contrasting Markdown text file vs HTML visual artifact. Layout: left and right comparison with a central pixel-data pipeline arrow moving from left to right.\n\nOnly visible readable text on the entire slide must be exactly these four lines, and nothing else readable:\nMarkdown\n文本为主\nHTML\n结构、视觉、交互\n\nPlace the text as large bold headline blocks with black heavy geometric sans serif. Left side: a monochrome Markdown document panel, single-column long text represented by dense black horizontal bars and a tiny minimalist code/document graphic, simple stacked paragraphs, and a small abstract ASCII-like block diagram rendered only as shapes/bars (not readable letters), all contained in a thick black framed card. Right side: a vibrant HTML page panel with modular sections represented by colorful boxes: a tab strip made of colored tabs without text, a table grid made of cells, an SVG chart with line and bars, button-like rounded rectangles without labels, and an image placeholder tile with pixel-art framing. Use dominant cyan/light blue for the HTML side, and muted grayscale for the Markdown side, with hot pink and bright yellow accents on the right for agents/tools/editor energy. Center: a retro pixel pipeline arrow, chunky and directional, with motion lines and small spark pixels, transitioning from text file to visual artifact.\n\nStrong signature elements: thick black outlines, stacked modular blocks, horizontal header bars, pixel-art icons (document, browser window, code brackets, small gear) but no text labels on icons. Editorial rhythm, playful rebellious confident tone. Keep the slide visually finished, dense enough, but maintain low text density. Avoid gradients, realistic photos, soft shadows, corporate template aesthetics. Ensure the four required text lines are readable at presentation distance and no other text appears anywhere on the slide. Use only those exact lines as readable typography.\n\nComposition: left 46%, center 10%, right 44%. The left panel should feel like a plain text file with one dominant tall document block and minimal structure. The right panel should feel like a polished HTML page with multiple clearly separated modules and stronger color. Use slight overlaps and collage-like assembly. Add small pixel sparks around the arrow. Make it look like a complete, high-sensibility keynote slide.","storageFileId":"zme5p3ldhhj31t1zetnxnbqw-f299989cc39de04253f0b0ee912816db"},{"size":"1536x864","model":"gpt-image-2","title":"HTML 的信息密度更高","layout":"中心放一个 HTML 容器，周围用六个模块化小卡片环绕，像系统能力雷达图。","status":"completed","message":"HTML 能同时承载结构、数据、设计、图表、图片、代码与动态交互。","imageUrl":"https://cdn.drillso.com/generated/drill/ugz3e6b9ceovvd3dr3xsua16-04f8abbccba336ad6d79ae277a6a920d.png","storageKey":"generated/drill/ugz3e6b9ceovvd3dr3xsua16-04f8abbccba336ad6d79ae277a6a920d.png","imagePrompt":"Create exactly one complete presentation slide image.\n\nUse the following NotebookLM / Kael style prompt as the dominant art direction. Follow it closely.\n\nSTYLE TEMPLATE START\nOverall style name: Neo-Retro Dev Deck / Pixel-Infographic Editorial.\n\nCore visual identity:\n- Retro-futuristic, developer-centric, editorial infographic style.\n- Feels like 90s computer manuals mixed with modern AI dev tools marketing.\n- Pixel art meets startup slide deck.\n- Mood: confident, playful, opinionated, slightly rebellious.\n- Builders explaining the future, not selling fluff.\n\nCanvas and background:\n- Use a light cream or off-white grid paper background.\n- Add subtle square grid lines like an engineering notebook.\n- Slides should feel like annotated engineering notes, not corporate PPTs.\n\nTypography:\n- Primary headline: bold, heavy geometric sans serif, black text, slightly condensed.\n- Headlines may mix the requested language and English.\n- English sub-labels sit under requested-language titles in small clean type.\n- Use huge bold headline blocks, medium subtitles, and small explanatory captions below icons or boxes.\n\nStrict color palette:\n- Hot pink for agent, brain, intelligence concepts.\n- Bright yellow for editor, code, and tools.\n- Cyan or light blue for browser, web, and execution.\n- Black for text and borders.\n- White or cream for background.\n- Each section should have one dominant color block.\n\nLayout language:\n- Stacked modular blocks.\n- Rectangles with thick black borders.\n- Slight intentional overlaps and collage-like assembly.\n- Horizontal section header bars.\n- Card structures for steps, evolution, layers.\n- Controlled imperfection: assembled, not perfectly sterile.\n\nIconography and graphics:\n- Pixel-art style icons: rocket, robot, agent, gear, code brackets, browser window, chat bubbles.\n- Icons should look low-resolution, 8-bit or 16-bit inspired, flat colors, black outline.\n- Decorative elements: small gears, arrows, chevrons, pixel sparks, motion lines.\n\nContent patterns:\n- System architecture slides: stacked layers, each with one color, one icon, one bold title, one short line.\n- Evolution slides: left-to-right progression, each step in its own box; final step is larger and more colorful.\n- Manifesto slides: one huge headline in a boxed frame, minimal text, playful icons around it.\n\nTone:\n- Short, declarative, slightly opinionated.\n- Good: Agents execute tasks autonomously. Coding enters the agent era.\n- Bad: Empowering users with cutting-edge solutions.\n\nAvoid gradients, realistic photos, soft shadows, corporate templates, and quiet minimalism.\nGenerate cohesive multi-slide visuals with consistent grid background, color usage, icon style, and typography hierarchy.\nSTYLE TEMPLATE END\n\nDeck title: HTML：AI 智能体输出的新画布\nDeck summary: 这套短演示面向使用 Claude Code 或类似 AI 智能体的开发者、产品和技术团队，围绕“为什么 HTML 正在比 Markdown 更适合作为复杂 AI 输出格式”展开：从信息密度、可读性、分享、交互、数据摄取到实际使用场景。\nDeck format: presenter_slides\nChosen style: Neo-Retro Dev Deck / Pixel-Infographic Editorial\n\nSlide 3: HTML 的信息密度更高\nMain message: HTML 能同时承载结构、数据、设计、图表、图片、代码与动态交互。\n\nVisible text must be exactly these lines, with no extra words:\n表格\nCSS\nSVG\n代码片段\n工作流图\n交互控件\n\nLayout:\n中心放一个 HTML 容器，周围用六个模块化小卡片环绕，像系统能力雷达图。\n\nVisual style:\n开发者信息图，像复古软件说明书的功能矩阵；小图标使用像素风，线条清晰。\n\nAdditional image direction:\n制作一张能力地图幻灯片：中心是一个写着 HTML 的代码容器，周围连接六个像素风模块卡片，分别表示表格、CSS、SVG、代码片段、工作流图和交互控件。每张卡片用简短中文标签和小图标表达，整体像工程蓝图上的功能雷达图。\n\nRequirements:\n- Canvas: 1536x864 landscape presentation slide.\n- Generate one slide only, not a contact sheet and not multiple slide candidates.\n- Make it presentation-ready, high-sensibility, and coherent with the chosen style template.\n- Make it visually finished, not a sparse wireframe or placeholder diagram.\n- Use the strongest signature elements of the style template: palette, typography, composition language, icon/illustration treatment, and editorial rhythm.\n- Keep all visible text readable at presentation distance.\n- Use low text density, strong hierarchy, and source-grounded diagrams, editorial composition, or template-specific visuals.\n- Do not add markdown symbols, fake logos, watermarks, signatures, UI browser chrome, or extra captions.\n- Match the source/user instruction language for all visible slide text and speaker-facing copy.","slideNumber":3,"visibleText":["表格","CSS","SVG","代码片段","工作流图","交互控件"],"visualStyle":"开发者信息图，像复古软件说明书的功能矩阵；小图标使用像素风，线条清晰。","speakerNotes":"原文列举了 HTML 的信息承载能力：表格可以展示数据列，CSS 可以表达设计细节，SVG 可以绘制清晰插图，script 标签可以嵌入代码片段，HTML、JavaScript 和 CSS 可以实现动态交互，SVG 和 HTML 可以绘制工作流图，画布和绝对定位可以展示空间分布数据，image 标签可以插入图片。作者甚至说，只要 Claude 能读懂的信息，几乎都能用 HTML 高效展现。","revisedPrompt":"Create exactly one complete presentation slide image, landscape 1536x864, Neo-Retro Dev Deck / Pixel-Infographic Editorial style. Light cream/off-white background with subtle engineering notebook grid lines. Retro-futuristic developer-centric editorial infographic feel, like a 90s computer manual mixed with modern AI dev tools marketing. Thick black borders, stacked modular blocks, controlled collage overlaps, pixel-art icons, black text, hot pink, bright yellow, cyan/light blue accents, no gradients, no shadows, no photos.\n\nSlide topic: HTML 的信息密度更高. Main message visually implied: HTML 能同时承载结构、数据、设计、图表、图片、代码与动态交互.\n\nComposition: a central large HTML code-container box in the middle, designed like a chunky code window / module with thick black border and hot pink + cyan accent blocks. Inside the center box, big bold text: HTML. Around it, connect six modular small cards in a radar/map layout, evenly distributed in a ring around center, each connected by black lines/arrows, like a system capability radar chart. Each card should have a distinct dominant color block and a small pixel-art icon. Use short Chinese labels only, exactly these six and no extra visible words anywhere: 表格, CSS, SVG, 代码片段, 工作流图, 交互控件. Make each label readable and prominent on its card.\n\nCard ideas: 表格 with pixel table/grid icon, CSS with style brush/slider icon, SVG with vector shape icon, 代码片段 with code bracket icon, 工作流图 with flow arrows/boxes icon, 交互控件 with button/toggle icon. Each card should feel like a functional capability module from a retro software manual, crisp and polished.\n\nTypography: bold heavy geometric sans serif for the central HTML title and the six Chinese labels, black text, slightly condensed. Minimal small technical markers only if they do not add extra readable words. Strong hierarchy, presentation-ready.\n\nOverall visual rhythm: engineered infographic, not corporate PPT, not minimal. Add small pixel sparks, chevrons, gear motifs, and blueprint-like annotation marks around the module network. Ensure the slide is finished, balanced, legible at presentation distance, cohesive, and contains exactly one slide only. No browser chrome, no watermark, no signatures, no extra captions, no markdown symbols, no English labels besides HTML if visible inside center box.","storageFileId":"ugz3e6b9ceovvd3dr3xsua16-04f8abbccba336ad6d79ae277a6a920d"},{"size":"1536x864","model":"gpt-image-2","title":"可读性决定团队会不会看","layout":"上半部分是一条阅读路径图：长文迷宫变成清晰导航。下半部分显示桌面与手机两个设备上的同一 HTML 文档。","status":"completed","message":"当文档超过 100 行，HTML 的导航和视觉结构更容易让人读完。","imageUrl":"https://cdn.drillso.com/generated/drill/t7ygtzhh095osfp4813fkdxp-c33b2cacc67ec39ec5eccf21f26bb73e.png","storageKey":"generated/drill/t7ygtzhh095osfp4813fkdxp-c33b2cacc67ec39ec5eccf21f26bb73e.png","imagePrompt":"Create exactly one complete presentation slide image.\n\nUse the following NotebookLM / Kael style prompt as the dominant art direction. Follow it closely.\n\nSTYLE TEMPLATE START\nOverall style name: Neo-Retro Dev Deck / Pixel-Infographic Editorial.\n\nCore visual identity:\n- Retro-futuristic, developer-centric, editorial infographic style.\n- Feels like 90s computer manuals mixed with modern AI dev tools marketing.\n- Pixel art meets startup slide deck.\n- Mood: confident, playful, opinionated, slightly rebellious.\n- Builders explaining the future, not selling fluff.\n\nCanvas and background:\n- Use a light cream or off-white grid paper background.\n- Add subtle square grid lines like an engineering notebook.\n- Slides should feel like annotated engineering notes, not corporate PPTs.\n\nTypography:\n- Primary headline: bold, heavy geometric sans serif, black text, slightly condensed.\n- Headlines may mix the requested language and English.\n- English sub-labels sit under requested-language titles in small clean type.\n- Use huge bold headline blocks, medium subtitles, and small explanatory captions below icons or boxes.\n\nStrict color palette:\n- Hot pink for agent, brain, intelligence concepts.\n- Bright yellow for editor, code, and tools.\n- Cyan or light blue for browser, web, and execution.\n- Black for text and borders.\n- White or cream for background.\n- Each section should have one dominant color block.\n\nLayout language:\n- Stacked modular blocks.\n- Rectangles with thick black borders.\n- Slight intentional overlaps and collage-like assembly.\n- Horizontal section header bars.\n- Card structures for steps, evolution, layers.\n- Controlled imperfection: assembled, not perfectly sterile.\n\nIconography and graphics:\n- Pixel-art style icons: rocket, robot, agent, gear, code brackets, browser window, chat bubbles.\n- Icons should look low-resolution, 8-bit or 16-bit inspired, flat colors, black outline.\n- Decorative elements: small gears, arrows, chevrons, pixel sparks, motion lines.\n\nContent patterns:\n- System architecture slides: stacked layers, each with one color, one icon, one bold title, one short line.\n- Evolution slides: left-to-right progression, each step in its own box; final step is larger and more colorful.\n- Manifesto slides: one huge headline in a boxed frame, minimal text, playful icons around it.\n\nTone:\n- Short, declarative, slightly opinionated.\n- Good: Agents execute tasks autonomously. Coding enters the agent era.\n- Bad: Empowering users with cutting-edge solutions.\n\nAvoid gradients, realistic photos, soft shadows, corporate templates, and quiet minimalism.\nGenerate cohesive multi-slide visuals with consistent grid background, color usage, icon style, and typography hierarchy.\nSTYLE TEMPLATE END\n\nDeck title: HTML：AI 智能体输出的新画布\nDeck summary: 这套短演示面向使用 Claude Code 或类似 AI 智能体的开发者、产品和技术团队，围绕“为什么 HTML 正在比 Markdown 更适合作为复杂 AI 输出格式”展开：从信息密度、可读性、分享、交互、数据摄取到实际使用场景。\nDeck format: presenter_slides\nChosen style: Neo-Retro Dev Deck / Pixel-Infographic Editorial\n\nSlide 4: 可读性决定团队会不会看\nMain message: 当文档超过 100 行，HTML 的导航和视觉结构更容易让人读完。\n\nVisible text must be exactly these lines, with no extra words:\n100 行 Markdown\n很少有人读\nTabs、插图、链接\n更容易浏览\n\nLayout:\n上半部分是一条阅读路径图：长文迷宫变成清晰导航。下半部分显示桌面与手机两个设备上的同一 HTML 文档。\n\nVisual style:\n像素化用户旅程图，带终端迷宫、Tabs 导航条和响应式设备框。\n\nAdditional image direction:\n设计一张可读性对比幻灯片：左上是一个由密密麻麻文本行组成的迷宫，标注 100 行 Markdown；右上是一条清晰的 Tabs 导航路径，配有插图和链接节点。底部展示一个桌面屏幕和一个手机屏幕，里面是同一份自适应 HTML 文档。\n\nRequirements:\n- Canvas: 1536x864 landscape presentation slide.\n- Generate one slide only, not a contact sheet and not multiple slide candidates.\n- Make it presentation-ready, high-sensibility, and coherent with the chosen style template.\n- Make it visually finished, not a sparse wireframe or placeholder diagram.\n- Use the strongest signature elements of the style template: palette, typography, composition language, icon/illustration treatment, and editorial rhythm.\n- Keep all visible text readable at presentation distance.\n- Use low text density, strong hierarchy, and source-grounded diagrams, editorial composition, or template-specific visuals.\n- Do not add markdown symbols, fake logos, watermarks, signatures, UI browser chrome, or extra captions.\n- Match the source/user instruction language for all visible slide text and speaker-facing copy.","slideNumber":4,"visibleText":["100 行 Markdown","很少有人读","Tabs、插图、链接","更容易浏览"],"visualStyle":"像素化用户旅程图，带终端迷宫、Tabs 导航条和响应式设备框。","speakerNotes":"作者在实际工作中发现，自己基本不会读超过 100 行的 Markdown 文件，也很难指望团队其他人去读。但 HTML 文档可以通过选项卡、插图、链接等视觉元素，把结构整理得更清楚，方便导航浏览。它还可以做到移动端自适应，让不同尺寸设备上都有更好的阅读体验。","revisedPrompt":"Create exactly one complete presentation slide image, 1536x864 landscape, in the dominant art direction of Neo-Retro Dev Deck / Pixel-Infographic Editorial.\n\nSlide topic: readability decides whether teams will actually read it.\n\nStrictly include ONLY these visible text lines, and no extra words anywhere:\n100 行 Markdown\n很少有人读\nTabs、插图、链接\n更容易浏览\n\nComposition:\n- Light cream/off-white engineering notebook background with subtle square grid.\n- Strong editorial layout with thick black borders, stacked modular blocks, slight overlaps, collage feel.\n- Top half: a reading-path diagram. On the left, a dense terminal-like text maze made from many tiny horizontal text lines and pixel blocks, clearly labeled with the exact text \"100 行 Markdown\". On the right, a clear navigation path using Tabs: a bold yellow tab bar, a few crisp section blocks, illustration node, and link node connected by arrows/chevrons, conveying easier browsing. Add pixel-art maze arrows and terminal maze motifs.\n- Bottom half: show the same HTML document displayed on two devices side by side: a desktop screen and a smartphone screen. Both screens should show the same responsive HTML document structure, with strong black outlines, cyan/blue browser/execution color, and yellow tab accents. No browser chrome, no fake logos, no watermark.\n- Use pixel-art style icons and graphics: tabs, link nodes, small illustration icon, arrows, motion lines, tiny sparks. Flat colors, black outline, 8-bit/16-bit inspired.\n- Visual metaphor: messy long Markdown becomes navigable, structured HTML.\n\nTypography:\n- Huge heavy geometric sans headline treatment is implied by the exact text lines; make the Chinese text large, bold, black, slightly condensed, with editorial emphasis.\n- Keep text readable at presentation distance and balanced with illustration.\n\nPalette:\n- Hot pink reserved for brain/agent/intelligence accents only if needed.\n- Bright yellow for editor/code/tools/tab structures.\n- Cyan/light blue for browser/web/execution/device screens.\n- Black for text and borders.\n- Cream background.\n- No gradients, no soft shadows, no realistic photos.\n\nStyle:\n- Retro-futuristic, developer-centric, opinionated, playful, slightly rebellious.\n- Annotated engineering notes, not corporate PPT.\n- Cohesive, finished, presentation-ready, with strong hierarchy and visual rhythm.\n\nDo not add any extra captions, labels, logos, or UI chrome beyond the exact four text lines.","storageFileId":"t7ygtzhh095osfp4813fkdxp-c33b2cacc67ec39ec5eccf21f26bb73e"},{"size":"1536x864","model":"gpt-image-2","title":"HTML 更容易被分享","layout":"分享流程图：AI 输出 HTML 文件，上传云端，生成链接，分发给团队设备。","status":"completed","message":"把 HTML 上传到云端后，团队成员可以用链接在任何设备打开。","imageUrl":"https://cdn.drillso.com/generated/drill/a2vyrq7pkj3p6q8h24v2p1mo-aa505c116799b9ff2689804ff1fcb4b5.png","storageKey":"generated/drill/a2vyrq7pkj3p6q8h24v2p1mo-aa505c116799b9ff2689804ff1fcb4b5.png","imagePrompt":"Create exactly one complete presentation slide image.\n\nUse the following NotebookLM / Kael style prompt as the dominant art direction. Follow it closely.\n\nSTYLE TEMPLATE START\nOverall style name: Neo-Retro Dev Deck / Pixel-Infographic Editorial.\n\nCore visual identity:\n- Retro-futuristic, developer-centric, editorial infographic style.\n- Feels like 90s computer manuals mixed with modern AI dev tools marketing.\n- Pixel art meets startup slide deck.\n- Mood: confident, playful, opinionated, slightly rebellious.\n- Builders explaining the future, not selling fluff.\n\nCanvas and background:\n- Use a light cream or off-white grid paper background.\n- Add subtle square grid lines like an engineering notebook.\n- Slides should feel like annotated engineering notes, not corporate PPTs.\n\nTypography:\n- Primary headline: bold, heavy geometric sans serif, black text, slightly condensed.\n- Headlines may mix the requested language and English.\n- English sub-labels sit under requested-language titles in small clean type.\n- Use huge bold headline blocks, medium subtitles, and small explanatory captions below icons or boxes.\n\nStrict color palette:\n- Hot pink for agent, brain, intelligence concepts.\n- Bright yellow for editor, code, and tools.\n- Cyan or light blue for browser, web, and execution.\n- Black for text and borders.\n- White or cream for background.\n- Each section should have one dominant color block.\n\nLayout language:\n- Stacked modular blocks.\n- Rectangles with thick black borders.\n- Slight intentional overlaps and collage-like assembly.\n- Horizontal section header bars.\n- Card structures for steps, evolution, layers.\n- Controlled imperfection: assembled, not perfectly sterile.\n\nIconography and graphics:\n- Pixel-art style icons: rocket, robot, agent, gear, code brackets, browser window, chat bubbles.\n- Icons should look low-resolution, 8-bit or 16-bit inspired, flat colors, black outline.\n- Decorative elements: small gears, arrows, chevrons, pixel sparks, motion lines.\n\nContent patterns:\n- System architecture slides: stacked layers, each with one color, one icon, one bold title, one short line.\n- Evolution slides: left-to-right progression, each step in its own box; final step is larger and more colorful.\n- Manifesto slides: one huge headline in a boxed frame, minimal text, playful icons around it.\n\nTone:\n- Short, declarative, slightly opinionated.\n- Good: Agents execute tasks autonomously. Coding enters the agent era.\n- Bad: Empowering users with cutting-edge solutions.\n\nAvoid gradients, realistic photos, soft shadows, corporate templates, and quiet minimalism.\nGenerate cohesive multi-slide visuals with consistent grid background, color usage, icon style, and typography hierarchy.\nSTYLE TEMPLATE END\n\nDeck title: HTML：AI 智能体输出的新画布\nDeck summary: 这套短演示面向使用 Claude Code 或类似 AI 智能体的开发者、产品和技术团队，围绕“为什么 HTML 正在比 Markdown 更适合作为复杂 AI 输出格式”展开：从信息密度、可读性、分享、交互、数据摄取到实际使用场景。\nDeck format: presenter_slides\nChosen style: Neo-Retro Dev Deck / Pixel-Infographic Editorial\n\nSlide 5: HTML 更容易被分享\nMain message: 把 HTML 上传到云端后，团队成员可以用链接在任何设备打开。\n\nVisible text must be exactly these lines, with no extra words:\nMarkdown 常变成附件\nHTML 可以变成链接\n任何设备\n随时参考\n\nLayout:\n分享流程图：AI 输出 HTML 文件，上传云端，生成链接，分发给团队设备。\n\nVisual style:\n复古网络拓扑图，使用像素云、链接线、设备节点和小型浏览器窗口。\n\nAdditional image direction:\n制作一张分享工作流幻灯片：左侧是 Claude Code 终端生成 HTML 文件，中间是像素风云端存储图标，右侧分叉到笔记本、手机和平板浏览器窗口。用一条清晰数据线表示从文件到链接再到团队阅读的路径。\n\nRequirements:\n- Canvas: 1536x864 landscape presentation slide.\n- Generate one slide only, not a contact sheet and not multiple slide candidates.\n- Make it presentation-ready, high-sensibility, and coherent with the chosen style template.\n- Make it visually finished, not a sparse wireframe or placeholder diagram.\n- Use the strongest signature elements of the style template: palette, typography, composition language, icon/illustration treatment, and editorial rhythm.\n- Keep all visible text readable at presentation distance.\n- Use low text density, strong hierarchy, and source-grounded diagrams, editorial composition, or template-specific visuals.\n- Do not add markdown symbols, fake logos, watermarks, signatures, UI browser chrome, or extra captions.\n- Match the source/user instruction language for all visible slide text and speaker-facing copy.","slideNumber":5,"visibleText":["Markdown 常变成附件","HTML 可以变成链接","任何设备","随时参考"],"visualStyle":"复古网络拓扑图，使用像素云、链接线、设备节点和小型浏览器窗口。","speakerNotes":"原文指出，分享 Markdown 文件比较麻烦，因为大多数浏览器本身不能很好地渲染它们，通常只能当附件塞进邮件或聊天消息。HTML 的优势是，上传到云端后，比如云存储服务 S3，就能通过链接分享。同事可以随时随地用任何设备打开，也更可能真正耐心阅读需求文档、分析报告或代码审查说明。","revisedPrompt":"Create exactly one complete presentation slide image, 1536x864 landscape, in a Neo-Retro Dev Deck / Pixel-Infographic Editorial style. Single slide only, finished and presentation-ready.\n\nCanvas/background: light cream off-white engineering notebook paper with subtle square grid lines, slightly warm tint. Thick black borders, modular blocks, slight overlaps, collage-like assembly, retro-futuristic editorial infographic feel.\n\nColor palette: hot pink for intelligence/agent concepts, bright yellow for code/tools, cyan/light blue for browser/web/execution, black for text and borders, cream background. One dominant color block per section.\n\nComposition: a visual sharing workflow diagram spanning left to right. Left side: a pixel-art terminal / code panel suggesting AI code generation, with a stylized HTML file icon emerging from it. Middle: a pixel-art cloud storage icon as the hub. Right side: three device nodes branching from the cloud—laptop, smartphone, and tablet—each shown as small browser-window-like pixel illustrations. Connect them with a clear data line path: file → cloud → link distribution → team devices. Use link lines, arrows, chevrons, pixel sparks, and small motion marks. Retro network topology aesthetic. Make the workflow visually obvious and editorial, not a wireframe.\n\nTypography and text: Use bold heavy geometric sans serif for the main Chinese lines, black text, slightly condensed, with high legibility. The ONLY visible text on the slide must be exactly these four lines and nothing else, with no extra words, labels, captions, logos, or watermarks:\nMarkdown 常变成附件\nHTML 可以变成链接\n任何设备\n随时参考\nPlace the first two lines as the large headline block near the left or center-left, and the last two lines near the right-side device area as medium emphasis captions. Do not add any other text anywhere.\n\nVisual details: pixel-art cloud, browser windows, device screens, code brackets, small arrows, subtle gears, and link-chain motifs. Controlled imperfection, assembled engineering-note style. Strong hierarchy, clean readable spacing, no corporate minimalism, no gradients, no realistic photos, no soft shadows.\n\nMake the slide feel like a confident opinionated developer presentation about sharing HTML via cloud links across devices. Ensure all text remains readable from presentation distance and the overall slide is cohesive and polished.","storageFileId":"a2vyrq7pkj3p6q8h24v2p1mo-aa505c116799b9ff2689804ff1fcb4b5"},{"size":"1536x864","model":"gpt-image-2","title":"HTML 可以双向互动","layout":"产品式界面示意图：左边是参数控制面板，右边是实时预览，底部有复制按钮回到 Claude Code。","status":"completed","message":"文档不只能被阅读，还能用滑块、旋钮、按钮帮助你调整结果。","imageUrl":"https://cdn.drillso.com/generated/drill/zfs9j3z82e6948o3d46fq1a0-769b9c519c3c88d714c3f6822b7a651c.png","storageKey":"generated/drill/zfs9j3z82e6948o3d46fq1a0-769b9c519c3c88d714c3f6822b7a651c.png","imagePrompt":"Create exactly one complete presentation slide image.\n\nUse the following NotebookLM / Kael style prompt as the dominant art direction. Follow it closely.\n\nSTYLE TEMPLATE START\nOverall style name: Neo-Retro Dev Deck / Pixel-Infographic Editorial.\n\nCore visual identity:\n- Retro-futuristic, developer-centric, editorial infographic style.\n- Feels like 90s computer manuals mixed with modern AI dev tools marketing.\n- Pixel art meets startup slide deck.\n- Mood: confident, playful, opinionated, slightly rebellious.\n- Builders explaining the future, not selling fluff.\n\nCanvas and background:\n- Use a light cream or off-white grid paper background.\n- Add subtle square grid lines like an engineering notebook.\n- Slides should feel like annotated engineering notes, not corporate PPTs.\n\nTypography:\n- Primary headline: bold, heavy geometric sans serif, black text, slightly condensed.\n- Headlines may mix the requested language and English.\n- English sub-labels sit under requested-language titles in small clean type.\n- Use huge bold headline blocks, medium subtitles, and small explanatory captions below icons or boxes.\n\nStrict color palette:\n- Hot pink for agent, brain, intelligence concepts.\n- Bright yellow for editor, code, and tools.\n- Cyan or light blue for browser, web, and execution.\n- Black for text and borders.\n- White or cream for background.\n- Each section should have one dominant color block.\n\nLayout language:\n- Stacked modular blocks.\n- Rectangles with thick black borders.\n- Slight intentional overlaps and collage-like assembly.\n- Horizontal section header bars.\n- Card structures for steps, evolution, layers.\n- Controlled imperfection: assembled, not perfectly sterile.\n\nIconography and graphics:\n- Pixel-art style icons: rocket, robot, agent, gear, code brackets, browser window, chat bubbles.\n- Icons should look low-resolution, 8-bit or 16-bit inspired, flat colors, black outline.\n- Decorative elements: small gears, arrows, chevrons, pixel sparks, motion lines.\n\nContent patterns:\n- System architecture slides: stacked layers, each with one color, one icon, one bold title, one short line.\n- Evolution slides: left-to-right progression, each step in its own box; final step is larger and more colorful.\n- Manifesto slides: one huge headline in a boxed frame, minimal text, playful icons around it.\n\nTone:\n- Short, declarative, slightly opinionated.\n- Good: Agents execute tasks autonomously. Coding enters the agent era.\n- Bad: Empowering users with cutting-edge solutions.\n\nAvoid gradients, realistic photos, soft shadows, corporate templates, and quiet minimalism.\nGenerate cohesive multi-slide visuals with consistent grid background, color usage, icon style, and typography hierarchy.\nSTYLE TEMPLATE END\n\nDeck title: HTML：AI 智能体输出的新画布\nDeck summary: 这套短演示面向使用 Claude Code 或类似 AI 智能体的开发者、产品和技术团队，围绕“为什么 HTML 正在比 Markdown 更适合作为复杂 AI 输出格式”展开：从信息密度、可读性、分享、交互、数据摄取到实际使用场景。\nDeck format: presenter_slides\nChosen style: Neo-Retro Dev Deck / Pixel-Infographic Editorial\n\nSlide 6: HTML 可以双向互动\nMain message: 文档不只能被阅读，还能用滑块、旋钮、按钮帮助你调整结果。\n\nVisible text must be exactly these lines, with no extra words:\n滑块\n旋钮\n参数微调\n一键复制回 Claude Code\n\nLayout:\n产品式界面示意图：左边是参数控制面板，右边是实时预览，底部有复制按钮回到 Claude Code。\n\nVisual style:\n复古交互式控制台，带像素滑块、拨盘、预览窗口和命令行回流箭头。\n\nAdditional image direction:\n设计一张交互文档幻灯片：一个 HTML playground 界面占据画面中央，左侧有滑块、旋钮和选项开关，右侧是动画或算法结果预览，底部有醒目的按钮文字 一键复制为提示词。按钮旁有箭头回流到 Claude Code 终端窗口。\n\nRequirements:\n- Canvas: 1536x864 landscape presentation slide.\n- Generate one slide only, not a contact sheet and not multiple slide candidates.\n- Make it presentation-ready, high-sensibility, and coherent with the chosen style template.\n- Make it visually finished, not a sparse wireframe or placeholder diagram.\n- Use the strongest signature elements of the style template: palette, typography, composition language, icon/illustration treatment, and editorial rhythm.\n- Keep all visible text readable at presentation distance.\n- Use low text density, strong hierarchy, and source-grounded diagrams, editorial composition, or template-specific visuals.\n- Do not add markdown symbols, fake logos, watermarks, signatures, UI browser chrome, or extra captions.\n- Match the source/user instruction language for all visible slide text and speaker-facing copy.","slideNumber":6,"visibleText":["滑块","旋钮","参数微调","一键复制回 Claude Code"],"visualStyle":"复古交互式控制台，带像素滑块、拨盘、预览窗口和命令行回流箭头。","speakerNotes":"双向交互是 HTML 相比 Markdown 的关键优势。原文提到，可以让 Claude 在页面上加滑块或旋钮，用来调整设计效果；也可以提供选项来微调算法参数，并观察结果变化。甚至可以加一个按钮，把微调后的完美参数一键复制为提示词，再粘贴回 Claude Code 继续工作。","revisedPrompt":"Create exactly one complete presentation slide image, 1536x864 landscape, in the Neo-Retro Dev Deck / Pixel-Infographic Editorial style. Light cream off-white engineering notebook grid background with subtle square grid lines. Retro-futuristic, developer-centric, playful, opinionated, slightly rebellious. Thick black borders, stacked modular blocks, slight overlaps, editorial composition.\n\nSlide topic: HTML 可以双向互动. Show a polished HTML playground interface centered on the slide: left side is a parameter control panel in bright yellow with pixel-art sliders, a dial/knob, toggle switches, and small control indicators; right side is a cyan/light-blue live preview window showing an animated algorithm/result visualization, like moving bars, nodes, or a responsive layout preview; bottom area has a bold hot-pink copy button that sends changes back to Claude Code, with a thick black arrow flow from the button toward a small retro terminal window labeled only by context, no extra words visible.\n\nUse strong signature elements: hot pink for agent/intelligence controls, bright yellow for editor/tools, cyan for browser/preview, black outlines and text, cream background. Add pixel-art icons, motion lines, chevrons, and small sparks. Make it look like a finished product UI mockup inside an editorial slide, not a wireframe.\n\nVisible text must be exactly these four lines and nothing else anywhere on the slide:\n滑块\n旋钮\n参数微调\n一键复制回 Claude Code\n\nPlace “滑块” near the slider control, “旋钮” near the dial, “参数微调” as a small section label above or within the control panel, and “一键复制回 Claude Code” on the large bottom button. No other words, labels, numbers, or captions. No markdown, no logos, no watermarks, no browser chrome. Keep text large, crisp, and readable at presentation distance. Cohesive, presentation-ready, high sensibility, visually finished.","storageFileId":"zfs9j3z82e6948o3d46fq1a0-769b9c519c3c88d714c3f6822b7a651c"},{"size":"1536x864","model":"gpt-image-2","title":"Claude Code 让 HTML 吃进大上下文","layout":"数据摄取架构图：多源上下文流入 Claude Code，再输出 HTML 报告页面。","status":"completed","message":"HTML 的价值会随着 Claude Code 能读取更多上下文而放大。","imageUrl":"https://cdn.drillso.com/generated/drill/ja8mrrewgnt58dxtonguo9bt-14c485624fc4c17a213467f9be81e1f6.png","storageKey":"generated/drill/ja8mrrewgnt58dxtonguo9bt-14c485624fc4c17a213467f9be81e1f6.png","imagePrompt":"Create exactly one complete presentation slide image.\n\nUse the following NotebookLM / Kael style prompt as the dominant art direction. Follow it closely.\n\nSTYLE TEMPLATE START\nOverall style name: Neo-Retro Dev Deck / Pixel-Infographic Editorial.\n\nCore visual identity:\n- Retro-futuristic, developer-centric, editorial infographic style.\n- Feels like 90s computer manuals mixed with modern AI dev tools marketing.\n- Pixel art meets startup slide deck.\n- Mood: confident, playful, opinionated, slightly rebellious.\n- Builders explaining the future, not selling fluff.\n\nCanvas and background:\n- Use a light cream or off-white grid paper background.\n- Add subtle square grid lines like an engineering notebook.\n- Slides should feel like annotated engineering notes, not corporate PPTs.\n\nTypography:\n- Primary headline: bold, heavy geometric sans serif, black text, slightly condensed.\n- Headlines may mix the requested language and English.\n- English sub-labels sit under requested-language titles in small clean type.\n- Use huge bold headline blocks, medium subtitles, and small explanatory captions below icons or boxes.\n\nStrict color palette:\n- Hot pink for agent, brain, intelligence concepts.\n- Bright yellow for editor, code, and tools.\n- Cyan or light blue for browser, web, and execution.\n- Black for text and borders.\n- White or cream for background.\n- Each section should have one dominant color block.\n\nLayout language:\n- Stacked modular blocks.\n- Rectangles with thick black borders.\n- Slight intentional overlaps and collage-like assembly.\n- Horizontal section header bars.\n- Card structures for steps, evolution, layers.\n- Controlled imperfection: assembled, not perfectly sterile.\n\nIconography and graphics:\n- Pixel-art style icons: rocket, robot, agent, gear, code brackets, browser window, chat bubbles.\n- Icons should look low-resolution, 8-bit or 16-bit inspired, flat colors, black outline.\n- Decorative elements: small gears, arrows, chevrons, pixel sparks, motion lines.\n\nContent patterns:\n- System architecture slides: stacked layers, each with one color, one icon, one bold title, one short line.\n- Evolution slides: left-to-right progression, each step in its own box; final step is larger and more colorful.\n- Manifesto slides: one huge headline in a boxed frame, minimal text, playful icons around it.\n\nTone:\n- Short, declarative, slightly opinionated.\n- Good: Agents execute tasks autonomously. Coding enters the agent era.\n- Bad: Empowering users with cutting-edge solutions.\n\nAvoid gradients, realistic photos, soft shadows, corporate templates, and quiet minimalism.\nGenerate cohesive multi-slide visuals with consistent grid background, color usage, icon style, and typography hierarchy.\nSTYLE TEMPLATE END\n\nDeck title: HTML：AI 智能体输出的新画布\nDeck summary: 这套短演示面向使用 Claude Code 或类似 AI 智能体的开发者、产品和技术团队，围绕“为什么 HTML 正在比 Markdown 更适合作为复杂 AI 输出格式”展开：从信息密度、可读性、分享、交互、数据摄取到实际使用场景。\nDeck format: presenter_slides\nChosen style: Neo-Retro Dev Deck / Pixel-Infographic Editorial\n\nSlide 7: Claude Code 让 HTML 吃进大上下文\nMain message: HTML 的价值会随着 Claude Code 能读取更多上下文而放大。\n\nVisible text must be exactly these lines, with no extra words:\n代码文件夹\nSlack\nLinear\n浏览器\nGit 历史\n汇成 HTML 报告\n\nLayout:\n数据摄取架构图：多源上下文流入 Claude Code，再输出 HTML 报告页面。\n\nVisual style:\n开发者架构图，像旧式系统手册中的数据管线；节点带像素图标，线条清楚。\n\nAdditional image direction:\n制作一张架构图幻灯片：左侧六个数据源节点分别是代码文件夹、Slack、Linear、浏览器、Git 历史、MCP；所有节点通过管线流入中央 Claude Code 引擎；右侧输出一个 HTML 报告页面，页面内有图表、分类卡片和摘要。整体像复古计算机系统图。\n\nRequirements:\n- Canvas: 1536x864 landscape presentation slide.\n- Generate one slide only, not a contact sheet and not multiple slide candidates.\n- Make it presentation-ready, high-sensibility, and coherent with the chosen style template.\n- Make it visually finished, not a sparse wireframe or placeholder diagram.\n- Use the strongest signature elements of the style template: palette, typography, composition language, icon/illustration treatment, and editorial rhythm.\n- Keep all visible text readable at presentation distance.\n- Use low text density, strong hierarchy, and source-grounded diagrams, editorial composition, or template-specific visuals.\n- Do not add markdown symbols, fake logos, watermarks, signatures, UI browser chrome, or extra captions.\n- Match the source/user instruction language for all visible slide text and speaker-facing copy.","slideNumber":7,"visibleText":["代码文件夹","Slack","Linear","浏览器","Git 历史","汇成 HTML 报告"],"visualStyle":"开发者架构图，像旧式系统手册中的数据管线；节点带像素图标，线条清楚。","speakerNotes":"作者解释了为什么要用 Claude Code 生成 HTML，而不是只用网页版 Claude 或 Claude Design。关键原因是 Claude Code 能摄取庞大的上下文。例如，作者让 Claude Code 自动遍历电脑里的代码文件夹，找出由它生成的 HTML 文件，分组归类，再生成一个新 HTML 页面，用图表展示每类文件的特征。原文还提到 Claude Code 可以通过 MCP 接入 Slack、Linear 等上下文，也能结合浏览器和 Git 历史记录。","revisedPrompt":"Create a single 16:9 presentation slide image, 1536x864, in the dominant style of Neo-Retro Dev Deck / Pixel-Infographic Editorial: light cream engineering notebook grid background, thick black borders, stacked modular blocks, retro-computing manual vibe, pixel-art icons, hot pink / bright yellow / cyan palette, confident editorial composition, slightly rebellious startup-dev aesthetic.\n\nSlide topic: data ingestion architecture showing many context sources flowing into a Claude Code engine and then into an HTML report page.\n\nComposition:\n- Left side: six source nodes arranged vertically or in a staggered cluster, each in a thick black bordered box with one dominant color block and a pixel icon. The only visible text on the slide must be exactly these Chinese lines, one per source/output box, and no other words anywhere:\n代码文件夹\nSlack\nLinear\n浏览器\nGit 历史\n汇成 HTML 报告\n- These text lines should be large, bold, highly readable, and each placed next to or inside the corresponding node boxes.\n- The source nodes visually represent: code folder, Slack chat, Linear task card, browser window, Git history timeline, and MCP as an unlabeled small pixel chip/connector icon if needed, but do not add any extra visible label text.\n- All source pipes/flow lines should move from the left nodes into a central engine.\n\nCenter:\n- A large central retro machine / engine / Claude Code core, drawn like an old system manual diagram, with pixel-art circuitry, gears, and a bold hot-pink or yellow core. No text label on the engine.\n- Multiple clear pipes / arrows converge into this engine from the left. Use black lines with cyan and pink accents.\n\nRight side:\n- Output a finished HTML report page shown as a large framed browser-like page, but without browser chrome or any text labels.\n- Inside the report page, show a polished editorial layout made of abstract charts, category cards, summary blocks, tiny graph bars, and data chips, all with black outlines and bright accent colors. It should feel like a real report page, visually rich, but use no extra readable text.\n\nOverall style:\n- Looks like a retro computer system diagram from an old technical manual, upgraded with modern AI developer deck energy.\n- Clear pipeline, modular blocks, slight overlaps, thick black outlines, crisp pixel-art icons, strong hierarchy, low text density, cohesive and presentation-ready.\n- No gradients, no photorealism, no soft shadows, no extra captions, no watermark, no logo, no UI chrome, no markdown symbols.\n- Keep the slide clean but visually full, with strong editorial rhythm and obvious left-to-right flow from inputs to engine to output report.\n- Ensure the only visible text is exactly the six lines listed above and nothing else.","storageFileId":"ja8mrrewgnt58dxtonguo9bt-14c485624fc4c17a213467f9be81e1f6"},{"size":"1536x864","model":"gpt-image-2","title":"从最简单的提示词开始","layout":"收束页。中间是一条最短提示词，周围浮现四类使用场景：需求计划、代码审查、设计原型、报告学习。","status":"completed","message":"不需要复杂设置，只要明确这个 HTML 制品要做什么。","imageUrl":"https://cdn.drillso.com/generated/drill/l51egrv6udsur0l6d1v4e54m-4fe674822c333cd24d4f75a03a6bbb4e.png","storageKey":"generated/drill/l51egrv6udsur0l6d1v4e54m-4fe674822c333cd24d4f75a03a6bbb4e.png","imagePrompt":"Create exactly one complete presentation slide image.\n\nUse the following NotebookLM / Kael style prompt as the dominant art direction. Follow it closely.\n\nSTYLE TEMPLATE START\nOverall style name: Neo-Retro Dev Deck / Pixel-Infographic Editorial.\n\nCore visual identity:\n- Retro-futuristic, developer-centric, editorial infographic style.\n- Feels like 90s computer manuals mixed with modern AI dev tools marketing.\n- Pixel art meets startup slide deck.\n- Mood: confident, playful, opinionated, slightly rebellious.\n- Builders explaining the future, not selling fluff.\n\nCanvas and background:\n- Use a light cream or off-white grid paper background.\n- Add subtle square grid lines like an engineering notebook.\n- Slides should feel like annotated engineering notes, not corporate PPTs.\n\nTypography:\n- Primary headline: bold, heavy geometric sans serif, black text, slightly condensed.\n- Headlines may mix the requested language and English.\n- English sub-labels sit under requested-language titles in small clean type.\n- Use huge bold headline blocks, medium subtitles, and small explanatory captions below icons or boxes.\n\nStrict color palette:\n- Hot pink for agent, brain, intelligence concepts.\n- Bright yellow for editor, code, and tools.\n- Cyan or light blue for browser, web, and execution.\n- Black for text and borders.\n- White or cream for background.\n- Each section should have one dominant color block.\n\nLayout language:\n- Stacked modular blocks.\n- Rectangles with thick black borders.\n- Slight intentional overlaps and collage-like assembly.\n- Horizontal section header bars.\n- Card structures for steps, evolution, layers.\n- Controlled imperfection: assembled, not perfectly sterile.\n\nIconography and graphics:\n- Pixel-art style icons: rocket, robot, agent, gear, code brackets, browser window, chat bubbles.\n- Icons should look low-resolution, 8-bit or 16-bit inspired, flat colors, black outline.\n- Decorative elements: small gears, arrows, chevrons, pixel sparks, motion lines.\n\nContent patterns:\n- System architecture slides: stacked layers, each with one color, one icon, one bold title, one short line.\n- Evolution slides: left-to-right progression, each step in its own box; final step is larger and more colorful.\n- Manifesto slides: one huge headline in a boxed frame, minimal text, playful icons around it.\n\nTone:\n- Short, declarative, slightly opinionated.\n- Good: Agents execute tasks autonomously. Coding enters the agent era.\n- Bad: Empowering users with cutting-edge solutions.\n\nAvoid gradients, realistic photos, soft shadows, corporate templates, and quiet minimalism.\nGenerate cohesive multi-slide visuals with consistent grid background, color usage, icon style, and typography hierarchy.\nSTYLE TEMPLATE END\n\nDeck title: HTML：AI 智能体输出的新画布\nDeck summary: 这套短演示面向使用 Claude Code 或类似 AI 智能体的开发者、产品和技术团队，围绕“为什么 HTML 正在比 Markdown 更适合作为复杂 AI 输出格式”展开：从信息密度、可读性、分享、交互、数据摄取到实际使用场景。\nDeck format: presenter_slides\nChosen style: Neo-Retro Dev Deck / Pixel-Infographic Editorial\n\nSlide 8: 从最简单的提示词开始\nMain message: 不需要复杂设置，只要明确这个 HTML 制品要做什么。\n\nVisible text must be exactly these lines, with no extra words:\n给我做一个 HTML 文件\n生成一个 HTML 制品\n先从简单提示词开始\n\nLayout:\n收束页。中间是一条最短提示词，周围浮现四类使用场景：需求计划、代码审查、设计原型、报告学习。\n\nVisual style:\n像素风结尾海报，中心是命令行输入框，周围是四个应用场景小窗口。\n\nAdditional image direction:\n设计一张收束幻灯片：中央是一条大号命令行输入框，文字是 给我做一个 HTML 文件。四周分布四个小窗口，分别表现需求与计划、代码审查、设计原型、报告与学习。每个窗口只用简短中文标签和小图标，不要拥挤，形成从一个简单提示词扩展到多个工作流的感觉。\n\nRequirements:\n- Canvas: 1536x864 landscape presentation slide.\n- Generate one slide only, not a contact sheet and not multiple slide candidates.\n- Make it presentation-ready, high-sensibility, and coherent with the chosen style template.\n- Make it visually finished, not a sparse wireframe or placeholder diagram.\n- Use the strongest signature elements of the style template: palette, typography, composition language, icon/illustration treatment, and editorial rhythm.\n- Keep all visible text readable at presentation distance.\n- Use low text density, strong hierarchy, and source-grounded diagrams, editorial composition, or template-specific visuals.\n- Do not add markdown symbols, fake logos, watermarks, signatures, UI browser chrome, or extra captions.\n- Match the source/user instruction language for all visible slide text and speaker-facing copy.","slideNumber":8,"visibleText":["给我做一个 HTML 文件","生成一个 HTML 制品","先从简单提示词开始"],"visualStyle":"像素风结尾海报，中心是命令行输入框，周围是四个应用场景小窗口。","speakerNotes":"原文最后特别强调，不必把这件事做成复杂的 /html 技能指令。你可以直接像平时聊天一样告诉 Claude：给我做一个 HTML 文件，或者生成一个 HTML 制品。真正的诀窍是清楚自己希望这个制品做什么，以及你会如何使用它。可以先从简单提示词开始，再逐渐探索适合自己场景的模板。","revisedPrompt":"Create exactly one complete presentation slide image, landscape 1536x864, as a finished Neo-Retro Dev Deck / Pixel-Infographic Editorial slide. Overall feel: retro-futuristic developer-centric editorial infographic, 90s computer manual mixed with modern AI dev tools marketing, pixel art meets startup slide deck, confident playful opinionated slightly rebellious.\n\nBackground: light cream/off-white engineering notebook paper with subtle square grid lines across the entire slide. Thick black borders, stacked modular blocks, slight intentional overlaps, collage-like assembly, controlled imperfection. No gradients, no realistic photos, no soft shadows, no corporate template feel.\n\nTitle/content direction: 收束页. Centerpiece is a large command-line input box with thick black border, bright yellow fill or cream with yellow highlight, slightly pixelated terminal look. Inside the main input box, the only central large text is exactly: 给我做一个 HTML 文件. Make it bold, heavy geometric sans serif, black, slightly condensed. Nearby small sublabel in English is allowed but keep text density low.\n\nAround the center, place four small window cards evenly distributed with plenty of breathing room, each a pixel-art mini window with thick black border and one dominant accent color. Each window has a short Chinese label and a tiny icon only, representing:\n1) 需求与计划 — icon: checklist / clipboard / gears\n2) 代码审查 — icon: code brackets / magnifier / bug\n3) 设计原型 — icon: layout wireframe / pencil / cursor\n4) 报告与学习 — icon: book / chart / lightbulb\nEach window should feel like a distinct workflow orbiting the main prompt. Use hot pink for agent/brain/intelligence concepts, bright yellow for editor/code/tools, cyan/light blue for browser/web/execution, black text and borders, cream background. Decorative pixel sparks, arrows, motion lines, tiny gears. Strong editorial rhythm, not crowded.\n\nVisible text must be exactly these lines and no extra words anywhere else:\n给我做一个 HTML 文件\n生成一个 HTML 制品\n先从简单提示词开始\n\nUse those two additional lines as smaller supporting text blocks, placed cleanly in the composition. Keep all text readable at presentation distance. Ensure no extra captions or labels beyond these exact lines. No fake logos, no watermarks, no browser chrome, no markdown symbols.\n\nTypography hierarchy: huge bold headline block for the main prompt, medium subtitle blocks for the two supporting lines, small clean type in window cards if needed but avoid adding any text beyond the allowed lines. Pixel-art style icons, flat colors, black outline, 8-bit/16-bit inspired. Presentation-ready and cohesive, one single slide only.","storageFileId":"l51egrv6udsur0l6d1v4e54m-4fe674822c333cd24d4f75a03a6bbb4e"}],"styleId":"neo_retro_dev","summary":"这套短演示面向使用 Claude Code 或类似 AI 智能体的开发者、产品和技术团队，围绕“为什么 HTML 正在比 Markdown 更适合作为复杂 AI 输出格式”展开：从信息密度、可读性、分享、交互、数据摄取到实际使用场景。","audience":"使用 Claude Code、AI Agent 或 AI 辅助开发工作流的开发者、产品经理、技术负责人和团队协作者","imageSize":"1536x864","imageModel":"gpt-image-2","plannerModel":"gpt-5.5"},"children":[]},"breadcrumbs":[{"id":"bcbe502f-a390-42d7-b217-35df6d75646b","slug":"使用-claude-code：html-难以置信的奇效译-bcbe502f","title":"使用 Claude Code：HTML 难以置信的奇效【译】","type":"page","url":"https://drillso.com/en/share/sessions/ESSwPpca9yBg/%E4%BD%BF%E7%94%A8-claude-code%EF%BC%9Ahtml-%E9%9A%BE%E4%BB%A5%E7%BD%AE%E4%BF%A1%E7%9A%84%E5%A5%87%E6%95%88%E8%AF%91-bcbe502f","agentUrl":"https://drillso.com/en/share/sessions/ESSwPpca9yBg/agent.json?node=%E4%BD%BF%E7%94%A8-claude-code%EF%BC%9Ahtml-%E9%9A%BE%E4%BB%A5%E7%BD%AE%E4%BF%A1%E7%9A%84%E5%A5%87%E6%95%88%E8%AF%91-bcbe502f"}],"parent":{"id":"bcbe502f-a390-42d7-b217-35df6d75646b","slug":"使用-claude-code：html-难以置信的奇效译-bcbe502f","title":"使用 Claude Code：HTML 难以置信的奇效【译】","type":"page","url":"https://drillso.com/en/share/sessions/ESSwPpca9yBg/%E4%BD%BF%E7%94%A8-claude-code%EF%BC%9Ahtml-%E9%9A%BE%E4%BB%A5%E7%BD%AE%E4%BF%A1%E7%9A%84%E5%A5%87%E6%95%88%E8%AF%91-bcbe502f","agentUrl":"https://drillso.com/en/share/sessions/ESSwPpca9yBg/agent.json?node=%E4%BD%BF%E7%94%A8-claude-code%EF%BC%9Ahtml-%E9%9A%BE%E4%BB%A5%E7%BD%AE%E4%BF%A1%E7%9A%84%E5%A5%87%E6%95%88%E8%AF%91-bcbe502f"},"children":[],"fullTree":null,"warnings":[],"truncated":false}