@lark-apaas/coding-steering 0.1.70 → 0.1.71

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.
Files changed (31) hide show
  1. package/package.json +1 -1
  2. package/steering/nestjs-react-fullstack/skills/client-builtins-file-storage-service/SKILL.md +1 -0
  3. package/steering/nestjs-react-fullstack/skills/coding-guide/SKILL.md +2 -1
  4. package/steering/nestjs-react-fullstack/skills/design-guide/SKILL.md +164 -133
  5. package/steering/nestjs-react-fullstack/skills/plugin-guide/SKILL.md +2 -0
  6. package/steering/nestjs-react-fullstack/skills_local/coding-guide/SKILL.md +1 -0
  7. package/steering/nestjs-react-fullstack/skills_local/plugin-guide/SKILL.md +1 -0
  8. package/steering/vite-react/skills/plugin-guide/SKILL.md +5 -2
  9. package/steering/vite-react/skills/plugin-guide/references/plugin-coding-guide.md +44 -0
  10. package/steering/nestjs-react-fullstack/skills/design-guide/references/broadsheet.md +0 -313
  11. package/steering/nestjs-react-fullstack/skills/design-guide/references/claude-editorial-research.md +0 -375
  12. package/steering/nestjs-react-fullstack/skills/design-guide/references/crimson-frosted-glass.md +0 -221
  13. package/steering/nestjs-react-fullstack/skills/design-guide/references/cybernetic-vault-terminal.md +0 -74
  14. package/steering/nestjs-react-fullstack/skills/design-guide/references/dashboard.md +0 -234
  15. package/steering/nestjs-react-fullstack/skills/design-guide/references/digital-e-guide.md +0 -349
  16. package/steering/nestjs-react-fullstack/skills/design-guide/references/finance-report.md +0 -169
  17. package/steering/nestjs-react-fullstack/skills/design-guide/references/flowbite.md +0 -179
  18. package/steering/nestjs-react-fullstack/skills/design-guide/references/frontend-design.md +0 -66
  19. package/steering/nestjs-react-fullstack/skills/design-guide/references/handwritten-sketch.md +0 -215
  20. package/steering/nestjs-react-fullstack/skills/design-guide/references/industry.md +0 -348
  21. package/steering/nestjs-react-fullstack/skills/design-guide/references/metabase.md +0 -226
  22. package/steering/nestjs-react-fullstack/skills/design-guide/references/minimal-jade.md +0 -205
  23. package/steering/nestjs-react-fullstack/skills/design-guide/references/nebula-crimson.md +0 -306
  24. package/steering/nestjs-react-fullstack/skills/design-guide/references/nexuscore-analytics.md +0 -74
  25. package/steering/nestjs-react-fullstack/skills/design-guide/references/organic-minimalism.md +0 -253
  26. package/steering/nestjs-react-fullstack/skills/design-guide/references/pm-spec.md +0 -234
  27. package/steering/nestjs-react-fullstack/skills/design-guide/references/pop-art.md +0 -272
  28. package/steering/nestjs-react-fullstack/skills/design-guide/references/sap-fiori-horizon.md +0 -154
  29. package/steering/nestjs-react-fullstack/skills/design-guide/references/token-mapping.md +0 -68
  30. package/steering/nestjs-react-fullstack/skills/design-guide/references/warm-elegance.md +0 -217
  31. package/steering/nestjs-react-fullstack/skills/design-guide/references/wild-orange.md +0 -203
