东方古典编辑式设计 Skill

目标

生成精致、克制、可阅读的中文专题网页。融合新中式美学、杂志编辑式排版和现代网页交互。内容优先，不堆砌传统纹样。

工作流程

1. 理解内容：确定主题、读者、章节、关键事件、人物、因果链和引用。
2. 规划信息架构：封面摘要 → 核心观点 → 章节正文 → 时间轴/关系图/对照表 → 结论。
3. 按 references/design-system.md 实现设计令牌、字体、版式、组件。
4. 输出单文件 HTML，CSS 和 JS 内嵌；不依赖构建工具。外部字体仅作为渐进增强，必须提供系统字体回退。
5. 检查移动端、键盘操作、对比度、长文行宽、表格横向滚动、折叠控件、离线可用性。

视觉约束

• 主背景宣纸米白；深墨绿为结构色；朱砂红只点缀重点；古铜金用于细线与序号。
• 宋体标题、黑体正文；正文宽度建议 720–820px，行高 1.85–2.0。
• 章节上下留白充分，少用厚重阴影；边框轻、卡片少、图文有节奏。
• 不使用大面积仿古纹理、龙纹、祥云、卷轴、浮夸动画。
• 不用色彩代替文字传达含义；保持 AA 级别对比度。

内容准确性

• 人物关系与事件不得凭空补造；区分原著叙述、影视改编和个人分析。
• 引文必须核实；无法核实时改为转述，不能伪装成原文。
• 可能剧透时设置可展开的剧透区域。

交互与实现

• 目录锚点、当前章节标识、阅读进度、返回顶部。
• 优先使用原生 <details> / <summary> 做折叠。
• JS 仅用于增强；禁用 JS 时正文仍可阅读。
• 尊重 prefers-reduced-motion；移动端导航简化。
• 所有控件有可见焦点态和语义标签。

交付

• 默认生成一个可直接打开的 .html 文件。
• 在交付前自检：无横向溢出、无断链、无空白章节、无未定义变量、无占位文案。