+ 发布产品

MedQuantis Design System Skill 技能

MedQuantis Design System

AI绘画设计
查看 Skill ↗
认领产品

MedQuantis Design System — 自带 Claude Skill 的设计令牌单一来源

@medquantis/design-system 是 MedQuantis 的视觉身份单一来源（single source of truth），把设计令牌、共享 CSS、自托管字体图标、品牌资产、规范文档与一个 Claude Skill 整合到同一个仓库。每个值在 tokens/ 里只定义一次，再用代码生成器导出为消费者最熟悉的格式——CSS 自定义属性、Tailwind 4 theme、JSON、llms.txt 等等。它同时附带一个 Claude Code 插件版的 Claude Skill，把整套设计系统暴露给 AI 助手，让 Claude 在写代码 / 写幻灯片 / 写报告时直接遵循品牌规范。

核心能力

  • 设计令牌单一来源：所有值在 tokens/ 里只定义一次，自动生成 dist/tokens.css（--mq-* 自定义属性）、dist/tokens.json（脚本可读）、dist/tailwind.css（Tailwind 4 与 Nuxt UI 的 @theme 主题）等。
  • 共享 CSS 组件层：自研 mq- 组件 CSS 分层为 mq.base / mq.components / mq.slide / mq.print / mq.app 五个 cascade layer，所有选择器包在 :where() 里——本地样式永远赢。
  • Slide & Print 样式：内置 1280×720 幻灯片画布、A4 打印样式、状态徽章（仅交互应用）等，专门给"无构建链的媒体"（演示文稿、报告、PDF）使用。
  • 自托管字体 / 图标：Outfit、Newsreader、Geist Mono（变量 woff2，latin 与 latin-ext）+ Lucide 图标的固定版本构建，整目录可直接部署到 CDN。
  • 品牌资产：monogram、favicon 集、wordmark（亮 / 深两版 + 打印版本），屏幕与印刷双兼容。
  • 品牌 / 排版 / 图表 / 可访问性规范：guidelines/ 目录提供完整的"色彩 / 排版 / 图表 / 数据 / 可访问性"规则，可被人类与 AI 同时消费。
  • AI 友好的导出：自动生成 dist/llms.txt 与 dist/llms-full.txt（llmstxt.org 格式），把规范文档 + 令牌清单打包给大模型阅读。
  • Claude Skill 插件：仓库自带 plugins/medquantis-design-system/ Claude Code 插件与 claude.ai zip 版，把整套设计系统塞进 Claude 的工作流。
  • Stylelint 强制规则：消费者只需 export { default } from "@medquantis/design-system/stylelint" 即可自动拒绝字面色值、字体、阴影、!important、未声明的 radius 等破规写法。

安装配置

  1. 作为构建依赖：npm install -g @medquantis/design-system 或加入项目 package.json 的 devDependencies，让 build pipeline 直接消费 dist/ 产物。
  2. 复制目标输出：把 dist/tokens.css + fonts/ 整个目录部署到 CDN 或静态资源服务器；Tailwind 项目改用 dist/tailwind.css 作为入口。
  3. Claude Code 插件安装：把 plugins/medquantis-design-system/ 目录放到 Claude Code 可识别的插件路径，或把仓库打 zip 上传到 claude.ai。
  4. Stylelint 接入：项目 stylelint.config.mjs 里 export { default } from "@medquantis/design-system/stylelint"，启用令牌 / 字体 / 阴影 / radius 强制约束。
  5. 组件状态判断：所有 mq- 组件默认 trial，被消费者在生产环境使用且超过一个发布周期未变 markup 才升 stable——选型前先读 guidelines/。
  6. 不加载 css/app.css：文档与演示文稿保持 navy-only 配色，状态用 mark 样式表达；只有交互应用才加载状态徽章。

