4.1 KiB
4.1 KiB
这份文档专门定义了你所偏好的 “Clean Technical” (极简高密度技术风格) 的视觉与交互规范。你可以将此文档交给 LLM（如 GPT-4o 或 Claude），它将能够根据这些定义精准地生成符合你审美的 HTML 页面或 CSS 代码。
🎨 ChatDigest Pro 视觉设计规范 (Design System)
1. 核心设计哲学 (Design Philosophy)
- 高信息密度 (High Density)：在有限的屏幕空间内展示尽可能多的结构化信息，减少不必要的留白。
- 技术简报感 (Technical Briefing)：模仿 GitHub、Linear 或 Notion 的 UI，使用极细线条和精致小字，营造专业、严谨的工具感。
- 纸质印刷感 (Print-like Precision)：采用浅色背景与高对比度文字，确保长截图在移动端依然清晰可读。
2. 基础样式定义 (Base Styles)
2.1 色彩系统 (Color Palette)
- 背景色 (Background):
#F8FAFC(Slate 50) - 柔和的浅灰，减少视觉疲劳。 - 主体白 (Surface):
#FFFFFF- 所有的信息卡片背景。 - 主文字 (Primary Text):
#334155(Slate 700) - 保证阅读舒适度。 - 强调文字 (Heading):
#0F172A(Slate 900) - 用于标题，增加层级感。 - 边框色 (Border):
#F1F5F9(Slate 100) - 极细 1px 实线。 - 功能色 (Accents):
- 技术蓝:
#2563EB(Blue 600) - 成功绿/结论:
#22C55E(Green 500) - 预警/交易红:
#F43F5E(Rose 500)
- 技术蓝:
2.2 字体与排版 (Typography)
- 字体栈:
Inter,PingFang SC,System-ui,sans-serif。 - 字号层级:
- 正文 (Body):
11px或12px(极致紧凑)。 - 标签/分类 (Tags):
9px或10px(全大写，加宽字间距)。 - 话题标题 (Topic Title):
13px或14px(加粗)。 - 代码/数据 (Mono):
JetBrains Mono或SF Mono(用于 ID、价格、链接)。
- 正文 (Body):
3. 组件规范 (Component Specifications)
3.1 移动端容器 (Container)
- 固定宽度:
420px(针对手机屏幕截图优化的黄金宽度)。 - 阴影: 仅使用极弱的
shadow-sm，或直接弃用阴影改用细边框。
3.2 话题卡片 (Topic Card) - 三段论布局
- 结构:
- Background: 灰度文字，提供上下文。
- Key Points: 列表形式，左侧保留 10px 缩进。
- Conclusion: 必须使用独立的浅绿色背景块（
#F0FDF4）和绿色左边框（2px），突出最终结论。
3.3 个人雷达 (Radar Tags)
- 样式: 药丸状标签 (Pill-shaped)，带 1px 浅色边框。
- 高亮逻辑: 命中 Liuwei 个人关键词时，使用彩色背景；非关键背景为 Slate 100。
3.4 资源库 (Resource Hub)
- 交互感: 模仿 GitHub 仓库列表，左侧带类型图标，右侧带极小箭头。
- 列表密度: 行高控制在
1.2，去除多余内边距。
3.5 双栏小挂件 (Side-by-side Widgets)
- 应用场景: 交易信息 (Marketplace) 与 未解决问题 (Unresolved Pool) 并排显示。
- 视觉特征: 使用垂直分割线或 1px 边框盒模型，通过
grid-cols-2节省垂直空间。
3.6 核心知识点 (Knowledge Highlight)
- 反差设计: 采用深色背景（
#0F172A）与亮色文字，作为长图中的“视觉焦点”，沉淀最高价值的技术结论。
4. 渲染要求 (Rendering Requirements)
- Tailwind 优先: 建议直接使用 Tailwind CSS 类名以保持样式代码轻量。
- 截图友好性:
- 确保所有文本均未设置
line-clamp(不截断文字)。 - 渲染时禁用所有动画效果，防止截图出现残影。
- 图片资源 (如贡献者头像) 需设置圆角且带 2px 白色描边。
- 确保所有文本均未设置
如何给 LLM 发送指令？
Prompt 示例： “请参考以上 ChatDigest Pro 视觉设计规范，为我生成一个 HTML 模板。 页面需要体现高密度的小字号风格，严格遵循 420px 宽度，并包含：顶部统计、个人雷达标签、带有『背景-要点-结论』三段论的话题卡片、资源列表、以及一个深色背景的核心知识点模块。 请使用 Tailwind CSS 实现。”