grimoire-design-systemlisted

# 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 的世界观,让题材本身当主角。*