diff --git a/wiki/AI工程/OpenDesign_Kami设计系统.md b/wiki/AI工程/OpenDesign_Kami设计系统.md new file mode 100755 index 0000000..f39972b --- /dev/null +++ b/wiki/AI工程/OpenDesign_Kami设计系统.md @@ -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 | 基于"恶人笔记"公众号文章整理*