sintbot 1.0.16 → 1.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.en.json +99 -0
- package/CHANGELOG.json +99 -0
- package/README.md +20 -158
- package/README.zh-CN.md +20 -166
- package/THIRD-PARTY-NOTICES.md +394 -0
- package/bin/sintbot-v2.js +363 -0
- package/docs/AI-ASSISTED-INSTALL.md +11 -35
- package/docs/install.md +61 -167
- package/docs/zh-CN/AI-ASSISTED-INSTALL.md +11 -35
- package/docs/zh-CN/install.md +61 -165
- package/install.sh +84 -0
- package/package.json +73 -37
- package/src/agent/claudecode.js +149 -108
- package/src/agent/codexapp.js +458 -0
- package/src/agent/codexcode.js +210 -107
- package/src/agent/errtag.js +34 -0
- package/src/agent/privatecore.js +790 -0
- package/src/agent/privatecore.wasm +0 -0
- package/src/agent/runner.js +10 -8
- package/src/agent/winexec.js +35 -5
- package/src/c2install.js +117 -0
- package/src/config.js +2 -1
- package/src/core/c2cardeffectbridge.js +51 -0
- package/src/core/c2cardterminalpath.js +216 -0
- package/src/core/c2durableingress.js +148 -0
- package/src/core/c2durablejournal.js +1560 -0
- package/src/core/c2durableruntime.js +2361 -0
- package/src/core/c2eventidentity.js +90 -0
- package/src/core/c2globalfault.js +401 -0
- package/src/core/c2localeffectexecutor.js +193 -0
- package/src/core/c2payloadhandles.js +333 -0
- package/src/core/c2persistrelation.js +179 -0
- package/src/core/c2persiststate.js +342 -0
- package/src/core/c2platformrecoverysender.js +76 -0
- package/src/core/c2recoverygate.js +385 -0
- package/src/core/c2runnerinput.js +63 -0
- package/src/core/c2servicestartgate.js +103 -0
- package/src/core/c2sessionbridge.js +72 -0
- package/src/core/c2sourcequarantine.js +30 -0
- package/src/core/c2startuprecovery.js +105 -0
- package/src/core/c2successorbridge.js +151 -0
- package/src/core/c2terminaleffectbridge.js +154 -0
- package/src/core/c2terminalprune.js +108 -0
- package/src/core/c2turnprojection.js +177 -0
- package/src/core/enginecheckpoint.js +211 -0
- package/src/core/engineeffectcursor.js +394 -0
- package/src/core/enginestepcoordinator.js +183 -0
- package/src/core/store.js +52 -8
- package/src/core/v2engine.js +1469 -0
- package/src/platform/feishu.js +324 -67
- package/src/plugins.js +1 -9
- package/assets/design-styles/acid-pop.md +0 -155
- package/assets/design-styles/archive-index.md +0 -161
- package/assets/design-styles/art-deco.md +0 -164
- package/assets/design-styles/cinematic-noir.md +0 -178
- package/assets/design-styles/editorial.md +0 -121
- package/assets/design-styles/extra/README.md +0 -23
- package/assets/design-styles/extra/constructivism.md +0 -146
- package/assets/design-styles/extra/neo-brutalism.md +0 -175
- package/assets/design-styles/extra/new-wave.md +0 -166
- package/assets/design-styles/extra/nordic-material.md +0 -162
- package/assets/design-styles/extra/paris-couture.md +0 -162
- package/assets/design-styles/extra/tropical-modern.md +0 -168
- package/assets/design-styles/extra/ulm-functional.md +0 -182
- package/assets/design-styles/extra/wa-shikimen.md +0 -160
- package/assets/design-styles/extra/y2k-chrome.md +0 -172
- package/assets/design-styles/geometric-pop.md +0 -122
- package/assets/design-styles/hand-drawn.md +0 -117
- package/assets/design-styles/islamic-geometry.md +0 -155
- package/assets/design-styles/liquid-glass.md +0 -183
- package/assets/design-styles/neo-chinese.md +0 -136
- package/assets/design-styles/precision-mono.md +0 -156
- package/assets/design-styles/quiet-luxury.md +0 -163
- package/assets/design-styles/riso-print.md +0 -116
- package/assets/design-styles/soft-friendly.md +0 -174
- package/assets/design-styles/swiss-grid.md +0 -156
- package/assets/design-styles/tech-dark.md +0 -182
- package/assets/favicon.svg +0 -6
- package/assets/logo.svg +0 -24
- package/bin/sbot.js +0 -4716
- package/docs/slack-app-manifest.yaml +0 -104
- package/sbot.config.example.json +0 -235
- package/src/agent/askonce.js +0 -76
- package/src/agent/claudemodels.js +0 -60
- package/src/agent/claudestatus.js +0 -74
- package/src/agent/claudeusage.js +0 -200
- package/src/agent/codexstatus.js +0 -181
- package/src/agent/imagen.js +0 -458
- package/src/agent/quotaerr.js +0 -44
- package/src/agent/transienterr.js +0 -32
- package/src/cdp.js +0 -254
- package/src/cli-secret.js +0 -36
- package/src/clilang.js +0 -31
- package/src/core/cron.js +0 -182
- package/src/core/cronfire.js +0 -120
- package/src/core/cronrun.js +0 -116
- package/src/core/engine.js +0 -2758
- package/src/core/interfaces.js +0 -114
- package/src/core/issues.js +0 -185
- package/src/core/ledger.js +0 -30
- package/src/core/opsalert.js +0 -214
- package/src/core/pending.js +0 -123
- package/src/core/proxy.js +0 -424
- package/src/core/quotaalert.js +0 -79
- package/src/core/quotaerr.js +0 -55
- package/src/core/scheduler.js +0 -59
- package/src/design.js +0 -5161
- package/src/gitrepo.js +0 -150
- package/src/health.js +0 -353
- package/src/installdeps.js +0 -72
- package/src/leftover.js +0 -174
- package/src/platform/boardnotice.js +0 -77
- package/src/platform/boardops.js +0 -36
- package/src/platform/boardwatch.js +0 -447
- package/src/platform/cli.js +0 -45
- package/src/platform/slack.js +0 -1289
- package/src/platform/takeovercard.js +0 -37
- package/src/platform/wecom.js +0 -938
- package/src/platform/wecomcli.js +0 -128
- package/src/platform/wecomgate.js +0 -108
- package/src/platform/wecomname.js +0 -43
- package/src/platform/wecompoll.js +0 -241
- package/src/preview.js +0 -581
- package/src/projectmemory.js +0 -175
- package/src/service.js +0 -317
- package/src/ui/auth.js +0 -31
- package/src/ui/browser.html +0 -392
- package/src/ui/browserroutes.js +0 -234
- package/src/ui/console.html +0 -5526
- package/src/ui/dashboard.js +0 -168
- package/src/ui/feishulogin.js +0 -136
- package/src/ui/server.js +0 -2314
- package/src/ui/sessions.js +0 -78
- package/src/ui/takeover.js +0 -108
- package/src/updater.js +0 -243
- package/src/upgrade.js +0 -35
- package/src/usage.js +0 -144
|
@@ -1,117 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
name: 手绘温度
|
|
3
|
-
description: 旅行手账与刊物插画小品的手绘感——铅笔线稿加水彩淡彩,松弛、真诚、有呼吸
|
|
4
|
-
name_en: "Hand-drawn"
|
|
5
|
-
description_en: "The hand-drawn feel of travel journals and small editorial illustrations: pencil linework with light watercolor washes. Relaxed, sincere and unhurried."
|
|
6
|
-
suits: "生图插画 · 内容阅读"
|
|
7
|
-
colors:
|
|
8
|
-
paper: "#FAF7F2"
|
|
9
|
-
pencil: "#4A463F"
|
|
10
|
-
wash-blue: "#6C93B4"
|
|
11
|
-
clay: "#C97B5A"
|
|
12
|
-
leaf: "#8FA678"
|
|
13
|
-
fonts:
|
|
14
|
-
cjk: sans
|
|
15
|
-
typography:
|
|
16
|
-
headline:
|
|
17
|
-
cjk: serif
|
|
18
|
-
fontSize: "32px"
|
|
19
|
-
fontWeight: 500
|
|
20
|
-
body:
|
|
21
|
-
fontSize: "16px"
|
|
22
|
-
lineHeight: 1.7
|
|
23
|
-
measure: "54ch"
|
|
24
|
-
fontWeight: 400
|
|
25
|
-
hand:
|
|
26
|
-
latin: "'Caveat'"
|
|
27
|
-
cjk: hand
|
|
28
|
-
fontWeight: 400
|
|
29
|
-
border:
|
|
30
|
-
width: "1.5px"
|
|
31
|
-
style: solid
|
|
32
|
-
emphasis: "2px"
|
|
33
|
-
rounded:
|
|
34
|
-
soft: 4px
|
|
35
|
-
spacing:
|
|
36
|
-
unit: 8px
|
|
37
|
-
omitted: ["Components"]
|
|
38
|
-
imagery:
|
|
39
|
-
ratio: "4:3"
|
|
40
|
-
treatment: watercolor
|
|
41
|
-
crop: rounded
|
|
42
|
-
icon:
|
|
43
|
-
style: line
|
|
44
|
-
strokeWidth: "1.5px"
|
|
45
|
-
linecap: round
|
|
46
|
-
corner: round
|
|
47
|
-
---
|
|
48
|
-
|
|
49
|
-
## Overview
|
|
50
|
-
|
|
51
|
-
参照物:旅行手账里的钢笔速写、《纽约客》的单幅插画小品、日本生活杂志的手绘图解。
|
|
52
|
-
线稿是骨(铅笔/钢笔的犹豫和断线都保留),淡彩是肉(水彩不填满、故意出界)。
|
|
53
|
-
气质是「一个会画画的朋友随手画给你看」——松弛但不潦草,幼稚感是大忌。
|
|
54
|
-
|
|
55
|
-
## Colors
|
|
56
|
-
|
|
57
|
-
- **paper (#FAF7F2)**:纸白底,可带极淡的纸纹。
|
|
58
|
-
- **pencil (#4A463F)**:暖深灰的线稿色——不是纯黑,铅笔没有纯黑。
|
|
59
|
-
- **wash-blue (#6C93B4) / clay (#C97B5A) / leaf (#8FA678)**:三个水彩淡彩色,低饱和、透明感,一图取其二即可。
|
|
60
|
-
- 上色逻辑:大面积留纸白,颜色只点在主体的 30-50%,允许溢出轮廓线。
|
|
61
|
-
|
|
62
|
-
## Typography
|
|
63
|
-
|
|
64
|
-
- 印刷体为主(衬线标题 + 无衬线正文),手写体(hand)只做批注、箭头旁的短句——**手绘风 ≠ 全篇手写字**,那会瞬间廉价。
|
|
65
|
-
- 中文手写标注若无合适字体,宁可用细黑体 + 手绘下划线代替。
|
|
66
|
-
|
|
67
|
-
## Layout
|
|
68
|
-
|
|
69
|
-
- 图解式构图:主体居中偏上,四周散布小元素与手写批注,箭头把它们连起来。
|
|
70
|
-
- 元素之间留呼吸,散而不乱的秘诀是「视觉重量往一个角收」。
|
|
71
|
-
- 边框若有,用手绘抖线单框,不用规整矩形框。
|
|
72
|
-
|
|
73
|
-
## Elevation & Depth
|
|
74
|
-
|
|
75
|
-
深度是**画出来的**,不是渲染出来的。三个手段:
|
|
76
|
-
|
|
77
|
-
1. **线条轻重**:主体用 1.5-2px 实线重线,背景元素用同一个 pencil 色淡一档(约 50% 浓度)
|
|
78
|
-
的细线——近实远虚,一张图里最多两档。
|
|
79
|
-
2. **手绘排线(hatching)**:需要投影时,在物体右下画 **3-5 道 45° 短斜线**,长度约物体边长的
|
|
80
|
-
1/4;这是「阴影」在手绘语言里的唯一写法。
|
|
81
|
-
3. **水彩深浅**:同色叠两遍 = 近,叠一遍 = 远;叠色边缘留下的深色沉淀线本身就是层次。
|
|
82
|
-
|
|
83
|
-
Don't:CSS box-shadow 或任何带 blur 的阴影;任何看起来是软件生成的深度(渐变、体积光、发光)。
|
|
84
|
-
|
|
85
|
-
## Shapes
|
|
86
|
-
|
|
87
|
-
形状语言 = **手画出来的形**:没有一条边是绝对直的。
|
|
88
|
-
|
|
89
|
-
- **圆角 4px**(`rounded.soft`),但**不是 CSS 那种完美圆角**——转角是笔顺自然带出的弧,
|
|
90
|
-
四个角不必一样。
|
|
91
|
-
- **线条**:1.5px 主线 / 2px 强调线,端点 **round**(笔尖是圆的);允许断线、重线,
|
|
92
|
-
交叉处出头 2-3px——画过界是手绘的证据,不是错误。
|
|
93
|
-
- **边框**:只用手绘抖线单框(振幅 ≤2px);虚线画成长短不一的短划,不用等长等距的机器虚线。
|
|
94
|
-
- **允许的形状**:抖线矩形、不圆的圆、手绘箭头(轴线微弯 + 开口三角头)、圈重点的椭圆圈。
|
|
95
|
-
- ⚠ **不规则度要全图一致**:一张图里既有精确矩形又有抖线框,读起来是「没做完」而不是「手绘」。
|
|
96
|
-
- **图标**:跟线稿同一支笔——1.5px 线描、端点 round、转角是笔顺带出的弧(不是尖角);
|
|
97
|
-
宁可歪一点,也别换成规整的几何图标,那和精确矩形一样会破掉手感。
|
|
98
|
-
|
|
99
|
-
## Do's and Don'ts
|
|
100
|
-
|
|
101
|
-
- Don't:塑料感 3D、厚涂、赛璐璐描边卡通——手绘感来自线稿与水彩,不是卡通渲染。
|
|
102
|
-
- Don't:emoji 式圆脸表情、大眼睛吉祥物。
|
|
103
|
-
- Don't:高饱和纯色填充;水彩没有 #FF0000。
|
|
104
|
-
- Don't:全篇手写字体。
|
|
105
|
-
- Do:保留手的痕迹——断线、重线、水彩边缘的深色沉淀。
|
|
106
|
-
- Do:小面积的白色高光留白(水彩的留白,不是加白)。
|
|
107
|
-
|
|
108
|
-
## Composition
|
|
109
|
-
|
|
110
|
-
- 单幅小品:一个主体 + 2-4 个环绕的辅助元素 + 手写短批注与小箭头。
|
|
111
|
-
- 图解/流程:手绘图标 + 抖线箭头串联,配印刷体说明文字,像笔记本摊开的一页。
|
|
112
|
-
|
|
113
|
-
## Image Prompt Templates
|
|
114
|
-
|
|
115
|
-
- base: "hand-drawn illustration, loose pencil and ink linework with visible sketchy strokes, soft watercolor washes in muted blue (#6C93B4) and clay (#C97B5A) that bleed past the lines, warm paper background (#FAF7F2), generous white space, small handwritten annotations with arrows, New Yorker spot-illustration sensibility, warm and unpolished but skilled"
|
|
116
|
-
- negative: "3D render, cel-shaded cartoon, thick outlines, saturated flat colors, emoji faces, mascot character, digital gradient, full handwriting typography"
|
|
117
|
-
- 注:描述里写清「线稿保留手感、水彩不填满」;出图若太「精致」,在描述里加 loose/sketchy 加重松弛感。
|
|
@@ -1,155 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
name: 伊斯兰几何
|
|
3
|
-
description: girih 拼块的 36° 体系与交错编织——全库唯一能自动判对错的风格:角度画错了图案就拼不上
|
|
4
|
-
name_en: "Islamic Geometry"
|
|
5
|
-
description_en: "The 36° system and interlacing of girih tiles. The only style in the library that can be checked automatically: get an angle wrong and the pattern will not close."
|
|
6
|
-
suits: "品牌门面 · 生图插画"
|
|
7
|
-
colors:
|
|
8
|
-
paper: "#F1EBDF"
|
|
9
|
-
ink: "#2E241D"
|
|
10
|
-
accent: "#1F4E8C"
|
|
11
|
-
emeraude: "#147D6F"
|
|
12
|
-
safran: "#D8A03D"
|
|
13
|
-
muted: "#8A7C6A"
|
|
14
|
-
line: "#DCD0BA"
|
|
15
|
-
fonts:
|
|
16
|
-
cjk: sans
|
|
17
|
-
typography:
|
|
18
|
-
headline:
|
|
19
|
-
latin: "'Futura PT', 'Futura', 'Avenir Next'"
|
|
20
|
-
fontSize: "36px"
|
|
21
|
-
fontWeight: 500
|
|
22
|
-
lineHeight: 1.25
|
|
23
|
-
letterSpacing: "0.12em"
|
|
24
|
-
body:
|
|
25
|
-
fontSize: "16px"
|
|
26
|
-
fontWeight: 400
|
|
27
|
-
lineHeight: 1.7
|
|
28
|
-
measure: "60ch"
|
|
29
|
-
label:
|
|
30
|
-
fontSize: "12px"
|
|
31
|
-
fontWeight: 500
|
|
32
|
-
letterSpacing: "0.16em"
|
|
33
|
-
border:
|
|
34
|
-
width: "1px"
|
|
35
|
-
style: solid
|
|
36
|
-
emphasis: "1px"
|
|
37
|
-
rounded:
|
|
38
|
-
none: 0px
|
|
39
|
-
spacing:
|
|
40
|
-
unit: "8px"
|
|
41
|
-
gutter: "24px"
|
|
42
|
-
margin: "40px"
|
|
43
|
-
maxWidth: "1120px"
|
|
44
|
-
columns: 12
|
|
45
|
-
elevation:
|
|
46
|
-
mode: flat
|
|
47
|
-
levels: "0"
|
|
48
|
-
imagery:
|
|
49
|
-
ratio: "1:1"
|
|
50
|
-
treatment: duotone
|
|
51
|
-
crop: hard
|
|
52
|
-
icon:
|
|
53
|
-
style: line
|
|
54
|
-
strokeWidth: "1.5px"
|
|
55
|
-
linecap: butt
|
|
56
|
-
corner: sharp
|
|
57
|
-
components:
|
|
58
|
-
button-primary:
|
|
59
|
-
backgroundColor: "{colors.accent}"
|
|
60
|
-
textColor: "{colors.paper}"
|
|
61
|
-
typography: "{typography.label}"
|
|
62
|
-
rounded: "{rounded.none}"
|
|
63
|
-
height: "44px"
|
|
64
|
-
padding: "24px"
|
|
65
|
-
card:
|
|
66
|
-
backgroundColor: "{colors.paper}"
|
|
67
|
-
textColor: "{colors.ink}"
|
|
68
|
-
rounded: "{rounded.none}"
|
|
69
|
-
padding: "24px"
|
|
70
|
-
tag:
|
|
71
|
-
backgroundColor: "{colors.safran}"
|
|
72
|
-
textColor: "{colors.ink}"
|
|
73
|
-
typography: "{typography.label}"
|
|
74
|
-
rounded: "{rounded.none}"
|
|
75
|
-
padding: "8px"
|
|
76
|
-
---
|
|
77
|
-
|
|
78
|
-
## Overview
|
|
79
|
-
|
|
80
|
-
参照物:阿尔罕布拉宫与轩尼洛里菲花园的八重星图案;非斯(Fès)的 zellij 手工釉砖。
|
|
81
|
-
**这是本库唯一有「自动判对错」判据的风格。** girih 五种拼块——正十角形、长六边形、领结形、正五边形、菱形——内角**全部是 36° 的倍数**、**边长全等**,所以图案能无缝无限拼接;**画错了会拼不上**。
|
|
82
|
-
不需要凭感觉判断好不好看,拼不严就是错的。用它做设计的收益也在这里:一套规则生成无穷变体,而每个变体都自动是"对"的。
|
|
83
|
-
|
|
84
|
-
## Colors
|
|
85
|
-
|
|
86
|
-
色板取非斯 zellij 的历史序列:10 世纪只有白与褐,17 世纪起蓝红绿黄齐备,经典组合是**非斯白釉 + 钴蓝 + 釉绿 + 藏红**。
|
|
87
|
-
|
|
88
|
-
- **paper (#F1EBDF,blanc de Fès)**:非斯白釉,偏奶黄,**不是纯白**——手工釉砖的白从来带温度。
|
|
89
|
-
- **ink (#2E241D)**:锰褐近黑,文字与图案骨架线。配 paper 12.5:1。
|
|
90
|
-
- **accent (#1F4E8C)**:钴蓝,主强调。配 paper 7.0:1,**是唯一能安全承载正文级白字的釉色**。
|
|
91
|
-
- **emeraude (#147D6F)**:釉绿。配 paper 4.2:1 ⇒ 只放 ≥18px 的字,或纯做图案。
|
|
92
|
-
- **safran (#D8A03D)**:藏红。配锰褐字 6.5:1,是这套里唯一适合"深字浅底"的强调。
|
|
93
|
-
- **muted (#8A7C6A)**:次级信息。配 paper 3.4:1 ⇒ ≥18px 或非文字用途。
|
|
94
|
-
- **line (#DCD0BA)**:砖缝色,分隔线与网格线专用。
|
|
95
|
-
|
|
96
|
-
## Typography
|
|
97
|
-
|
|
98
|
-
- 拉丁走几何无衬线(Futura 一族)500 + 0.12em 字距——几何字与几何图案同源,圆是正圆、三角是正三角。中文走系统黑体 400(苹方 / 微软雅黑,思源黑体兜底),**不加字距**(汉字加字距会散)。
|
|
99
|
-
- 小标签 0.16em、拉丁全大写,与图案的网格节奏对齐。
|
|
100
|
-
- **字不与图案争主角**:图案区是主体时,标题最多两行,正文另辟白底区。
|
|
101
|
-
- 参照:**TPTQ Arabic**(Kristyan Sarkis 与 Peter Biľak,2015 阿姆斯特丹)、**Khatt Foundation**(Huda Smitshuijzen AbiFarès,2004);**Studio Safar**(贝鲁特,2012)的《Journal Safar》——同一本刊物一端翻是英文左起、另一端翻是阿拉伯文右起,双向阅读排版的现代范本。
|
|
102
|
-
|
|
103
|
-
## Layout
|
|
104
|
-
|
|
105
|
-
- 图案区与文字区**分开**:图案铺满一个整块(常为正方或整栏),正文区保持釉白底。
|
|
106
|
-
- 12 列网格定文字;图案自己的骨架是 36°(十重)或 45°(八重)体系,**两套网格不混用**。
|
|
107
|
-
- 图案单元必须能**无缝重复**:裁切沿单元的重复边界,不沿视觉舒服的位置。
|
|
108
|
-
- 留白靠釉白区的整块,不靠元素之间的碎缝。
|
|
109
|
-
|
|
110
|
-
## Elevation & Depth
|
|
111
|
-
|
|
112
|
-
**零阴影**。深度来自 **strapwork 交错编织**——带子在每一个交叉点交替压盖(上、下、上、下),这就是这个体系里的"图层"。
|
|
113
|
-
|
|
114
|
-
1. 底:非斯白釉。
|
|
115
|
-
2. 图案带(strapwork):等宽带子,每个交叉点严格交替。**同一根带子的压盖必须全程一致**,走一遍数一遍,错一个点整片图就露馅。
|
|
116
|
-
3. 釉色填充:带子围出的多边形上釉,同类多边形同色。
|
|
117
|
-
|
|
118
|
-
编织本身就够表达前后关系,所以**任何投影都是多余的**,加了反而把二维图案假装成三维浮雕。
|
|
119
|
-
Don't:blur 阴影、内阴影、浮雕/斜面效果、渐变填充。
|
|
120
|
-
|
|
121
|
-
## Shapes
|
|
122
|
-
|
|
123
|
-
- 一切角度取 **36° 的倍数**(十重体系)或 **45° 的倍数**(八重体系),**一版只用一套**。圆角恒 0,所有交点是尖角。
|
|
124
|
-
- 带宽全图统一一个值(图标 1.5px / 版面上 8-12px),不按区域变。允许的形:girih 五拼块、八角星、十角星,以及由它们切出的多边形。
|
|
125
|
-
- **方体库法 / banna'i**(بنائي,波斯语"营造"):起源是**用砖砌字**——把曲线的阿拉伯文压进方格,砖块就是像素,釉砖与素砖交替出字。落到品牌上:字标只走直角、笔画等宽、填满 n×n 网格。**拉丁与中文同理可做**,这是本风格最可直接落地的一件事。
|
|
126
|
-
|
|
127
|
-
## Components
|
|
128
|
-
|
|
129
|
-
- **按钮**:钴蓝实底 + 釉白字 + 1px 锰褐边,直角;悬停 = 底色换釉绿,**不加影不加圆角**。
|
|
130
|
-
- **卡片**:釉白底 + 1px 砖缝色边,padding 24px;顶部或左侧可嵌一条 8px 高的图案带。
|
|
131
|
-
- **标签**:藏红实底 + 锰褐小字(6.5:1),小而成排。
|
|
132
|
-
|
|
133
|
-
## Do's and Don'ts
|
|
134
|
-
|
|
135
|
-
- Do:一切角度取 36°(或八重的 45°)的倍数,图案单元必须能无缝重复。
|
|
136
|
-
- Do:用交错编织表达层次,不用投影。釉色只上在图案上,**正文区保持釉白底**。
|
|
137
|
-
- Do:图案要真按几何画。girih 拼块自约 1200 年起用于建筑装饰,1453 年伊斯法罕 Darb-i Imam 神殿是排布水平的分水岭;2007 年 Lu 与 Steinhardt 指出 15 世纪波斯 girih 已具备准晶自相似性质,比 Penrose 铺砌早五个世纪。这套体系的精度是它的全部价值,画歪了就什么都不剩。
|
|
138
|
-
- Don't:**把《古兰经》经文或清真言当装饰花纹**。那是圣典文本——用作背景纹样、被裁切、被色块叠压、被拉伸都不得体;要文字元素就用中性词做方体库法。**这一条是本档最重要的红线。**
|
|
139
|
-
- Don't:**仿阿拉伯拉丁字体**(把拉丁字母掰成阿拉伯外形的那类 display 字体)。那是把一种文字画成另一种文字的漫画,在使用阿拉伯文的读者眼里是拙劣模仿。
|
|
140
|
-
- Don't:灯神、飞毯、骆驼沙丘、月牙星拼贴。**月牙星是国旗与宗教符号,不是素材**。
|
|
141
|
-
- Don't:把图案当无骨架的背景贴图随手裁切。**图案有骨架,裁在星心上就散架**。
|
|
142
|
-
- Don't:渐变、投影、玻璃质感、3D 浮雕。
|
|
143
|
-
|
|
144
|
-
## Composition
|
|
145
|
-
|
|
146
|
-
- 单主体:一整块图案 + 一块釉白文字区,比例约 2:1 或 1:1,**边界是直线**。
|
|
147
|
-
- 图案中心放一颗完整的八/十角星,四周的星必须完整或沿重复边界切断,不出现半颗残星。
|
|
148
|
-
- 插画走平涂矢量,只用釉色四色 + 锰褐线,不用厚涂、不用高光。
|
|
149
|
-
- 照片素材少用;必须用时转双色(锰褐 + 釉白)并硬裁成正方。
|
|
150
|
-
|
|
151
|
-
## Image Prompt Templates
|
|
152
|
-
|
|
153
|
-
- base: "Islamic geometric pattern design, girih tiling with tenfold symmetry, every angle a multiple of 36 degrees, equal-length edges, interlaced strapwork bands alternately passing over and under at each crossing, seamless repeating unit, Fez zellij glazed tile palette: warm white glaze ground (#F1EBDF), cobalt blue (#1F4E8C), glazed emerald (#147D6F), saffron yellow (#D8A03D), manganese near-black outline (#2E241D), flat vector, hard edges, no shading, complete eight-pointed and ten-pointed stars"
|
|
154
|
-
- negative: "Quranic calligraphy as decoration, arabic script used as ornament, faux-arabic latin lettering, genie lamp, flying carpet, camel, sand dune, crescent and star emblem, mosque silhouette clip art, gradient, bevel, emboss, drop shadow, 3D render, glossy, random crop through star centers, warped pattern"
|
|
155
|
-
- 注:模型很爱往图案里塞看起来像阿拉伯文的假字符,提示词必须明写 "no arabic script, no calligraphy, pattern only";出图后**逐个交叉点核对压盖是否交替**、**数星角是否为 8 或 10**,这两项对了这张就成立。
|
|
@@ -1,183 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
name: 液态玻璃
|
|
3
|
-
description: 半透明材质浮在真实内容之上——模糊加折射、边缘内高光、同心圆角,清透但不牺牲可读
|
|
4
|
-
name_en: "Liquid Glass"
|
|
5
|
-
description_en: "Translucent material floating over real content: blur and refraction, inner edge highlights and concentric corners. Clear, without giving up legibility."
|
|
6
|
-
suits: "工具产品 · 品牌门面"
|
|
7
|
-
colors:
|
|
8
|
-
bg: "#E8EDF4"
|
|
9
|
-
surface: "#FFFFFF"
|
|
10
|
-
ink: "#0B0D12"
|
|
11
|
-
muted: "#5A6273"
|
|
12
|
-
accent: "#007AFF"
|
|
13
|
-
line: "#D3DAE5"
|
|
14
|
-
fonts:
|
|
15
|
-
latin: "'SF Pro Text', -apple-system, 'Host Grotesk'"
|
|
16
|
-
cjk: sans
|
|
17
|
-
typography:
|
|
18
|
-
headline:
|
|
19
|
-
latin: "'SF Pro Display', -apple-system, 'Host Grotesk'"
|
|
20
|
-
fontSize: "34px"
|
|
21
|
-
fontWeight: 600
|
|
22
|
-
lineHeight: 1.15
|
|
23
|
-
letterSpacing: "-0.022em"
|
|
24
|
-
body:
|
|
25
|
-
fontSize: "17px"
|
|
26
|
-
fontWeight: 400
|
|
27
|
-
lineHeight: 1.5
|
|
28
|
-
letterSpacing: "-0.01em"
|
|
29
|
-
measure: "64ch"
|
|
30
|
-
label:
|
|
31
|
-
fontSize: "15px"
|
|
32
|
-
fontWeight: 600
|
|
33
|
-
border:
|
|
34
|
-
width: "1px"
|
|
35
|
-
style: solid
|
|
36
|
-
emphasis: "1px"
|
|
37
|
-
rounded:
|
|
38
|
-
md: 12px
|
|
39
|
-
lg: 22px
|
|
40
|
-
xl: 28px
|
|
41
|
-
full: 999px
|
|
42
|
-
spacing:
|
|
43
|
-
unit: "8px"
|
|
44
|
-
gutter: "16px"
|
|
45
|
-
maxWidth: "1080px"
|
|
46
|
-
elevation:
|
|
47
|
-
mode: glass
|
|
48
|
-
levels: "2"
|
|
49
|
-
imagery:
|
|
50
|
-
ratio: "16:9"
|
|
51
|
-
treatment: none
|
|
52
|
-
crop: rounded
|
|
53
|
-
icon:
|
|
54
|
-
style: line
|
|
55
|
-
strokeWidth: "1.5px"
|
|
56
|
-
linecap: round
|
|
57
|
-
corner: round
|
|
58
|
-
components:
|
|
59
|
-
button-primary:
|
|
60
|
-
backgroundColor: "{colors.accent}"
|
|
61
|
-
textColor: "{colors.surface}"
|
|
62
|
-
typography: "{typography.label}"
|
|
63
|
-
rounded: "{rounded.full}"
|
|
64
|
-
height: "44px"
|
|
65
|
-
padding: "20px"
|
|
66
|
-
button-secondary:
|
|
67
|
-
backgroundColor: "{colors.surface}"
|
|
68
|
-
textColor: "{colors.ink}"
|
|
69
|
-
typography: "{typography.label}"
|
|
70
|
-
rounded: "{rounded.full}"
|
|
71
|
-
height: "44px"
|
|
72
|
-
padding: "20px"
|
|
73
|
-
card:
|
|
74
|
-
backgroundColor: "{colors.surface}"
|
|
75
|
-
textColor: "{colors.ink}"
|
|
76
|
-
rounded: "{rounded.lg}"
|
|
77
|
-
padding: "20px"
|
|
78
|
-
input-field:
|
|
79
|
-
backgroundColor: "{colors.surface}"
|
|
80
|
-
textColor: "{colors.ink}"
|
|
81
|
-
rounded: "{rounded.md}"
|
|
82
|
-
height: "44px"
|
|
83
|
-
padding: "12px"
|
|
84
|
-
tag:
|
|
85
|
-
backgroundColor: "{colors.surface}"
|
|
86
|
-
textColor: "{colors.ink}"
|
|
87
|
-
typography: "{typography.label}"
|
|
88
|
-
rounded: "{rounded.full}"
|
|
89
|
-
height: "26px"
|
|
90
|
-
padding: "10px"
|
|
91
|
-
---
|
|
92
|
-
|
|
93
|
-
## Overview
|
|
94
|
-
|
|
95
|
-
参照物:Apple 2025 年 6 月发布的 Liquid Glass 材质(发布稿原文 "reflects and refracts its surroundings"、控件要 "fit perfectly concentric with the rounded corners")、WWDC25 Session 219《Meet Liquid Glass》、HIG › Materials。
|
|
96
|
-
|
|
97
|
-
核心不是「半透明白卡片」,是一层**有厚度的材质**:它取下层内容做模糊 + 提饱和,边缘留一道内高光当作光打在玻璃棱上,所以它跟着底下的内容变颜色。判断做没做对只有一条标准:**底下必须是真实内容**(照片/地图/视频/长列表),玻璃滑过时看得出下面的东西在动。底下若是一块装饰渐变,玻璃就退化成一张磨砂贴纸。
|
|
98
|
-
|
|
99
|
-
⚠ **这个风格有个表达天花板**:它的性格全在「半透明 + 实时模糊」,而微缩预览图画不出这两样(图上只会显示浅底 + 大圆角 + 一个蓝按钮)。选它之前最好另找一张真实截图看,别只看预览图。
|
|
100
|
-
|
|
101
|
-
## Colors
|
|
102
|
-
|
|
103
|
-
- **bg (#E8EDF4)**:冷调浅灰蓝。它是**占位的衬底不是画面** —— 真做起来这层该被照片/地图/内容列表替掉,玻璃需要下面有东西可折射。
|
|
104
|
-
- **surface (#FFFFFF)**:玻璃本色。落地时**永远带透明度**(见 Elevation),纯不透明白只出现在承载正文的实底卡。
|
|
105
|
-
- **ink (#0B0D12)**:近黑。白底 19.4:1、bg 底 16.5:1 —— 玻璃上文字能不能读全指望它。
|
|
106
|
-
- **muted (#5A6273)**:次级文字,白底 6.1:1。⚠ **只用在实底区**;玻璃层上一律 ink 或纯白,半透明背景已经吃掉一档对比,再降级必挂。
|
|
107
|
-
- **accent (#007AFF)**:系统蓝,给按钮填充、图标、激活态。⚠ **它承载文字只有 4.02:1(白底),不达正文 4.5:1** —— 链接文字用深一档的 `#0062CC`(5.8:1),`#007AFF` 留给填充与图标;白字压 #007AFF 同样是 4.02:1,按钮文字请 15px/600 起,要严格达标就把按钮底压到 `#0062CC`(白字 5.8:1)。**这是这套色板唯一要自己拍板的取舍,别假装它过了。**
|
|
108
|
-
- **line (#D3DAE5)**:实底区的分隔线与描边。⚠ 玻璃层**不用它描边**,见 Shapes。
|
|
109
|
-
|
|
110
|
-
## Typography
|
|
111
|
-
|
|
112
|
-
- 全族 SF Pro(拉丁)+ 苹方 / 微软雅黑(中文,思源黑体兜底),Host Grotesk 作无 SF 环境的回退。
|
|
113
|
-
- 标题 Display 600 `-0.022em`、正文 Text 400 `-0.01em` —— **大字收紧、小字放松**是这一族的光学字距规则,不是随手写的数。
|
|
114
|
-
- 小标签 **600 字重,不加宽字距**:这套体系靠字重区分层级,给小字加 0.08em 是瑞士/科技风的手法,放这里立刻串味。
|
|
115
|
-
- 标题与正文反差只有 2 倍(34/17),克制是它的性格。⚠ 玻璃上最小字号 **15px / weight 500**,12px 白细字在玻璃上等于没有。
|
|
116
|
-
|
|
117
|
-
## Layout
|
|
118
|
-
|
|
119
|
-
- 分层不分块:内容是**一整片连续的滚动流**,chrome(导航条/标签栏/工具条)浮在它上面。别把版面切成一格一格的玻璃卡片阵 —— 那是把材质当装饰用。
|
|
120
|
-
- 8px 栅格,组件间距 16/20/24;玻璃面板内边距 20px 起,材质要留白才看得出通透。
|
|
121
|
-
- 浮动控件贴边距 16px,与内容之间**不留分隔线**,靠材质本身分离;内容区最大宽 1080px,正文行长 64ch。
|
|
122
|
-
|
|
123
|
-
## Elevation & Depth
|
|
124
|
-
|
|
125
|
-
深度来自**材质**而不是投影距离:玻璃有厚度,所以它同时有模糊、有高光、有一点很淡的落影。
|
|
126
|
-
|
|
127
|
-
1. **Level 0**:内容层。完全实底、不加任何模糊 —— 它是被折射的对象。
|
|
128
|
-
2. **Level 1**(导航条/标签栏/工具条):`backdrop-filter: blur(24px) saturate(180%)`;`box-shadow: 0 1px 1px rgba(11,13,18,.04), 0 8px 24px rgba(11,13,18,.10)`;内高光 `inset 0 1px 0 rgba(255,255,255,.65)`。
|
|
129
|
-
3. **Level 2**(弹窗/菜单/浮层):同一套材质,阴影加到 `0 16px 40px rgba(11,13,18,.16)`,模糊**不要再加**(超过 30px 底下糊成一片灰,折射感反而没了)。
|
|
130
|
-
|
|
131
|
-
三条硬规矩:**内高光是签名**,漏了玻璃就变磨砂塑料;`saturate(180%)` 不能省,只模糊不提饱和会把底下的颜色洗成灰;**阴影永远比模糊轻**,它只把玻璃抬起 1-2mm,不做立体感。
|
|
132
|
-
|
|
133
|
-
Don't:两层玻璃直接叠;给玻璃再加内阴影;用渐变去「画」出玻璃 —— 这材质必须由 `backdrop-filter` 实时算,画出来的假玻璃一滚动就露馅。
|
|
134
|
-
|
|
135
|
-
## Shapes
|
|
136
|
-
|
|
137
|
-
形状语言 = **连续圆角的胶囊与圆角矩形**,没有一处直角。
|
|
138
|
-
|
|
139
|
-
- **同心圆角规则(最容易做坏的一条)**:外圆角 = 内圆角 + 内边距。22px 圆角的面板里放 8px 内边距的按钮 ⇒ 按钮圆角必须是 14px。嵌错了(内比外圆、或两者相等)整套观感立刻塌成「随手套的圆角」。
|
|
140
|
-
- 圆角档位:输入框 12 / 卡片与面板 22 / 大浮层 28 / 按钮与标签走 `full` 胶囊。
|
|
141
|
-
- **玻璃边缘不用 1px 灰描边** —— 那是 2013 年的拟物残留。边缘靠内高光划定;`border.width` 那个 1px 是给**实底组件**(输入框、实底卡)用的,别混。
|
|
142
|
-
- 图标细线 1.5px、圆头圆角,与胶囊语言同构。
|
|
143
|
-
|
|
144
|
-
## Components
|
|
145
|
-
|
|
146
|
-
- **主按钮**:accent 实色胶囊 + 白字,一屏最多一个 —— 唯一允许用满强调色的元素。
|
|
147
|
-
- **次按钮**:玻璃胶囊(surface + 55-72% 透明 + 同款模糊),文字用 ink。
|
|
148
|
-
- **卡片**:22px 圆角。⚠ **承载正文的卡片一律实底**,只有 chrome 层才用玻璃(见下一节)。
|
|
149
|
-
- **输入框**:实底白 + 12px 圆角 + 1px `line` 描边;聚焦态描边换 accent 加 3px 外圈 `rgba(0,122,255,.18)`,**不加发光**。
|
|
150
|
-
- **标签**:胶囊,玻璃或浅实底二选一,全站只用一种。
|
|
151
|
-
|
|
152
|
-
## Do's and Don'ts
|
|
153
|
-
|
|
154
|
-
- Do:让底下有真东西 —— 照片、地图、视频、内容列表。背景决定这个风格成不成立。
|
|
155
|
-
- Do:玻璃只给 chrome 层,正文内容区一律实底;同心圆角算清楚再画,档位全站锁死这四个值。
|
|
156
|
-
- Don't:**玻璃叠玻璃**。两层模糊叠加后对比度不可控,文字必挂,性能也塌。
|
|
157
|
-
- Don't:玻璃上承载表格、长文、密集数据 —— 要读的东西放实底。
|
|
158
|
-
- Don't:玻璃上放 12px 白细字(最小 15px / weight 500)。
|
|
159
|
-
- Don't:**紫蓝渐变背景 + 白玻璃卡片**。那是被模板玩烂的长相,也正是 AI 生成图的标准脸;背景该是真实内容,不是装饰渐变。
|
|
160
|
-
- Don't:用 PNG 或 CSS 渐变伪造玻璃;不做无模糊回退与 `prefers-reduced-transparency`。
|
|
161
|
-
|
|
162
|
-
## 可用性底线
|
|
163
|
-
|
|
164
|
-
这一节不是建议,是能不能交付的门槛。NN/g《Liquid Glass Is Cracked》点名了四类实测问题:**文字压在图上对比不足 · 图标融进背景认不出 · 半透明层里文字叠文字 · 浮动控件与内容争视觉**。Apple 自己在后续测试版里下调过透明度 —— 连原厂都要往回收,说明这材质的默认值天然偏激进。
|
|
165
|
-
|
|
166
|
-
1. **玻璃只用在 chrome 层**:导航条、标签栏、工具条、弹窗可以;正文区、表格、表单、长文一律实底。判据是一句话 —— **要读的东西不放在会动的背景上**。
|
|
167
|
-
2. **透明度按底色分两档**:暗底场景 `rgba(255,255,255,0.10)`,亮底场景 `rgba(20,22,26,0.55)`,保证其上文字 ≥4.5:1。
|
|
168
|
-
3. **两张背景各测一次**:找应用里**最亮和最暗**的两张真实背景,把同一块玻璃分别放上去量对比度,**两次都过才算过**。只测一张等于没测 —— 玻璃的对比度是随背景浮动的。
|
|
169
|
-
4. **图标不能只靠颜色立住**:玻璃上的线性图标要么加 1.5px 深色描边,要么坐在一块实底圆形上。
|
|
170
|
-
5. **回退与偏好**:`@supports not (backdrop-filter: blur(1px))` 给实底回退(不透明 surface + line 描边);响应 `prefers-reduced-transparency: reduce` 时整套换实底 —— 这是系统级无障碍开关,不是可选项。
|
|
171
|
-
6. **浮动控件让位内容**:玻璃层面积一屏不超过 20%,滚动时**不加放大或视差**,它是容器不是主角。
|
|
172
|
-
|
|
173
|
-
## Composition
|
|
174
|
-
|
|
175
|
-
- 一屏一层玻璃:满幅真实内容 + 顶部或底部一条玻璃 chrome,结束。
|
|
176
|
-
- 玻璃条要**压着内容边缘**放(看得见下面的东西被它切走一半),悬在纯色空白上等于白做。
|
|
177
|
-
- 图片 16:9,圆角与所在容器同心,不加描边不加投影 —— 深度由玻璃提供,图片只管平铺。想展示材质本身时让内容在玻璃下滚动一段再截图,静态图选下层色彩丰富的画面。
|
|
178
|
-
|
|
179
|
-
## Image Prompt Templates
|
|
180
|
-
|
|
181
|
-
- base: "iOS-style translucent glass panel floating over a real photographic background, heavy background blur with increased saturation, subtle inner top highlight along the panel edge, very soft ambient shadow, continuous rounded corners with concentric nesting, blue accent pill button (#007AFF), near-black text (#0B0D12), clean SF-Pro-like sans-serif typography, light cool gray-blue environment (#E8EDF4), crisp and legible"
|
|
182
|
-
- negative: "purple blue gradient background, frosted plastic card on flat gradient, 1px gray border on glass, neon glow, heavy drop shadow, tiny thin white text, sharp 90-degree corners, skeuomorphic bevel, stacked glass layers"
|
|
183
|
-
- 注:底层背景要写成**具体的真实画面**(照片/地图/列表),写 "gradient background" 出来的就是那张烂大街的模板脸;中文版面补 "clean CJK sans-serif typography, 15px minimum text size"。
|
|
@@ -1,136 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
name: 新中式
|
|
3
|
-
description: 民国书局与笺谱的克制东方——宣纸底、墨色字、朱砂一点,是文人气不是影楼中国风
|
|
4
|
-
name_en: "Neo-Chinese"
|
|
5
|
-
description_en: "The restrained East of Republican-era bookshops and letter-paper albums: rice-paper ground, ink-black text and a single touch of cinnabar. Scholarly, not photo-studio chinoiserie."
|
|
6
|
-
suits: "内容阅读 · 品牌门面"
|
|
7
|
-
colors:
|
|
8
|
-
paper: "#F5F0E6"
|
|
9
|
-
ink: "#2B2620"
|
|
10
|
-
cinnabar: "#C03F2B"
|
|
11
|
-
indigo: "#3D4A52"
|
|
12
|
-
gold: "#B08D46"
|
|
13
|
-
fonts:
|
|
14
|
-
cjk: sans
|
|
15
|
-
typography:
|
|
16
|
-
headline:
|
|
17
|
-
cjk: serif
|
|
18
|
-
fontSize: "36px"
|
|
19
|
-
fontWeight: 600
|
|
20
|
-
body:
|
|
21
|
-
generic: "serif"
|
|
22
|
-
fontSize: "16px"
|
|
23
|
-
lineHeight: 1.9
|
|
24
|
-
measure: "36em"
|
|
25
|
-
fontWeight: 400
|
|
26
|
-
label:
|
|
27
|
-
fontWeight: 400
|
|
28
|
-
letterSpacing: "0.12em"
|
|
29
|
-
border:
|
|
30
|
-
width: "1px"
|
|
31
|
-
style: double
|
|
32
|
-
emphasis: "2px"
|
|
33
|
-
rounded:
|
|
34
|
-
none: 0px
|
|
35
|
-
spacing:
|
|
36
|
-
unit: 8px
|
|
37
|
-
imagery:
|
|
38
|
-
ratio: "3:4"
|
|
39
|
-
treatment: grayscale
|
|
40
|
-
crop: hard
|
|
41
|
-
icon:
|
|
42
|
-
style: line
|
|
43
|
-
strokeWidth: "1px"
|
|
44
|
-
linecap: butt
|
|
45
|
-
corner: sharp
|
|
46
|
-
---
|
|
47
|
-
|
|
48
|
-
## Overview
|
|
49
|
-
|
|
50
|
-
参照物:民国商务印书馆的书籍函套、荣宝斋的木版水印笺谱、故宫文创里做得最素的那一档。
|
|
51
|
-
东方感来自「留白 + 竖排的可能性 + 材质的纸感」,不来自龙凤祥云贴纸。
|
|
52
|
-
色是宣纸的暖、墨的黑、朱砂印章的一点红;气质是书房,不是酒楼。
|
|
53
|
-
|
|
54
|
-
## Colors
|
|
55
|
-
|
|
56
|
-
- **paper (#F5F0E6)**:宣纸暖白,全部底色。
|
|
57
|
-
- **ink (#2B2620)**:暖黑墨色,文字与线描主色——不是冷黑。
|
|
58
|
-
- **cinnabar (#C03F2B)**:朱砂红,印章逻辑:小面积、方形/圆形色块或单个重点词,一处足矣。
|
|
59
|
-
- **indigo (#3D4A52)**:黛青,次级色,用于图案、山形、次标题。
|
|
60
|
-
- **gold (#B08D46)**:泥金,极小面积点缀(一条细线、一个纹样),可整张不用。
|
|
61
|
-
|
|
62
|
-
## Typography
|
|
63
|
-
|
|
64
|
-
- **标题用宋体**(思源宋体优先),36px / 字重 600 —— 字够大够重,宋体的骨相才立得住。
|
|
65
|
-
- **正文与小标签用黑体**。⚠ 宋体横细竖粗,16px 的正文在屏幕上横画发虚,那不是文人气是糊;
|
|
66
|
-
书卷气靠的是留白、字距与朱砂一点,不靠把正文也压成宋体。拿不到思源宋的机器退黑体,
|
|
67
|
-
**不退中易宋体**。
|
|
68
|
-
- 字距宽松是关键:标题字距 0.05-0.15em,竖排时更甚——挤密的宋体就俗了。
|
|
69
|
-
- 拉丁与数字选衬线(与宋体骨相一致),别混无衬线拉丁。
|
|
70
|
-
|
|
71
|
-
## Layout
|
|
72
|
-
|
|
73
|
-
- 大留白 + 不对称:主体偏置一侧,留白处只放一枚小印或一行小字。
|
|
74
|
-
- 竖排是可用的排版语汇(标题、短句),但一图内竖排只用一处。
|
|
75
|
-
- 分隔用细墨线或什么都不用;不用西式粗分割条。
|
|
76
|
-
|
|
77
|
-
## Elevation & Depth
|
|
78
|
-
|
|
79
|
-
宣纸没有阴影。层级来自**墨色浓淡**与**位置经营**。
|
|
80
|
-
|
|
81
|
-
1. **浓墨**:ink `#2B2620` 满浓度,主标题、主体线描。
|
|
82
|
-
2. **淡墨**:同一个 ink 降到 **60% 浓度**(约 `#6E6862`),注文、次级信息、辅助线描——
|
|
83
|
-
这是这个风格唯一的「层级滑杆」,不要改用第二种颜色去做层级。
|
|
84
|
-
3. **朱砂一处**:通常是钤印,或题名旁的一点。**它不是「上层」,是「焦点」**;
|
|
85
|
-
全图只有一处,位置定生死。
|
|
86
|
-
4. **留白即层级**(计白当黑):空的地方越大,旁边那块越重。想让一个元素更重,
|
|
87
|
-
先把它周围清空,而不是给它加底色或加框。
|
|
88
|
-
|
|
89
|
-
Don't:任何让宣纸看起来有厚度的效果(投影/渐变/高光);第二处朱砂。
|
|
90
|
-
|
|
91
|
-
## Shapes
|
|
92
|
-
|
|
93
|
-
形状语言 = **版框与印章**:方、直、素。
|
|
94
|
-
|
|
95
|
-
- **圆角恒 0**(`rounded.none`),包括图片与色块。纸上的东西是裁出来的,裁口是直的。
|
|
96
|
-
- **版框**:`border.style: double` 是民国书籍的双线版框,外 2px 内 1px、两线间距 3px;
|
|
97
|
-
全图**最多一个**版框,不做嵌套框。
|
|
98
|
-
- **线条**:1px 墨线实线,端点 butt。粗细变化交给线描本身的笔意(白描/木版线条),
|
|
99
|
-
不靠分档的 border-width 去模拟。
|
|
100
|
-
- **印章形状**:正方或长方(阳文,朱砂底反白字)/ 正圆(阴文,朱砂线描)。二选一,不并用。
|
|
101
|
-
- **允许的形状**:矩形、正圆、细直线。不用箭头、不用圆角标签、不用几何装饰件。
|
|
102
|
-
- **图标**:走白描的路子——1px 墨线、端点 butt、转角直角,**不填实心**(实色朱砂只属于印章);
|
|
103
|
-
也不用圆头线条,那是屏幕的软,不是纸上的素。
|
|
104
|
-
|
|
105
|
-
## Components
|
|
106
|
-
|
|
107
|
-
组件语汇特殊,**不做 token 化**——这个风格里「卡片」「胶囊」这些词本身就不成立,
|
|
108
|
-
以下按纸面元素描述:
|
|
109
|
-
|
|
110
|
-
- **按钮**:直角方块,1px ink 描边 + 纸底 + ink 字;主操作把描边与字**一起换成 cinnabar**,
|
|
111
|
-
**不做实色填充**(实色朱砂块只属于印章)。
|
|
112
|
-
- **卡片:不用卡片。** 要分区就用一条 1px 墨线,或直接留白;加底色的白盒子会立刻变成网页。
|
|
113
|
-
- **输入框**:只画底部一条 1px 墨线(界画的格线),不封框、不加底色。
|
|
114
|
-
- **导航/目录**:齐左或竖排的宋体条目,字距 0.12em;当前项用 cinnabar 标一个小方点或一个字,
|
|
115
|
-
不用底色条。
|
|
116
|
-
- **落款区**:页脚固定一行小字 + 一枚印,是这个风格的「品牌区」,位置全站不变。
|
|
117
|
-
|
|
118
|
-
## Do's and Don'ts
|
|
119
|
-
|
|
120
|
-
- Don't:红金满铺、大红配明黄——那是年货,不是新中式。
|
|
121
|
-
- Don't:龙凤/祥云/灯笼贴纸式元素;要用传统纹样就用细线一笔带过。
|
|
122
|
-
- Don't:书法字体当正文;书法只允许出现在单个大字或印章里。
|
|
123
|
-
- Don't:纯白底、冷灰底。
|
|
124
|
-
- Do:印章思维——朱砂色块 + 反白小字,是全图的「落款」。
|
|
125
|
-
- Do:材质感(纸纹、木版水印的边缘晕染)宁可淡到似有似无。
|
|
126
|
-
|
|
127
|
-
## Composition
|
|
128
|
-
|
|
129
|
-
- 一图一景:一个主体(器物/山形/植物),四周大片宣纸留白,题字与印章按书画落款位放置。
|
|
130
|
-
- 插画走木版水印/白描线条,不走厚涂与 3D。
|
|
131
|
-
|
|
132
|
-
## Image Prompt Templates
|
|
133
|
-
|
|
134
|
-
- base: "modern Chinese literati aesthetic, warm rice-paper background (#F5F0E6), warm ink illustration (#2B2620) in fine woodblock-print linework, one small cinnabar red seal accent (#C03F2B), generous asymmetric negative space, elegant serif CJK typography with loose letter spacing, subtle paper texture, refined and restrained, Republic-era book design sensibility"
|
|
135
|
-
- negative: "red and gold everywhere, dragon and phoenix clip art, lanterns, glossy 3D, thick paint, crowded layout, cold white background"
|
|
136
|
-
- 注:中文字是这个风格的主角——版面里的字务必拼写正确、字距宽松;字错一处全图报废。
|