1
# Design System
2

3
## Overview
4

5
这是一个面向开发者的个人技术知识库。
6

7
视觉方向：
8
- content-first
9
- calm
10
- technical
11
- editorial
12
- high readability
13
- restrained decoration
14

15
拒绝：
16
- 紫蓝渐变
17
- 大量 Glassmorphism
18
- 页面全部 Card 化
19
- 巨大圆角
20
- 无意义发光
21
- 过度动画
22

23
## Colors
24

25
Background: #F7F6F2
26
Surface: #FFFFFF
27
Text Primary: #1D1D1F
28
Text Secondary: #686868
29
Border: #E4E1DA
30
Accent: #C65D32
31

32
## Typography
33

34
Article:
35
- Serif / readable long-form font
36

37
UI:
38
- Clean Sans Serif
39

40
Code:
41
- Monospace
42

43
## Layout
44

45
Article max-width: 760px
46
App shell max-width: 1440px
47
Sidebar: 260px
48

49
## Shapes
50

51
Buttons: 6px
52
Inputs: 6px
53
Cards: 8px
54
Avoid 16px+ radius unless there is a clear reason.
55

56
## Components
57

58
Article cards should behave like list rows rather than floating cards.
59

60
## Do's and Don'ts
61

62
DO:
63
- prioritize reading
64
- use whitespace for hierarchy
65
- maintain visible information density
66

67
DON'T:
68
- wrap every section in a card
69
- add badges only for decoration

1
开始 UI 工作之前先完整读取 DESIGN.md。
2

3
DESIGN.md 是本项目视觉设计的 Source of Truth。
4

5
实现页面时必须遵循其中：
6
- Typography
7
- Color
8
- Spacing
9
- Layout
10
- Component
11
- Motion
12
- Anti-pattern
13

14
如果当前代码和 DESIGN.md 冲突：
15
先指出冲突，不要自行覆盖 DESIGN.md。

1
我要设计一个个人技术知识库。
2

3
主要内容：
4
- Java 后端
5
- AI Coding
6
- Windows
7
- Linux / Server
8
- 网络与代理
9
- 开发工具
10

11
用户主要行为：
12
1. 浏览分类
13
2. 搜索文章
14
3. 阅读长篇技术文档
15
4. 查看代码块
16
5. 在不同技术主题之间跳转
17

18
目前我没有视觉方向。
19

20
暂时不要收敛成一个方案。
21

22
请探索 3 个明显不同的设计方向：
23

24
A. 技术工具 / Developer Tool 风格
25
B. Editorial / 长文阅读风格
26
C. 现代 Product / SaaS 风格
27

28
三个方向必须在：
29
Typography
30
Color
31
Navigation
32
Density
33
Surface
34
Article Layout
35
Code Block
36
Spacing
37
Motion
38

39
方面有明显区别。
40

41
避免：
42
- 紫蓝渐变
43
- 大量卡片
44
- Glassmorphism
45
- 巨型圆角
46
- 典型 AI SaaS Landing Page
47

48
先做视觉探索，不要急着完成最终页面。

1
读取 DESIGN-REFERENCE.md。
2

3
这是视觉参考，不是需要复制的网站。
4

5
先分析其中：
6
- Color
7
- Typography
8
- Spacing
9
- Layout
10
- Surface
11
- Border
12
- Shadow
13
- Radius
14
- Navigation
15
- Content hierarchy
16

17
结合当前产品实际需求，
18
重新生成本项目自己的 DESIGN.md。
19

20
允许继承其设计语言，
21
禁止复制：
22
- 品牌
23
- 文案
24
- Logo
25
- 独特业务组件
26
- 页面内容

1
当前项目没有明确 UI 方向。
2

3
禁止直接写页面。
4

5
先使用 Refero 做设计研究。
6

7
项目类型：
8
个人技术知识库。
9

10
重点页面：
11
- 首页
12
- 分类页
13
- 文章详情
14
- 搜索
15
- 移动端文章阅读
16

17
研究任务：
18

19
1. 搜索真实 Documentation / Developer Tool / Knowledge Base 产品。
20
2. 至少分析 10 个相关页面。
21
3. 不要只分析 Landing Page。
22
4. 优先查看：
23
   - Sidebar
24
   - Article layout
25
   - Search
26
   - Table of contents
27
   - Code blocks
28
   - Mobile navigation
29
5. 提取共同模式。
30
6. 再提出 3 个视觉方向。
31

32
暂时不要修改代码。

1
普通 Claude
2
→ 安全
3
→ 常规
4
→ AI SaaS
5
→ Inter
6
→ 蓝紫渐变
7
→ Card
8

