Foundation 品牌基础:Logo / 色彩 / 字体 / 吉祥物
01-03
系统化 AI 学习与职业成长平台,
陪你从入门到精通,用 AI 改变未来。
✦
✧
↝
主色 Primary
中性色 Neutral · v4 五档
#1F2937
#6B7280
#D1D5DB
#F3F4F6
#FAFAFA
字体:HarmonyOS / PingFang SC
学习中
思考中
讲解中
开心
抱抱Components 高频组件:按钮 / 输入 / 卡片 / 标签
04-07默认状态
聚焦状态
已输入状态
错误状态
选择器
下拉选择
多行输入
课程卡片 / Course
数据卡片 / Stats
CTA 卡片
States 状态反馈:图标 / 提示 / 进度 / 表单状态
08-11进度条 Progress
步骤条 Steps
复选框 Checkbox
单选框 Radio
开关 Switch
Patterns 页面模式:弹窗 / 空状态 / 通知 / 导航
12-15
开始你的 AI 学习之旅
3 分钟快速注册,解锁专属学习计划



Decorations 装饰元素:sparkle / 箭头 / 高亮 / 引号气泡,跨产品复用
16-18SVG 内联即可。color = currentColor,靠外层 class 控色。
用于关键词强调、内容点缀、引语装饰。优先 wrap span 而不是改全段。
配合 hero / 测评 / 庆祝场景做"灵动感"。规则:装饰只在 hero / 顶部容器,不污染数据视图。
你的职业在哪个 位置?
复制此区块到任意 hero。装饰用 absolute + 百分比位置。
来自 Career Impact Diagnostic 的 16 张人物插画。手绘风格 + 暖白底 + 黄软光。完整 9 角色 + 3 题型 + 4 场景见手册 §11。








2026-05-13 ChatGPT 批次:40 张 chibi / 写实风格变体 —— JR Academy 主品牌 + UniMate AI + Job Hunter 子品牌混合。完整分组见手册 §12。








