---
title: 设计规范 · 递归客 diguike
url: https://diguike.dev/system
author: 递归客 (diguike)
---

# 设计规范

纸白、墨黑、桌面灰，橙色做批注，绿色表示已上线。整站只用这一套。

## 规矩

- 项目用能操作的界面小样展示，不用文字去描述它能做什么。
- 橙色是铅笔：当前选中、在做、画线。绿色是图章：已上线、完稿。
- 同一件事全站只说一次，其他地方放链接。
- 标题用宋体，英文用 Source Serif，正文用黑体；等宽字只用在代码上。
- 不做循环动画；悬停只改下划线和阴影，元素本身不动；切换状态时高度不变。

## 颜色

墨色和灰色占绝大部分，橙和绿加起来 4% 左右。

纸面

--bg · #fbfbfa

页面的底

桌面

--desk · #ecece9

展台、落款区

纸

--sheet · #ffffff

卡片、稿子

墨

--ink · #141414

文字、主按钮

淡墨

--ink-soft · #55554f

次级文字

更淡的墨

--ink-faint · #6b6b64

日期、标签；桌面灰上 4.5:1

橙色铅笔

--pencil · #b04a16

选中、在做；纸面 5.3:1

铅笔线

--pencil-mark · #e0682e

画在纸上的线，不放文字

绿色图章

--stamp · #2a6e45

已上线、完稿；纸面 5.9:1

便利贴

--sticky · #fff1a1

一屏最多一张

大致用量：纸 62% · 桌面 18% · 墨 16% · 橙 2.5% · 绿 1.5%

## 字体

中文标题用宋体（Mac 上是系统自带的宋体，其他系统用思源宋体），正文用系统黑体。

.display · 宋体 900 · 40–76px · 读源码，写 Agent

.h1 · 宋体 900 · 34–52px · 财务自由挑战赛

.h2 · 宋体 800 · 26–36px · 三种玩法

.h3 · 宋体 800 · 20px · KeepMyMacAwake

.latin · 斜体衬线 · FIRE Challenge

.lede · 黑体 16–18px · 行高 1.85 · 几个 AI Agent 当玩家打现金流桌游，比谁先让被动收入超过支出。

body · 黑体 16px · 行高 1.75 · 正文。每本书都从一个开源项目的源码读起。

.meta · 13px · 网页游戏 · Hono · React 19

.mono · 代码 · npm run test:save

.sticky · 楷体 · 只在便利贴上 · 中间这本被做成了官方入门课。

## 基础组件

按钮、图章、状态、链接、标签页、规格表、数据表。

.btn · .btn.ghost · .btn.sm

去玩一局 · 项目详情 · 下载 · 源码

.stamp · .status · .link

原项目作者推荐

已上线

开源

写作中

- [全部书目 →](https://diguike.dev/#)
.tabs

.spec · 规格表

- **平台**
  macOS 14+
- **版本**
  0.2.1 体验版
- **许可**
  MIT · Swift
.table · 数据表

| 名称 | 类型 | 状态 | 技术 | 许可 |
| KeepMyMacAwake | 菜单栏工具 | 开源 | Swift | MIT |
| WorkBuddy School | 图解教程 | 写作中 | Next.js · Nextra | 在线样章 |

## 桌面、纸和便利贴

灰色桌面是展台；东西放在纸上，纸可以叠几张；批注写在便利贴上。

.cover

一张纸 · .sheet.stack

底下叠着两张，像一叠稿子。

便利贴 · 批注写在这里，一屏最多一张。

.sticky

## 项目实物

每个项目一个能操作的小样，数据取自项目源码。加新项目时照着做一个。

你是 **三甲医生**，现金 ¥23,850，月现金流 +8,850 · 猜中 0 / 0

大买卖 · 资产 · 1 / 5

#### 整层长租公寓

包下写字楼一整层，隔成 20 间公寓，签 8 年。

首付 · ¥200,000

每月 · +10,000

和教科书不一样。你选了「不买」

教科书机器人**买 · 首付回报率 60% ≥ 20%，借款后每月净 +7,345**

Agent**这一局阿杰买下了它。**

财务自由挑战赛网页游戏

未开启

1 小时

1 小时 · 开盖 · 仅接电 · 自动熄屏

KeepMyMacAwakemacOS 菜单栏工具

CUDA

/ˈkuːdə/

- **谐音**
  库达
- **意思**
  NVIDIA 的 GPU 并行计算平台
- **别念成**
  不是按字母 C-U-D-A
AI 发音速查网页词典

Claude Code 环境体检 · 每条带证据等级

按官方优先级判断实际生效的认证来源，检查订阅凭证有没有被送到非官方端点。

$ claudedoctor check --net --why

克劳德医生命令行工具

飞书任务 · AI 队列 · 第 0 轮

调研 X 写个总结 · 排队

[每日] 周报撰写 · 排队

文章发布 · 排队

larkaq run

lark-ai-task-queue自动化

3 家符合 · 示意

CoffeesMap地图

WorkBuddy School图解教程

## 版块

格子、数据、编号卡片、决策卡。

.rule2 + .cells

### 其他项目

#### 克劳德医生

给 Claude Code 做封禁风险体检。

#### 工具栈

每类只选一两个。

#### CoffeesMap

找安静的咖啡馆。

.stats

16 · 本书

281 · 章

315 · 个术语

.steps3 · .decision

#### 亲自下场

你和 3 个 Agent 同桌。

#### 围观

4 个 Agent 对打。

**激进派** · 摘自对局

每月净多 5,180，冲。