@@ -1,205 +0,0 @@
1
- ---
2
- version: alpha
3
- name: minimal-jade
4
- name_zh: 简约翡翠
5
- description: 浅灰蓝底、独立白卡与草绿强调;首要图表序列用草绿,次级序列按黑色透明度递减;无衬线超大粗标题,JetBrains Mono 对齐指标和表格数字;12px 圆角卡片带浅阴影和悬停上浮。
6
- colors:
7
- background: "#F5F7FA"
8
- card: "#FFFFFF"
9
- header: "#1D2025"
10
- foreground: "#1D2025"
11
- muted-foreground: "#6B7280"
12
- primary: "#A0E870"
13
- primaryDark: "#7BC44C"
14
- border: "#E5E7EB"
15
- danger: "#EF4444"
16
- typography:
17
- sans:
18
- fontFamily: "Inter, system-ui, sans-serif"
19
- usage: 全部标题与正文(Heading/Body 共用,靠字号/字重区分层级)
20
- mono:
21
- fontFamily: '"JetBrains Mono", monospace'
22
- usage: 全部数字与坐标轴/图例文字,配 tabular-nums 保证对齐
23
- rounded:
24
- card: 12px
25
- small: 8px
26
- tag: 4px
27
- full: 9999px
28
- spacing:
29
- section-gap: 40px
30
- card-gap: 24px
31
- card-padding: 24px
32
- page-px: 24px
33
- page-py: 48px
34
- container-max: 1300px
35
- components:
36
- kpi-card:
37
- background: "{colors.card}"
38
- borderRadius: "{rounded.card}"
39
- boxShadow: shadow-sm
40
- border: "border border-transparent hover:border-gray-100"
41
- hover: "整体上浮 y:-2px(-translate-y-0.5),带过渡"
42
- iconBg: "{colors.primary} 10% 透明度"
43
- iconColor: "{colors.primary}"
44
- title: "text-sm uppercase tracking-wide,{colors.muted-foreground}"
45
- value: "text-3xl font-bold tracking-tighter tabular-nums,{colors.foreground}(见 typography.mono)"
46
- trendUp: "text-xs font-medium,{colors.primaryDark},带上箭头图标"
47
- trendDown: "text-xs font-medium,{colors.danger},带下箭头图标"
48
- statusDot: "若需要状态指示点,只能二选一:{colors.primary}(正常)或 {colors.danger}(异常),禁止新增第三种颜色(如橙色)表达'预警/中等'档位"
49
- chart-card:
50
- background: "{colors.card}"
51
- borderRadius: "{rounded.card}"
52
- boxShadow: shadow-sm
53
- border: "border border-transparent"
54
- height: "420px 或 450px 两档"
55
- title: "font-semibold,{colors.header}"
56
- tag: "text-xs,{colors.muted-foreground},bg-gray-50 底,{rounded.tag},px-2 py-1"
57
- ai-insight-card:
58
- accentBar: "w-1 h-4,{colors.primary} 实色,{rounded.full}"
59
- title: 与卡片标题样式一致
60
- status-badge:
61
- description: "适用于任意'状态/预警/优先级'类徽章、标签芯片、指示点(如渠道明细表状态列、异常指标监控卡片、AI洞察优先级标签)。只允许二档语义:{colors.primary}(正常/健康/低优先级)与 {colors.danger}(异常/预警/高优先级);其余非语义标签(如团队名、分类名)一律用中性灰(bg-gray-50 + {colors.muted-foreground})。禁止引入橙色/黄色/蓝色等表达'中等/三级'档位——多档状态一律压缩为二档"
62
- charts:
63
- palette: "单主色 {colors.primary}(首位/主序列);排名类用黑色透明度递减 getRankedColor: index0={colors.primary},index≥1 为 rgba(0,0,0,opacity),opacity=max(0.1,0.9-(index-1)*0.15)"
64
- multi-series-fallback: "不论是否为'排名'语义,任何图表只要出现多个系列/类别需要区分(趋势线多指标对比、分组柱状图例、饼图多切片等),一律套用同一取色逻辑:首要/主体系列用 {colors.primary},其余系列全部用黑色透明度渐变(同 getRankedColor 公式)或灰阶({colors.muted-foreground}/{colors.border} 系),禁止为区分类别另起色相(黄/橙/蓝等)。这条优先于'排名'字面语义,是本风格图表配色的唯一兜底方案"
65
- container: "背景 transparent(继承卡片白底),grid 四边留白 top10/right10/bottom0/left0,containLabel true,字体见 typography.mono"
66
- tooltip: "白底 #fff,1px 边框 {colors.border},{rounded.small},padding 12px,文字纯黑 12px"
67
- axis: "轴线与刻度隐藏,标签灰 400 系(#9CA3AF)11px;y 轴分隔线浅灰虚线({colors.border} 系),x 轴无分隔线"
68
- legend: "icon=circle,size 8px,文字{colors.muted-foreground} 色,12px;图例本身不额外引入颜色,系列配色遵循 palette/multi-series-fallback"
69
- area: "smooth 曲线,线宽 3px,symbol 4px,区域渐变填充(顶部 5% 处 opacity 0.3 → 底部 95% 处 opacity 0)"
70
- pie: "环形 radius 60%~80%,padAngle 2,无 label,itemStyle 无描边"
71
- radar: "线宽 2px,填充透明度 0.4"
72
- bar-horizontal: "barSize 20px,仅右侧圆角 borderRadius [0,4,4,0]"
73
- anchors:
74
- - id: mono-numbers
75
- type: token
76
- desc: 所有 KPI 数值/趋势数字用等宽字体(见 typography.mono)+tabular-nums 对齐,是本风格最强识别符
77
- - id: single-accent-jade
78
- type: token
79
- desc: 全局仅一个强调色(见 colors.primary),图标/图表/装饰条/状态徽章统一复用,不叠加其他鲜艳色
80
- - id: ranked-gradient
81
- type: pattern
82
- desc: 图表排名类数据用黑色透明度递减渐变区分名次(见 components.charts),仅第一名保留主色;非排名类多系列图表同样套用此逻辑
83
- - id: card-float-hover
84
- type: pattern
85
- desc: 卡片默认透明边框+浅阴影,hover 时整体上浮并边框转浅灰(见 Elevation & Depth)
86
- - id: giant-title
87
- type: token
88
- desc: 页面主标题使用极大字号建立层级(见 typography 页面标题层级)
89
- - id: kpi-icon-tint
90
- type: component
91
- desc: KPI 卡片图标底色为主色的低透明度版本,图标本身为主色实色
92
- - id: gray-blue-canvas
93
- type: token
94
- desc: 页面底色为浅灰蓝(见 colors.background),卡片底为纯白(见 colors.card)形成层次
95
- gaps:
96
- - header/foreground/muted-foreground/border 四个 token 的 hex 由源给出的 hsl(H S% L%) 精确换算得出(非取整近似);background/primary/primaryDark 三色源已直接给出 hex,按源 hex 原样使用
97
- - danger(下降趋势色)为补充项:源仅写"下降 red-500"(Tailwind 类名,无具体 hex),按 Tailwind 官方默认值换算为 #EF4444
98
- - 字体 @import 地址为补充项:源仅给出字体名(Inter/JetBrains Mono),未提供具体 @import URL,按 Google Fonts 官方 CSS2 API 标准格式补充,字重档位(400/500/600/700)为常见档推测
99
- - rounded 四档(card/small/tag/full)为补充项:源仅给出 Tailwind 类名(rounded-xl/rounded-lg/rounded/rounded-full),未给具体 px,按 Tailwind 官方默认值换算
100
- - Inter/JetBrains Mono 均为纯拉丁字体无 CJK 字形,源未指定中文兜底(非手写/展示体清单成员,非强制规则,原样保留)
101
- - 图表容器高度源给两档(420px/450px),未说明各自适用图表类型,原样列出未做区分
102
- - 无暗色模式定义
103
- - 无表单控件(input/select 等)规范
104
- - 无漏斗(funnel)组件规范:第一版实验中生成模型曾自行加入转化漏斗组件并出现数字与标签重叠的排版问题,该组件超出本风格源文件定义范围,不在此补造具体规格(避免编造),仅在 Do's and Don'ts 提示自查
105
- exceptions:
106
- - 图标背景使用 primary 10% 透明度作浅底,不受"仅一个强调色、不额外引入强调色"限制,属常规图标底色处理
107
- - AI 洞察卡片左侧装饰条使用 primary 实色,视为组件签名而非额外强调色
108
- - 卡片默认 border-transparent,hover 时转浅灰 border-gray-100,不受阴影/圆角统一约束(边框颜色变化例外)
109
- - 元数据标签与小徽章允许使用 rounded/rounded-lg(见 rounded.tag/small)而非卡片档 rounded.card
110
- ---
111
-
112
- ## Overview
113
-
114
- 简洁商务数据界面风格。浅灰蓝({colors.background})基底上浮动纯白卡片({colors.card}),用克制留白和清晰数据层级组织内容。整体气质专业、可信赖、数据驱动;色彩极简,仅一个草绿主色({colors.primary})贯穿全局,数字均用等宽字体保证对齐,图表以黑色透明度渐变而非多彩配色表达排名优先级。
115
-
116
- ## Colors
117
-
118
- | 角色 | 值 | 用法 |
119
- |-----|-----|-----|
120
- | background | {colors.background} | 页面背景,浅灰蓝 |
121
- | card | {colors.card} | 卡片背景,纯白 |
122
- | header | {colors.header} | 页面/卡片标题文字 |
123
- | foreground | {colors.foreground} | 主要文字、KPI 数值 |
124
- | muted-foreground | {colors.muted-foreground} | 次要文字、副标题、KPI 标题、坐标轴与图例文字、元数据标签 |
125
- | primary | {colors.primary} | 全局唯一强调色:图标、图表主序列、装饰条、状态徽章"正常"档;每处强调仅用此色 |
126
- | primaryDark | {colors.primaryDark} | 深绿强调:趋势上升数值与箭头 |
127
- | border | {colors.border} | 卡片 hover 边框、图表容器分隔线/Tooltip 边框 |
128
- | danger | {colors.danger} | 趋势下降数值与箭头、状态徽章"异常/预警"档(补充项,见 gaps) |
129
-
130
- ## Typography
131
-
132
- 全局样式首行按以下方式加载字体(HARD REQUIREMENT,禁止替换;源未提供具体 @import 地址,此行为补充项,按 Google Fonts 官方 CSS2 API 标准格式生成,见 gaps):
133
-
134
- ```css
135
- @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');
136
- ```
137
-
138
- Inter/JetBrains Mono 均为纯拉丁字体,源未要求 CJK 兜底(非手写/展示体,原样保留)。
139
-
140
- | 层级 | 样式(Tailwind) | 颜色 |
141
- |-----|-----|-----|
142
- | 页面标题 | text-5xl md:text-6xl font-bold tracking-tight | header |
143
- | 页面副标题 | text-base tracking-wide | muted-foreground |
144
- | 卡片标题 | font-semibold | header |
145
- | KPI 标题 | text-sm uppercase tracking-wide | muted-foreground |
146
- | KPI 数值 | text-3xl font-bold font-mono tracking-tighter tabular-nums | foreground |
147
- | 趋势数字(上升) | text-xs font-medium font-mono | primaryDark |
148
- | 趋势数字(下降) | text-xs font-medium font-mono | danger |
149
-
150
- ## Layout
151
-
152
- - 全局容器:max-w-[1300px](见 spacing.container-max),mx-auto,px-6(见 spacing.page-px);区块间距 space-y-10(见 spacing.section-gap 40px);页面上下 padding pt-12/pb-12(见 spacing.page-py 48px)。
153
- - 标题区:border-b border-gray-200/60(~{colors.border} 60% 透明度) pb-6;页面标题建立层级,副标题 {colors.muted-foreground};元数据标签 text-[10px] uppercase tracking-widest,灰 400 系(#9CA3AF)。
154
- - 标题、指标、图表、表格或操作模块按任务关系组合;不固定出现顺序、卡片数量或 2/3+1/3 分栏。
155
- - 网格间距 gap-6(见 spacing.card-gap 24px);卡片内边距 p-6(见 spacing.card-padding 24px)。
156
- - 响应式按可用宽度和信息关系减少列数,窄屏保证数值、图例和操作完整可读。
157
-
158
- ## Elevation & Depth
159
-
160
- - 卡片阴影统一 shadow-sm,不叠加更强档位;默认边框 border-transparent,hover 转 border-gray-100(浅灰,~{colors.border} 系)。
161
- - Hover 交互:卡片整体上浮 y:-2px(配 motion 过渡),边框由透明变浅灰;不使用缩放/旋转/更强投影。
162
- - 层次感仅来自"卡片白底 + 浅阴影 + hover 微浮动",无多层堆叠或渐变阴影。
163
-
164
- ## Shapes
165
-
166
- - 圆角三档(见 frontmatter rounded):卡片用 {rounded.card}(12px);按钮/小元素用 {rounded.small}(8px)或 {rounded.tag}(4px);圆形装饰用 {rounded.full}(9999px,如 AI 洞察卡片装饰条端点)。
167
- - 边框语言:卡片默认 transparent,hover 转浅灰({colors.border});图表容器同样 transparent;标签徽章 bg-gray-50 无边框。
168
- - 无手绘/有机形态,无阴影模糊之外的装饰纹理;视觉极简,靠留白与色块层级表达信息密度。
169
-
170
- ## Components
171
-
172
- 核心组件规格见 frontmatter components(kpi-card / chart-card / ai-insight-card / status-badge / charts)。补充细节:
173
-
174
- - **KPI 卡片**:标题(KPI 名)居上,数值居中放大,趋势行(上下箭头+涨跌幅)居底;图标底色为 primary 10% 透明度,图标本身 primary 实色;hover 整体上浮。若卡片带状态指示点,只能用 primary 或 danger 二色(见 components.kpi-card.statusDot)。
175
- - **图表卡片**:标题 font-semibold + 可选灰底小标签;容器高度按数据量和可用空间确定;内部 ECharts 网格保持克制留白(见 components.charts.container)。
176
- - **AI 洞察卡片**:左侧竖条(w-1 h-4,primary 实色,rounded-full)+ 标题,内容排版与普通卡片一致,用于突出"AI 生成建议"类文本块。
177
- - **状态徽章/标签/优先级标签**(如渠道明细表状态列、异常指标监控、AI洞察优先级标签):只允许 primary(正常/健康/低优先级)与 danger(异常/预警/高优先级)二档语义色,非语义标签(团队名、分类名)用中性灰底(bg-gray-50 + muted-foreground)。**不得为表达"中等/三级"档位新增橙色、黄色等本风格未声明的色相**(见 components.status-badge)。
178
- - **图表(ECharts)**:序列色单主色 + 排名渐变(见 components.charts.palette);不论图表是否为"排名"语义,只要存在多系列/多类别对比,一律套用同一取色逻辑——主体系列 primary,其余系列黑色渐变或灰阶,禁止引入新色相区分类别(见 components.charts.multi-series-fallback);面积图/饼图/雷达/横向柱状各自默认样式见 components.charts;坐标轴线与刻度隐藏,只留浅色虚线网格,弱化图表"骨架"、突出数据本身。
179
- - 本风格未定义漏斗(funnel)等组件的具体排版规格(见 gaps);若页面确需该类组件,配色仍须遵守单一强调色规则,不因组件未定义而自由发挥新色相。
180
-
181
- ## Do's and Don'ts
182
-
183
- - 数字与数据统一用等宽字体(JetBrains Mono)+ tabular-nums,确保多行/多列对齐。
184
- - 图表优先用排名渐变色系统(getRankedColor)表达数据优先级,而非分配多种颜色;非排名类的多系列图表同样只用 primary + 黑色渐变/灰阶,不新增色相。
185
- - 卡片 hover 时加入轻微上浮(y:-2)增强交互感,避免更强的缩放/旋转效果。
186
- - 标题区适合使用极大字号(text-5xl/6xl)建立视觉层级,正文与标签保持克制的小字号。
187
- - 图表整体配色保持克制,避免过度丰富的色彩,优先单主色 + 黑色渐变的组合。
188
- - 状态徽章、优先级标签、指示圆点、图例等任何"需要区分状态/类别"的元素,一律复用 primary/primaryDark/danger 三色 + 灰阶;禁止为"预警/中优先级/第三分类"等语义临时新增颜色(如橙色、黄色、蓝色)——多档状态一律压缩为二档表达。
189
-
190
- ## Hard Rules
191
-
192
- - KPI 数值与趋势数字必须使用等宽字体(见 typography.mono)+ tabular-nums,禁止用默认无衬线字体渲染数字。
193
- - 图表与界面强调色统一使用单一主色 primary({colors.primary}),排名/次序数据用黑色透明度渐变区分层级,禁止引入除 primaryDark/danger 语义色外的其他强调色。**该约束覆盖界面全部元素,不限于图表**:状态徽章、优先级标签、指示圆点、Tab/Chip、图表图例等任何用于区分状态或类别的地方,只能从 primary/primaryDark/danger + 灰阶(muted-foreground/border/#9CA3AF)中取色,禁止新增任何未在 colors 中声明的色相(橙色/黄色/蓝色等)表达"预警/中优先级/第三档状态"——多档状态一律压缩为二档(如"异常/预警"统一用 danger,"正常/健康/低优先级"统一用 primary)。
194
- - 任意图表出现多个系列/类别需要区分时(不论是否为"排名"语义:趋势线多指标对比、分组柱状图例、饼图多切片等),一律套用同一取色逻辑——首要/主体系列用 primary,其余系列全部用黑色透明度渐变(getRankedColor 公式)或灰阶,不得为区分类别另起色相。
195
- - 所有卡片圆角统一 {rounded.card},阴影统一 shadow-sm,不使用更强阴影或其他圆角档位。
196
- - 页面主标题可在 text-5xl md:text-6xl 范围建立强层级;空间不足或信息密集时允许自适应缩放。
197
- - 语义色 primaryDark/danger 仅用于趋势方向指示(涨跌箭头与数值)及状态徽章的"正常/异常"二元判断,不作为装饰、多级优先级或跨场景强调色。
198
- - 字体 @import 必须原样写入全局样式首行,禁止替换或省略。
199
-
200
- ## Exceptions
201
-
202
- - 图标背景使用 primary 10% 透明度作浅底,不受"仅一个强调色、不额外引入强调色"限制,属常规图标底色处理。
203
- - AI 洞察卡片左侧装饰条使用 primary 实色,视为组件签名而非额外强调色。
204
- - 卡片默认 border-transparent,hover 时转浅灰 border-gray-100,不受阴影/圆角统一约束(边框颜色变化例外)。
205
- - 元数据标签与小徽章允许使用 {rounded.tag}/{rounded.small} 而非卡片档 {rounded.card}。
@@ -1,306 +0,0 @@
1
- ---
2
- version: alpha
3
- name: nebula-crimson
4
- name_zh: 深红星云
5
- description: >
6
- 高端商务年报美学:权威、庄重、高端科技感。深红 #8B0000 被极度克制地用作点睛色(品牌区块背景、强调数值、进度条、装饰线、hover),
7
- 大面积由白 / 浅灰 #FAFAFA / 近纯黑 #1A0000–#050505 承担,可用全幅明暗区块营造呼吸节奏,但区块数量与顺序服从内容。
8
- 视觉签名是超黑字重(font-black/900)配超紧字距(tracking-tighter)的巨型标题,搭配全大写英文注释标签(uppercase tracking-widest),
9
- 中英双语层次分明。暗区用玻璃态透明白容器(bg-white/5~/20 + backdrop-blur),叠加网格线、carbon-fibre 纹理、径向渐变与品牌色模糊光斑。
10
- colors:
11
- background: "#FAFAFA"
12
- card: "#FFFFFF"
13
- header: "#8B0000"
14
- foreground: "#111827"
15
- muted-foreground: "#9CA3AF"
16
- primary: "#8B0000"
17
- border: "#F3F4F6"
18
- heroDark: "#1A0000"
19
- outlookDark: "#030712"
20
- footerDark: "#050505"
21
- growthText: "#16A34A"
22
- growthBg: "#DCFCE7"
23
- accent: "#FEF2F2"
24
- gridLine: "#EEEEEE"
25
- axisLabel: "#999999"
26
- axisLabelAlt: "#666666"
27
- seq1: "#8B0000"
28
- seq2: "#A52A2A"
29
- seq3: "#CD5C5C"
30
- seq4: "#E9967A"
31
- seq5: "#FFA07A"
32
- typography:
33
- fontImport: "@import url('https://miaoda.feishu.cn/fonts/css2?family=Inter:wght@300;400;500;600;700;900&display=swap');"
34
- base:
35
- fontFamily: "'Inter', 'PingFang SC', 'Microsoft YaHei', sans-serif"
36
- h1Hero:
37
- fontSize: "text-6xl md:text-9xl"
38
- fontWeight: "900"
39
- lineHeight: "0.9"
40
- letterSpacing: "tracking-tighter"
41
- h1Number:
42
- fontSize: "text-6xl md:text-8xl"
43
- fontWeight: "900"
44
- letterSpacing: "tracking-tighter"
45
- color: "{colors.primary}"
46
- h2Section:
47
- fontSize: "text-5xl"
48
- fontWeight: "900"
49
- letterSpacing: "tracking-tight"
50
- h2Outlook:
51
- fontSize: "text-8xl"
52
- fontWeight: "900"
53
- letterSpacing: "tracking-tighter"
54
- h3Card:
55
- fontSize: "text-2xl"
56
- fontWeight: "900"
57
- letterSpacing: "tracking-tight"
58
- h3Panel:
59
- fontSize: "text-xl"
60
- fontWeight: "700"
61
- h4Data:
62
- fontSize: "text-5xl / text-4xl"
63
- fontWeight: "900"
64
- letterSpacing: "tracking-tight"
65
- eyebrow:
66
- fontSize: "text-xs"
67
- fontWeight: "900"
68
- letterSpacing: "tracking-widest"
69
- upper: true
70
- color: "{colors.primary}"
71
- metricLabel:
72
- fontSize: "text-[10px]"
73
- fontWeight: "700"
74
- letterSpacing: "tracking-[0.15em]"
75
- upper: true
76
- color: "{colors.muted-foreground}"
77
- body:
78
- fontSize: "text-lg / text-sm"
79
- lineHeight: "relaxed"
80
- color: "{colors.muted-foreground}"
81
- microLabel:
82
- fontSize: "text-[10px]"
83
- fontWeight: "900"
84
- letterSpacing: "tracking-widest"
85
- upper: true
86
- footerBrand:
87
- fontSize: "text-xl"
88
- fontWeight: "900"
89
- letterSpacing: "tracking-[0.3em]"
90
- upper: true
91
- rounded:
92
- sm: "8px"
93
- card: "12px"
94
- panel: "16px"
95
- large: "24px"
96
- mega: "32px"
97
- full: "9999px"
98
- spacing:
99
- sectionXMobile: "2rem"
100
- sectionY: "8rem"
101
- sectionXDesktop: "6rem"
102
- titleGap: "5rem"
103
- gridGap: "1.5rem"
104
- cardPad: "2rem"
105
- components:
106
- metricCard:
107
- background: "{colors.card}"
108
- border: "border border-gray-100 = {colors.border}"
109
- borderRadius: "{rounded.large}"
110
- boxShadow: "0 10px 40px -15px rgba(0,0,0,0.1)"
111
- description: "浅色指标卡;hover 投影转品牌色深投影 0 20px 60px -15px rgba(139,0,0,0.2),底部进度线 w-0→w-full bg-primary,图标 bg-red-50/text-crimson → bg-crimson/text-white"
112
- crimsonBlock:
113
- background: "{colors.header}"
114
- description: "全幅品牌区块(Hero 深红黑 / Business 纯深红);叠加 skew 模糊光斑 bg-nebula-crimson opacity-10 blur-3xl 与深红点阵 radial-gradient(circle at 2px 2px, white 1px, transparent 0) 40px"
115
- glassCard:
116
- background: "rgba(255,255,255,0.05)"
117
- border: "border border-white/10"
118
- borderRadius: "{rounded.panel}"
119
- description: "暗区玻璃态容器;hover bg-white/5→/10;配 backdrop-blur-md"
120
- emphasisBar:
121
- border: "border-l-4 {colors.primary}"
122
- description: "数据高亮左强调条;hover bg 淡红 hover:bg-red-50/30;emphasis-box 用 border-l-8"
123
- productCard:
124
- background: "{colors.card}"
125
- border: "border-b-[12px] {colors.border} hover:border-nebula-crimson"
126
- borderRadius: "{rounded.large}"
127
- boxShadow: "shadow-lg"
128
- description: "hover:-translate-y-4 上浮 + 图标 hover:scale-110;transition duration-500"
129
- progressBar:
130
- background: "linear-gradient(to right, #7F1D1D, {colors.primary})"
131
- borderRadius: "{rounded.full}"
132
- description: "填充动画 transition-all duration-[1.5s] ease-out;from-red-900(#7F1D1D 内置)→nebula-crimson"
133
- chartTooltipLight:
134
- background: "{colors.card}"
135
- borderRadius: "{rounded.card}"
136
- boxShadow: "shadowBlur:30, shadowColor:rgba(0,0,0,0.1), shadowOffsetY:10"
137
- description: "浅区图表 tooltip"
138
- chartTooltipDark:
139
- background: "{colors.header}"
140
- border: "rgba(255,255,255,0.2)"
141
- borderRadius: "8px"
142
- color: "#FFFFFF"
143
- description: "暗/深红区图表 tooltip 变体"
144
- anchors:
145
- - id: crimson-accent
146
- type: token
147
- desc: 深红点睛色,仅用于品牌区块背景、强调数值、进度条、装饰线与 hover(见 colors.primary),绝不入正文或大面积辅助面
148
- - id: full-bleed-rhythm
149
- type: pattern
150
- desc: 可用全幅明暗区块与大留白形成呼吸节奏,明暗顺序和段落数量按内容决定
151
- - id: mega-black-title
152
- type: pattern
153
- desc: 超黑字重 + 超紧字距的巨型标题,搭配全大写英文注释标签,中英双语层次
154
- - id: eyebrow-line
155
- type: component
156
- desc: 小节 eyebrow 前置一段深红短装饰线 + 大写英文标签
157
- - id: metric-card
158
- type: component
159
- desc: 浅色指标卡,hover 时品牌色投影加深、底部进度线展开、图标翻色
160
- - id: crimson-chart-seq
161
- type: token
162
- desc: 图表固定的深红→鲑橙 5 段序列色,图表不出现其他色相(见 colors.seq1–seq5)
163
- - id: glass-on-dark
164
- type: component
165
- desc: 暗区玻璃态透明白容器 + backdrop-blur,边框极淡白
166
- gaps:
167
- - Inter 声明加载权重为 300/400/600/700,但 font-black(900) 驱动几乎所有标题、font-medium(500) 用于 footer 描述——二者均未在声明加载集里。本档 @import 已补齐 300;400;500;600;700;900,供消费侧忠实加载(源加载集不全)。
168
- - 进度条渐变 from-red-900 依赖 Tailwind 内置 red-900(#7F1D1D),非自定义 token;自定义类仅 *-nebula-crimson。
169
- - 未声明负向/危险/警告语义色,仅有绿色增长标记(growthText/growthBg)。
170
- - 中大号标题多数未显式声明 line-height,依赖浏览器默认(仅 Hero 有 leading-[0.9]、正文有 leading-relaxed)。
171
- - shadow-2xl 列出但无具体使用位置;ECharts 轴标签在 #999999(BASE) 与 #666666(横向条形变体) 间混用无明述理由。
172
- - text-gray-500 / text-gray-700 在组件中临时使用,但仅 gray-400/gray-900 被正式 token 化。
173
- - 未声明 motion 缓动曲线 token(仅进度条一处内联 ease-out)。
174
- ---
175
-
176
- ## Overview
177
-
178
- 高端商务年报美学:权威、庄重、自信、高端科技感。深红主色 `#8B0000` 被克制地用作点睛色,仅出现在品牌区块背景、强调数值、装饰线与 hover 态;大面积由白色 / 浅灰 `#FAFAFA` / 近纯黑 `#1A0000`–`#050505` 承担。可用明暗交替的全幅区块营造呼吸感,但不固定区块顺序。
179
-
180
- 视觉签名 = 超黑字重(`font-black` / 900)+ 超紧字距(`tracking-tighter`)的巨型标题,搭配全大写英文注释标签(`uppercase tracking-widest`),中英双语层次分明。背景系统性叠加网格线、carbon-fibre 纹理、径向渐变与模糊色块(含品牌色 `blur-3xl` 光斑);暗色区使用玻璃态透明白容器 `bg-white/5 ~ /20`。
181
-
182
- ## Colors
183
-
184
- 角色 × 值 × 用法:
185
-
186
- | 角色 | 值 | 用法 |
187
- |------|-----|------|
188
- | background 主内容区底 | `#FAFAFA` | 浅色段落基底(`bg-[#fafafa]`)|
189
- | card 卡片/面板 | `#FFFFFF` | 卡片、面板、容器 |
190
- | header 强调区背景 | `#8B0000` | 全幅品牌区块(Hero、业务分析)|
191
- | foreground 主文字 | `#111827` | 标题与正文(`text-gray-900`)|
192
- | muted-foreground 弱文字 | `#9CA3AF` | 标签、副标、说明(`text-gray-400`)|
193
- | primary 点睛 | `#8B0000` | 关键数值、图标高亮、进度条、分隔线 |
194
- | border 边框 | `#F3F4F6` | 浅色卡片/面板边框(`border-gray-100`)|
195
-
196
- 深/暗区背景:Hero `#1A0000`(深红黑)、Outlook `#030712`(`bg-gray-950` 近纯黑)、Footer `#050505`(极深黑)。
197
-
198
- 语义色(唯一声明):增长/正向 = 绿 `#16A34A` 文字 / `#DCFCE7` 底(`text-green-600` / `bg-green-50`)。未声明负向/危险/警告色。
199
-
200
- 浅色辅助:淡红底 accent `#FEF2F2`(`bg-red-50`,图标/高亮底)。暗区玻璃容器 = `rgba(255,255,255,0.05~0.2)`。
201
-
202
- 图表序列色(ECharts,放这里作 token):`seq1 #8B0000 → seq2 #A52A2A → seq3 #CD5C5C → seq4 #E9967A → seq5 #FFA07A`,深红 → 鲑橙 5 段固定序列,用作默认 `color` 数组、线填充、柱填充、饼环等。图表不出现其他色相。ECharts 网格线 `#EEEEEE`、轴标签 `#999999`(横向条形变体用 `#666666`);线面积渐变 `rgba(139,0,0,0.15)→rgba(139,0,0,0)`;散点阴影 `rgba(139,0,0,0.3)`;轴指针阴影 `rgba(139,0,0,0.05)`。
203
-
204
- 自定义品牌类(原样保留):
205
- ```css
206
- .bg-nebula-crimson { background-color: #8B0000; }
207
- .text-nebula-crimson { color: #8B0000; }
208
- .border-nebula-crimson { border-color: #8B0000; }
209
- ```
210
-
211
- ## Typography
212
-
213
- **字体加载(HARD REQUIREMENT,原样写入全局样式首行,禁止替换域名):**
214
- ```css
215
- @import url('https://miaoda.feishu.cn/fonts/css2?family=Inter:wght@300;400;500;600;700;900&display=swap');
216
- ```
217
- 字体栈:`font-family: 'Inter', 'PingFang SC', 'Microsoft YaHei', sans-serif;`。英文用 Inter,中文用 PingFang SC / Microsoft YaHei(系统字体,零成本兜底),末位 `sans-serif`。ECharts `textStyle.fontFamily` 同栈,部分轴/标签组件覆盖为 `Inter`。
218
-
219
- > Inter 是拉丁正文/展示无衬线体,非手写体,含完整拉丁字形;中文由系统 PingFang SC / Microsoft YaHei 承接,无需额外镜像加载。@import 权重已从源声明的 300/400/600/700 补齐 500 与 900(源全文用 `font-black`(900) 与 `font-medium`(500) 却未列入加载集,此处忠实补齐,见 gaps)。
220
-
221
- 字号体系(verbatim Tailwind):
222
-
223
- | 层级 | 用途 | 类 |
224
- |------|------|-----|
225
- | H1 Hero | 页面主标题 | `text-6xl md:text-9xl font-black leading-[0.9] tracking-tighter` |
226
- | H1 数字 | 巨型统计数值 | `text-8xl font-black tracking-tighter text-nebula-crimson` |
227
- | H2 章节 | 小节标题 | `text-5xl font-black tracking-tight` |
228
- | H2 Outlook | 展望标题 | `text-6xl md:text-8xl font-black tracking-tighter` |
229
- | H3 卡片 | 子块标题 | `text-2xl font-black tracking-tight` |
230
- | H3 面板 | 图表面板标题 | `text-xl font-bold` |
231
- | H4 数据 | 大数据展示 | `text-5xl` 或 `text-4xl` + `font-black tracking-tight` |
232
- | 章节英文标签 | eyebrow | `text-xs font-black tracking-widest uppercase text-nebula-crimson` |
233
- | 指标标签 | 卡片顶标签 | `text-[10px] font-bold uppercase tracking-[0.15em] text-gray-400` |
234
- | 正文 | 段落 | `text-lg leading-relaxed text-gray-400` 或 `text-sm text-gray-500` |
235
- | 脚注/微标签 | micro label | `text-[10px] uppercase font-black tracking-widest` |
236
- | Footer 品牌名 | | `text-xl font-black tracking-[0.3em] uppercase` |
237
-
238
- 字距:`tracking-tighter`(Hero/Outlook/数字巨标);`tracking-tight`(多数 H2/H3/H4 与指标值);`tracking-widest`(英文大写 eyebrow/微标签);`tracking-[0.15em]`(指标标签);`tracking-[0.2em]`(强调框小标题);`tracking-[0.3em]`(Footer 品牌名);正文无字距。行高仅 `leading-[0.9]`(Hero)与 `leading-relaxed`(正文/描述)显式声明。
239
-
240
- ## Layout
241
-
242
- 容器:`max-w-7xl mx-auto`;水平内边距 `px-8 md:px-24`(移动 2rem / 桌面 6rem);区块垂直内边距 `py-32`(8rem)。
243
-
244
- 区块间距:标题→内容 `mb-20`(5rem);标准网格间距 `gap-6`(1.5rem),宽松 `gap-10 ~ gap-24`;卡片内边距 `p-8 ~ p-12`;元素间距 `mb-3 ~ mb-6`。
245
-
246
- 根据内容在浅色、深红和近黑表面间建立节奏;不要求年报章节、Hero、Overview、Business、Team、Outlook 或 Footer 按固定顺序出现。深色区适合巨型标题或关键结论,浅色区适合高密度内容,玻璃卡用于暗区承载信息。
247
-
248
- 网格列数和主次比例按信息关系确定。窄屏减少列数、缩放巨型标题并保持内容顺序清晰,不保留桌面端的固定分栏。
249
-
250
- ## Elevation & Depth
251
-
252
- | 级别 | 值 | 用途 |
253
- |------|-----|------|
254
- | 微 | `shadow-sm` | 图表面板 |
255
- | 标准 | `shadow-lg` | 产品卡 |
256
- | 强 | `shadow-xl` | 浮层信息面板 |
257
- | 巨 | `shadow-2xl` | 暗区特殊容器(无具体使用位,见 gaps)|
258
- | 指标卡默认 | `0 10px 40px -15px rgba(0,0,0,0.1)` | 指标卡 |
259
- | 指标卡 hover | `0 20px 60px -15px rgba(139,0,0,0.2)` | 品牌色染色投影 |
260
- | 暗区白面板 | `0 40px 100px -20px rgba(0,0,0,0.3)` | 深区内白面板 |
261
-
262
- ECharts:浅区 tooltip `shadowBlur:30, shadowColor:rgba(0,0,0,0.1), shadowOffsetY:10`;散点 `shadowBlur:4, shadowColor:rgba(139,0,0,0.3)`。
263
-
264
- 背景装饰:Hero 复合 = `bg-[#1a0000]` + 径向渐变 `radial-gradient(circle at 20% 30%, rgba(139,0,0,0.4) 0%, transparent 50%)` 与 `radial-gradient(circle at 80% 70%, rgba(165,42,42,0.3) 0%, transparent 50%)` + 网格线 `1px rgba(255,255,255,0.05)` @60px `opacity-20` + carbon-fibre 纹理 `opacity-[0.03]`。暗区模糊色块:`w-2/3 bg-nebula-crimson skew-x-12 opacity-10 blur-3xl`,反向计数块 `w-1/2 bg-blue-900 skew-x-[-12deg] opacity-5 blur-3xl`。浅区柔光:`w-64 h-64 bg-red-50 rounded-full blur-3xl opacity-50`。深红点阵:`radial-gradient(circle at 2px 2px, white 1px, transparent 0)` `backgroundSize:40px 40px` `opacity-10`。玻璃:`backdrop-blur-md`。
265
-
266
- ## Shapes
267
-
268
- 圆角:`rounded-lg`(8px, badge/图标容器) · `rounded-xl`(12px, 标准卡) · `rounded-2xl`(16px, 中面板) · `rounded-3xl`(24px, 大面板/产品卡) · `rounded-[2rem]`(32px, 巨容器) · `rounded-full`(进度条)。图表容器 `rounded-2xl` 或 `rounded-[2rem]`;图表 tooltip `borderRadius:12`(浅) / `8`(暗变体);柱 itemStyle 顶角 `[10,10,0,0]`、横向 `[0,10,10,0]`。
269
-
270
- 边框:标准浅色 `border border-gray-100`;暗区玻璃 `border border-white/10`;左强调 `border-l-4 border-nebula-crimson`(强调框 `border-l-8`);产品卡底强调 `border-b-[12px] border-gray-100 hover:border-nebula-crimson`;hover 底部进度线 `h-1 w-0 bg-nebula-crimson group-hover:w-full`;Footer 顶 `border-t border-white/5`;分隔 `h-px w-full bg-gray-100`,品牌分隔 `h-px w-24 bg-nebula-crimson`;目标卡增长徽章 `border border-red-800/30`。
271
-
272
- ## Components
273
-
274
- - **指标卡**:`{components.metricCard}` — 浅色卡;hover 投影转品牌色深投影、底部进度线展开、图标翻色,`transition-all duration-500`。
275
- - **品牌区块**:`{components.crimsonBlock}` — 全幅深红/深红黑区块,叠加 skew 模糊光斑与深红点阵。
276
- - **玻璃卡**:`{components.glassCard}` — 暗区透明白容器 + `backdrop-blur-md`,hover 提亮。
277
- - **左强调条**:`{components.emphasisBar}` — 数据高亮,hover 淡红底。
278
- - **产品卡**:`{components.productCard}` — hover 上浮 + 图标放大 + 底边线变品牌色。
279
- - **进度条**:`{components.progressBar}` — 红→深红渐变,`transition-all duration-[1.5s] ease-out`。
280
- - **图表**:序列色见 `{colors.seq1}`–`{colors.seq5}`(深红→鲑橙 5 段,不引入其他色相);浅区 tooltip `{components.chartTooltipLight}`,暗/深红区 tooltip `{components.chartTooltipDark}`。
281
-
282
- 交互动效:阴影加深 / 上浮 `-translate-y-4` / 底线展开 `w-0→w-full` / 图标 `scale-110` 均 `duration-500`;文字微移 `hover:translate-x-1 duration-300`;图标翻色 `duration-300`;玻璃提亮 `bg-white/5→/10 duration-300`。动画:滚动提示 `animate-bounce opacity-40`;Hero 标题渐变 `animate-pulse`;进度条 `duration-[1.5s] ease-out`。
283
-
284
- ## Hard Rules
285
-
286
- - 标题始终 `font-black`(900) + `tracking-tight` 或 `tracking-tighter`;英文辅助标签始终 `uppercase tracking-widest text-[10px]`。
287
- - 深红 `#8B0000` 极度克制:仅用于品牌区块背景、强调数值、进度条、装饰线与 hover 过渡;正文与大面积辅助面禁用深红,改用白/灰承载。
288
- - 页面应使用浅色与暗色表面建立对比节奏,但不规定颜色顺序、段数或每段必须全幅。
289
- - 内容容器可参考 `max-w-7xl mx-auto`,并按任务形态调整。
290
- - eyebrow 行在大写英文标签前必须前置小装饰线 `h-0.5 w-8 bg-nebula-crimson`。
291
- - 图表配色必须是固定的深红→鲑橙 5 段序列(`{colors.seq1}`–`{colors.seq5}`);图表内不引入其他色相。
292
- - 组件圆角下限为 `rounded-lg`(8px),禁止直角卡片。
293
- - 字体 @import 域必须走 `https://miaoda.feishu.cn/fonts/css2`,禁止 `fonts.googleapis.com` 直连。
294
-
295
- ## Exceptions
296
-
297
- - `bg-blue-900` 仅允许作为暗区 `opacity-5 blur-3xl` 背景光斑出现(反向计数块),绝不作为可用 UI 色相。
298
- - 进度条渐变起点 `from-red-900`(#7F1D1D) 借用 Tailwind 内置色,属唯一允许的非 `nebula-crimson` 品牌红。
299
- - 暗色背景为逐区块选择(Hero/Outlook/Footer),非全局明暗主题切换系统;不存在 theme toggle。
300
-
301
- ## Do's and Don'ts
302
-
303
- - Do:用白/深灰的大量留白框住深红点睛;中英双语标题保持层次(超黑巨标 + 大写英文 eyebrow)。
304
- - Do:图表容器统一 `rounded-2xl`/`rounded-[2rem]` + `shadow-sm`;hover 态优先用品牌色染色投影传达高端感。
305
- - Don't:不引入第二强调色相(除绿色增长标记外,全系仅深红 + 灰阶)。
306
- - Don't:不使用衬线体;不加 `rounded-lg` 以下的小圆角组件。
@@ -1,74 +0,0 @@
1
- ---
2
- version: "neuform-top-creators-featured"
3
- name: nexuscore-analytics
4
- name_zh: 核心分析
5
- description: "近黑底配电光紫的精密分析界面:紧凑直角面板、清晰的数据层级与等宽元数据组成克制的未来感。适合分析看板、运营后台、工作台、开发者工具和界面型产品展示;动态光效只用于建立焦点,不能取代内容结构。"
6
- colors:
7
- primary: "#6D5DFB"
8
- secondary: "#18181B"
9
- ring: "#6D5DFB"
10
- background: "#0F1115"
11
- card: "#18181B"
12
- foreground: "#FFFFFF"
13
- muted-foreground: "#A1A1AA"
14
- border: "#27272A"
15
- typography:
16
- display-lg:
17
- fontFamily: "Inter"
18
- fontSize: "64px"
19
- fontWeight: 500
20
- lineHeight: "1.04"
21
- letterSpacing: "0"
22
- body-md:
23
- fontFamily: "Inter"
24
- fontSize: "16px"
25
- fontWeight: 400
26
- lineHeight: "1.6"
27
- label-md:
28
- fontFamily: "JetBrains Mono"
29
- fontSize: "12px"
30
- fontWeight: 600
31
- lineHeight: "1.2"
32
- spacing:
33
- base: "8px"
34
- gap: "16px"
35
- card-padding: "24px"
36
- section-padding: "80px"
37
- rounded:
38
- card: "8px"
39
- control: "8px"
40
- pill: "9999px"
41
- components:
42
- card:
43
- background: "Use the card token with subtle borders and restrained shadow depth"
44
- radius: "Match the declared card radius token"
45
- button:
46
- background: "Use primary colors for the main action"
47
- radius: "Use the declared control or pill radius according to component role"
48
- ---
49
- # NexusCore Analytics
50
- Source: Neuform Featured templates from top creators. Author: Meng To (@mengto). Views: 18; favorites: 2; remixes: 0.
51
- Tags: dashboard, charts, bento, animated, webgl, threejs, cta, navigation.
52
- ## Overview
53
- 近黑背景与深灰表面承载密集但可读的数据层级,电光紫只落在关键指标、当前状态与主操作。Inter 负责正文,JetBrains Mono 负责标签和技术元数据。适合分析看板、运营后台、开发者工具、工作台与界面型产品展示。
54
- ## Composition
55
- 用核心指标或关键工作区建立焦点,再以紧凑模块组织次级信息;具体位置与顺序按任务决定。桌面端可保留横向比较和数据密度,窄屏按任务优先级重排,主操作保持可见。
56
- ## Colors
57
- Anchor the palette in primary #6D5DFB, secondary #18181B, ring #6D5DFB, background #0F1115, card #18181B, foreground #FFFFFF. Keep background, surface, text, and border roles distinct so generated layouts retain the same contrast pattern as the source.
58
- ## Typography
59
- Use Inter for display moments and Inter for body copy unless the HTML clearly demands a compatible fallback. Labels and technical metadata should use JetBrains Mono or an equivalent mono face.
60
- ## Layout
61
- Keep spacing deliberate and stable. Choose grid direction, max-width, card density, and responsive stacking from the content relationships. Source layouts are examples, not structures to reproduce.
62
- ## Components
63
- Dashboard, chart, and data panels should preserve their compact operational hierarchy, nested surfaces, and metric emphasis.
64
- ## Motion
65
- Preserve existing motion cues such as masked reveals, staggered entrance, hover lift, scroll-triggered transitions, and ambient movement. Keep easing smooth and restrained.
66
- ## WebGL & Effects
67
-
68
- If the source includes canvas, WebGL, Three.js, gradients, particles, or atmospheric effects, rebuild them as supporting layers behind the content. Keep effects performant, responsive, and secondary to the interface.
69
-
70
- ## Guardrails
71
- - Do not flatten the source into a generic card grid.
72
- - Do not swap the color mode unless the source clearly supports it.
73
- - Preserve a strong focal signal and the intended visual density without copying a fixed first-viewport composition.
74
- - Keep buttons, cards, and badges aligned to the same radius and border language.