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

Project Analysis

🎯 Positioning	Agent Capability Enhancement
💡 Core Value	Provides standardized Skills and Prompt templates for AI coding Agents, covering specific scenarios (code review, debugging, architecture design, etc.), enabling higher quality output in these scenarios
👥 Target Audience	Developers using Agent tools like Claude Code/Cursor/Codex who want to improve Agent performance on specific tasks

Why It's Worth Attention

35,009 Stars, with good community activity, indicating it solves real pain points. Developed in TypeScript. Core feature: 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 Deep Analysis Report

One-Sentence Summary

An open-source alternative for design driven 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 the design engine. Without a CLI, it can run via an OpenAI-compatible BYOK proxy.
• Composable Skill System: Built-in 31 composable AI design Skills, covering the entire design workflow from prototype generation, style adjustment, to export.
• Brand-Grade Design System Library: Pre-loaded with 72 brand-grade Design Systems, ready for direct use or as a design starting point.
• Multi-Format Output: Supports generating web, desktop, and mobile prototypes, as well as slides, images, videos, HyperFrames, etc. Output formats include HTML, PDF, PPTX, MP4.
• Sandboxed 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, balancing web deployment and desktop application capabilities.
• Architecture Highlights:
  • Agent Abstraction Layer: Through a unified interface abstraction, 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 modularly, 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, without relying 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

• High Flexibility: Supports 16 agents and BYOK, not tied to a specific AI vendor.
• Local-First: Data does not leave the machine, 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 various format needs from prototyping to final delivery.

Weaknesses

• Relies on CLI Agents: Requires users to configure and install at least one supported agent CLI, increasing the entry barrier.
• Ecosystem Still Early: 35k Stars indicates high interest, but the maturity of the design system library and skill library requires ongoing community contribution.
• Insufficient Documentation Depth: README focuses on feature showcase, lacking detailed API documentation and architecture explanations.

Use Cases

• AI-Driven Design Teams: Teams looking to deeply integrate AI agents into their design workflow.
• Privacy-Sensitive Projects: Teams needing to process design data locally.
• 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 and Popularity

• Stars: 35,009, growing rapidly, indicating widespread attention.
• Forks: Significant number, high community participation.
• Recent Updates: Last updated on 2026-05-09, maintaining active maintenance.
• 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, with a high degree of internationalization.

Conclusion: Open Design is a highly promising open-source project in the AI-assisted design field. 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 autonomous control over their design workflow, it is a tool worth in-depth study.

Technical Information

• 💻 Language: TypeScript
• 📂 Topics: agent-skills, ai-agents, ai-design, byok, claude
• 🕐 Updated: 2026-03-01
• 🔗 Visit GitHub Repository

---

Data updated on 2026-05-09 · Star count based on actual GitHub data