166 lines
4.5 KiB
Markdown
Executable File
166 lines
4.5 KiB
Markdown
Executable File
---
|
||
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 | 基于"恶人笔记"公众号文章整理*
|