完整品牌手册
保留原品牌规范的完整内容:品牌定位、Logo、牛小匠资产、组件规范、Dashboard / Mobile 示例、文案语气、Do / Don't 与品牌隔离规则。
BRAND
品牌定位 · Logo 资产品牌定位
JR Academy / 匠人学院是全球华人 AI 学习第一站。总品牌覆盖官网入口、Dashboard、AI 职业诊断、社区活动和跨产品成长路径。
品牌一句话
学 AI 来匠人
STUDY AI AT JR ACADEMY.
一起成为 AI 时代的匠人。
三关键词
- AI 时代感:面向 AI 学习、职业成长、技能升级。
- 可信赖教育:界面清晰、结构专业、路径明确。
- 年轻陪伴感:牛小匠降低学习压力,增强记忆点。
反白版 Dark bg ⭐ v2PNG · 用于深色背景logo-zh-white.png
JR Box · PNG高分辨率位图 · 视频/海报jr-box.png
完整 Logo · PNG高分辨率位图 · 邮件签名logo-zh-full.png
品牌口号 Tagline · 学 AI 来匠人
手绘红 AI + 黑字 + 黄色下划线 · Hero / 营销 banner 专用
assets/logo/tagline-xueai-laijiangren.png
COLOR SYSTEM
色彩系统 · Token 用法| 类别 | 色值 | 用途 |
|---|---|---|
| 主黑 | #0D0F12 | 主文字、Logo、主 CTA、关键控件。 |
| 红 | #FF4D4F | 危险、错误、强提醒;不要做大面积背景。 |
| 紫 | #7B61FF | AI、学习进度、高级感、图表强调。 |
| 黄 | #FFC84D | 成就、警告、提醒、成长激励。 |
| 绿 | #22C55E | 成功、完成、正向反馈。 |
| 中性色 (5 档) | #1F2937 / #6B7280 / #D1D5DB / #F3F4F6 / #FAFAFA | 主文字 / 次正文 / 边框 / 浅 bg / 页面 bg。 |
TYPOGRAPHY
字体系统 · 字号尺度字体族
中文:HarmonyOS Sans SC / PingFang SC / 思源黑体。
英文:Plus Jakarta Sans / Inter。
等宽:JetBrains Mono / SF Mono。
字号规范
- H1:32px / Bold,用于大标题(v4 升级 from 36)。
- H2:24px / Bold,用于页面标题。
- H3:18px / Semibold,用于区块标题(v4 升级 from 20)。
- Body:14px / Regular,用于正文(v4 改:16→14)。
- Caption:12px / Regular,用于辅助 / metadata。
- Caption:12px / Regular,用于辅助信息。
MASCOT IP
牛小匠角色系统 · 资产库角色定义
牛小匠是 JR Academy AI 学习伙伴 / 职业成长陪伴官,代表学员在 AI 时代持续学习、探索方向、提升能力、链接机会的成长状态。
不可妥协特征
- 黑白小牛 / 小匠人形象。
- 戴黑色墨镜。
- 穿红色 JR 连帽衫或运动套装。
- 胸前保留 JR 标识。
使用场景
Hero、课程页、AI 助手、空状态、Toast、Alert、成就、证书、学习计划、移动端引导。
Hero · 全身大拇指官网 / hero / 启动屏official/01
Laptop + JR 杯学习 / 课程页official/02
Coding · 代码气泡编程课 / AI 编码official/03
Thinking · 思考问号AI 诊断 / FAQofficial/04
Teaching · 讲解数据AI 助手 / 数据课official/05
Celebration · 庆祝证书 / 徽章official/06
Laptop · 半身卡片 / chat avatarofficial/07
Cheering · 举拳streak / 加油official/08
吐舌笑完成 / 调皮emoji/01
羞涩感谢 / 谦虚emoji/02
思考loading / 待回复emoji/04
疑问FAQ / 空状态emoji/05
惊呼惊喜 / 重要提示emoji/06
欢呼任务完成 / 解锁bust/01
祈祷考试前 / 求好运bust/02
爱心喜爱 / 收藏成功bust/03
大哭失败 / 难过bust/04
生气错题 / 警告bust/05
尴尬出错 / 抱歉bust/06
吃面休闲 / 美食活动life/01
躺豆袋休息 / 番茄钟life/02
笔记本坐姿在线学习 / 日常life/03
粉色棒棒糖节日 / 女生节life/04
睡觉晚安 / 休息提醒life/05
啦啦队加油 / 倒计时life/06
笔记本学习中 / Dashboardwork/01
做笔记课程页 / 笔记work/02
Coding编程 / 技术课work/03
平板手写移动学习 / 笔记work/04
讲解图表AI 助手 / 数据课work/05
耳机视频课 / 远程学习work/06
基础二次创作 baseoutfit/01
立领中式风格outfit/02
新年春节 / 活动outfit/03
画家创意 / 设计课outfit/04
白衣浅色背景outfit/05
3D 灰高端 bannervariant/02
3D 棒球夹克周边参考variant/03
3D 玩偶礼品 / 周边variant/04
3D 微缩书桌创意大图variant/05
牛小匠简笔头像小尺寸识别niuxiaojiang-logoDASHBOARD
Web 端结构规范学 AI
来匠人
在 AI 时代,拥有清晰的职业方向与成长路径。
AI 时代职业趋势
能力雷达
下一步建议
MOBILE
移动端界面结构学 AI
来匠人
学习中 · 72%
学习中 · 45%
我的学习
12 课时
30%

