← 返回开源项目

Open Design：AI设计系统的开源范式

Open Design: Open Source Paradigm for AI Design Systems

📁 开源项目 | 2026-04-29 | AI Skills | nexu-io
🔗 GitHub 项目地址
🎯 核心收获 Key Takeaways
  • Claude Design 开源替代 - 完整复刻 Claude Design 的能力，支持本地部署和BYOK
  • Claude Design Open Alternative - Complete replication of Claude Design capabilities, supports local deployment and BYOK
  • 19个专业Skills - 覆盖原型、文档、演示等全场景设计能力
  • 19 Professional Skills - Covers prototypes, documents, presentations and all design scenarios
  • 71个Design Systems - 内置71个品牌级设计系统，一键应用
  • 71 Design Systems - Built-in 71 brand-level design systems, one-click apply
  • 反AI-slop机制 - 完整的质量门槛，防止AI糊弄
  • Anti-AI-Slop Mechanism - Complete quality gates to prevent AI slop

一、项目概述：Claude Design的开源替代

1. Project Overview: Open Source Alternative to Claude Design

1.1 为什么需要Open Design

1.1 Why Open Design Exists

Anthropic于2026年4月17日发布了Claude Design（基于Opus 4.7），它展示了当LLM停止写散文而开始交付设计工件时会发生什么。Claude Design迅速走红，但它有几个限制：

Anthropic released Claude Design (based on Opus 4.7) on April 17, 2026, demonstrating what happens when an LLM stops writing prose and starts shipping design artifacts. It went viral, but with limitations:

  • ❌ 闭源代码，无法审计
  • ❌ Closed source, cannot audit
  • ❌ 仅限付费用户
  • ❌ Paid-only access
  • ❌ 仅限云端运行
  • ❌ Cloud-only
  • ❌ 锁定Anthropic模型和Skills
  • ❌ Locked to Anthropic models and Skills

Open Design应运而生：同样的循环、同样的工件优先思维方式，但没有任何锁定。

Open Design emerged: same loop, same artifact-first mental model, none of the lock-in.

19
专业Skills
71
设计系统
6+
支持Agent
Apache
许可证

1.2 核心设计理念

1.2 Core Design Philosophy

┌─────────────────────────────────────────────────────────┐
│  1. Agent作为设计引擎 (Agent as Design Engine)          │
│     不打包Agent，利用用户已有的Agent                      │
│                                                         │
│  2. DESIGN.md协议 (Design System as Protocol)          │
│     将设计系统编码为纯文本协议，Agent可解析               │
│                                                         │
│  3. 交互式需求锁定 (Interactive Requirement Locking)    │
│     生成前通过结构化表单锁定需求                          │
│                                                         │
│  4. 确定性视觉规范 (Deterministic Visual Specs)        │
│     5种视觉方向是确定性规范，不是建议                      │
└─────────────────────────────────────────────────────────┘

二、技术架构解析

2. Technical Architecture

2.1 整体架构

2.1 Overall Architecture