9
frontend-design
10
→ 先决定明确 aesthetic direction
11
→ Typography
12
→ Color
13
→ Composition
14
→ Motion
15
→ Visual details

1
使用 frontend-design skill。
2

3
这是一个新的技术知识库项目。
4

5
先不要实现。
6

7
读取：
8
- PRODUCT.md
9
- DESIGN.md
10
- 当前页面代码
11

12
先总结：
13
1. 产品是什么
14
2. 用户主要任务
15
3. 当前视觉方向
16
4. 当前 DESIGN.md 最重要的 10 条约束
17

18
然后设计 Article Detail 页面。
19

20
要求：
21
- DESIGN.md 是视觉 Source of Truth
22
- 内容阅读优先
23
- 不要为了视觉效果降低信息密度
24
- 不要引入与 DESIGN.md 冲突的新颜色
25
- 不要自行换 Typography
26
- 不要添加无意义 Card / Badge / Gradient
27

28
先给页面结构方案，
29
确认结构合理后再实现。

1
使用 frontend-design skill。
2

3
当前项目没有 DESIGN.md，也没有确定的 UI 方向。
4

5
暂时不要写代码。
6

7
请根据：
8
- 产品属性
9
- 目标用户
10
- 页面任务
11
- 内容密度
12

13
提出 3 个明显不同的视觉方向。
14

15
三个方向不能只是换颜色。
16

17
每个方向分别定义：
18
- Design philosophy
19
- Typography
20
- Color
21
- Layout
22
- Density
23
- Navigation
24
- Surface
25
- Radius
26
- Shadow
27
- Motion
28
- Anti-pattern
29

30
完成后等待选择。

1
/impeccable init
2
/impeccable craft
3
/impeccable shape
4
/impeccable document
5
/impeccable critique
6
/impeccable audit
7
/impeccable polish
8
/impeccable typeset
9
/impeccable layout
10
/impeccable colorize
11
/impeccable animate
12
/impeccable harden
13
/impeccable quieter
14
/impeccable bolder
15
/impeccable distill

1
使用 Impeccable 对当前首页做 critique。
2

3
暂时不要修改代码。
4

5
从以下维度逐项检查：
6
- 页面视觉焦点
7
- Typography hierarchy
8
- Layout rhythm
9
- Spacing
10
- Alignment
11
- Color
12
- Contrast
13
- Information density
14
- Component repetition
15
- Card nesting
16
- Radius
17
- Shadow
18
- Decorative elements
19
- Mobile
20
- AI-generated UI patterns
21

22
把问题按：
23
P0 / P1 / P2
24

25
分级。
26

27
每个问题说明：
28
1. 在哪里
29
2. 为什么有问题
30
3. 应该怎么改
31

32
先只输出审查报告。

1
不要自己从零设计 Dashboard Summary Cards。
2

3
使用 21st 搜索现有高质量组件。
4

5
需求：
6
- React
7
- Tailwind
8
- 不要大面积 Gradient
9
- 不要 Glassmorphism
10
- Radius <= 10px
11
- Desktop 信息密度中高
12
- 支持 Dark Mode
13
- Hover 要克制
14

15
先搜索候选。
16

17
给我 3 个方向，
18
暂时不要安装。

1
使用 UI/UX Pro Max。
2

3
项目：
4
个人技术知识库。
5

6
关键词：
7
developer documentation
8
technical editorial
9
content-first
10
calm
11
high readability
12

13
请先生成 design system。
14

15
不要实现页面。
16

17
输出：
18
- 推荐 Style
19
- Color palette
20
- Font pairing
21
- Layout
22
- Density
23
- Effects
24
- Anti-patterns

1
Create three substantially different design directions
2
for a developer-focused personal knowledge base.
3

4
The site contains:
5
- technical articles
6
- category navigation
7
- global search
8
- table of contents
9
- code blocks
10
- dark mode
11

12
Direction A:
13
technical product UI
14

15
Direction B:
16
warm editorial journal
17

18
Direction C:
19
minimal documentation
20

21
Do not just change colors.
22
Change typography, density, navigation,
23
surface treatment and content composition.
24

25
Avoid generic AI SaaS styling.

1
这里是已经确认的 UI 设计。
2

3
不要重新进行视觉设计。
4

5
请分析：
6
- Layout
7
- Font hierarchy
8
- Spacing
9
- Color
10
- Radius
11
- Border
12
- Component structure
13

14
先整理 DESIGN.md，
15
再进行实现。

1
不要复制截图中的：
2
- 品牌
3
- Logo
4
- 文案
5
- 图片素材
6
- 业务内容
7

