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），仅供参考
企业数字化 ERP 产品动态
相关推荐
torchvision LRASPP 语义分割模型：Lite R-ASPP 架构源码解读与实战指南 torchvision LRASPP 语义分割模型：Lite R-ASPP 架构源码解读与实战指南 【免费下载链接】vision Datasets, Transforms and Models specific to Computer Vision 项目地址: https://gitcode.com/gh_mirrors/vi/vision
LRASPP（Lite R-ASPP… · 2026/9/25 16:22:42
用 qiankun Agent Skill 让编码 Agent 自动搭建微前端项目：安装、使用与源码解析 用 qiankun Agent Skill 让编码 Agent 自动搭建微前端项目：安装、使用与源码解析 【免费下载链接】qiankun 📦 🚀 Blazing fast, simple and complete solution for micro frontends. 项目地址: https://gitcode.com/gh_mirrors/qi/qiankun… · 2026/9/25 16:22:42
Spring AI RAG 全链路观测落地：从 OTel 埋点到观测云排障指南 Spring AI 的 RAG 项目做多了以后，你会发现最折磨人的不是模型答得差，而是出了问题根本不知道在哪一环。一次用户提问从进入系统到把答案流式吐出来，链路少说也有五六个环节：文档解析、切片、embedding、向量检索、prompt 拼装、大… · 2026/9/25 16:22:42
Claude桌面端Agent与Cowork升级：从对话到办公自动化的实操指南 1. 从"聊天框"到"工位"：这次升级到底改了什么大多数人第一次用 Claude，都是把它当成一个更聪明的搜索框——问一句答一句，复制粘贴来回倒腾。但如果你最近打开过 Claude 的桌面端，会发现它的定位已经悄悄变了… · 2026/9/25 16:22:42
基于SpringBoot的“电掌通”共享充电宝管理系统：技术栈、背景意义与核心代码 温馨提示：本人主页置顶文章(点我)开头有 CSDN 平台官方提供的学长联系方式的名片！
1. 项目背景与意义
随着移动互联网和智能手机的深度普及，移动设备的续航焦虑成为高频痛点。共享充电宝作为“即取即用、异地归还”的便民服务，已… · 2026/9/25 16:22:36
Atlas 300V 24G推理卡上部署YOLO实战：从模型转换到性能调优 1. 先说结论：Atlas 300V 24G 到底是张什么卡这两天后台收到好几个私信都在问同一件事：atlas 部署 YOLO 靠不靠谱，还有人直接问 atlas 300v 24g 是运算加速卡吗。我先给个明确答案：是，它是运算加速卡，但准确… · 2026/9/25 16:22:36
华为Atlas 300V加速卡上YOLO模型推理部署全攻略 开头是这么回事：最近手上拿到一块华为的Atlas 300V加速卡，24G显存版本，第一反应和多数人一样，先搞清楚它到底是不是一块“运算加速卡”。答案是肯定的，但又不是传统意义上那种通用GPU。它的定位很明确——面向AI推理场… · 2026/9/25 16:22:29
创维E900V22D刷机全攻略：S905L3SB芯片兼容性解析与救砖实战 /* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/25 1:00:31
MQTT协议原理与Broker服务器搭建实战：从Mosquitto到EMQX /* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/25 1:00:37