COMPONENT RULES
组件规范 · 状态规则Buttons
Primary 高 38-48px,圆角 8px;Hover 加深,Active 压低,Disabled 使用 fog 背景和浅色文字。
Chips
高度 28-30px,圆角 full,字体 12px / 600;按语义使用红、紫、绿、黄、灰浅底。
Cards
白底、1px 边框、8-16px 圆角、轻阴影;课程卡必须有封面、标题、meta、进度。
Alerts
Success 绿、Warning 黄、Error 红、Info 蓝或紫;图标和说明文字必须清楚区分。
Avatar
AI 助手入口用牛小匠 standard;系统提示用 thinking;完成反馈用 celebration。
Progress
学习进度优先用紫色 fill;步骤条明确 done / active / waiting 三种状态。
Empty States
使用低密度布局、简短文案、明确下一步 CTA,可搭配小尺寸牛小匠。
Navigation
移动端 5 项以内,桌面侧边栏强调当前状态;标签、筛选、分页必须能同步 URL。
VOICE & TONE
文案语气 · 关键表达| 这样写 | 不要这样写 |
|---|---|
| 开始诊断 → | 立即开始您的职业诊断之旅 |
| 你的诊断结果 | 您的个人化诊断报告 |
| 三个月后,看看你跨象限了吗? | 请定期查看您的学习成长情况 |
| 学习打卡成功! | 恭喜您完成今日学习任务 |
| 学 AI 来匠人 | 探索 AI,开启智慧人生 |
DO / DON'T
设计红线 · 品牌隔离Do · 必须做
- 主 CTA 使用黑色或品牌红,保持克制。
- 页面大背景使用白色、浅灰或米白。
- 牛小匠保持红 JR 连帽衫、墨镜、JR 胸标。
- 学习进度使用紫色,完成状态使用绿色。
- Card 圆角 8-16px,阴影轻,不做厚重拟物。
- 文案用「你」,直接说用户下一步要做什么。
Don't · 禁止
- 不要大面积铺满红色背景。
- 不要用蓝色作为 JR Academy 主 CTA。
- 不要去掉牛小匠的墨镜、红衣、JR 胸标。
- 不要混用 UniMate / Job Hunter / Cert Master 的 mascot outfit。
- 不要在一屏重复堆很多牛小匠。
- 不要写空洞模板话、过度营销话。
BRAND FAMILY
四品牌隔离规则| 品牌 | Mascot | 主色 | 调性 | Tagline |
|---|---|---|---|---|
| JR Academy | 牛小匠 + 红 JR 连帽衫 + 墨镜 + JR 胸标 | #FF4D4F / #0D0F12 | AI 时代教育 + 成长激励 | 学 AI 来匠人 |
| UniMate AI | 牛小匠 + 学生装 | #FF7A66 | 学生陪伴 + 游戏化 | 陪你冲 deadline |
| Cert Master | 企鹅独立 IP | #FFC52A | 备考严肃 + 高效刷题 | 你的 AI 考证搭子 |
| Job Hunter | 牛 + 蓝西装 + 墨镜 + 公文包 | #5F7CFB | 专业 AI 求职陪伴 | 你的 AI 求职助手 |
DECORATIONS
装饰元素 · 跨产品复用规则资产库
- Shapes:Sparkle 4/5-pt · Dot · Ring · Soft Blob。
- Arrows:Straight · Curved · Scribble。
- Highlights:Highlighter · Wave Underline · Hand-Drawn Circle · Dashed Divider。
- Accents:Bubble Quote · Number Badge。
用色规则
- Sparkle / Highlighter / Wave → 黄 #FFC84D
- Arrow / Hand Circle / 强情绪 → 红 #FF4D4F
- Scribble / Ring → 紫 #7B61FF
- Dot / Bubble 中性 → 灰阶
使用决策树
- 关键词高亮:第一选 Highlighter,第二选 Wave Underline。
- 圈住一段:用 Hand-Drawn Circle,不用 box-shadow。
- 引导视线:Arrow Straight(CTA 内);Arrow Curved(跨段连接)。
- hero 灵动感:散落组合 Sparkle + Dot + Ring(见 panel 18)。
Do · 必须做
- 装饰只出现在 hero / 顶部容器 / 庆祝场景,不进入数据视图。
- 颜色取自 brand token(红 / 黄 / 紫 / 中性灰),不引入新色。
- SVG 用 currentColor,靠外层 class 控色。
- 一屏装饰元素 6-10 个为宜,过密 = 廉价。
Don't · 禁止
- 不要在 Dashboard / 数据表格 / 长正文里散落 sparkle。
- 不要把 Arrow 用作 CTA 主图标(CTA 自己有 → 字符即可)。
- 不要同时叠 Highlighter + Wave Underline + Hand Circle(视觉过载)。
- 不要给装饰加大阴影 / 厚重描边——保持轻盈。
ILLUSTRATIONS
人物插画 · Career Impact 系列用途定位
暖白底 + 黄软光 + 手绘人物 — 用于 AI 职业诊断、引导测评、结果反馈类**情感型场景**。区别于牛小匠(品牌 IP),这套是叙事辅助。
视觉规则
- 背景:暖白 #FDF8F2
- 角色加 .deco-blob 黄软光底
- 不加描边、不加投影、不二次裁剪
- 禁止跟牛小匠同屏
来源
原产于 jr-academy-web-zh / CareerImpactDiagnostic(Landing / Quiz / Result),2026-05-12 由匠人学院设计师定稿。共 16 张。
望远镜眺望hero · 入口 / 诊断按钮上方scene/hero-telescope
78 职业地图map · 跳转职业地图入口scene/map-78-orbit
路径旗帜result · 学习路径卡scene/path-flag
纸飞机result · 订阅 / 留邮箱scene/paper-plane
Risk · 思考风险题 · 红 / 珊瑚色系quiz/risk-thinking
Growth · 自信成长题 · 绿色系quiz/growth-confident
Mirror · 放松镜像题 · 紫色系quiz/mirror-relaxed
AI Wizard持续进化 · 紫+蓝role/ai-wizard
Creative Augmenter持续进化 · 黄+粉role/creative-augmenter
Cross-Domain Translator持续进化 · 珊瑚+蓝role/cross-domain-translator
Wave Rider转型升级 · 红+蓝role/wave-rider
Mid-Mountain Climber转型升级 · 橙+绿role/mid-mountain-climber
Still Life VIP稳定停滞 · 棕+米role/still-life-vip
Half-Beat Observer稳定停滞 · 灰+黄role/half-beat-observer
Sleeping Seed紧迫重构 · 紫+绿role/sleeping-seed
Old Map Holder紧迫重构 · 棕+紫role/old-map-holderDo · 必须做
- 插画底加 .deco-blob 黄软光(已嵌入 panel 19 的 illu-stage)。
- 角色插画跟其 4 象限主色匹配(见上表副标)。
- quiz 题型插画必须跟当前题色系一致。
- 跨产品复用:从 assets/illustrations/career-impact/ 复制使用。
Don't · 禁止
- 不要跟牛小匠同屏(IP 冲突)—— 一屏只能存在一套人物 IP。
- 不要加描边 / 阴影 / 厚重滤镜——保持手绘原貌。
- 不要二次裁剪人物(已是 1:1 正方形输出)。
- 不要把 quiz 题型插画用错色系(红绿紫混乱)。
- 不要把 9 角色插画用在跟"角色身份"无关的场景(如普通课程页)。
CHIBI VARIANTS
2026-05-13 ChatGPT 批次 · 37 张 chibi + 2 VI + 3 待识别批次说明
2026-05-13 由 ChatGPT 生成的设计变体 40 张,已识别 37 张归类完成,3 张落 _inbox 待 review。这批是 §3 主形象 + §10 牛小匠资产的风格变体,可用于辅助、海报、营销物料,不能替代主形象。
跟 §3 / §10 的区别
- §3 主形象:8 张官方标准,每一处用品牌资产首选
- §10 牛小匠资产库:44 张已沉淀的 6 大类(busts / lifestyle / working / outfits / variants / app-icons)
- §12 Chibi 批次:本批 40 张,部分会 promote 进 §10 主资产库,部分作辅助
风格鉴别
- Chibi 圆头:大部分主品牌资产(红 hoodie / 黑短裤)
- 写实毛茸茸:紫色 / 米色 hoodie 系列(3 张)
- 子品牌:UniMate(U logo + 紫辅色)/ Job Hunter(蓝 / 商务)
- 服装变体:粉色学生 / 绿色 AI 摇摆
黑白 · 代码气泡红 hoodie + 蓝 </> 气泡working/bw-code-bubble
红运动 · 平板教学全身 + 指挥棒 + AI 助手气泡working/red-tablet-teaching
红电脑 · JR 杯chibi 半身 + 杯子working/red-laptop-jr-mug
红电脑 · 特写chibi 笑脸半身working/red-laptop-closeup
红 · 教学图表全身 + 数据图表面板working/red-teaching-chart
红 · 笔本教学chibi 半身 + 笔 + 书working/red-pen-book
红 · 咖啡指点(写实)毛茸茸写实风格working/red-coffee-pointing-realistic
紫 · 数位板(写实)毛茸茸 + 设计师场景working/purple-tablet-design-realistic
红 · 思考全身 + 蓝问号expressions/red-thinking
红 · 庆祝(爱心星星)全身举拳 + 装饰expressions/red-cheer-confetti
红 · 单手举(星星)chibi 半身 + 黄红星expressions/red-cheering-stars
红 hoodie · 双手举全身 + 黑短裤expressions/red-hoodie-cheering
读 AI 书红 hoodie + 蓝 AI 书 + 书堆lifestyle/red-reading-ai
礼花拉炮红 hoodie + 彩纸飞舞lifestyle/red-celebration-popper
米色 · 相机摄影场景lifestyle/beige-camera
黑 · 地图背包探索 / 旅行 / 新生指引lifestyle/black-map-backpack
黑背心 · 健身headband + 哑铃 + 水壶lifestyle/black-gym-dumbbell
深色 · 读经典沉浸阅读 / 学者风lifestyle/dark-reading-coffee
橄榄色 · 写笔记绿植 + 钢笔 + 咖啡杯lifestyle/olive-writing-plants
棕 · PLAN 规划计划本 + 咖啡 + 书lifestyle/brown-plan-coffee
黑 · 吃面奶茶休闲 / 饭点lifestyle/black-noodles-boba
黑 · 背包探索侧背棕包 + 围巾lifestyle/black-backpack-explorer
思考 · 紫问号U logo + 红 hoodieunimate/thinking-question
电脑 · U 杯chibi 半身 + 工作场景unimate/laptop-u-mug
电脑 · 警告汗珠错误状态 / 紧张场景unimate/laptop-warning-sweating
Job Hunter · 蓝报纸读新闻 + AI 应用图标jobhunter/blue-newspaper-ai
Job Hunter · 米色商务领带 + 工牌jobhunter/beige-business
粉色 · 学生书桌女生 / 学生场景outfits-extra/pink-student-desk
绿色 · AI 摇摆ChatGPT vs AI 选择outfits-extra/green-ai-balance
JR Academy VI 系统11 模块 logo / 色 / 字 / 应用 / 文化 / mascot / iconvi-boards/jr-academy-visual-identity
UniMate AI Mascot Design主形象 / 次形象 / 表情 / 色 / 应用vi-boards/unimate-ai-mascot-design
uuid-7904ea67用户未贴预览 · 等待 review_inbox/uuid-7904ea67
image-20260513-163441用户未贴预览 · 等待 review_inbox/image-20260513-163441
chatgpt-02-39-23用户未贴预览 · 等待 review_inbox/chatgpt-02-39-23Do · 必须做
- 主品牌资产首选 §3 / §10 official;本批 §12 用于辅助 / 海报 / 营销。
- UniMate AI 资产(12.E)只在 UniMate 子品牌页面用,不进 JR Academy 主站。
- Job Hunter 资产(12.F 前 2 张)只在 Job Hunter 子品牌页面用。
- VI 设计板(12.G)是设计 reference,不直接拿去用作产品图。
Don't · 禁止
- 不要把 chibi 写实毛茸茸版(紫 / 米色)和 chibi 圆头版同屏混用 — 风格冲突。
- 不要把 UniMate / Job Hunter 子品牌资产用在 JR Academy 主站(一屏一套品牌)。
- 不要把 §12 的图当成 §3 主形象用 — 这批是变体,不是规范资产。
- 不要在 _inbox 资产被识别归类前使用(路径会变)。