8
只分析它的设计语言：
9

10
- overall composition
11
- typography hierarchy
12
- spacing rhythm
13
- navigation
14
- surface treatment
15
- border
16
- shadow
17
- radius
18
- information density
19
- responsive behavior
20

21
基于这些规律，
22
重新设计一个个人技术知识库首页。
23

24
技术栈：
25
Next.js + Tailwind + shadcn/ui。

1
这些截图来自不同真实产品的 Settings 页面。
2

3
请做 UX pattern analysis。
4

5
不要评价哪个最好。
6

7
统计和总结：
8
- Sidebar / Tabs 使用方式
9
- Section grouping
10
- Label + description 结构
11
- Toggle placement
12
- Dangerous actions
13
- Save behavior
14
- Mobile behavior
15

16
最后设计适合当前产品的 Settings 信息架构。
17

18
暂时不要处理视觉风格。

1
先从 shadcn Blocks 中寻找一个结构最接近当前需求的 Dashboard。
2

3
不要把它当最终设计。
4

5
它只负责：
6
- layout skeleton
7
- responsive behavior
8
- component structure
9

10
安装后再根据 DESIGN.md 修改：
11
- color
12
- typography
13
- density
14
- border
15
- radius
16
- navigation
17
- charts

1
页面实现完成后不要直接结束。
2

3
使用浏览器实际打开页面。
4

5
检查以下 viewport：
6

7
Desktop:
8
1440 x 900
9

10
Laptop:
11
1280 x 800
12

13
Mobile:
14
390 x 844
15

16
分别截图。
17

18
从截图而不是源码推测视觉问题。
19

20
检查：
21
- hierarchy
22
- alignment
23
- spacing
24
- text wrapping
25
- overflow
26
- content width
27
- navigation
28
- empty space
29
- card density
30
- mobile stacking
31
- button sizes
32
- code block overflow
33

34
把发现的问题一次汇总。
35

36
然后集中修复一轮。
37

38
修复后最多再进行一次确认截图，
39
不要陷入无限视觉微调。

1
当前任务是设计本项目 UI。
2

3
现在不要写代码。
4

5
先完整分析项目：
6

7
1. 产品是什么
8
2. 谁会使用
9
3. 最主要的 5 个用户任务
10
4. 页面类型
11
5. 内容密度
12
6. 当前技术栈
13
7. 已有组件
14
8. 已有 CSS / Theme
15
9. 是否已经存在 DESIGN.md
16
10. 是否有不能破坏的已有 UI
17

18
输出 UI Design Brief。

1
使用 Refero 搜索：
2

3
developer documentation
4
knowledge base
5
technical editorial
6
content-heavy docs
7

8
至少分析 10 个相关真实页面。
9

10
重点研究：
11
- Navigation
12
- Search
13
- Article
14
- TOC
15
- Code block
16
- Mobile docs
17

18
不要开始 Build。

1
结合：
2
- 当前项目需求
3
- Refero Research
4
- Refero Styles
5
- PRODUCT.md
6

7
提出 3 个明显不同的视觉方向。
8

9
A：
10
Developer Tool
11

12
B：
13
Warm Technical Editorial
14

15
C：
16
Minimal Documentation
17

18
不能只是换颜色。
19

20
分别定义：
21
Typography
22
Color
23
Layout
24
Navigation
25
Surface
26
Density
27
Radius
28
Border
29
Shadow
30
Motion
31
Article
32
Code Block
33
Mobile

1
现在将已确认设计整理为项目根目录 DESIGN.md。
2

3
这份文件是未来所有页面的视觉 Source of Truth。
4

5
需要定义：
6
Overview
7
Colors
8
Typography
9
Layout
10
Elevation & Depth
11
Shapes
12
Components
13
Do's and Don'ts
14
Responsive
15
Motion
16
Accessibility
17

18
不要包含单个页面的临时决定。

1
读取 DESIGN.md。
2

3
使用 frontend-design skill。
4

5
只实现 Article Detail。
6

7
需要包含：
8
- Sidebar
9
- Breadcrumb
10
- Article header
11
- Article content
12
- Code block
13
- TOC
14
- Previous / Next
15
- Mobile layout
16

17
不要同时修改其他页面。

1
当前 Article Detail 已作为 Design Reference。
2

3
接下来扩展到：
4
- 首页
5
- 分类
6
- 搜索
7
- About
8

9
必须继续遵循 DESIGN.md。
10

11
新页面允许解决新的 UX 问题，
12
但不得自行创造新的视觉语言。
13

14
如果 DESIGN.md 不足：
15
先提出 DESIGN.md 补充建议，
16
不要静默新增风格。