DOCSEARCHbyAlgolia
Submit Docs

Open Design Documentation

repository·main·Indexed 31 days ago

https://github.com/nexu-io/open-design

A local-first design orchestration platform that provides a structured design loop (discovery, critique, and generation) by wrapping coding agent CLIs in a unified web UI. Includes the agent-protocol module for driving AI agent CLIs via ACP and pi RPC adapters, and the Brand Engine for deterministic brand system generation from seeds or URLs.

Tokens
2.1M
Snippets
1K
Records
8.7K
Agent score
94%

What's inside open-design

  1. Overview of the @open-design/packaged runtime

    main

    The @open-design/packaged package provides a thin Electron runtime entry point for Open Design. It is responsible for orchestrating the core components of the application by:

    1. Starting the packaged daemon.
    2. Starting the web sidecars.
    3. Registering the od:// entry protocol.
    4. Delegating host window management to @open-design/desktop/main.

    Note that the primary product logic is not contained within this package; it resides in apps/daemon, apps/web, and apps/desktop.

  2. Overview of Open Design core features

    main

    Open Design is an open-source (Apache-2.0), local-first design orchestration platform. It extends existing coding agents (like Claude Code, Cursor, Codex, or Gemini CLI) into a design environment by providing templates, design systems, and structured design loops.

    Key Capabilities:

    • Multi-Agent Support: Connects to agents you already use (Claude Code, Codex, Cursor, GitHub Copilot CLI, OpenCode) rather than replacing them.
    • Design Systems: Extract and reuse colors, fonts, components, and tone rules from brand websites, Figma files, or screenshots to ensure consistent AI generation.
    • Practical Output Formats: Generates actionable artifacts including HTML, PDF, PPTX, and MP4, rather than just static images.
    • Self-Hostable: The desktop app, daemon, and project files run in your local environment.
    • Flexible Model Access: Use your own API keys (OpenAI, Anthropic, Google) or use the official router via token-based billing.

  3. Overview of Blog Indexing Automation workflow

    main

    The indexing automation manages search engine visibility for the Open Design landing page through two main triggers:

    1. CI Trigger (landing-page-ci): Runs lint-blog-seo.ts and check-blog-url-changes.ts to validate frontmatter, links, metadata (canonical/JSON-LD/OG), and ensure slug changes have redirects before merging.
    2. Production Trigger (landing-page-production): Triggered upon successful promotion. It detects new URLs by diffing against the blog-indexed-prod git tag, verifies readiness, submits to IndexNow, re-submits the sitemap to GSC, performs URL inspection, and queries Search Analytics.

    Results are reported via the open-design-bot GitHub App in a dedicated PR, with human-readable status in docs/blog-indexing-status.md and machine-readable state in docs/blog-indexing-status.json.

  4. Overview of OD Library and OD Clipper

    main

    The OD Library is a centralized asset registry for the Open Design ecosystem. It automatically indexes all assets entering the system, including those from the OD Clipper (Chrome extension), manual uploads, Agent-generated media, and design system extractions.

    Key features include:

    • Unified Registry: Tracks assets with source identifiers and deep links back to their origin (e.g., specific Agent tasks or design systems).
    • Automated Enrichment: Assets undergo programmatic enrichment (dimensions, color palettes, fonts, OCR) and optional AI enrichment (vision captions, semantic embeddings).
    • Semantic Search: Allows searching for assets using natural language via vector embeddings.
    • Brand Kit Extraction: Aggregates assets into structured brand kits (Identity, Typography, Palette, etc.) to facilitate one-click generation of brand assets like landing pages, pitch decks, and posters.

  5. Overview of Open Design

    main

    Open Design is an open-source, agent-native design platform and a local-first native desktop application for macOS and Windows. It serves as an alternative to Claude Design, providing a filesystem of functional skills, design templates, and design systems that coding agents can read, write, and remix.

    Key capabilities include:

    • Artifact Generation: Produces web/desktop/mobile prototypes (HTML), live dashboards, HyperFrames (MP4 motion graphics), pitch decks (PPTX/PDF), and high-resolution images.
    • Design Systems: Uses DESIGN.md files as brand contracts to shape all generated outputs.
    • Agent Integration: Operates as a set of skills, a CLI, and an MCP server that integrates with mainstream coding agents (e.g., Claude Code, Cursor, GitHub Copilot).
    • Extensibility: Supports plugins and integrations to extend generation capabilities.

  6. Overview of Open Design Architecture

    main

    Open Design operates using a multi-layered architecture designed for both human and agent interaction:

    • Frontend: A Next.js 16 App Router application (or Electron shell for desktop) providing chat, file workspace, and iframe previews.
    • Daemon: A local Node 24 Express server with SQLite storage. It exposes API endpoints for skills, design templates, plugins, and chat (via SSE).
    • MCP Server: A Model Context Protocol (stdio) server that allows external coding agents to use Open Design tools.
    • Runtime: A local runtime layer that executes functional skills and design templates, writing files to the project workspace.
    • BYOK Proxy: An SSE-based proxy (/api/proxy/{provider}/stream) that allows integration with OpenAI-compatible providers while guarding against SSRF.

  7. Overview of Open Design features

    main

    Open Design is an open-source (Apache-2.0), local-first design platform that acts as an agent-native workspace. Key capabilities include:

    • Bring Your Own Agent: Supports 21+ agents including Claude Code, Codex, Cursor, Gemini, Copilot, and OpenCode.
    • Interactive Prototypes: Generates clickable, navigable prototypes rather than static images.
    • Design Systems: Provides structured presentation of colors, typography, spacing, and components.
    • Asset Generation: Includes an image library, image generation, and support for video.
    • Extensibility: Supports prebuilt skills, custom skills, MCP servers/connectors, and can be exposed as an MCP server itself.
    • Design Review: Features a design review panel that provides a five-panel grade of the agent's output.

  8. Overview of the kami-deck design system

    main

    The kami-deck template follows a specific "print rhythm" visual language.

    Visual Characteristics

    • Color Palette: Uses parchment (#f5f4ed) for standard slides and ink-blue (#1B365D) with ivory text for Cover, Chapter, and End slides.
    • Typography: Serif at weight 500; no italics are permitted.
    • Accents: Single ink-blue accent; no second accent colors and no cool blue-grays.
    • UI Elements:
      • Per-slide chrome strip (brand mark, deck title, and live slide counter like 01 / 09).
      • Ink-blue progress bar at the bottom.
      • Dot indicators for navigation.
      • ESC overview grid with scaled thumbnails.
    • Navigation: Supports keyboard, wheel, and touch navigation.
    • Multilingual Support: Supports EN, zh-CN, and ja via the language parameter set on :root.

    Constraints (Boundaries)

    • Single File: The output must be one self-contained HTML file with no router or external JS bundles.
    • Color Invariants: Tag fills must use solid hex codes (e.g., #1B365D) rather than rgba() to maintain the print-inspired aesthetic.
    • Shadows: No hard drop shadows.

  9. Overview of Humanize PPT Marketplace Package

    main

    The humanize-ppt marketplace-slim package is a runtime-critical distribution of the Humanize PPT orchestration engine. It provides the necessary references, renderer adapters, and a runnable example for generating presentation materials.

    Key Routing Capabilities:

    • Native Editable PPTX: Uses the ppt-master route for both Chinese and English.
    • Chinese HTML: Uses the guizang-ppt-skill route.
    • English HTML: Uses the beautiful-html-templates / frontend-slides route.

    Note: This is a slim package. Full documentation, examples, and version history are located in the upstream repository at https://github.com/LearnPrompt/humanize-ppt.

  10. Overview of Open Design as a Claude Design alternative

    main

    Open Design is an open-source (Apache-2.0), agent-native design platform designed as a free alternative to closed tools like Claude Design. It allows users to build animated sites, interactive app prototypes, and visual slide decks without vendor-imposed usage limits or subscriptions.

    Key capabilities include:

    • Model Agnosticism: Connect to GPT, use a custom API, or run models locally on your own hardware.
    • Dynamic Outputs: Generates motion and interaction (animated sites) rather than just static mockups.
    • Iterative Prototyping: Supports refining interactive flows and prompts within the same workspace.
    • Unified Workspace: A single environment for web design, app prototyping, and presentation creation.

  11. Overview of the Brand Engine

    main

    The Brand Engine is an Ant-Design-style system that collapses a brand into a small Seed (~20 fields). A deterministic algorithm then derives a complete style system, themed component kits, and finished products (landing pages, emails, posters) from that seed.

    Key characteristics:

    • Deterministic: Variants like light, dark, or compact are generated by running the same seed through different algorithms, ensuring consistency.
    • Traceable: Every downstream value (tokens, components, artifacts) traces back to the Seed.
    • Color Fidelity: Uses a 10-step color ladder implementation that is a bit-for-bit port of @ant-design/colors.

    Pipeline Flow

    1. Input: A URL (via prefetch) or a Brand kit.
    2. Seed Generation: seedFromMaterial or seedFromBrand produces a SeedToken.
    3. Token Derivation: deriveTokens(seed, theme) produces DesignTokens.
    4. Output: Generates tokens.json, variables.css, themed components, and HTML artifacts (landing, email, poster).