┌──────────────────────────────────────────────────────────┐
│                   browser (Vite + React SPA)              │
│          chat · file workspace · iframe preview          │
└──────────────────────────┬───────────────────────────────┘
                           │
        ┌──────────────────┼──────────────────┐
        │    /api/* (proxied in dev)         │  direct (BYOK)
        ▼                                    ▼
┌──────────────────────┐              ┌──────────────────────┐
│   Local daemon       │              │  Anthropic SDK       │
│ (Express + SQLite)   │              │  (browser fallback)  │
│                      │              └──────────────────────┘
│ /api/agents          │
│ /api/skills          │
│ /api/design-systems  │
│ /api/projects/...   │
│ /api/chat (SSE)     │
└─────────┬────────────┘
          │ spawn(cli, [...], { cwd: .od/projects/ })
          ▼
┌──────────────────────────────────────────────────────────┐
│  claude · codex · cursor-agent · gemini · opencode · qwen│
│  reads SKILL.md + DESIGN.md, writes artifacts to disk    │
└──────────────────────────────────────────────────────────┘

2.2 Skills系统

2.2 Skills System

Open Design内置19个Skills，遵循Claude Code的SKILL.md约定，并扩展了od:前缀的frontmatter。

Open Design ships 19 built-in Skills, following Claude Code's SKILL.md convention with extended od: frontmatter.

类别 Category 数量 Count 示例 Examples
原型设计 Prototype 6 web-prototype, mobile-app, dashboard web-prototype, mobile-app, dashboard
文档模板 Documents 10 pm-spec, weekly-update, eng-runbook pm-spec, weekly-update, eng-runbook
展示设计 Presentations 3 simple-deck, guizang-ppt, saas-landing simple-deck, guizang-ppt, saas-landing

2.3 Design System系统（71个设计系统）

2.3 Design System Library (71 Systems)

Open Design打包了71个品牌级设计系统：

Open Design ships 71 brand-level design systems:

10
AI & LLM
19
开发者工具
7
金融科技
6
汽车

2.4 视觉方向系统（5种设计风格）

2.4 Visual Direction System (5 Styles)

方向 Direction 调性 Mood 参考 References
Editorial Monocle 印刷杂志风格 Print magazine style Monocle, FT Weekend
Modern Minimal 冷静结构化 Cool & structured Linear, Vercel, Stripe
Tech Utility 信息密度 Information density Bloomberg
Brutalist 原始大胆 Raw & bold Bloomberg Businessweek
Soft Warm 柔和温暖 Soft & warm Notion, Apple Health

三、反AI-slop机制

3. Anti-AI-Slop Mechanism

Open Design包含完整的反"AI糊弄"机制，确保输出质量：

Open Design includes a complete anti-"AI slop" mechanism to ensure output quality:

3.1 5维度自评

3.1 5-Dimension Self-Evaluation

在输出前，Agent必须对产出进行评分：

Before outputting, the Agent must score the output:

  • Philosophy - 设计理念是否清晰
  • Hierarchy - 层次结构是否合理
  • Execution - 执行是否到位
  • Specificity - 是否足够具体
  • Restraint - 是否克制、不花哨
⚠️ 质量门槛 ⚠️ Quality Gate

任何维度低于3/5都需要修复并重新评分。两轮迭代是正常的。

Anything below 3/5 requires fixing and re-scoring. Two passes is normal.

3.2 P0/P1/P2 检查清单

3.2 P0/P1/P2 Checklist

  • P0: 必须通过的硬性门槛，不过=失败
  • P1: 强烈建议遵循，不过=警告
  • P2: 优化项，不过=接受

3.3 Slop黑名单

3.3 Slop Blacklist

  • ❌ 激进的紫色渐变
  • ❌ 通用emoji图标
  • ❌ 带左边框装饰的圆角卡片
  • ❌ 手绘SVG人物
  • ❌ Inter作为展示字体
  • ❌ 编造的数据指标

四、交互式需求锁定

4. Interactive Requirement Locking

Open Design的核心创新之一是在模型编写任何像素之前锁定需求：

One of Open Design's core innovations is locking requirements before the model writes a single pixel:

Turn 1: Discovery Form

Turn 1: Discovery Form

用户输入后，系统返回结构化问卷：目标受众、语调、品牌上下文、规模和复杂度。

After user input, the system returns a structured questionnaire: audience, tone, brand context, scale and complexity.

Turn 2: Direction Picker

Turn 2: Direction Picker

如果用户没有品牌规范，系统展示5种视觉方向供选择。点击后立即应用确定性配色和字体。

If user has no brand spec, system shows 5 visual directions. Click applies deterministic colors and fonts immediately.

💡 设计洞察 💡 Design Insight

30秒的问卷 vs 30分钟的无效迭代。这是最高ROI的活动。

30 seconds of questionnaire vs 30 minutes of wasted iteration. This is the highest ROI activity.

五、对一人公司SOP的借鉴

5. Insights for One-Person Company SOP

5.1 立即可执行

5.1 Immediately Actionable

标准化SKILL.md结构

Standardize SKILL.md Structure

  • 采用frontmatter + 标准章节结构
  • Adopt frontmatter + standard section structure
  • 添加quality_gates定义
  • Add quality_gates definitions

引入需求锁定机制

Introduce Requirement Locking

  • 创建标准Discovery Form模板
  • Create standard Discovery Form template
  • 在每个项目开始前强制执行
  • Enforce before every project starts

5.2 核心洞察

5.2 Core Insights

洞察1：Skills的价值在于"约束"而非"能力"

Insight 1: Skills Value is in "Constraints" not "Capabilities"

好的Skills不是告诉Agent"你可以做什么"，而是告诉Agent"你必须怎么做"。确定性规范→防止随机性。

Good Skills don't tell the Agent "what you can do", but "how you must do it". Deterministic specs → prevent randomness.

洞察2：设计系统 = Agent可执行的协议

Insight 2: Design System = Agent-Executable Protocol

DESIGN.md的核心价值不是"文档"，而是"Agent可解析的规范"。知识库不仅是给人看的，更要能给Agent用。

The core value of DESIGN.md is not "documentation" but "Agent-parseable specs". Knowledge base must be usable by Agents, not just humans.

洞察3：交互式锁定 > 直接执行

Insight 3: Interactive Locking > Direct Execution

在让Agent开始工作前，投资需求澄清时间，是最高ROI的活动。30秒问卷 vs 30分钟无效迭代。

Investing time in requirement clarification before letting Agent work is the highest ROI activity. 30 seconds questionnaire vs 30 minutes wasted iteration.

六、技术栈总结

6. Tech Stack Summary

层级 Layer 技术栈 Tech Stack
前端 Frontend Vite 5 + React 18 + TypeScript
Daemon Node.js + Express + SQLite
Agent传输 Agent Transport child_process.spawn + claude-stream-json
存储 Storage SQLite + 平面文件
预览 Preview 沙盒 iframe (srcdoc)
导出 Export HTML · PDF · PPTX · ZIP

七、附录：Skills完整列表

7. Appendix: Complete Skills List

Skill 类型 Type 说明 Description
web-prototype原型Prototype默认Web原型
mobile-app原型Prototype移动App原型
dashboard原型Prototype管理/分析仪表盘
pricing-page原型Prototype独立定价页
docs-page原型Prototype三栏文档页
blog-post原型Prototype编辑长文
saas-landing原型PrototypeSaaS落地页
simple-deck展示Presentation极简滑动演示
guizang-ppt展示Presentation杂志风Web-PPT
pm-spec模板TemplatePM规格文档
weekly-update模板Template团队周报
meeting-notes模板Template会议记录
eng-runbook模板Template事件/运维手册
finance-report模板Template执行摘要
hr-onboarding模板Template角色入职
invoice模板Template发票
kanban-board模板Template看板快照
team-okrs模板TemplateOKR评分表

参考资料：

References: