coss
Cal.com官方设计系统与UI组件库
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：coss。 它的用途是：Cal.com官方设计系统与UI组件库 完整的 Skill 内容见：https://321skill.com/skills/coss/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“我正在使用coss ui的Button组件，但需要修改它的悬停状态颜色以匹配我们的品牌色，应该在哪里配置？” 它会引导你查阅coss ui的文档，解释如何通过覆盖Tailwind CSS主题变量或使用Component API来自定义样式。或者问：“我想在本地同时运行文档站和组件库进行调试，环境变量怎么配？” 它会根据README为你列出各个app所需的.env.local配置示例。
介绍
coss.com/ui（前身为Origin UI）是Cal.com的官方设计系统，旨在为React应用提供一套设计精美、可访问且可组合的UI组件。它基于Base UI构建，并使用Tailwind CSS进行样式设计，开发者可以直接复制、粘贴并使用这些组件，快速构建一致且美观的用户界面。
该仓库采用Turborepo管理的单体仓库结构，包含了主网站、UI组件库及文档、以及作为历史快照的Origin UI组件等多个应用和包。开发者可以通过配置环境变量，在本地同时运行和调试这些相互关联的应用。
它非常适合前端开发、全栈开发和UI设计师，尤其是那些正在使用或计划采用Cal.com设计语言，或希望基于高质量基础组件快速构建React应用界面的团队和个人。
需要注意的是，该仓库包含了新旧两套组件体系。新的coss ui组件是未来发展的重点，而Origin UI作为收购前的遗产，主要用于兼容，维护和支持有限。建议新项目优先使用新的coss ui组件。
核心特点
与许多通用UI库不同，它是Cal.com生产环境正在逐步采用的设计系统，组件设计直接服务于其产品需求，具有高度的实践性和一致性。同时，它基于Base UI的无样式基元构建，既提供了开箱即用的设计，又保留了底层的高度定制能力。
注意事项
不适合需要长期维护且基于Radix/shadcn风格旧组件（Origin UI）的新项目，因为其开发重心已转向新的coss ui组件。
常见问题
coss ui和Origin UI有什么区别？
coss ui是新的、基于Base UI的官方设计系统，是未来发展方向；Origin UI是收购前基于Radix的旧组件库，现为遗留代码，维护有限。
如何本地运行整个项目？
需在apps/www、apps/ui、apps/origin目录下分别创建.env.local文件并配置正确的URL，然后使用`bun run dev`命令启动。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/coss/raw/index.md 读取 coss 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/coss/raw/index.md（查看排版版本）