Recontent.app 是什么？
Recontent 将设计决策存储在类型化的多层结构中，使设计令牌受到工具强制约束而非依赖团队约定；它位于设计系统底层，为整个技术栈提供一致的设计令牌支持。通过定义参考令牌（原始值）、系统令牌（语义含义）和组件令牌（组件专属决策），Recontent 构建了从原始色值（如 #2563eb）→ 语义别名（如 system.color.accent）→ 组件属性（如 button.background）的完整映射链，且该链在构建后完整保留在 CSS 变量中，确保修改一处即全局生效。其 diff 功能可精准识别重命名、删除与值变更等不同类型的变更，并区分破坏性变更；主题支持灵活，暗色模式仅需重定义少数系统色，品牌重塑则可整体替换参考调色板，所有别名自动跟随，组件代码无需改动。插件机制支持输出至 CSS 变量、Tailwind v4、StyleX、DTCG（Figma）、文档站点、Swift、React Native 等多种目标，全部由单一配置驱动。
主要功能
支持三层类型化令牌定义：参考层（ref）存储原始值（如 ref.color.blue[9] #2563eb）、系统层（system）赋予语义（如 system.color.accent → ref.color.blue[9]）、组件层（components）绑定具体用途（如 button.background → system.color.accent），全链路保持别名指向关系；
提供 recontent diff 命令，可对比任意 Git 版本，精确识别并分类变更类型——例如报告 'system.color.bg 重命名为 system.color.background' 或 'system.color.legacyBlue 被移除'，并标记破坏性变更以触发 CI 失败；
适用场景与人群
前端工程师、设计系统工程师、UI 架构师
- 在设计系统中统一管理颜色、间距等设计令牌，确保前端组件样式一致
- 支持多主题（如深色模式、品牌重设计）下自动更新所有相关样式变量
- 通过类型检查防止设计令牌误用，例如访问不存在的 system.color.accent 属性
recontent.config.ts 配置文件，含 defineReferenceTokens、defineSystemTokens、defineComponentTokens 定义及插件列表
CSS 变量文件（tokens.css）、Tailwind 工具类、StyleX 主题、Figma 兼容 JSON、文档站点 HTML/Markdown、Swift/iOS 原生代码等，均按配置中插件生成
常见问题
Recontent 如何保证设计令牌变更不引发意外样式断裂？
通过 recontent diff 命令比对 Git 历史版本，明确区分重命名、删除、值变更与破坏性变更，并支持 --fail-on-breaking 自动拦截
能否将设计令牌同步到 Figma 或移动端原生代码？
可以：dtcg() 插件生成 JSON 供 Tokens Studio 导入 Figma；swift() 插件生成 iOS Swift 代码；typescriptNative() 插件生成 React Native 主题文件
如何使用
- 01
运行 npm install -D recontent 安装工具
- 02
执行 recontent init neutral 生成基础配置文件 recontent.config.ts
- 03
在配置中定义 reference、system 和 component 三层令牌结构
- 04
添加插件（如 css()、tailwind() 或 docs()）并运行 recontent build 生成目标输出
官网与资料来源
资料更新于 2026-10-31
