---
created: 2026-05-03
type: project
tags: [AI设计, Open Design, Kami, Claude Design, 开源, 设计系统]
source: https://mp.weixin.qq.com/s/MpjANCg5eO4TSxNUDrpRpQ
author: jackao（恶人笔记）
---

# Open Design + Kami 设计系统

> Claude Design 的开源替代品，集成 Kami 设计系统，实现杂志级 AI 设计
> 归档时间：2026-05-03

---

## 📌 概述

**Open Design** 是 Anthropic Claude Design 的**本地优先、完全开源替代品**，是一个 **Agent 驱动的设计生成平台**。

最新更新：正式集成 **Kami 设计系统**，让生成内容拥有"专业杂志/书籍"的纸质质感。

---

## 🔧 Open Design 核心能力

### 支持 11+ 种 Coding Agent

| Agent                              | 推荐度       |
| ---------------------------------- | --------- |
| Claude Code                        | ⭐⭐⭐⭐⭐（最强） |
| Codex / Cursor / Hermes / Kimi CLI | ⭐⭐⭐⭐      |
| BYOK 代理（任意 OpenAI 兼容模型）            | ⭐⭐⭐       |

### 支持内容

- Web / 移动 / 桌面原型
- Pitch Deck（演示文稿）
- 简历 / 作品集 / 信函
- 杂志海报
- 短视频与 HyperFrames

### 设计系统库

- **72 个品牌级 DESIGN.md**：Linear、Stripe、Vercel、Apple、Notion、小红书、Tesla 等
- **31 个可组合 Skill**：magazine-poster、guizang-ppt 等

### 独特机制

| 机制 | 作用 |
|------|------|
| 沙盒预览 | 实时 iframe 预览生成效果 |
| 实时 Todo 流 | 追踪 Agent 生成进度 |
| 强制问题表单 | 确保明确设计意图 |
| 五维自评 | Agent 自我质量评估 |
| 反 Slop 黑名单 | 禁止紫色渐变、emoji 滥用、Inter 做标题等 |

### 导出格式

HTML / PDF / PPTX / ZIP / Markdown，一键专业输出。

---

## 🎨 Kami 设计系统

### 基本信息

- **作者**：@HiTw93（Tw93）
- **理念**：Good content deserves good paper
- **定位**：严格约束的**印刷品设计系统**，非传统 UI 组件库

### 视觉规范

| 属性 | 值 | 说明 |
|------|-----|------|
| 背景色 | `#f5f4ed` | 温暖羊皮纸色，非纯白 |
| 强调色 | `#1B365D` | 墨蓝，唯一强调色 |
| 英文字体 | Charter | 经典衬线体 |
| 中文字体 | 仓耳金楷（TsangerJinKai02） | 个人免费，商用需授权 |
| 日文字体 | YuMincho | - |

### 排版哲学

- 极简阴影：仅 whisper / ring 两种
- 紧凑标题行高：1.1-1.3
- 舒适正文行高：1.5-1.55
- **绝对禁止"AI 味"装饰**

### 支持文档类型

One-Pager / Long Doc / Letter / Portfolio / Resume / Slides（含 WeasyPrint 优化模板）

Open Design 集成后额外提供 `kami-deck.html` 模板，专为横版杂志风 Pitch Deck 优化。

---

## 🚀 上手指南

### 环境准备

- Node.js ≈ 24（推荐 nvm/fnm 管理）
- pnpm 10.33.x（`corepack enable` 后自动）
- 至少一个 Agent CLI

### 一键安装

```bash
git clone https://github.com/nexu-io/open-design.git
cd open-design
pnpm install
pnpm tools-dev run web
```

首次运行会自动创建 `.od/` 文件夹（SQLite 数据库 + 项目工作区）。

### 日常生成流程

1. 选择 **Skill**（magazine-poster / guizang-ppt 等）
2. 选择 **Design System** → 搜索选中 **Kami**
3. 输入自然语言 Prompt
4. 填写 **Discovery Form**（必须：表面、受众、语气、品牌背景、规模、约束）
5. 选择视觉方向（或直接用 Kami 预设）
6. Agent 实时输出 → 沙盒预览
7. 满意后一键导出

### Kami 独立使用（不走 Open Design）

```bash
npx skills add tw93/kami -a claude-code -g -y
```

然后在 Claude Code 里直接说"用 Kami 风格做一份作品集"即可。

---

## 📊 评价

### 优势

- ✅ 质量领先：Kami 约束 + 反 Slop 流程 = 稳定专业印刷品水准
- ✅ 本地优先 + 开源：数据不上传、完全可审计
- ✅ 生态成型：72 设计系统 + 31 Skill，覆盖 95% 日常需求
- ✅ 成本可控：用开源模型就能跑，导出无水印

### 不足

- ⚠️ 上手门槛中等：Node + pnpm + Agent CLI 配置（15-30 分钟）
- ⚠️ 依赖底层模型能力：弱模型容易"翻车"
- ⚠️ 中文字体商用需注意仓耳金楷授权
- ⚠️ 复杂长文档仍需人工二审

### 建议

- **每天用 AI 写东西/做演示/发作品集** → 值得装
- **偶尔用一次或零技术背景** → 等桌面版或教程

---

## 🔗 相关链接

- Open Design：https://github.com/nexu-io/open-design
- Kami：https://github.com/tw93/kami

---

*研究归档，2026-05-03 | 基于"恶人笔记"公众号文章整理*