Lime 是一套面向消费级应用的设计系统规则，用于指导界面构建、组件使用和样式约束。其视觉核心是白色页面、暖灰表面、近黑文字，以及仅用于主操作按钮的单一酸性青柠色。
用途
Lime 主要用于在项目中构建或修改任何屏幕、组件、表单或样式，也用于将现有屏幕移植到 Lime 风格。它提供了一套详细的全局规则、页面框架、组件清单和反模式（anti-slop）列表，帮助保持界面一致性和可访问性。
主要能力
- 设计令牌（Tokens）：定义了颜色、尺寸、圆角、阴影等令牌，要求通过角色类名使用（如
bg-surface、text-fg），禁止原始色值、任意像素或dark:变体。 - 组件优先：要求先使用 Lime 组件再编写自定义标记，每个组件页面包含属性、变体和规则。
- 作用域与覆盖层：通过
lime类和LimePortalProvider确保菜单、对话框等覆盖层保留令牌。 - 页面框架（Page shell）：规定了根元素、主内容区、标题、分区、表单和粘性操作按钮的布局方式。
- 全局 MUST/NEVER 规则：涵盖可访问性、键盘操作、单一主操作、金额格式化、字段标签、焦点环等强制要求。
- 反模式（Anti-slop）列表：禁止小标签眉题、统计卡片、图标瓷砖、侧边色条、装饰性渐变/模糊/光晕、大写字母、表情符号、虚假数据、流式动画、滚动显现等生成式 UI 常见陋习。
- 拒绝列表：明确禁止蓝色、第二品牌色、内容背后的渐变、彩色阴影、第二图标集、字重700、过渡
all、循环动画（加载 spinner 除外）等。 - 覆盖缺口（Coverage gaps）：列出了尚未内置的组件（如底部导航、日期选择器、图表）及其临时构建建议。
- 导入（Imports）：提供了工具函数、图标、Portal 提供者等导入路径。
- 图标集：列出了可用的 Carbon 图标名称，新图标需先添加到文件中。
- Lint 工具：通过
npx shadcn@latest add https://design.how/r/lime/lint.json安装，然后运行npx eslint -c lime.eslint.config.mjs .检查，每条消息会指出修复方法。
使用方式
- 在根布局中，将
lime类放在<body>或根元素上，并在内部包裹LimePortalProvider。 - 从区块（Blocks）或组件索引中选择所需组件，获取组件页面了解属性与规则，然后从指定路径导入使用。
- 仅使用令牌类名和组件构建界面，遵循全局规则和反模式列表。
- 完成前运行 lint 并修复所有错误，在 390 和 1280 宽度下渲染屏幕，对照全局规则和反模式列表检查并修复最严重缺陷。
- 移植现有屏幕时，逐块替换为对应组件，保留行为和文案，删除不再使用的旧样式。
适用场景
适用于使用 React/Next.js 构建的消费级应用界面，尤其是涉及金额操作、表单、列表、对话框等场景。适合需要严格设计系统约束、强调可访问性和一致性的团队。
限制
- 主题不自动跟随系统设置（
prefers-color-scheme），需手动设置data-theme="dark"。 - 部分组件（底部导航、日期选择器、图表）尚未内置，需按覆盖缺口建议临时构建。
- 图标集固定，新增图标需先修改图标文件。
- 规则冲突时按优先级顺序处理：可访问性与键盘行为 > 按角色使用令牌 > 现有组件 > 间距/圆角/字体比例 > 润色。
- 具体安装命令和代码内容需以原文为准，本文未提供官方收费、平台支持等额外信息。