Project overview
OpenDesign is a local-first, open-source workspace for AI design and team collaboration, built with TypeScript. It connects existing AI coding agents or OpenDesign Cloud, bringing briefs, design templates, brand guidelines, previews, and revisions into one workflow.
The project uses the Apache-2.0 license. Some bundled skills and templates retain separate licenses, which should be checked individually before using those materials.
Use cases
It suits product, design, marketing, and operations work involving interactive website or app prototypes, dashboards, project updates, pitch decks, visual assets, and motion graphics. Teams can start with a brief, review previews, exchange feedback, and ask an AI agent to refine the same project.
Projects with established brand guidelines can use a design system centered on `DESIGN.md` so subsequent output follows shared typography, colors, and design conventions.
What it does and problems it solves
OpenDesign connects briefing, AI generation, previewing, feedback, and handoff, reducing repeated exports and transfers between tools. Through an MCP connection, external AI coding agents can read current project files to continue development.
The project separates skills, design templates, design systems, and plugins to reuse workflows, page structures, and brand guidelines. Presentations can be exported as HTML, PDF, PPTX, ZIP, or Markdown; HyperFrames motion graphics can be exported as MP4.
Local-first does not mean every request stays on your computer: requests using cloud models or OpenDesign Cloud are sent to the corresponding services. The README presents code migration, targeted editing, and the parameter adjustment panel inconsistently between demonstrations and development plans, so it does not establish that these workflows are fully available.
How to use
1. After installation, open the app and enter a specific brief on the home page, or choose an existing example, such as a product landing page or project presentation.
2. Choose an AI coding agent or OpenDesign Cloud. The app automatically detects coding-agent commands available on your computer. To connect an external agent, check its configuration under Settings → MCP server.
3. Select a plugin, design template, and design system for the task. For plugins, browse the Plugin page and click Install. In the project's Studio, click the plugin option in the composer and provide its requested inputs.
4. Review the result in Studio and request changes through the conversation. Interactive prototypes have live previews; presentations show slides and speaker notes; images can be reviewed and downloaded; HyperFrames motion graphics can be exported as MP4.
5. To revisit existing work, open its project from All projects. For engineering handoff, provide the generated HTML/CSS files or let a connected coding agent read the project files.
Installation
1. Prefer the desktop app available through the download entry or GitHub Releases in the original repository below this page. The README lists desktop versions for macOS on Apple Silicon and Intel x64, and Windows x64. This route does not require installing Node or pnpm, or cloning the repository first. The supplied material does not detail each operating system's installer steps; consult the original repository's installation guidance.
2. Linux users need to run from source: the supplied material states that official releases did not include a prebuilt Linux desktop package. Other users who prefer running from source can follow the steps below too.
3. Prepare Node `~24` and pnpm `10.33.x` as specified by the original repository. The material does not provide installation steps for these tools. Obtain the clone address from the original repository below this page and clone it to your computer.
4. In a terminal, navigate to the downloaded project's parent directory and run `cd open-design`. Then run `corepack enable` followed by `pnpm install` to enable the tooling and install project dependencies.
5. Run `pnpm tools-dev run web`, then open the address printed in the terminal in your browser. Development ports are allocated dynamically, so use the actual output.
6. WSL2 users should consult `docs/wsl-setup.md`. Native Windows users can consult `docs/windows-troubleshooting.md` if problems occur. Full startup, environment-variable, and packaged-build instructions are in `QUICKSTART.md`.
Source and usage notes
- Original repository: https://github.com/nexu-io/open-design
- Source revision: 8d820a698908dc279ef3d5aeb4ce6d156211a499
This listing links to the upstream repository. It does not provide a verified download package, and the complete workflow has not been independently validated.
This description was organized and translated with AI from public upstream material. Refer to the original repository for capabilities, setup requirements, costs, and license terms. 
