Update from Sync Service
This commit is contained in:
FNS Service
165
wiki/AI工程/OpenDesign_Kami设计系统.md
Executable file
165
wiki/AI工程/OpenDesign_Kami设计系统.md
Executable file
@@ -0,0 +1,165 @@
|
|||||||
|
---
|
||||||
|
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 | 基于"恶人笔记"公众号文章整理*
|
||||||
Reference in New Issue
Block a user