Lingo 游戏化设计系统

要解决的问题

团队照着「多邻国风」做 UI 时，最常见的结果是：圆角、亮绿主色、3D 按钮都抄了，但间距节奏不统一，按钮的 hover/active/disabled 状态缺失，键盘焦点完全看不见。没有令牌和验收标准，设计评审只能靠「感觉不太对」，实现端各自硬编码颜色，改一次主题要动十几个文件。

这个技能把这类问题收敛成一份可直接执行的设计系统规范：不是给灵感拼贴，而是给工程师能照着写的约束。

核心能力与工作方式

• 视觉基础固定：正文与展示字体用 Nunito，等宽用 JetBrains Mono，字号档位 12/14/16/20/24/32，间距 4/8/12/16/24/32，颜色全部走语义令牌（primary=#58cc02、success、warning、danger 等），阴影用 border-b-4 这类触感边框或柔和投影。
• 六步写作流程：先用一句话重述设计意图 → 定义令牌与基础约束 → 再到组件层（解剖结构、变体、状态、响应式）→ 写可测试的无障碍验收标准 → 补反模式与迁移说明 → 最后产出能在 code review 里逐条勾选的 QA 清单。
• 组件规则明确：要求列出 default、hover、focus-visible、active、disabled、loading、error 等状态，并分别说明键盘、指针、触屏行为；长标签、空状态、溢出等边界情况同样要覆盖。
• 措辞有约束力：不可协商的规则用 must，建议用 should；每条 do 规则至少配一个具体的 don't 反例；审美与无障碍冲突时，无障碍优先。

适用边界与注意点

• 这是规范撰写技能，不是组件库，也不会自动安装依赖、修改系统权限或创建持久化任务。
• 输出依赖令牌体系；项目若没有 token 基础设施，需要先补齐设计令牌层再接入。
• 发送、发布、删除、付款、部署等外部写入操作，必须在展示目标与影响后取得用户明确确认。
• 凭据仅用于对应的官方服务，不回显、不记录、不转发到无关地址。