File contents ---
name: bujue-design-system
description: Applies 不觉 design rules across 平板/手机/Web with 白版/黑板 themes. Use when the user provides UI 规范/设计系统/Token，或要求按不觉规范实现 Figma/前端样式。
不觉设计系统（多平台 + 白版/黑板）
总则（优先级）
本技能是最高优先级视觉规范 ：当用户要求“按不觉规范/规则”时，优先使用这里的 tokens 与约定。用户新增/修订优先 ：用户后续提供的新规则覆盖同名条目。
颜色使用原则（重要）
主视觉以黑白灰为主 ：除非用户明确要求，否则不要引入彩色做“主色/强调色”。红色 #E60023 仅用于错误/危险语义 ：如报错提示、危险操作（删除/不可逆）确认、校验错误状态。其他颜色（如紫菜星球/盘八斗主色）默认不用于该软件主流程 UI ，只有在用户明确指定业务场景需要时才使用。
适用范围（平台 + 主题）
平台（端）
平板 ：文字样式见“文字样式（平板）”。圆角常用 4 。手机 ：文字样式见“文字样式（手机）”。圆角常用 4 。Web ：文字样式见“文字样式（Web）”。圆角常用 8 。
主题（白版/黑板）
白版 = 亮色主题；黑板 = 暗色主题。两者共用同一套语义命名，但具体颜色值/透明度不同。
使用约定：
需要同时支持两套主题时：同一语义 token 在白版/黑板各取对应值 。
若只做单主题：按用户指定主题（默认白版）。
圆角规则（跨平台）
若组件明确为胶囊/圆形头像：使用 大圆角100（与平台无关）。
字体家族（跨平台）
字体：Source Han Sans CN （Regular / Medium / Normal）
默认：letterSpacing = 0%（除非用户另行规定）
颜色 Tokens（语义名 → 值）
白版
白版/文字 #333: #333333 + #000000 @20%白版/文字 #666: #666666白版/文字 #999: #999999白版/错误色 #E60023: #e60023（仅错误/危险语义）白版/禁用色 #ccc: #cccccc白版/白色 #FFF: #ffffff白版/背景色1级: #fafafa白版/背景色2级 #F5F5F5: #f5f5f5白版/背景色3级: #f1f1f1白版/背景色4级 EDEDED: #ededed白版/背景色5级 #E2E2E2: #e2e2e2白版/线框色1级 #EBEBEB: #ebebeb白版/线框色2级 #DBDBDB: #dbdbdb白版/选中色浅 #FDE6E9: #fde6e9白版/APP导航栏底部透明度 #FFF 80%: #ffffff @80%
黑板
黑板/文字 #FFF 85%: #ffffff @85%黑板/文字 #FFF 65%: #ffffff @65%黑板/文字 #FFF 45%: #ffffff @45%黑板/禁用色 #FFF 25%: #ffffff @25%黑板/线框色 #FFF 15%: #ffffff @15%黑板/背景色1 #000: #000000黑板/背景色2 #151515: #151515黑板/图片底部图片预览色: #1f1f1f黑板/背景色3 #2A2A2A: #2a2a2a黑板/背景色4 #454545: #454545黑板/标签黑底#000 30%: #000000 @30%
其他品牌色（默认不使用）
紫菜星球: #8864de盘八斗主色: #3a7bff
透明度写法（重要）
#RRGGBB @xx% 表示 alpha。生成代码时：
CSS ：优先用 rgba(r,g,b,a) 或 #RRGGBBAAFigma ：用颜色 + opacity/alpha
效果样式/阴影/模糊
白底阴影: DROP_SHADOW x=0 y=0 blur=12 #000000@6%灰底阴影: DROP_SHADOW x=0 y=0 blur=12 #000000@4%悬浮框阴影: DROP_SHADOW x=0 y=0 blur=12 #000000@8%APP模糊+悬浮窗: DROP_SHADOW #000000@8% + BACKGROUND_BLUR 80pxAPP导航栏模糊: BACKGROUND_BLUR 80px
文字样式（平板）
（你最早给的那套：32/48、20/30、18/27、14/21、12/19、10/15 等）
标题/超大标题Medium: Medium; 32px; lineHeight=48px标题/大标题Regular: Medium; 20px; lineHeight=30px标题/中标题Regular: Medium; 18px; lineHeight=27px标题/小标题Medium: Medium; 14px; lineHeight=21px标题/小标题Regular: Regular; 14px; lineHeight=21px正文/正文大/常态Normal: Normal; 14px; lineHeight=21px正文/正文大/输入Normal: Normal; 14px; lineHeight=24px正文/正文中/常态Normal: Normal; 12px; lineHeight=19px正文/正文中/多行Normal: Normal; 12px; lineHeight=21px正文/正文中/输入Normal: Normal; 12px; lineHeight=24px正文/正文小/常态Normal: Normal; 10px; lineHeight=15px
文字样式（Web）
（来自你截图的右侧 Text styles）
大标题
超大标题: Medium; 40px; lineHeight=60px大标题: Medium; 20px; lineHeight=30px大标题两行: Medium; 20px; lineHeight=36px
弹窗标题
弹窗标题 Medium: Medium; 16px; lineHeight=24px弹窗标题 Regular: Regular; 16px; lineHeight=24px弹窗标题 Normal: Normal; 16px; lineHeight=24px
正文常规14
正文常规14 Medium: Medium; 14px; lineHeight=21px正文常规14 Regular: Regular; 14px; lineHeight=21px正文常规14 Normal: Normal; 14px; lineHeight=21px
正文常规12
正文常规12 Normal: Normal; 12px; lineHeight=19px正文常规12 Medium: Medium; 12px; lineHeight=19px
辅助信息10
辅助信息 Normal: Normal; 10px; lineHeight=15px辅助信息 Regular: Regular; 10px; lineHeight=15px
特殊
特殊: Regular; 8px; lineHeight=12px
文字样式（手机）
（来自你截图的右侧 Text styles）
标题&导航栏 / 常态
标题超大 Regular: Regular; 20px; lineHeight=30px标题大 Regular: Regular; 16px; lineHeight=24px标题 Regular: Regular; 14px; lineHeight=21px标题 Normal: Normal; 14px; lineHeight=21px标题小 Normal: Normal; 12px; lineHeight=19px标题备注 Normal: Normal; 10px; lineHeight=15px
标题&导航栏 / TAB
TAB 选中: Medium; 14px; lineHeight=21pxTAB 未选中: Normal; 14px; lineHeight=21px
正文 / 正文大
正文大 常态: Normal; 14px; lineHeight=21px正文大 输入: Normal; 14px; lineHeight=24px
正文 / 正文中
正文中 常态 Medium: Medium; 12px; lineHeight=19px正文中 常态 Normal: Normal; 12px; lineHeight=19px正文中 多行 Normal: Normal; 12px; lineHeight=21px正文中 输入: Normal; 12px; lineHeight=24px
正文 / 正文小
正文小 常态10: Normal; 10px; lineHeight=15px正文小 分类卡片: Regular; 10px; lineHeight=13px正文小 常态8: Normal; 8px; lineHeight=12px
变量集合（Figma Variables）
Collection：模式包含 4一级圆角、2二级圆角、大圆角100（变量数=4）
命名约定（组件/变体）
组件：业务前缀-组件名（例：创意版-素材卡）
变体属性：中文业务语义（例：状态、尺寸、类型）
变体值：中文（例：默认、添加、禁用、选中）
1 --- 2 name: cursor-skills-share 3 description: --- 4 --- 5 --- 6 name: bujue-design-system 7 description: Applies 不觉 design rules across 平板/手机/Web with 白版/黑板 themes. Use when the user provides UI 规范/设计系统/Token，或要求按不觉规范实现 Figma/前端样式。 8 --- 9 10 # 不觉设计系统（多平台 + 白版/黑板） 11 12 ## 总则（优先级） 13 14 - **本技能是最高优先级视觉规范**：当用户要求“按不觉规范/规则”时，优先使用这里的 tokens 与约定。 15 - **用户新增/修订优先**：用户后续提供的新规则覆盖同名条目。 16 17 ## 颜色使用原则（重要） 18 19 - **主视觉以黑白灰为主**：除非用户明确要求，否则不要引入彩色做“主色/强调色”。 20 - **红色 `#E60023` 仅用于错误/危险语义**：如报错提示、危险操作（删除/不可逆）确认、校验错误状态。 21 - 其他颜色（如紫菜星球/盘八斗主色）**默认不用于该软件主流程 UI**，只有在用户明确指定业务场景需要时才使用。 22 23 ## 适用范围（平台 + 主题） 24 25 ### 平台（端） 26 27 - **平板**：文字样式见“文字样式（平板）”。圆角常用 **4**。 28 - **手机**：文字样式见“文字样式（手机）”。圆角常用 **4**。 29 - **Web**：文字样式见“文字样式（Web）”。圆角常用 **8**。 30 31 ### 主题（白版/黑板） 32 33 白版 = 亮色主题；黑板 = 暗色主题。两者共用同一套语义命名，但具体颜色值/透明度不同。 34 35 使用约定： 36 - 需要同时支持两套主题时：**同一语义 token 在白版/黑板各取对应值**。 37 - 若只做单主题：按用户指定主题（默认白版）。 38 39 ## 圆角规则（跨平台） 40 41 - **平板**：常用 `4` 42 - **手机**：常用 `4` 43 - **Web**：常用 `8` 44 45 > 若组件明确为胶囊/圆形头像：使用 `大圆角100`（与平台无关）。 46 47 ## 字体家族（跨平台） 48 49 - 字体：**Source Han Sans CN**（Regular / Medium / Normal） 50 - 默认：`letterSpacing = 0%`（除非用户另行规定） 51 52 ## 颜色 Tokens（语义名 → 值） 53 54 ### 白版 55 56 - `白版/文字 #333`: `#333333` + `#000000 @20%` 57 - `白版/文字 #666`: `#666666` 58 - `白版/文字 #999`: `#999999` 59 - `白版/错误色 #E60023`: `#e60023`（仅错误/危险语义） 60 - `白版/禁用色 #ccc`: `#cccccc` 61 - `白版/白色 #FFF`: `#ffffff` 62 - `白版/背景色1级`: `#fafafa` 63 - `白版/背景色2级 #F5F5F5`: `#f5f5f5` 64 - `白版/背景色3级`: `#f1f1f1` 65 - `白版/背景色4级 EDEDED`: `#ededed` 66 - `白版/背景色5级 #E2E2E2`: `#e2e2e2` 67 - `白版/线框色1级 #EBEBEB`: `#ebebeb` 68 - `白版/线框色2级 #DBDBDB`: `#dbdbdb` 69 - `白版/选中色浅 #FDE6E9`: `#fde6e9` 70 - `白版/APP导航栏底部透明度 #FFF 80%`: `#ffffff @80%` 71 72 ### 黑板 73 74 - `黑板/文字 #FFF 85%`: `#ffffff @85%` 75 - `黑板/文字 #FFF 65%`: `#ffffff @65%` 76 - `黑板/文字 #FFF 45%`: `#ffffff @45%` 77 - `黑板/禁用色 #FFF 25%`: `#ffffff @25%` 78 - `黑板/线框色 #FFF 15%`: `#ffffff @15%` 79 - `黑板/背景色1 #000`: `#000000` 80 - `黑板/背景色2 #151515`: `#151515` 81 - `黑板/图片底部图片预览色`: `#1f1f1f` 82 - `黑板/背景色3 #2A2A2A`: `#2a2a2a` 83 - `黑板/背景色4 #454545`: `#454545` 84 - `黑板/标签黑底#000 30%`: `#000000 @30%` 85 86 ### 其他品牌色（默认不使用） 87 88 - `紫菜星球`: `#8864de` 89 - `盘八斗主色`: `#3a7bff` 90 91 ### 透明度写法（重要） 92 93 - `#RRGGBB @xx%` 表示 alpha。 94 - 生成代码时： 95 - **CSS**：优先用 `rgba(r,g,b,a)` 或 `#RRGGBBAA` 96 - **Figma**：用颜色 + opacity/alpha 97 98 ## 效果样式/阴影/模糊 99 100 - `白底阴影`: DROP_SHADOW `x=0 y=0 blur=12` `#000000@6%` 101 - `灰底阴影`: DROP_SHADOW `x=0 y=0 blur=12` `#000000@4%` 102 - `悬浮框阴影`: DROP_SHADOW `x=0 y=0 blur=12` `#000000@8%` 103 - `APP模糊+悬浮窗`: DROP_SHADOW `#000000@8%` + BACKGROUND_BLUR `80px` 104 - `APP导航栏模糊`: BACKGROUND_BLUR `80px` 105 106 ## 文字样式（平板） 107 108 （你最早给的那套：32/48、20/30、18/27、14/21、12/19、10/15 等） 109 110 - `标题/超大标题Medium`: Medium; `32px`; `lineHeight=48px` 111 - `标题/大标题Regular`: Medium; `20px`; `lineHeight=30px` 112 - `标题/中标题Regular`: Medium; `18px`; `lineHeight=27px` 113 - `标题/小标题Medium`: Medium; `14px`; `lineHeight=21px` 114 - `标题/小标题Regular`: Regular; `14px`; `lineHeight=21px` 115 - `正文/正文大/常态Normal`: Normal; `14px`; `lineHeight=21px` 116 - `正文/正文大/输入Normal`: Normal; `14px`; `lineHeight=24px` 117 - `正文/正文中/常态Normal`: Normal; `12px`; `lineHeight=19px` 118 - `正文/正文中/多行Normal`: Normal; `12px`; `lineHeight=21px` 119 - `正文/正文中/输入Normal`: Normal; `12px`; `lineHeight=24px` 120 - `正文/正文小/常态Normal`: Normal; `10px`; `lineHeight=15px` 121 122 ## 文字样式（Web） 123 124 （来自你截图的右侧 Text styles） 125 126 ### 大标题 127 128 - `超大标题`: Medium; `40px`; `lineHeight=60px` 129 - `大标题`: Medium; `20px`; `lineHeight=30px` 130 - `大标题两行`: Medium; `20px`; `lineHeight=36px` 131 132 ### 弹窗标题 133 134 - `弹窗标题 Medium`: Medium; `16px`; `lineHeight=24px` 135 - `弹窗标题 Regular`: Regular; `16px`; `lineHeight=24px` 136 - `弹窗标题 Normal`: Normal; `16px`; `lineHeight=24px` 137 138 ### 正文常规14 139 140 - `正文常规14 Medium`: Medium; `14px`; `lineHeight=21px` 141 - `正文常规14 Regular`: Regular; `14px`; `lineHeight=21px` 142 - `正文常规14 Normal`: Normal; `14px`; `lineHeight=21px` 143 144 ### 正文常规12 145 146 - `正文常规12 Normal`: Normal; `12px`; `lineHeight=19px` 147 - `正文常规12 Medium`: Medium; `12px`; `lineHeight=19px` 148 149 ### 辅助信息10 150 151 - `辅助信息 Normal`: Normal; `10px`; `lineHeight=15px` 152 - `辅助信息 Regular`: Regular; `10px`; `lineHeight=15px` 153 154 ### 特殊 155 156 - `特殊`: Regular; `8px`; `lineHeight=12px` 157 158 ## 文字样式（手机） 159 160 （来自你截图的右侧 Text styles） 161 162 ### 标题&导航栏 / 常态 163 164 - `标题超大 Regular`: Regular; `20px`; `lineHeight=30px` 165 - `标题大 Regular`: Regular; `16px`; `lineHeight=24px` 166 - `标题 Regular`: Regular; `14px`; `lineHeight=21px` 167 - `标题 Normal`: Normal; `14px`; `lineHeight=21px` 168 - `标题小 Normal`: Normal; `12px`; `lineHeight=19px` 169 - `标题备注 Normal`: Normal; `10px`; `lineHeight=15px` 170 171 ### 标题&导航栏 / TAB 172 173 - `TAB 选中`: Medium; `14px`; `lineHeight=21px` 174 - `TAB 未选中`: Normal; `14px`; `lineHeight=21px` 175 176 ### 正文 / 正文大 177 178 - `正文大 常态`: Normal; `14px`; `lineHeight=21px` 179 - `正文大 输入`: Normal; `14px`; `lineHeight=24px` 180 181 ### 正文 / 正文中 182 183 - `正文中 常态 Medium`: Medium; `12px`; `lineHeight=19px` 184 - `正文中 常态 Normal`: Normal; `12px`; `lineHeight=19px` 185 - `正文中 多行 Normal`: Normal; `12px`; `lineHeight=21px` 186 - `正文中 输入`: Normal; `12px`; `lineHeight=24px` 187 188 ### 正文 / 正文小 189 190 - `正文小 常态10`: Normal; `10px`; `lineHeight=15px` 191 - `正文小 分类卡片`: Regular; `10px`; `lineHeight=13px` 192 - `正文小 常态8`: Normal; `8px`; `lineHeight=12px` 193 194 ## 变量集合（Figma Variables） 195 196 - Collection：模式包含 `4一级圆角`、`2二级圆角`、`大圆角100`（变量数=4） 197 198 ## 命名约定（组件/变体） 199 200 - 组件：`业务前缀-组件名`（例：`创意版-素材卡`） 201 - 变体属性：中文业务语义（例：`状态`、`尺寸`、`类型`） 202 - 变体值：中文（例：`默认`、`添加`、`禁用`、`选中`）
commit f056a45fae
Frequently asked questions How do I install the Cursor Skills Share skill? Run npx skillmds@latest add zaihengwen-dev/cursor-skills-share in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.
What does the Cursor Skills Share skill do? --- It is listed under Coding & Dev Tools on SkillMD.
Is Cursor Skills Share safe to use? This skill has not completed SkillMD's automated safety review yet. Capability flags: reads secrets. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.
Which AI agents work with Cursor Skills Share? This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.
Is Cursor Skills Share free to use? Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.
Who published Cursor Skills Share? zaihengwen-dev (@zaihengwen-dev) published this skill. Their other Agent Skills are listed on their SkillMD profile.
zaihengwen-dev