使用步骤

  1. 引入基础令牌：在你的应用入口加载 dist/tokens.css + fonts/fonts.css，所有 --mq-* 变量即可用。
  2. 按场景选 CSS 层：web 应用用 css/base.css + css/components.css；演示文稿加 css/slide.css；A4 报告加 css/print.css；交互应用再补 css/app.css。
  3. 接入 Tailwind 4：把 dist/tailwind.css 引入项目，Tailwind 主题即可拿到 50–950 全档 token scale。
  4. 写组件时用 mq- 类：Card 用 mq-card / mq-card-title / mq-card-body；KPI 用 mq-kpis / mq-kpi is-navy；徽章用 mq-badge is-solid 等组合状态。
  5. 幻灯片场景：套 mq-slide / mq-slide-label / mq-slide-title / mq-slide-body / mq-slide-foot 即可拿到 1280×720 画布 + 法定声明行 + 页码。
  6. AI 集成：把 dist/llms.txt 喂给 Claude / Cursor 等 AI，让大模型写作时自动遵循品牌规范；或直接装 Claude Skill 插件，让 Claude 在 Coding Agent 内调出整套设计系统。
  7. 强制令牌纪律：项目接 @medquantis/design-system/stylelint 后，CI 阶段自动拦截字面色值、字体、阴影、!important、未授权 radius 等破规写法。
  8. 升级组件：组件进入 stable 后才算可长期依赖；trial 期间 minor release 可能改 markup，使用前查 guidelines/。

适用场景

  • 品牌驱动型 SaaS / 工具产品：需要把所有界面、文档、演示文稿、报告统一到一套设计语言里。
  • AI 时代的"品牌 + AI"协作：让 Claude / Cursor / Copilot 在写代码时直接遵循品牌规范，避免风格漂移。
  • 咨询 / 顾问机构：在多项目、多客户之间维护同一套视觉系统，用单一仓库管令牌 + 文档 + Skill。
  • 演讲型团队：产品发布会、培训课件、内部 All-Hands 的幻灯片都基于 mq-slide 同一套画布。
  • 设计与工程协作：设计师更新 tokens/ 后，工程师 build pipeline 自动同步；不需要再"复制粘贴"色值到代码。
  • 无障碍 / 可访问性优先：guidelines/ 已内置 a11y 规则，适合做公共服务、医疗、教育类产品。

适用人群

  • 设计系统负责人、DesignOps、Front-end 架构师；
  • 维护品牌资产 + 设计系统的产品 / 运营团队；
  • 把 AI 编程助手接入工作流的工程师 / 团队 lead；
  • 需要大量幻灯片 / A4 报告 / 演示材料的咨询师、研究员、教育者；
  • 想要"一次定义、多端输出 + AI 友好"的开源项目维护者。

工作原理

MedQuantis 设计系统走"令牌优先 + 生成器输出 + 多格式分发"路线。令牌层：tokens/ 是唯一来源，所有色值、字号、间距、radius 都用 JSON / YAML 等机器可读格式描述；生成器层读取令牌，输出 CSS 自定义属性（dist/tokens.css）、Tailwind 4 theme（dist/tailwind.css）、JSON（dist/tokens.json）三种原生格式，外部消费者无须解释器；CSS 组件层用 cascade layer（mq.base → mq.components → mq.slide → mq.print → mq.app）组织，并在每条规则外包 :where()，保证本地样式优先级。AI 通道有两条：dist/llms.txt / dist/llms-full.txt（llmstxt.org 格式）让通用 LLM 直接读到令牌与规范；plugins/medquantis-design-system/ 让 Claude Code 把整套设计系统作为 Skill 引用。Stylelint 强制规则作为最后一道防线：消费者接入 @medquantis/design-system/stylelint 后，CI 自动拦截字面色值、字体、阴影、!important、未授权 radius 等破规写法，确保工程纪律。仓库当前状态是 bootstrap（预公开保密审计未通过前保持私有），发布后会以 MIT 协议公开。

官方链接

团队信息

AI产品库 官方
由 AI 猎手自动发现

评论与建议

0 条评论