这份文档专门定义了你所偏好的 **“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、价格、链接)。

## 3. 组件规范 (Component Specifications)

### 3.1 移动端容器 (Container)
* **固定宽度**: `420px` (针对手机屏幕截图优化的黄金宽度)。
* **阴影**: 仅使用极弱的 `shadow-sm`，或直接弃用阴影改用细边框。

### 3.2 话题卡片 (Topic Card) - 三段论布局
* **结构**: 
    1.  **Background**: 灰度文字，提供上下文。
    2.  **Key Points**: 列表形式，左侧保留 10px 缩进。
    3.  **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 实现。”