| name | loki-design-system |
| description | Loki 品牌设计系统 — 共享基础层。所有视觉 Skill(loki-deck/loki-social/loki-wechat-pipeline)的品牌规范单一来源(SSOT)。当用户明确要求查看品牌规范或做品牌审计时直接调用。 |
loki-design-system · 赛博小熊猫 Loki 品牌设计系统
定位: 这是所有视觉 Skill 的共享基础层(Shared Base Layer),不是常规调用型 Skill。loki-deck、loki-social、loki-wechat-pipeline 等视觉 Skill 在生成内容时引用本系统的 brand-dna.md、scene-*.md 等规范文件。
直接调用场景:
- 用户要求查看品牌规范/设计系统
- 做品牌审计
- 创建新的视觉场景规范
- 其他视觉 Skill 未覆盖的场景需要手动调用设计系统
目录
loki-design-system/
├── SKILL.md ← 工作流入口(你在看这个)
├── assets/
│ ├── base.html ← 通用骨架(字体+CSS变量+Reset+工具类)★必读
│ └── loki-face.svg ← 品牌 Logo SVG
├── templates/
│ ├── landing-page.html ← Landing Page 完整骨架
│ ├── slides.html ← 横向翻页 Slides 骨架
│ └── card.html ← 单页卡片/封面骨架
└── references/
├── brand-dna.md ← ★核心:品牌基因(颜色/字体/IP/气质/禁用)
├── design-dna.md ← ★核心:视觉指纹(质感/光线/构图/情绪/排版直觉)
├── scene-mapping.md ← ★必读:内容类型→布局/底色/组件映射表(全场景索引)
├── scene-all.md ← 10个场景总览表(组件数/状态/快速索引)
├── scene-landing.md ← ★场景一:个人主页(5个组件+完整HTML)
├── scene-product.md ← ★场景二:产品介绍页(6个组件+完整HTML)
├── scene-slides.md ← ★场景三:演讲Slides(8种页型+完整HTML+节奏约束)
├── scene-rednote.md ← ★场景六/七:小红书卡片(8种+完整HTML+手机字号基准)
├── scene-report.md ← ★场景八:数据报告/横评(7种组件+苹绣等级色+MyTake苹综)
├── loki-spec.md ← 完整规范(写作/封面IP互动/工作逻辑/设计DNA)
├── cover-templates.md ← 公众号封面 3 种模板
├── article-components.md ← 文章排版 12 个组件(含完整 HTML)
├── product-ui.md ← 产品 UI 规范
└── checklist.md ← 质量检查清单 P0/P1/P2
工作流(严格按顺序,不能跳步)
Step 0 · 判断场景(必读 scene-mapping.md)
先读 references/scene-mapping.md——它定义了不同内容类型对应什么底色方案、布局节奏、组件选择。不同场景用不同的架构,不允许把个人主页的架构套在产品介绍上。
| 用户要做什么 | 用哪个模板 | 必读哪个场景文件 |
|---|
| Landing Page / 个人主页 | templates/landing-page.html | scene-landing.md |
| 产品介绍页 / 工具介绍 | assets/base.html | scene-product.md |
| 演讲 Slides / PPT | templates/slides.html | scene-slides.md |
| 公众号封面图 | templates/card.html | cover-templates.md |
| 公众号文章排版 | assets/base.html | article-components.md |
| 小红书卡片系列 | assets/base.html | scene-rednote.md |
| 数据报告 / 工具横评 | assets/base.html | scene-report.md |
Step 1 · 读模板和品牌基因
- Read
assets/base.html — CSS 变量、字体加载、工具类全在里面
- Read
references/brand-dna.md — 颜色系统、字体规则、禁用色
- Read 对应场景的 template 文件
不能省略这步。直接凭记忆写 = 颜色写错、字体漏加载。
Step 2 · Fork 模板,不从零写
- 以对应
templates/*.html 为起点
- 只修改:标题文字、段落内容、项目名称、链接地址
- 不允许:改 CSS 变量名、改字体族、加没有在 brand-dna.md 里的颜色
Step 3 · 执行禁忌检查(写完后必做)
grep -nE "#000000|#ffffff|#FFFFFF|#6C63FF|#a855f7|#00FF88|#0066FF" index.html
grep -c "fontsapi.zeoseven\|Smiley Sans" index.html
grep -c "Space+Grotesk\|Space Grotesk" index.html
grep -nE "color:\s*#[0-9A-Fa-f]" index.html | grep -v "var(" | head -10
Step 4 · 对照 P0 清单自检
读 references/checklist.md,P0 全过才能交付。
Step 5 · 交付
- 单文件 HTML,浏览器直接打开
- 在回复中说明:用了哪个模板、哪些地方做了定制、有没有用辅助色及原因
核心规则(10条,背下来)
- 所有颜色用 CSS 变量:
var(--amber) 不是 #C87A45。直接写 hex = 违规
- 标题只用得意黑:
font-family: var(--font-display)
- 数字大字报用 Space Grotesk 200:超细字重是辨识度的来源,不能改成 400
- 眉头标签(eyebrow)全大写 + 极细 + 0.18em 字间距:这是品牌识别点之一
- 底色暖系:浅底
var(--warm) / 深底 var(--dark),绝不用 #fff 或 #000
- 禁用蓝紫渐变、Glassmorphism、Neon 色:出现即返工
- 深浅区块必须交替:连续两个深色区 = 节奏死,必须插入浅色区
- 非对称布局优于对称:作品卡片/内容区要有大小对比,不是等宽格
- 字号要有极端反差:标题大的时候副标题要极细极小,不能中庸
- 发布后不加 emoji:任何输出到外部的内容不带 emoji
快速色彩速查
--amber: #C87A45
--dark: #1A1816
--paper: #FDFAF5
--warm: #F5F0E8
--smoke: #6B8590
--text-muted: #9A9085
--text-sub: #6B6157
字体加载代码(复制粘贴用)
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@200;300;400;500;600&family=Noto+Sans+SC:wght@100;300;400;500&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<style>@import url("https://fontsapi.zeoseven.com/92/main/result.css");</style>
原始设计文件
Claude Design 原始 HTML 文件位于品牌资料目录中。
包含:品牌配色系统.html、字体方案v3.html、产品UI规范.html、封面模板.html 等。
需要参考设计细节直接读取这些文件。