Open Mercato 设计系统详解OKLCH 令牌、shadcn/ui 与 Figma Code Connect 完整指南【免费下载链接】open-mercatoThe AI-Engineering Foundation Framework for CRM/ERP and commerce: open-source TypeScript, with multi-tenancy, RBAC, events and domain modules already decided as conventions and specs, so Cursor, Claude Code and Codex build features instead of re-deciding architecture. Start with 80% done.项目地址: https://gitcode.com/GitHub_Trending/op/open-mercatoOpen Mercato 是一个面向 CRM/ERP 与商务场景的开源 AI 工程框架其设计系统基于 OKLCH 色彩令牌、shadcn/ui 组件库与 Figma Code Connect 打通设计到代码的全链路。本文带你快速读懂这套设计系统的三层架构令牌怎么定、组件怎么建、设计稿如何自动变成代码 为什么需要一套设计系统在审计了160 个页面、34 个模块后团队发现了这些典型问题372 处硬编码颜色——每位贡献者都在凭感觉猜色61 种随意的文字大小——text-[11px]、text-xs、text-[12px]三种方式表达同一种小字深色模式下语义色彻底失效完整审计结论见 audit.md8 条设计原则见 principles.md。一、OKLCH 令牌用感知均匀的颜色空间定义语义色什么是 OKLCH为什么弃用 HSLOKLCH 是一种感知均匀的颜色空间相同数值变化对应相同的视觉变化。这意味着错误红在浅色和深色背景下可以有完全不同的数值但视觉权重保持一致——这正是 HSL 做不到的。核心决策扁平令牌Flat Tokens设计系统做了一个关键架构决策每个语义角色一个独立 CSS 变量浅色/深色各给一套完整值而不是一个基础色 透明度状态令牌命名浅色Tailwind 用法错误--status-error-bgbg-status-error-bg成功--status-success-bgbg-status-success-bg警告--status-warning-bgbg-status-warning-bg信息--status-info-bgbg-status-info-bg为什么不用透明度方案如bg-status-error/5因为 5% 透明度的红色在白底上是淡粉色在纯黑底上却几乎看不见——透明度无法控制深色模式的对比度。色相角不是拍脑袋定的四类状态色的色相角直接复用现有图表配色保证全局一致性 错误 ≈ 25°取自--destructive 成功 ≈ 160°取自--chart-emerald 警告 ≈ 80°取自--chart-amber 信息 ≈ 260°取自--chart-blue所有文字/背景组合都经过WCAG AA 4.5:1 对比度校验具体数值表见 token-values.md。二、组件层shadcn/ui Radix CVA 的黄金组合技术栈分工组件库位于 packages/ui/三者各司其职工具职责Radix UI无样式的可访问性基础键盘操作、焦点管理、ARIACVAclass-variance-authority类型安全的变体管理variant/size 组合shadcn/ui组件脚手架与样式范式代码直接拥有22 个核心组件src/primitives/目录下沉淀了按钮、状态徽章、表单字段、日期选择器、命令菜单等常用原语其中 button.tsx 与 status-badge.tsx 是最常被复用的两个。组件的优先级、迁移状态见 components.md每个组件的 Props 规范见 component-apis.md。三、Figma Code Connect设计稿自动变代码它解决什么问题传统流程里设计师在 Figma 画一个按钮开发者手写一个同名组件两边靠口头对齐属性名。Code Connect 在 Figma 组件与真实代码组件之间建立显式映射在 Figma 中复制组件时粘贴出来的就是可直接运行的 React 代码。映射长什么样每个*.figma.tsx文件声明Figma 属性名 → 代码属性值的转换规则。以 button.figma.tsx 为例Figma 的VariantPrimary→ 代码variantdefaultFigma 的SizeSmall→ 代码sizesmFigma 的Disabledtrue→ 代码disabledfigma.config.json 指定了映射文件的扫描范围覆盖 Button、Badge、StatusBadge、Drawer、Tabs 等11 个高频组件。设计到交付的闭环Figma 设计稿 → Code Connect 映射 → 复制即得真实代码 → ESLint 强制令牌用法最后一步的强制由 6 条结构化 ESLint 规则实现插件位于 packages/eslint-plugin-ds/规则清单见 lint-rules.md迁移工具链见 enforcement.md。新手上手路径3 步参与设计系统读 2 分钟从 executive-summary.md 了解全局结论建模块前阅读 onboarding-guide.md按页面模板与反模式清单开发改颜色前对照 migration-tables.md 的映射表把旧色值换成语义令牌总结Open Mercato 的设计系统是一套可运行的工程实践✅OKLCH 扁平令牌——深色模式对比度可控告别 372 处硬编码颜色✅shadcn/ui Radix CVA——可访问性与变体管理开箱即用✅Figma Code Connect——设计稿复制粘贴即得真代码设计与开发零翻译损耗如果你想深入了解 7 层覆盖框架与治理策略完整文档索引在 docs/design-system/README.md架构决策记录见 decision-log.md。【免费下载链接】open-mercatoThe AI-Engineering Foundation Framework for CRM/ERP and commerce: open-source TypeScript, with multi-tenancy, RBAC, events and domain modules already decided as conventions and specs, so Cursor, Claude Code and Codex build features instead of re-deciding architecture. Start with 80% done.项目地址: https://gitcode.com/GitHub_Trending/op/open-mercato创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考