个人用 SKILLS
绘图 SKILL 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 # Paper-tone Diagram 学术克制 × 手工纸感 × 编辑设计。回避现代 SaaS 风(饱和蓝、纯白底、阴影泛滥、圆角滥用),把"信息"当作"印刷品"来呈现。适用流程图 / 架构图 / pipeline 示意图,中文友好,可输出 HTML、Excalidraw、SVG。 气质关键词:**安静、考究、可读、不喧哗**。 --- ## 1 · Color Tokens(固定不可改) ``` --ivory: #FAF9F5 主背景(代替纯白) --paper: #FFFFFF 卡片背景 --slate: #141413 主文字(几乎黑但偏暖) --clay: #D97757 唯一强调色 — 关键路径 / 序号 / 斜体 --clay-d: #B85C3E 强调暗色,备用 --oat: #E3DACC 暖灰 — hover / 下划线 --olive: #788C5D 第二色,用量 ≈ clay 的 1/5 --g100: #F0EEE6 最浅灰 — 徽章背景 --g200: #E6E3DA 边框 / 分隔 --g300: #D1CFC5 标准描边 --g500: #87867F 次要文字、Mono 标签 --g700: #3D3D3A 正文次级 ``` 调色法则:**没有冷灰**(所有灰带土黄底);全页只有 clay 一种亮色,占比 < 20%;不用纯黑纯白;olive 仅作分类区分,用量约 clay 的 1/5。 --- ## 2 · Typography(固定) ``` --serif: ui-serif, Georgia, "Times New Roman", Times, serif; --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --mono: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace; ``` | 用途 | 字体 | 字号 | 字重 | 字距 | |---|---|---|---|---| | H1 | serif | clamp(38, 5.4vw, 62)px | **500** | -0.018em | | H2 章节 | serif | 27px | 500 | -0.012em | | 卡片标题 | serif | 19px | 500 | -0.008em | | 正文 lede | sans | 16.5px | 400 | — | | 卡片描述 | sans | 13.5px | 400 | — | | Mono 标签 | mono | 10–13px | 400/600 | 0.08–0.12em | 铁律:serif 标题字重统一 **500**(不要 600/700);H1 用负字距 -0.018em + `max-width:17ch`;斜体词用 `<em>` + clay 色,是页面唯一的"装饰修辞"。 --- ## 3 · Layout ``` .wrap { max-width:1120px; margin:0 auto; padding:0 32px 140px; } ``` - 章节间距 **72px**;header 顶部 80px / 底部 56px;footer 顶部 100px - **50px 悬挂缩进** — 章节标题不缩,介绍与卡片网格 `margin-left:50px` - 卡片网格 `grid-template-columns: repeat(auto-fill, minmax(316px, 1fr)); gap:20px` --- ## 4 · Borders / Radius / Motion - 描边 **1.5px**(HTML) / **1px**(Excalidraw,无 1.5 选项) - 圆角:5px(SVG 内)、6px(tag)、10–14px(卡片)、999px(胶囊) - 动效时长 **120–150ms**(纸面回弹感) - 只用 transform + 颜色 + 阴影,**不缩放、不旋转、不淡入** - 默认 ease,不用 cubic-bezier --- ## 5 · 通用结构 — Vertical Pipeline 流程图 每张图按这个骨架组织: 1. **masthead** — eyebrow(▬ + Mono 大写)+ H1(serif 500,带 `<em>` 斜体)+ lede(sans 16.5)+ meta strip(Mono 横条罗列关键技术栈) 2. **section header** — 序号(Mono / clay / 34px 宽)+ 标题(serif 27)+ count(灰胶囊) 3. **节点垂直流** — 每节点 = mono tag + serif title + sans sub 4. **节点间 vertical arrow** — strokeWidth=1, color=g500, 长度 ~42px 5. **右侧 mono 注释** — 前置 24×1.5px clay 短横线 + Mono 11px 灰字 6. **大型节点用 panel** — slate border,内嵌 4 列子模块网格,关键子模块用 clay border;子模块再下沉到深层硬件栈(深色块用 slate 背景 + ivory 文字) 7. **底部 legend** — 色彩与符号说明 8. **footer** — 衬线斜体格言 + 仓库链接 节点状态 mapping: - `entry` — bg=g100, border=slate - 普通 service — bg=transparent, border=slate - `accent`(关键路径) — border=clay - `exit` — bg=oat, border=clay - `dark`(硬件层) — bg=slate, 文字=ivory, 副=oat --- ## 6 · Variant A — HTML 单文件 CSS 起手必备: ```css :root{ --ivory:#FAF9F5; --paper:#FFFFFF; --slate:#141413; --clay:#D97757; --clay-d:#B85C3E; --oat:#E3DACC; --olive:#788C5D; --g100:#F0EEE6; --g200:#E6E3DA; --g300:#D1CFC5; --g500:#87867F; --g700:#3D3D3A; --serif: ui-serif, Georgia, serif; --sans: system-ui, -apple-system, sans-serif; --mono: ui-monospace, "SF Mono", Menlo, monospace; } body{ background:var(--ivory); color:var(--slate); font-family:var(--sans); line-height:1.55; } .wrap{ max-width:1120px; margin:0 auto; padding:0 32px 140px; } .eyebrow{ font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--g500); } .eyebrow::before{ content:""; display:inline-block; width:24px; height:1.5px; background:var(--clay); margin-right:12px; vertical-align:middle; } h1{ font-family:var(--serif); font-weight:500; font-size:clamp(38px, 5.4vw, 62px); letter-spacing:-0.018em; line-height:1.06; max-width:17ch; } h1 em{ font-style:italic; color:var(--clay); } ``` 节点卡片: ```css .node{ background:var(--paper); border:1.5px solid var(--g300); border-radius:14px; padding:18px 22px; transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease; } .node:hover{ transform:translateY(-3px); box-shadow:0 10px 30px rgba(20,20,19,.10); border-color:var(--slate); } .node.accent{ border-color:var(--clay); } .node.entry { background:var(--g100); } .node.exit { background:var(--oat); border-color:var(--clay); } .annot{ font-family:var(--mono); font-size:11.5px; color:var(--g500); display:flex; align-items:center; } .annot::before{ content:""; width:32px; height:1.5px; background:var(--clay); margin-right:12px; } ``` 垂直箭头(SVG): ```html <svg width="14" height="46" viewBox="0 0 14 46"> <line x1="7" y1="2" x2="7" y2="34" stroke="#87867F" stroke-width="2.5" stroke-linecap="round"/> <polyline points="2,32 7,42 12,32" fill="none" stroke="#87867F" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/> </svg> ``` --- ## 7 · Variant B — Excalidraw (.excalidraw) JSON 文件骨架: ```json { "type": "excalidraw", "version": 2, "source": "https://excalidraw.com", "elements": [...], "appState": { "gridSize": null, "viewBackgroundColor": "#FAF9F5" }, "files": {} } ``` 每个 element 必备字段:`id, type, x, y, width, height, angle, strokeColor, backgroundColor, fillStyle, strokeWidth, strokeStyle, roughness, opacity, groupIds, frameId, roundness, seed, version, versionNonce, isDeleted, boundElements, updatedAt, link, locked` 铁律: - **`roughness: 0`** 全画布禁用手绘抖动(学术风核心) - `strokeWidth: 1`(Excalidraw 没有 1.5) - 圆角矩形:`"roundness": {"type": 3}` - `fillStyle: "solid"`(不用 hachure 斜线填充) - 字体: 统一使用 Comic Shanns 字体，font-family: 8 推荐用 Python 脚本生成,因为 JSON 重复字段多。最小工厂: ```python import json, time, random random.seed(42) elements = [] def base(): return { "id": f"id-{random.randint(10**8, 10**12)}", "angle": 0, "strokeColor": "#141413", "backgroundColor": "transparent", "fillStyle": "solid", "strokeWidth": 1, "strokeStyle": "solid", "roughness": 0, "opacity": 100, "groupIds": [], "frameId": None, "roundness": None, "seed": random.randint(1, 10**9), "version": 1, "versionNonce": random.randint(1, 10**9), "isDeleted": False, "boundElements": None, "updatedAt": int(time.time() * 1000), "link": None, "locked": False, } def rect(x, y, w, h, *, stroke="#141413", bg="transparent", sw=1, rounded=True): el = base(); el.update({"type":"rectangle", "x":x, "y":y, "width":w, "height":h, "strokeColor":stroke, "backgroundColor":bg, "strokeWidth":sw, "roundness": {"type":3} if rounded else None}) elements.append(el); return el def text(x, y, content, *, size=14, font=2, color="#141413", w=None, align="left"): if w is None: cn = sum(1 for c in content if ord(c) > 127) w = int(cn*size + (len(content)-cn)*size*0.55) + 6 el = base(); el.update({"type":"text", "x":x, "y":y, "width":w, "height":int(size*1.25), "text":content, "fontSize":size, "fontFamily":font, "textAlign":align, "verticalAlign":"top", "containerId":None, "originalText":content, "lineHeight":1.25, "baseline":int(size*0.9), "strokeColor":color}) elements.append(el); return el def arrow(x1, y1, x2, y2, *, color="#87867F", sw=1): dx, dy = x2-x1, y2-y1 el = base(); el.update({"type":"arrow", "x":x1, "y":y1, "width":max(abs(dx),1), "height":max(abs(dy),1), "points":[[0,0],[dx,dy]], "lastCommittedPoint":None, "startBinding":None, "endBinding":None, "startArrowhead":None, "endArrowhead":"arrow", "strokeColor":color, "strokeWidth":sw}) elements.append(el); return el def line(x1, y1, x2, y2, *, color="#87867F", sw=1, dashed=False): dx, dy = x2-x1, y2-y1 el = base(); el.update({"type":"line", "x":x1, "y":y1, "width":max(abs(dx),1), "height":max(abs(dy),1), "points":[[0,0],[dx,dy]], "lastCommittedPoint":None, "startBinding":None, "endBinding":None, "startArrowhead":None, "endArrowhead":None, "strokeColor":color, "strokeWidth":sw, "strokeStyle": "dashed" if dashed else "solid"}) elements.append(el); return el # ... 调用 rect/text/arrow 组装画布,最后: data = {"type":"excalidraw", "version":2, "source":"https://excalidraw.com", "elements":elements, "appState":{"gridSize":None, "viewBackgroundColor":"#FAF9F5"}, "files":{}} json.dump(data, open("out.excalidraw","w"), ensure_ascii=False, indent=2) ``` 布局参考(垂直流程图): - 主轴中心 X = 700,卡片宽 380,普通节点高 78 - 节点之间 arrow 长度 42 - 大面板宽 540~560,内嵌 4 列子模块(每个 ~120 宽,gap 12) - 大面板的"04 · ENGINE"标签:在 border 上浮一个 IVORY 背景的小矩形 + clay Mono 文字 - 右侧详细注释面板 X = 主面板右边缘 + 60,宽 320 - 注释条目格式:Mono clay 小标题(`§ NN · 主题`)+ sans g700 多行正文 --- ## 8 · Variant C — SVG 缩略图 放在卡片缩略图区(.thumb,132px 高,灰底)。 约定: - `stroke-width: 2.5` - `stroke-linecap: round` - 圆角 `rx="4"` 或 `5` - 一张图只用 3–5 个色阶,clay 占比 < 20% - 几何元素:`<rect>`、`<circle>`、`<line>`,**不画曲线** class 命名: - `.st` 描边 (g500) / `.fl` 填充 (g300) / `.cl` clay 填充 / `.ol` olive 填充 - `.oa` oat 填充 + g500 描边 / `.sl` slate 填充 / `.wh` 白填充 + g500 描边 - `.ln` 灰线 / `.lc` clay 线 / `.da` 虚线 (dasharray 4 4) --- ## 9 · 输出前自检 Checklist 每张图都必须满足: 1. ☐ 背景 `#FAF9F5` 米白,**不用纯白** 2. ☐ 强调色只有 `#D97757` 粘土橙,占比 < 20%,无第二亮色 3. ☐ 大标题用 serif(Excalidraw 例外:Helvetica 大字号 字重 500) 4. ☐ Mono 标签全部大写 + 宽字距(eyebrow / 序号 / 文件名 / 注释) 5. ☐ 章节缩进 50px(标题不缩,正文与卡片缩) 6. ☐ 描边 1.5px(HTML)/ 1px(Excalidraw),圆角 10–14px 7. ☐ 没有阴影泛滥(只在 hover 时柔和阴影) 8. ☐ 没有冷灰(灰一律带土黄底) 9. ☐ Hover 只动 150ms(translateY(-3px) + 颜色 + 阴影) 10. ☐ 大量留白(下边距 ≥ 100px,章节间距 72px) 11. ☐ Excalidraw 必须 `roughness: 0` 12. ☐ 大量中文标注时,字号略放大,行高 ≥ 1.5,留白略多 --- ## 10 · 命名与产物建议 - HTML:`{topic}-pipeline.html` / `{topic}-architecture.html` - Excalidraw:`{topic}.excalidraw`(中文文件名也支持) - 生成脚本:`gen_{topic}.py`,参数化坐标 / 文字 / 配色,便于反复调整 > 这套设计的精神:把"信息"当作"印刷品",而不是"界面"。少即是多,但少不是空 — 是经过裁剪的丰富。