OpenDesign 中的 Duolingo 设计系统游戏化教育产品的视觉语言与令牌化实现指南【免费下载链接】open-design Best DeepSeek Harness Design Plugin. The open-source Claude Design alternative. ️ Local-first desktop app. ️ Your coding agent becomes the design engine: prototypes, landing pages, dashboards, slides, images video — real files, HTML/PDF/PPTX/MP4 export. Claude Code / Codex / Cursor / DeepSeek Harness / OpenCode 20 CLIs via BYOK.项目地址: https://gitcode.com/gh_mirrors/opend/open-design本文以 design-systems/duolingo/DESIGN.md及其韩语版 DESIGN-ko.md为核心骨架结合仓库内tokens.css、components.html、components.manifest.json、design-tokens.json等实现文件系统讲解这套生产力和 SaaS分类下的游戏化设计系统。读完本文你将掌握 Duolingo 风格界面从品牌色、字体阶梯到按钮按压动效的完整设计规格并能在 OpenDesign 的 Agent 工作流中直接用令牌化 CSS 复刻这套风格。一、系统定位与视觉基调Duolingo 设计系统manifest.json 中定义为od-design-system-project/v1包id 为duolingo分类 Productivity SaaS本质上是一套用视觉语言表达的游戏化设计界面毫不掩饰地明亮以猫头鹰绿#58cc02作为品牌主色每个可交互元素底部都带有 4px 的厚实阴影看起来像一枚等待被按下的 3D 按钮。页面底色为纯白#ffffff搭配 2–3px 的深灰#e5e5e5粗边框整个系统读起来像一个层次结构更好的 2015 年 iOS 应用。其关键特征DESIGN.md §1 与 tokens.css 头部注释一致可以概括为猫头鹰绿#58cc02作为主导品牌色占界面表面积的 30% 以上所有按钮的4px 厚实底部阴影触觉按压 affordance在 tokens.css 中编码为--elev-raised: 0 4px 0 #d7d7d7一律使用2–3px 实心边框绝不用 1px 发丝线字体组合Feather Bold圆润展示体Mona Sans正文大而自信的排版——展示级字号从 48px 起步向上攀升吉祥物即角色绿色猫头鹰 Duo 出现在引导流程、错误提示、连续打卡streak等场景是活着的插画角色而非静态 Logo连续打卡橙#ff9600与宝石粉#ce82ff作为次级品牌色。形态语言整体友好卡片圆角 16–20px、按钮 12px、芯片与进度条 9999px胶囊形图标为填充式圆角风格并按技能skill做色彩编码——每个课程界面都有可一眼识别的配色对。二、色彩调色板与角色分工主色Primary颜色名称色值用途猫头鹰绿 Owl Green#58cc02品牌主色、主要 CTA、正确答案猫头鹰绿深 Owl Green Deep#58a700绿色按钮的按压/阴影色猫头鹰绿浅 Owl Green Light#89e219悬停态、柔和填充猫头鹰绿淡 Owl Green Pale#dbf8c5柔和表面、成功横幅次级强调色Secondary Accents颜色名称色值用途连续打卡橙 Streak Orange#ff9600打卡计数器、火焰图标、高级能量连续打卡橙深#cc7a00橙色按压态宝石粉 Gem Pink#ce82ff宝石货币、Super Duolingo鳗鱼蓝 Eel Blue#1cb0f6提示按钮、信息链接红衣主教红 Cardinal Red#ff4b4b错误答案、生命值损失蜜蜂黄 Bee Yellow#ffc800Pro 徽章、成就表面色Surface雪 Snow#ffffff主背景鳗鱼 Eel#f7f7f7区块分隔、次级表面天鹅 Swan#e5e5e5禁用背景、内嵌块狼 Wolf#777777深色分隔线、次级文本。墨色与文本Ink Text鳗鱼黑 Eel Black#3c3c3c主文本狼 Wolf#777777次级文本、说明文字野兔 Hare#afafaf禁用、占位符。边框Border天鹅 Swan#e5e5e5标准 2px 边框野兔 Hare#afafaf悬停时的强调边框。这些角色在 tokens.css 中被完整编码--bg/--surface对应表面层--fg/--muted/--meta对应三档文本层级--accent系列对应品牌主色--success直接复用猫头鹰绿文档明确规定正确与品牌 CTA是同一种 affordance--warn对应蜜蜂黄、--danger对应红衣主教红。值得注意的是tokens.css 中的注释明确说明页面画布--bg绝不着色光学纯净是基础只有镀铬件按钮、卡片等 UI 元素才使用品牌色——这是与一般整页铺色设计截然不同的克制策略。三、字体排印规则字体家族展示 / UI / 标题Feather Bold回退DIN Round Pro, Helvetica Neue, sans-serif正文 / 长文Mona Sans回退Helvetica Neue, system-ui, sans-serif代码罕见用于学校/管理场景JetBrains Mono回退ui-monospace, Menlo, monospace对应的令牌为--font-display、--font-body、--font-monotokens.css。层级阶梯角色字体字号字重行高字距备注展示 DisplayFeather Bold56px (3.5rem)8001.05-0.01em引导页 HeroH1Feather Bold32px (2rem)8001.15-0.005em页面标题H2Feather Bold24px (1.5rem)8001.2normal区块标题H3Feather Bold18px (1.125rem)7001.25normal卡片标题、课程行正文大号 Body LargeMona Sans17px (1.0625rem)5001.5normal课程提示、指导文案正文 BodyMona Sans15px (0.9375rem)4001.5normal标准散文说明 CaptionMona Sans13px (0.8125rem)6001.40.01emXP 计数器、元数据按钮 ButtonFeather Bold16px (1rem)8001.20.02em标准按钮标签打卡 StreakFeather Bold14px (0.875rem)8001.2normal打卡数字、火焰上方在 tokens.css 中这套阶梯被实现为--text-xs12px到--text-4xl56px共 8 档并附带了--leading-body、--leading-tight、--tracking-display等排印参数。注意展示级 56px 对应-0.01em字距——自信但不拥挤。三条原则800 是默认值Feather Bold 在标题和按钮上以 800 字重运行本系统中 700 看起来太弱H3 是唯一例外允许 700大字号标题字号比一般产品品牌大 25–40%——自信本身就是品牌身份圆润字形所有字形都有柔和末端尖锐衬线会破坏友好契约。四、组件样式规范按钮主按钮猫头鹰绿背景#58cc02文本#ffffff内边距14px 24px圆角16px底部边框4px solid#58a700即厚实阴影悬停背景变#89e219激活translateY(4px)、底部边框归零按钮按下去用途继续、检查、主 CTA在 components.html 中其实现为box-shadow: 0 4px 0 var(--accent-active):active时transform: translateY(4px)且阴影归零——CSS 盒阴影与位移的配合完成了按压错觉。次级按钮白色 底部阴影背景#ffffff文本#777777边框2px solid#e5e5e5底部边框4px solid#e5e5e5圆角16px内边距14px 24px悬停文本#3c3c3c、边框#afafaf打卡橙按钮背景#ff9600文本#ffffff底部边框4px solid#cc7a00用途打卡目标、开始打卡错误红衣主教红按钮背景#ff4b4b文本#ffffff底部边框4px solid#cc3b3b用途错误答案反馈在 components.html 中还存在btn-streak蜜蜂黄 黑色 18% 混合底色见 components.html并使用color-mix(in oklab, ...)动态派生悬停与按压色属于对 DESIGN.md 规格的工程化补充。卡片 / 课程瓦片背景#ffffff边框2px solid#e5e5e5底部边框4px solid#e5e5e5圆角16px内边距16px悬停上浮 2px阴影0 4px 0 #d7d7d7components.html 中实现为translateY(-2px)0 6px 0 #d7d7d7技能树节点课程气泡尺寸80×72px背景技能色 tint激活为绿色、锁定为灰色底部边框6px solid 更深变体圆角50%圆形激活态每 1.6s 在 1.0 → 1.05 之间脉动输入框背景#ffffff边框2px solid#e5e5e5圆角12px内边距12px 16px聚焦边框#1cb0f6鳗鱼蓝光环0 0 0 3px rgba(28, 176, 246, 0.2)在 components.html 中输入框的聚焦态额外把边框色提升为var(--accent)并使用--focus-ringcomponents.html标签采用 Feather Bold 800 大写排版——连表单都是品牌的。进度条轨道#e5e5e5填充#58cc02打卡场景为#ff9600圆角9999px高度16px增长动画320ms ease-out。components.html 的.progress-fill还内嵌了inset 0 -4px 0 var(--accent-active)的底部内阴影延续厚实语言。五、间距与布局基准单位4px刻度为 4, 8, 12, 16, 24, 32, 48, 64tokens.css 中编码为--space-1~--space-12并补充了 20px 档--space-5容器最大 1080px24px 排水沟gutter。tokens.css 提供了响应式排水沟桌面 24px / 平板 20px / 手机 16px--container-gutter-*以及区块节奏--section-y-desktop: 80px、--section-y-tablet: 56px、--section-y-phone: 40px——桌面端慷慨、手机端收紧让课程树列读起来像连续流动而非分页区块课程树列宽 320px桌面端居中。六、动效设计时长按钮按压 180ms技能节点解锁 320ms激活节点脉动 1.6s缓动解锁使用cubic-bezier(0.34, 1.56, 0.64, 1)back-out轻微过冲吉祥物Duo 每 4–6s 眨眼一次打卡里程碑时跳跃480ms ease-out 弹簧。tokens.css 将上述时长与缓动抽象为--motion-fast: 180ms、--motion-base: 320ms、--ease-standard: cubic-bezier(0.34, 1.56, 0.64, 1)并在 components.html 的.btn/.card/.field input上统一通过transition: ... var(--motion-fast) var(--ease-standard)引用保证全组件动效参数单一来源。七、使用边界与反模式保持整体性高饱和度猫头鹰绿、厚实底部阴影、圆润课程几何必须同时出现孤立的扁平绿色按钮不会让人读出Duolingo克制使用超大粗体特大号粗体只为需要鼓励或反馈的课程、打卡、进度时刻保留动效要节制只在进度状态变化附近使用趣味动效避免给每个控件都加上通用的弹跳动画。八、从设计文档到令牌仓库中的实现证据这套设计系统不是停留在 Markdown 里的纸面规范而是以设计系统 2.0 包的形式完整落地在仓库中。目录 design-systems/duolingo 下各文件的分工如下文件角色DESIGN.md规范主文档视觉意图、约束、反模式tokens.css已编译令牌唯一的令牌事实来源design-tokens.json由 tokens.css token-contract 报告派生的结构化令牌 JSONtailwind-v4.cssTailwind v4theme派生文件components.html独立组件夹具含完整 CSS 与真实页面结构components.manifest.json组件清单缓存66 个选择器、36 个类、9 个组件组USAGE.md面向 OpenDesign Agent 的包使用指南manifest.json机器可读的项目包入口preview/colors / typography / spacing 三张静态预览页source/导入证据evidence.md、token-contract.report.json 等令牌契约的量化体检design-tokens.json 给出了这套包的质量报告共56 个令牌全部 56 个有声明且全部有源码支撑评分100 分 / 等级 excellentrecommendRebuild: false。令牌按四层组织A1-identity8 个--bg、--fg、--accent、--font-display等品牌身份令牌缺一即守卫失败A1-structure18 个类型阶梯、--container-max、--section-y-*等结构令牌A226 个--motion-fast、--success、--space-4等带默认值的令牌B-slot4 个--surface-warm: var(--surface)、--fg-2: var(--fg)等别名槽位。关于这套分层契约的完整规则为何 A2/B-slot 必须每个品牌都声明、C 扩展如何晋级为 B-slot/A2见 design-systems/_schema/AGENTS.md 中的Four layers, two questions一节其规范实体在 packages/contracts 的 design-systems 令牌模式中。Tailwind v4 桥接tailwind-v4.css 将 56 个 CSS 变量映射进 Tailwindtheme--color-accent、--text-4xl、--radius-pill、--shadow-raised、--ease-standard、--duration-fast等从而让bg-accent、text-4xl、rounded-pill、shadow-raised这类工具类可以直接消费品牌令牌。文件头注释强调其派生性质Derived from tokens.css. Keep tokens.css as the source of truth.——令牌唯一来源不可被工具类覆盖。九、在 OpenDesign 工作流中使用本设计系统包USAGE.md 给出了面向 OpenDesign Agent 和审阅者的阅读顺序与纪律先读 USAGE.md 理解包契约再读 DESIGN.md 理解视觉意图、约束与反模式将tokens.css粘贴到产物第一个style块中再编写组件 CSS用components.manifest.json获取精简组件清单需要精确选择器或状态时打开components.html需要视觉抽查时查看preview/页面。应做Do原样保留 schema 令牌名保证跨品牌切换可靠用--accent承载主操作、链接、聚焦态和一个明确的视觉焦点优先复用components.manifest.json中的组件组而不是发明新控件将source/视为打包夹具回填的审计证据。避免Avoid在复制的:root令牌块之外使用裸 hex 值脱离tokens.css独立重定义 Tailwind 或 design-token 值声称存在上游原始品牌仓库证据本包基于 OpenDesign 精选的捆绑夹具添加components.html或DESIGN.md未覆盖的新组件配方。从实现细节看components.html该包还自带了完整的落地示例Hero 区含纯 SVG 绘制的 Duo 猫头鹰吉祥物、课程进度卡、打卡徽章、特性卡片网格、以及一个Start your streak表单——所有示例全部通过 CSS 变量驱动未出现任何硬编码色值这正是跨品牌切换只需替换一个:root块的机制保障。十、结语Duolingo 设计系统是 OpenDesign 设计系统目录中游戏化即视觉语言的典型样本高饱和品牌绿 4px 触觉阴影 超大圆润粗体 胶囊几何构成了不可被拆分的气质组合。通过 DESIGN.md 的规范描述与 tokens.css、components.html 的工程落地这套风格既可以在 Agent 生成的原型、落地页、仪表盘产物中一键复用也可以作为设计系统 2.0 分层令牌契约A1/A2/B-slot的一个高分参考实现令牌评分 100/100。动手复刻时请务必同时保留绿色、厚阴影与圆角几何这三件套——拆散任何一个Duolingo 的味道就消失了。【免费下载链接】open-design Best DeepSeek Harness Design Plugin. The open-source Claude Design alternative. ️ Local-first desktop app. ️ Your coding agent becomes the design engine: prototypes, landing pages, dashboards, slides, images video — real files, HTML/PDF/PPTX/MP4 export. Claude Code / Codex / Cursor / DeepSeek Harness / OpenCode 20 CLIs via BYOK.项目地址: https://gitcode.com/gh_mirrors/opend/open-design创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 OpenDesign 中的 Duolingo 设计系统：游戏化教育产品的视觉语言与令牌化实现指南
OpenDesign 中的 Duolingo 设计系统游戏化教育产品的视觉语言与令牌化实现指南【免费下载链接】open-design Best DeepSeek Harness Design Plugin. The open-source Claude Design alternative. ️ Local-first desktop app. ️ Your coding agent becomes the design engine: prototypes, landing pages, dashboards, slides, images video — real files, HTML/PDF/PPTX/MP4 export. Claude Code / Codex / Cursor / DeepSeek Harness / OpenCode 20 CLIs via BYOK.项目地址: https://gitcode.com/gh_mirrors/opend/open-design本文以 design-systems/duolingo/DESIGN.md及其韩语版 DESIGN-ko.md为核心骨架结合仓库内tokens.css、components.html、components.manifest.json、design-tokens.json等实现文件系统讲解这套生产力和 SaaS分类下的游戏化设计系统。读完本文你将掌握 Duolingo 风格界面从品牌色、字体阶梯到按钮按压动效的完整设计规格并能在 OpenDesign 的 Agent 工作流中直接用令牌化 CSS 复刻这套风格。一、系统定位与视觉基调Duolingo 设计系统manifest.json 中定义为od-design-system-project/v1包id 为duolingo分类 Productivity SaaS本质上是一套用视觉语言表达的游戏化设计界面毫不掩饰地明亮以猫头鹰绿#58cc02作为品牌主色每个可交互元素底部都带有 4px 的厚实阴影看起来像一枚等待被按下的 3D 按钮。页面底色为纯白#ffffff搭配 2–3px 的深灰#e5e5e5粗边框整个系统读起来像一个层次结构更好的 2015 年 iOS 应用。其关键特征DESIGN.md §1 与 tokens.css 头部注释一致可以概括为猫头鹰绿#58cc02作为主导品牌色占界面表面积的 30% 以上所有按钮的4px 厚实底部阴影触觉按压 affordance在 tokens.css 中编码为--elev-raised: 0 4px 0 #d7d7d7一律使用2–3px 实心边框绝不用 1px 发丝线字体组合Feather Bold圆润展示体Mona Sans正文大而自信的排版——展示级字号从 48px 起步向上攀升吉祥物即角色绿色猫头鹰 Duo 出现在引导流程、错误提示、连续打卡streak等场景是活着的插画角色而非静态 Logo连续打卡橙#ff9600与宝石粉#ce82ff作为次级品牌色。形态语言整体友好卡片圆角 16–20px、按钮 12px、芯片与进度条 9999px胶囊形图标为填充式圆角风格并按技能skill做色彩编码——每个课程界面都有可一眼识别的配色对。二、色彩调色板与角色分工主色Primary颜色名称色值用途猫头鹰绿 Owl Green#58cc02品牌主色、主要 CTA、正确答案猫头鹰绿深 Owl Green Deep#58a700绿色按钮的按压/阴影色猫头鹰绿浅 Owl Green Light#89e219悬停态、柔和填充猫头鹰绿淡 Owl Green Pale#dbf8c5柔和表面、成功横幅次级强调色Secondary Accents颜色名称色值用途连续打卡橙 Streak Orange#ff9600打卡计数器、火焰图标、高级能量连续打卡橙深#cc7a00橙色按压态宝石粉 Gem Pink#ce82ff宝石货币、Super Duolingo鳗鱼蓝 Eel Blue#1cb0f6提示按钮、信息链接红衣主教红 Cardinal Red#ff4b4b错误答案、生命值损失蜜蜂黄 Bee Yellow#ffc800Pro 徽章、成就表面色Surface雪 Snow#ffffff主背景鳗鱼 Eel#f7f7f7区块分隔、次级表面天鹅 Swan#e5e5e5禁用背景、内嵌块狼 Wolf#777777深色分隔线、次级文本。墨色与文本Ink Text鳗鱼黑 Eel Black#3c3c3c主文本狼 Wolf#777777次级文本、说明文字野兔 Hare#afafaf禁用、占位符。边框Border天鹅 Swan#e5e5e5标准 2px 边框野兔 Hare#afafaf悬停时的强调边框。这些角色在 tokens.css 中被完整编码--bg/--surface对应表面层--fg/--muted/--meta对应三档文本层级--accent系列对应品牌主色--success直接复用猫头鹰绿文档明确规定正确与品牌 CTA是同一种 affordance--warn对应蜜蜂黄、--danger对应红衣主教红。值得注意的是tokens.css 中的注释明确说明页面画布--bg绝不着色光学纯净是基础只有镀铬件按钮、卡片等 UI 元素才使用品牌色——这是与一般整页铺色设计截然不同的克制策略。三、字体排印规则字体家族展示 / UI / 标题Feather Bold回退DIN Round Pro, Helvetica Neue, sans-serif正文 / 长文Mona Sans回退Helvetica Neue, system-ui, sans-serif代码罕见用于学校/管理场景JetBrains Mono回退ui-monospace, Menlo, monospace对应的令牌为--font-display、--font-body、--font-monotokens.css。层级阶梯角色字体字号字重行高字距备注展示 DisplayFeather Bold56px (3.5rem)8001.05-0.01em引导页 HeroH1Feather Bold32px (2rem)8001.15-0.005em页面标题H2Feather Bold24px (1.5rem)8001.2normal区块标题H3Feather Bold18px (1.125rem)7001.25normal卡片标题、课程行正文大号 Body LargeMona Sans17px (1.0625rem)5001.5normal课程提示、指导文案正文 BodyMona Sans15px (0.9375rem)4001.5normal标准散文说明 CaptionMona Sans13px (0.8125rem)6001.40.01emXP 计数器、元数据按钮 ButtonFeather Bold16px (1rem)8001.20.02em标准按钮标签打卡 StreakFeather Bold14px (0.875rem)8001.2normal打卡数字、火焰上方在 tokens.css 中这套阶梯被实现为--text-xs12px到--text-4xl56px共 8 档并附带了--leading-body、--leading-tight、--tracking-display等排印参数。注意展示级 56px 对应-0.01em字距——自信但不拥挤。三条原则800 是默认值Feather Bold 在标题和按钮上以 800 字重运行本系统中 700 看起来太弱H3 是唯一例外允许 700大字号标题字号比一般产品品牌大 25–40%——自信本身就是品牌身份圆润字形所有字形都有柔和末端尖锐衬线会破坏友好契约。四、组件样式规范按钮主按钮猫头鹰绿背景#58cc02文本#ffffff内边距14px 24px圆角16px底部边框4px solid#58a700即厚实阴影悬停背景变#89e219激活translateY(4px)、底部边框归零按钮按下去用途继续、检查、主 CTA在 components.html 中其实现为box-shadow: 0 4px 0 var(--accent-active):active时transform: translateY(4px)且阴影归零——CSS 盒阴影与位移的配合完成了按压错觉。次级按钮白色 底部阴影背景#ffffff文本#777777边框2px solid#e5e5e5底部边框4px solid#e5e5e5圆角16px内边距14px 24px悬停文本#3c3c3c、边框#afafaf打卡橙按钮背景#ff9600文本#ffffff底部边框4px solid#cc7a00用途打卡目标、开始打卡错误红衣主教红按钮背景#ff4b4b文本#ffffff底部边框4px solid#cc3b3b用途错误答案反馈在 components.html 中还存在btn-streak蜜蜂黄 黑色 18% 混合底色见 components.html并使用color-mix(in oklab, ...)动态派生悬停与按压色属于对 DESIGN.md 规格的工程化补充。卡片 / 课程瓦片背景#ffffff边框2px solid#e5e5e5底部边框4px solid#e5e5e5圆角16px内边距16px悬停上浮 2px阴影0 4px 0 #d7d7d7components.html 中实现为translateY(-2px)0 6px 0 #d7d7d7技能树节点课程气泡尺寸80×72px背景技能色 tint激活为绿色、锁定为灰色底部边框6px solid 更深变体圆角50%圆形激活态每 1.6s 在 1.0 → 1.05 之间脉动输入框背景#ffffff边框2px solid#e5e5e5圆角12px内边距12px 16px聚焦边框#1cb0f6鳗鱼蓝光环0 0 0 3px rgba(28, 176, 246, 0.2)在 components.html 中输入框的聚焦态额外把边框色提升为var(--accent)并使用--focus-ringcomponents.html标签采用 Feather Bold 800 大写排版——连表单都是品牌的。进度条轨道#e5e5e5填充#58cc02打卡场景为#ff9600圆角9999px高度16px增长动画320ms ease-out。components.html 的.progress-fill还内嵌了inset 0 -4px 0 var(--accent-active)的底部内阴影延续厚实语言。五、间距与布局基准单位4px刻度为 4, 8, 12, 16, 24, 32, 48, 64tokens.css 中编码为--space-1~--space-12并补充了 20px 档--space-5容器最大 1080px24px 排水沟gutter。tokens.css 提供了响应式排水沟桌面 24px / 平板 20px / 手机 16px--container-gutter-*以及区块节奏--section-y-desktop: 80px、--section-y-tablet: 56px、--section-y-phone: 40px——桌面端慷慨、手机端收紧让课程树列读起来像连续流动而非分页区块课程树列宽 320px桌面端居中。六、动效设计时长按钮按压 180ms技能节点解锁 320ms激活节点脉动 1.6s缓动解锁使用cubic-bezier(0.34, 1.56, 0.64, 1)back-out轻微过冲吉祥物Duo 每 4–6s 眨眼一次打卡里程碑时跳跃480ms ease-out 弹簧。tokens.css 将上述时长与缓动抽象为--motion-fast: 180ms、--motion-base: 320ms、--ease-standard: cubic-bezier(0.34, 1.56, 0.64, 1)并在 components.html 的.btn/.card/.field input上统一通过transition: ... var(--motion-fast) var(--ease-standard)引用保证全组件动效参数单一来源。七、使用边界与反模式保持整体性高饱和度猫头鹰绿、厚实底部阴影、圆润课程几何必须同时出现孤立的扁平绿色按钮不会让人读出Duolingo克制使用超大粗体特大号粗体只为需要鼓励或反馈的课程、打卡、进度时刻保留动效要节制只在进度状态变化附近使用趣味动效避免给每个控件都加上通用的弹跳动画。八、从设计文档到令牌仓库中的实现证据这套设计系统不是停留在 Markdown 里的纸面规范而是以设计系统 2.0 包的形式完整落地在仓库中。目录 design-systems/duolingo 下各文件的分工如下文件角色DESIGN.md规范主文档视觉意图、约束、反模式tokens.css已编译令牌唯一的令牌事实来源design-tokens.json由 tokens.css token-contract 报告派生的结构化令牌 JSONtailwind-v4.cssTailwind v4theme派生文件components.html独立组件夹具含完整 CSS 与真实页面结构components.manifest.json组件清单缓存66 个选择器、36 个类、9 个组件组USAGE.md面向 OpenDesign Agent 的包使用指南manifest.json机器可读的项目包入口preview/colors / typography / spacing 三张静态预览页source/导入证据evidence.md、token-contract.report.json 等令牌契约的量化体检design-tokens.json 给出了这套包的质量报告共56 个令牌全部 56 个有声明且全部有源码支撑评分100 分 / 等级 excellentrecommendRebuild: false。令牌按四层组织A1-identity8 个--bg、--fg、--accent、--font-display等品牌身份令牌缺一即守卫失败A1-structure18 个类型阶梯、--container-max、--section-y-*等结构令牌A226 个--motion-fast、--success、--space-4等带默认值的令牌B-slot4 个--surface-warm: var(--surface)、--fg-2: var(--fg)等别名槽位。关于这套分层契约的完整规则为何 A2/B-slot 必须每个品牌都声明、C 扩展如何晋级为 B-slot/A2见 design-systems/_schema/AGENTS.md 中的Four layers, two questions一节其规范实体在 packages/contracts 的 design-systems 令牌模式中。Tailwind v4 桥接tailwind-v4.css 将 56 个 CSS 变量映射进 Tailwindtheme--color-accent、--text-4xl、--radius-pill、--shadow-raised、--ease-standard、--duration-fast等从而让bg-accent、text-4xl、rounded-pill、shadow-raised这类工具类可以直接消费品牌令牌。文件头注释强调其派生性质Derived from tokens.css. Keep tokens.css as the source of truth.——令牌唯一来源不可被工具类覆盖。九、在 OpenDesign 工作流中使用本设计系统包USAGE.md 给出了面向 OpenDesign Agent 和审阅者的阅读顺序与纪律先读 USAGE.md 理解包契约再读 DESIGN.md 理解视觉意图、约束与反模式将tokens.css粘贴到产物第一个style块中再编写组件 CSS用components.manifest.json获取精简组件清单需要精确选择器或状态时打开components.html需要视觉抽查时查看preview/页面。应做Do原样保留 schema 令牌名保证跨品牌切换可靠用--accent承载主操作、链接、聚焦态和一个明确的视觉焦点优先复用components.manifest.json中的组件组而不是发明新控件将source/视为打包夹具回填的审计证据。避免Avoid在复制的:root令牌块之外使用裸 hex 值脱离tokens.css独立重定义 Tailwind 或 design-token 值声称存在上游原始品牌仓库证据本包基于 OpenDesign 精选的捆绑夹具添加components.html或DESIGN.md未覆盖的新组件配方。从实现细节看components.html该包还自带了完整的落地示例Hero 区含纯 SVG 绘制的 Duo 猫头鹰吉祥物、课程进度卡、打卡徽章、特性卡片网格、以及一个Start your streak表单——所有示例全部通过 CSS 变量驱动未出现任何硬编码色值这正是跨品牌切换只需替换一个:root块的机制保障。十、结语Duolingo 设计系统是 OpenDesign 设计系统目录中游戏化即视觉语言的典型样本高饱和品牌绿 4px 触觉阴影 超大圆润粗体 胶囊几何构成了不可被拆分的气质组合。通过 DESIGN.md 的规范描述与 tokens.css、components.html 的工程落地这套风格既可以在 Agent 生成的原型、落地页、仪表盘产物中一键复用也可以作为设计系统 2.0 分层令牌契约A1/A2/B-slot的一个高分参考实现令牌评分 100/100。动手复刻时请务必同时保留绿色、厚阴影与圆角几何这三件套——拆散任何一个Duolingo 的味道就消失了。【免费下载链接】open-design Best DeepSeek Harness Design Plugin. The open-source Claude Design alternative. ️ Local-first desktop app. ️ Your coding agent becomes the design engine: prototypes, landing pages, dashboards, slides, images video — real files, HTML/PDF/PPTX/MP4 export. Claude Code / Codex / Cursor / DeepSeek Harness / OpenCode 20 CLIs via BYOK.项目地址: https://gitcode.com/gh_mirrors/opend/open-design创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考