设计导览
本页只承担入口职责：帮助快速理解 Scribdown 的视觉方向、阅读顺序和设计边界。具体数值、组件规格和执行步骤请进入对应文档。
先看什么
| 目的 | 文档 |
|---|---|
| 确认整体视觉方向 | 视觉基线 |
| 查颜色、字体、间距、动效 | Token 系统 |
| 查组件职责与交互规则 | 组件规范 |
| 按规范出图 | Pencil 执行规范 |
| 使用统一正文样例 | Markdown 样例 |
一句话定义
Scribdown 的 UI 目标是：用克制的手绘感提升 Markdown 阅读体验，而不是让装饰压过内容本身。
核心判断
- 正文内容优先于壳层装饰
- 手绘感来自线条、纹理、圆角和节奏，不来自高噪声效果
- 浏览器插件与 VS Code 预览保持同一视觉语言
- 状态反馈必须清楚，但不能破坏正文阅读节奏
- 所有细节最终回到 Token 和组件规范，不以参考图替代规范
视觉基线
本节记录基于 Markdown 样例 生成的 Image2.0 示例图，用作浅色主题预览画板的方向参考。后续 Pencil 出图和 UI 实现应提取其中的风格原则，不要求逐像素复刻。
这张图主要看什么
- 页面壳层要轻，正文列要稳
- 标题、段落、引用、代码、媒体之间要有清楚层级
- 图片失败、Mermaid 错误、HTML 过滤等异常态要自然融入正文
- 长文档场景下，表格、代码块和媒体不能把阅读节奏打散
不要从这张图里学什么
- 不逐像素复刻手写笔迹、插图内容或窗口按钮
- 不把图里的临时颜色直接当成最终规范
- 不为了贴近参考图而破坏 Token、组件规则或正文可读性
宿主适配
- 浏览器插件优先处理嵌入场景兼容性
- VS Code 优先处理窄栏阅读和主题映射
- 宿主差异只放在壳层和能力开关，不改正文视觉规则