Back to Details

explain-visually

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Explain Visually

可视化讲解

Create a human-facing HTML artifact that explains an idea visually. Beauty serves clarity. The reader should understand the idea well enough to retell it.
创建面向用户的HTML制品，以可视化方式讲解某个概念。美观是为了服务于清晰性，读者应能充分理解该概念并进行复述。

Workflow

工作流程

1. Understand

1. 理解阶段

Read the source material. Identify the audience, core idea, moving parts, decisions, tradeoffs, and what the human should remember.
Ground the explanation in facts from the source. Prefer concrete names, paths, commands, interfaces, examples, and observed behavior over positioning language.
Default to explaining for a smart beginner. Define jargon before using it. If a term needs domain context, replace it with plain language or explain it visually.
阅读源材料，明确受众、核心概念、组成部分、决策、权衡点以及用户需要记住的内容。
讲解内容需基于源材料中的事实，优先使用具体的名称、路径、命令、接口、示例和可观察的行为，而非定位性语言。
默认面向有基础的初学者进行讲解。在使用专业术语前先进行定义。如果某个术语需要领域背景知识，可用通俗语言替代或通过可视化方式解释。

2. Outline

2. 大纲阶段

Write the teaching path before building:
  • what the reader should understand
  • the order to explain it
  • which ideas need diagrams
  • what can be omitted
  • which source facts support the explanation
Default teaching path:
  • the simple version
  • the problem
  • the idea
  • how it works
  • a concrete example
  • why it matters
在制作前规划教学路径：
  • 读者需要理解的内容
  • 讲解顺序
  • 需要图表辅助的概念
  • 可以省略的内容
  • 支撑讲解的源材料事实
默认教学路径：
  • 简化版本介绍
  • 问题阐述
  • 核心概念讲解
  • 工作原理说明
  • 具体示例演示
  • 重要性分析

3. Build

3. 制作阶段

Create a responsive HTML explainer. Use Tailwind CSS via CDN for layout and responsive behavior. Use custom CSS only for fonts, theme tokens, diagrams, and small refinements.
Default format: slide-like sections on desktop, readable stacked sections on mobile. Do not preserve a fixed 16:9 frame on mobile.
Use:
  • simple concrete titles
  • short explanatory copy
  • source-grounded statements, not slogans
  • SVG diagrams that teach the idea
  • strong typography, spacing, and visual hierarchy
  • one clear idea per section
创建响应式HTML讲解文档。通过CDN使用Tailwind CSS实现布局和响应式效果。仅在处理字体、主题标识、图表和细微优化时使用自定义CSS。
默认格式：桌面端采用类似幻灯片的分段布局，移动端采用可读性强的堆叠式分段布局。移动端无需保留固定的16:9比例框架。
使用以下元素：
  • 简洁具体的标题
  • 简短的解释性文字
  • 基于源材料的陈述，而非口号
  • 用于讲解概念的SVG图表
  • 清晰的排版、间距和视觉层级
  • 每个段落聚焦一个明确的概念

4. Verify

4. 验证阶段

Run 
browser-verify
before finishing. Check desktop and mobile viewports. Fix overflow, overlap, clipped text, unreadable scale, cramped spacing, and broken responsive layout.
完成前运行
browser-verify
工具。检查桌面端和移动端视图，修复溢出、重叠、文本截断、缩放不可读、间距拥挤以及响应式布局失效等问题。

Style

风格规范

  • Fonts: Bricolage Grotesque for body and UI, Instrument Serif for display.
  • Palette: warm paper background, dark ink, muted rust accent, restrained teal secondary.
  • Think in grids, line height, margins, and visual hierarchy.
  • Keep hero titles restrained. Prefer 
    md:text-7xl
    ; avoid 
    lg:text-9xl
    unless the title is very short.
  • Split the artifact before cramming content.
  • On mobile, use natural-height sections, single-column grids, compact display type, readable text, and diagrams that fit without dominating the section.
  • A mobile hero should feel readable, not like a cropped desktop slide.
  • In SVG diagrams, align text inside shapes deliberately. Use 
    text-anchor
    , 
    dominant-baseline
    , explicit font sizes, and enough padding so labels do not drift, clip, or touch borders.
  • 字体：正文和UI使用Bricolage Grotesque，标题使用Instrument Serif。
  • 配色：暖纸色背景、深墨色文本、柔和锈色强调色、克制的蓝绿色辅助色。
  • 注重网格、行高、边距和视觉层级设计。
  • 主标题保持简洁克制，优先使用
    md:text-7xl
    ；除非标题极短，否则避免使用
    lg:text-9xl
    。
  • 内容过多时拆分文档，避免堆砌。
  • 移动端采用自然高度段落、单列网格、紧凑标题、易读文本，以及适配段落的图表，避免图表占据过多空间。
  • 移动端主标题应易于阅读，而非裁剪后的桌面端幻灯片样式。
  • SVG图表中，文本需与图形精准对齐。使用
    text-anchor
    、
    dominant-baseline
    属性，设置明确的字体大小和足够的内边距，确保标签不会偏移、截断或触碰边框。

Rules

规则要求

  • Explain, do not decorate.
  • Teach before summarizing.
  • Simple words beat abstract titles.
  • Define loaded terms before relying on them.
  • Make factual claims the source material supports.
  • Use concrete names, paths, commands, and examples when they help the reader trust the explanation.
  • Diagrams should make the idea easier to understand.
  • Diagram text must be centered, aligned, and contained inside its shapes.
  • Do not use 
    overflow: hidden
    on content containers to hide layout problems.
  • The artifact fails if the reader cannot explain the idea back.
  • The artifact fails if text overlaps, clips, or overflows.
  • 专注讲解，而非装饰。
  • 先讲解再总结。
  • 简洁词汇优于抽象标题。
  • 在依赖专业术语前先进行定义。
  • 所有事实性表述需有源材料支撑。
  • 当有助于读者信任讲解内容时，使用具体的名称、路径、命令和示例。
  • 图表应简化概念理解难度。
  • 图表中的文本必须居中对齐并包含在图形内部。
  • 不得在内容容器上使用
    overflow: hidden
    来隐藏布局问题。
  • 如果读者无法复述概念，则制品不合格。
  • 如果存在文本重叠、截断或溢出问题，则制品不合格。