Organize content into Reveal.js HTML that can be opened directly, presented, and printed to PDF. Keep a consistent character of pure white background, Chinese editorial typography, and black line art; do not copy specific images from the source PDF. The Chinese character comes from Chinese typography and layout relationships, and is not imposed on the subject matter or medium of the accompanying images.
Opening Choice
If the user has not yet specified, ask only once and wait for the choice:
- Typeface character:
A 思源宋体(the original manuscript direction, humanistic, narrative, editorial) orB 思源黑体(rational, modern, structural). - Chapter illustration method:
A 直接调用生图工具生成章节标题页配图, orB 先给每章配图提示词,由用户确认或自行生成。
When the user has already given a choice, do not ask again. For Songti, prefer Source Han Serif; for Heiti, prefer Source Han Sans, with PingFang as the macOS fallback.
Required Resources
- Before starting design, read references/style-system.md。
- When choosing generated images or prompts, read references/image-prompts.md。
- Use assets/deck-template.html as the Reveal.js starting point.
- When symbols are needed, reuse assets/icons.svg; prefer line art and do not introduce colorful icon libraries.
- In the template,
assets/chapter-01.pngis a path to be generated; first complete the current chapter's image generation or obtain the user's images, then perform browser acceptance checks.
Workflow
- Distill a single core message and 3-5 chapters; each page carries only one main judgment.
- Choose a layout archetype for each page: cover, chapter, framework body, case screenshot, giant sentence, diagram, or closing.
- Use the template CSS tokens to implement the typeface choice; do not mix Songti and Heiti as Chinese body text at the same time.
- Create hierarchy with black-background white-text labels, whitespace, position, and font size; emphasized words should not exceed 12% of the body text.
- First establish a 'chapter visual motif table' for all chapters in the same series with different metaphors, then call the image generation tool according to the user's choice, or output prompts and wait for confirmation. Ordinary body pages should not have decorative images by default.
- Output
index.htmland relative pathassets/; do not output.pptx。 - Keep the template's previous page, next page, page number, dot navigation, index view, and fullscreen controls, and adapt them to this style; do not rely only on the keyboard.
- Check page by page with screenshots in the browser, then deliver the HTML.
Content and Layout Rules
- The canvas is fixed at
1920 × 1080, 16:9; Reveal.js uses explicitwidthandheight。 - Chinese main titles are short, heavy, and can be rotated or set vertically; English is only used as small functional labels or chapter subtitles.
- Chapter pages use 'one generated key visual + vertical title on the right' as the signature composition.
- Body pages use a single thin border and a black tab at the top; the body is usually a 55/45 two-column layout.
- Case pages may include real screenshots, using 1px neutral borders, without device frames or heavy shadows.
- Giant sentence pages keep only one core judgment and one small black label; do not add explanatory decoration.
- The black label and its content share the same alignment axis: black labels for central giant sentences, closing propositions, and framework titles must be visually centered; only metadata or status labels may be left-aligned. It is forbidden to use arbitrary
margin-leftto fake centering. - Charts use thin axes, dashed reference lines, hatching, or dots; do not use gradients, 3D, or colorful legends.
- The footer is locked to a Chinese chapter name with expanded letter spacing + a black-background white-text English subtitle.
- Animations use only brief fades or no transitions; respect
prefers-reduced-motion。
Chapter Illustration Decision
- "Illustration" by default refers to the key visual on each chapter title page, not filling every page with images. Add images to body pages only when there are real cases, data relationships, or explicit user requests.
- When conceptual impact or chapter atmosphere is needed: prioritize generating images, require
#FFFFFFpure white background, clean black line art, no paper texture, no grayscale sketches, no text, no brand marks, and make the composition fit the vertical Chinese title area on the right. Do not impose architecture, baimiao, ink wash, or traditional symbols for the sake of "Chinese style". - Chapter title pages must not use Codex handwritten SVG instead of generated images. When precise relationships or data are needed, native SVG may only be used on body chart pages.
- If the user wants to choose themselves or generate externally: first give 2-3 clearly distinct visual directions for the first chapter; after the user selects one, extend the remaining chapters according to the same series.
- Do not extract or reproduce existing illustrations from the source PDF; design new visual metaphors based on each chapter's argument, and do not let all chapters degenerate into generic flow fields, geometric shapes, or flying birds.
Acceptance
- Check that the font mode matches the user's choice and that the Chinese fallback is complete.
- Check 1920×1080, margins, footer position, vertical writing direction, and long text overflow.
- Check that all images have alt text and that body text and labels have sufficient contrast.
- Check that the central black signature is centered relative to the claim or canvas, and that playback controls are clickable, focusable, and do not cover the footer.
- Check that there are no gradients, glassmorphism, seas of rounded cards, large colorful icons, generic stock photos, or meaningless decorative lines.
- Check that the CDN or local Reveal.js reference is available, and that keyboard navigation, hash, and print styles work properly.
- Finally confirm via browser screenshots that there is no cropping, overlap, orphan lines, or unreadable small text.