nexu-io/open-design

⭐ 35,009  ·  #20  ·  TypeScript

🎨 Local-first, open-source alternative to Anthropic's Claude Design. ⚡ 19 Skills · ✨ 71 brand-grade Design Systems 🖼 Generate web · desktop · mobile prototypes · slides · images · videos · HyperFrames 📦 Sandboxed preview · HTML/PDF/PPTX/MP4 export 🤖 Runs on Claude Code / Codex / Cursor / Gemini / OpenCode / Qwen / Copilot / Hermes / Kimi CLI.

TypeScript agent-skills ai-agents ai-design Skill

项目分析

🎯 定位	Agent 能力增强
💡 核心价值	为 AI 编码 Agent 提供标准化的 Skills 和 Prompt 模板，覆盖特定场景（代码审查、调试、架构设计等），让 Agent 在这些场景下输出质量更高
👥 适合谁	使用 Claude Code/Cursor/Codex 等 Agent 工具的开发者，想提升 Agent 在特定任务上的表现

为什么值得关注

35,009 Stars，社区活跃度不错，说明解决了真实痛点。使用 TypeScript 开发。核心特色：The open-source alternative to [Claude Design][cd]. Local-first, web-deployable, BYOK at every layer — 16 coding-agent CLIs auto-detected on your PATH (Claude Code, Codex, Devin for Terminal, Cursor Agent, Gemini CLI, OpenCode, Qwen, Qoder CLI, GitHub Copilot CLI, Hermes, Kimi, Pi, Kiro, Kilo, Mistral Vibe, DeepSeek TUI) become the design engine, driven by 31 composable Skills and 72 brand-grade Design Systems. No CLI? An OpenAI-compatible BYOK proxy is the same loop minus the spawn.。

AI 深度分析报告

Open Design In-Depth Analysis Report

One-Sentence Summary

An open-source alternative for AI-driven design powered by local AI agents.

Core Features

• Multi-Agent Engine Support: Automatically detects and integrates 16 mainstream coding agent CLIs (Claude Code, Codex, Cursor Agent, Gemini CLI, etc.) as design engines. When no CLI is available, it can run via an OpenAI-compatible BYOK agent.
• Composable Skill System: Includes 31 built-in composable AI design skills covering the full design workflow, from prototype generation and style adjustment to export.
• Brand-Level Design System Library: Comes with 72 pre-built brand-level design systems that can be reused directly or used as a starting point for new designs.
• Multi-Format Output: Supports generating prototypes for web, desktop, and mobile, as well as slides, images, videos, and HyperFrames. Output formats include HTML, PDF, PPTX, and MP4.
• Sandbox Preview & Local-First: Provides a sandboxed preview environment, with all processing done locally to ensure data privacy.

Technical Architecture

• Primary Tech Stack: TypeScript, Next.js, offering both web deployment and desktop application capabilities.
• Architecture Highlights:
  • Agent Abstraction Layer: Through a unified interface abstraction, it supports automatic detection and adaptation of 16 different agent CLIs, enabling a "BYOK (Bring Your Own Knowledge/Key)" design workflow.
  • Skill Composition Pattern: 31 skills are organized in a modular fashion, allowing flexible combination to form complex design processes, similar to the composition pattern in functional programming.
  • Local-First Design: Core logic executes on the client side, requiring only an agent CLI or API Key, with no dependency on centralized services.

Quick Start Guide

# 1. Clone the repository
git clone https://github.com/nexu-io/open-design.git
cd open-design

# 2. Install dependencies
npm install

# 3. Start the development server
npm run dev

# 4. Open your browser and visit http://localhost:3000
# Ensure at least one supported CLI agent (e.g., Claude Code) is installed

Strengths, Weaknesses, and Use Cases

Strengths

• Highly Flexible: Supports 16 agents and BYOK, not tied to any specific AI vendor.
• Local-First: Data is not transmitted externally, suitable for privacy-sensitive teams.
• Out-of-the-Box: 72 design systems and 31 skills significantly lower the barrier to entry.
• Multi-Format Output: Covers a wide range of format requirements from prototyping to final deliverables.

Weaknesses

• Reliance on CLI Agents: Requires users to configure and install at least one supported agent CLI, increasing the initial setup barrier.
• Ecosystem Still Early: 35k Stars indicate high interest, but the maturity of the design system library and skill library relies on continued community contribution.
• Insufficient Documentation Depth: The README focuses on feature showcases, lacking detailed API documentation and architectural explanations.

Use Cases

• AI-Driven Design Teams: Teams looking to deeply integrate AI agents into their design workflow.
• Privacy-Sensitive Projects: Teams requiring local processing of design data.
• Multi-Tool Users: Developers using different AI agents (e.g., Claude, Gemini, Copilot).
• Design System Builders: Teams needing to quickly create or iterate on brand design systems.

Community & Popularity

• Stars: 35,009, with rapid growth, indicating widespread attention.
• Forks: A significant number, reflecting high community engagement.
• Recent Updates: Last updated on 2026-05-09, maintaining active development.
• Community Channels: Has Discord and X (Twitter) accounts for user support and update notifications.
• Multi-Language Documentation: Available in English, Spanish, Portuguese, German, and French, demonstrating a high degree of internationalization.

Conclusion: Open Design is a highly promising open-source project in the field of AI-assisted design. Its "local-first + multi-agent compatibility" design philosophy stands in stark contrast to the current trend of fragmented AI tools. For technically proficient teams seeking autonomy and control over their design workflow, it is a tool worth in-depth exploration.

技术信息

• 💻 语言: TypeScript
• 📂 Topics: agent-skills, ai-agents, ai-design, byok, claude
• 🕐 更新: 2026-05-09
• 🔗 访问 GitHub 仓库

---

数据更新于 2026-05-09 · Stars 数以 GitHub 实际数据为准