| name | grimoire-design-system |
| description | Grimoire Design System —— 一本「设计咒语书」式的个人 UI + 动效设计系统。采用「一个共享底座 + 多套品牌 DS」结构:底座沉淀 Token 架构与公共动效(转场/Toast/Sheet/自适应缩放/入场…)及可复用 动效原语;每套品牌各有自己的 tokens.css、组件与私有动效。目前含三套品牌:coffee-warm(源自 Brewwww! 咖啡打卡护照,焦糖暖色+打字机+邮戳解锁+护照翻页+日历杯子归位)、doodle-stationery(源自 排版小动物 tiny type 手账邮局,奶黄涂鸦+粗黑硬阴影+双击点赞+开信+打字机)、esther-editorial(暖色 编辑排版·克制流派,桌面web+直角+揭示式动效;改编自 @esthersjw 的 CC BY-NC-SA 作品,非商用)。做「精美、有手感、不像 AI 模板」的**网页/落地页/文章页/dashboard/组件**(默认形态),或(用户明确要求时)**移动 App/H5 原型** 时使用。关键:品牌只是视觉语言,与形态无关——用户说 HTML 就做正常响应式网页,不要默认套手机框;只有明说要 App 才用手机壳。当用户要「按我的设计系统来」「复用之前那个动效/组件」「要有手感的动效」「换个品牌皮」时触发。
|
| user-invocable | true |
Grimoire Design System 🪄
一本设计咒语书。 Token = 材料,组件 = 符文,动效 = 咒语——随时翻阅、施法、复用。
「给 AI 看」的设计系统:限制自由度 = 保证质量与一致。
结构借鉴 Claude Design 范例(语义分级 token、品牌前缀 helper 类、可 import 的 tokens.css),
并额外沉淀交互组件与动效,且把动效拆成公共底座与品牌私有两层——这是本咒语书的核心。
⚙️ 第一步:定形态(先问这个,别默认套 App)
品牌 = 视觉语言(色/字/阴影/动效),跟「做成什么形态」是两码事。 同一套品牌皮能穿在网页上,也能穿在移动 App 上。下手前先定形态:
| 用户说 | 做成什么 | 骨架 |
|---|
| HTML / 网页 / 页面 / 官网 / 落地页 / 文章 / 长图文 / dashboard / 组件(← 默认) | 正常自适应网页:居中版心或全宽栅格、响应式重排,只吸纳品牌视觉语言 | assets/starter-web.html |
| 明确说 App / 手机应用 / 原型 / 小程序 / H5 交互 | 移动 App 外壳:手机框 + 底栏 + Sheet + fitScale | assets/starter.html（App 骨架） |
⚠️ 别默认套手机框。 手机框、底部导航、Sheet、fitScale 是「移动 App 形态」的专属外壳,只有用户明说要 App 才用。用户说做 HTML / 网页,就做能全屏铺开的响应式网页——该多宽多宽,不要塞进一个手机壳里。
🧭 第二步:选品牌(视觉语言,与形态无关)
| 想要的气质 / 内容 | 用哪套 | 视觉语言 | 招牌动效(网页 / App 皆可) |
|---|
| 暖调 · 复古 · 收藏 · 仪式感(纪念/里程碑/会员/打卡) | coffee-warm | 焦糖暖 · 打字机字 · 柔阴影 · 大圆角 · 纸感 | 邮戳解锁 / 3D 翻卡 / 定点掉落归位 |
| 可爱 · 活泼 · 手作 · 治愈(社区/内容/手账/科普) | doodle-stationery | 奶黄 · 粗黑描边 · 硬阴影 · 圆体/明体/楷体 · 涂鸦 | 点赞迸发 / 卡片弹入 / 打字机 |
| 安静 · 编辑 · 有品位(长读/作品集/文档/落地页) | esther-editorial | 暖白 · 三原色 · 明衬线 · 直角 · 克制(⚠️非商用) | 滚动揭示 / hover 换色 |
三套都自带深色模式;通用组件与公共动效跨品牌复用。招牌动效在网页和 App 里都能用,只是外壳不同。
⚠️⚠️ 品牌 = 视觉语言,不是源 App 的产品概念。 token 里的色 / 字 / 阴影 / 描边 / 圆角 / 动效手感才是品牌本体。源 App 的隐喻——coffee-warm 的护照·邮戳·集邮、doodle 的手账·便签·胶带·邮局·写信·木盒、esther 的杂志排版——只是这套视觉语言曾经穿在那个产品身上,不是必带调料。用一套品牌做别的题材时:保留视觉语言,丢掉源 App 的世界观,让题材本身当主角。 别因为用了 coffee-warm 就到处盖邮戳、用了 doodle 就把什么都做成手账。招牌动效同理——要的是它的机制/手感(pop-scale、撒花、硬阴影按压…),不是它的皮(邮戳/开信),题材不相关就换皮或不用。
📂 该读哪个文件(渐进式披露 · Progressive Disclosure)
业界标准:SKILL.md 常驻且精简,细节按需加载,别一次全塞进上下文。三类文件区别对待——
- 参考 reference = 读:进上下文、抄规则与代码。
- 示例 example = 抄/复制:整份骨架或画廊,复制起步或点着看,别读全文。
- 资产 asset = 用:直接
<link> / 引用进产物,别读进上下文。
| 文件 | 类型 | 何时 | 怎么用 |
|---|
SKILL.md(本文) | 索引 | 永远(已加载) | 先看上面两张表定方向 |
brand-dna.md | 参考 | 定调时 | 读:3 条判断标准 + 全局禁用清单 |
brands/<brand>/brand.md | 参考 | 选定品牌后 | 读:该品牌规则 / 组件清单 / 来源出处 |
foundation/tokens.md | 参考 | 要懂 token 架构 | 读:变量命名与分级规则 |
foundation/motion-common.md | 参考 | 要公共动效 / 原语 | 读 + 抄代码 |
brands/<brand>/motion-private.md | 参考 | 要该品牌招牌动效 | 读 + 抄 |
references/components.md | 参考 | 搭通用组件 | 读 + 抄 |
references/patterns.md | 参考 | 定页面结构 | 读:挑一个页面配方 |
references/checklist.md | 参考 | 交付前 | 逐条过 P0/P1/P2 |
brands/<brand>/tokens.css | 资产 asset | 建页面时 | <link> 或粘贴进 :root,别读进上下文 |
assets/starter.html | 示例 example | 起新项目 | 复制为骨架起点,别读全文 |
assets/motion-demos.html | 示例 example | 挑动效 / 找手感 | 浏览器打开点一遍,抄需要的片段 |
架构:1 底座 + N 品牌
foundation/ ← 共享底座(所有品牌通用)
tokens.md Token 架构:颜色角色/分级、阴影两流派、圆角/间距/字号阶梯、字体三声部、语义文字类
motion-common.md 公共动效 = 机制(转场/Toast/Sheet/自适应缩放/入场/FAB/主题/别针) + 可复用原语(pop/撒花/定点掉落/3D翻转/光芒/打字机光标)
brands/
coffee-warm/ 品牌:Brewwww 咖啡护照(焦糖暖·打字机·柔阴影)
brand.md 品牌基因 + 特有组件 + 铁律
tokens.css ★可直接 <link> 的完整变量 + 语义类 + helper 类
motion-private.md 私有动效:邮戳解锁 / 护照3D翻页 / 日历杯子归位 …(都用底座原语搭)
doodle-stationery/ 品牌:tiny type 手账邮局(奶黄·涂鸦·粗黑硬阴影)
brand.md / tokens.css / motion-private.md 双击点赞 / 开信 / 打字机 / 日记点阵页 …
esther-editorial/ 品牌:暖色编辑排版(桌面web·直角·几乎无阴影·克制动效) ← 「克制流派」,补齐光谱
brand.md / tokens.css / motion-private.md(揭示式动效) + ATTRIBUTION.md
⚠️ 改编自 esther-design-system(@esthersjw,CC BY-NC-SA 4.0):非商用·相同方式共享·须署名。
与其余章节隔离,商用时删此目录即可;完整组件/布局回原仓库 fork。
references/
components.md 与品牌解耦的通用交互组件(手机框/底栏/卡片/Sheet/按钮/chip/分段/列表/开关/空状态/瀑布流)
patterns.md 页面级配方(Feed/多步表单/详情/设置/引导/日历…)
checklist.md 交付质检 P0/P1/P2
assets/
starter.html 一分钟起项目骨架(手机框+自适应+路由+底栏+Sheet+Toast)
motion-demos.html ⭐动效画廊:15 个招牌动效现场可点演示 + 一键复制代码
brand-dna.md 总设计哲学(三条判断标准 + 全局禁用清单)
动效的公共 / 私有划分(核心思想)
- 公共(底座) = 纯机制、任何产品都要、换皮即用 → 转场、Toast、Sheet、自适应缩放、入场错峰、FAB按压、主题切换。
再往下是原语:pop-scale、粒子撒花、定点掉落、3D翻转、旋转光芒、打字机光标。
- 私有(品牌) = 承载该品牌叙事/隐喻、离开产品就没意义 → 邮戳解锁(咖啡护照)、开信(慢邮)、打字机(排版)…
私有动效不是从零写的,而是把底座原语组合 + 换皮。做新私有动效前,先看
motion-common.md B 节能不能拼出来。
工作流(8 步)
- 定形态 — 网页(默认)还是 App(用户明说)?见上方「第一步」。别默认套手机框。
- 读哲学 —
brand-dna.md(三条判断标准 + 禁用清单)。
- 选品牌 — 读
brands/<brand>/brand.md,<link> 它的 tokens.css。
- 起骨架 — 网页 →
assets/starter-web.html(响应式版心/栅格);App → assets/starter.html(手机框+路由+底栏)。
- 搭结构 — 从
references/patterns.md 选配方(分「网页配方」与「App 配方」两栏)。
- 填组件 —
references/components.md(通用组件,标注了哪些是 App 专属)+ brands/<brand>/brand.md 的品牌组件。
- 加动效 — 公共的从
foundation/motion-common.md 取(注意:fitScale/go 路由是 App 专属;网页用响应式 + 滚动揭示);品牌招牌从 brands/<brand>/motion-private.md 取;拿不准先开 assets/motion-demos.html 点一遍。
- 过质检 —
references/checklist.md。
复用新场景怎么组合
引底座 tokens 架构 + 挑几个公共动效 + 选一套品牌皮(tokens.css)+ 按需加 1–2 个私有动效。
想要全新品牌?复制 brands/coffee-warm/ 为模板,只改 tokens.css 取值 + 重写 motion-private.md(继续复用底座原语),组件与公共动效一行不改。
全局铁律(避免「一眼 AI」,详见 brand-dna.md)
- 禁:蓝紫渐变白底、玻璃拟态、霓虹、Inter/Roboto/Arial、纯白纯黑冷灰、通用卡片阴影堆叠。
- 要:有观点的主色、有性格的字体、真实素材承载品牌、动效服务「手感」。
- 形态优先:用户说 HTML/网页 → 做响应式网页(版心/栅格/媒体查询重排),不套手机框;只有明说 App 才用手机壳 +
fitScale() + go() 路由。
- 内联 SVG 必带
width/height="1em";CJK 大字体禁内嵌(用系统回退)。
- 旋转元素包围盒比自身大,放固定高度容器按「容器高×0.8」定尺寸。
