oa-design

这是什么

oa-design 是 Open Analytics 产品设计体系的完整表达，以三种形式打包：Agent Skill（Claude Code 直接安装）、类型检查的组件配方（TypeScript + React + Tailwind v4）和 CLI 工具（npx 一键注入项目）。

它的核心价值是：把一个真实上线产品的所有设计决策——颜色、圆角、动效弹簧值、布局节奏、字体——全部转译成 AI Agent 能理解并执行的规则，让 AI 生成的界面和设计师做的保持一致。

一句话概括视觉语言：白色表面配合连续曲率圆角，安静灰色舞台衬托，用单一墨水绘制，由单一弹簧驱动运动。

核心内容

设计技能（Agent Skill）：完整的设计体系编译成一个文件 DESIGN-SKILL.md，包含十条规则、弹簧常数表和组件索引。在 Claude Code 中安装方式为 npx getopen-design skill；其他 Agent（Cursor、Codex 等）直接引用 DESIGN-SKILL.md 文件即可。

组件配方（Recipes）：12 个组件的完整实现配方（源代码嵌入 Markdown），包括：squircle-card（圆角卡片）、button（按钮）、dropdown（下拉菜单）、tab-bar（标签栏）、modal（对话框）、multi-step-dialog（多步对话框）、skeleton（骨架屏）、notice-strip（通知条）、floating-pill（浮动标签）、toast（轻提示）、header-morph（头部变形动效）、reveal（揭示动效）。

配方从 components/ 源代码自动同步生成，node build/sync.mjs 驱动，确保 MD 中的代码与 npm run typecheck 通过的代码完全一致。

CLI 工具：

npx getopen-design list                  # 查看可用配方
npx getopen-design add tab-bar toast     # 配方注入当前项目
oa-design add --all --code              # 全部注入，含 .tsx 源码
npx getopen-design tokens                # 仅 Token CSS
npx getopen-design skill                 # Agent Skill 注入 .claude/skills

设计体系内核：

• 单一墨水：所有中性色从中性色通过 color-mix 百分比派生。
• Squircle 表面系统：CSS shape() clip-path，两层精确圆角半径。
• 七弹簧运动词汇表：覆盖整个产品，含标志性动效（对话框高度测量动效、标签栏标签遮罩、落地页毛玻璃头部、骨架屏模糊到达动效）。
• 布局系统：板块布局、固定高度卡片网格、通知和浮动标签模式、Toast 物理动效。
• 品牌声音：设计体系一半是文字。
• 质量底线：焦点环、减弱运动、无横向滚动。

不是组件库

它不是组件库，也不是主题包——运行时不依赖任何外部包。设计值基于 React + Tailwind v4 + motion 编写，但只是普通 CSS 数值和弹簧常数，可以移植到任何框架。如果项目已有设计体系，以现有体系为准，用它填补空白。

适用人群

想让 AI 编程助手生成界面时保持设计一致性的开发者；需要为产品建立设计规范的创业团队；使用 Claude Code / Cursor 等 Agent 编写 React 界面、希望能自动遵循一套完整设计语言的工程师。