Define the direction, preview files and refine them in one workspace
OpenDesign
From references to a design handoff
Bring a brief, references and design rules to a connected AI agent. OpenDesign lets you create and refine web prototypes or decks, then hand over the actual files. It is a standalone app with skills, templates and model connections.
Open original imageThe conversation and edit record remain on the left while the same HTML file is previewed on the right, with code, preview and export controls above.
View the author's sourceThis Studio product image comes from the author's repository and shows a supplied image being used to revise an existing page. It is not our test result; customer counts and performance figures belong to the sample page.
Application and connections
- macOS / Windows desktop app
- Linux through source setup
- Local coding agents / model services
- MCP access for external agents
- GitHub stars
- 104,872
- Version
- 0.26.1
- Checked
- Categories
- Design & Video
Finish one useful page before expanding
Start with web-prototype, an existing design system and a real brief. Make one page that previews correctly, has working intended links and reads well on a narrow screen; then inspect its export. Define a reference contract first if the direction is unclear, and prepare a file handoff when someone else needs to continue.
Pick a task and get started
Install the app, confirm a working local agent with file access, then choose a task, template and design system and attach the inputs. Start the first three tasks in an OpenDesign project conversation; use the last in an external coding agent with MCP configured.
A practical first task: choose a local agent that can write project files, the web-prototype template and an existing design system, then attach your brief and assets.
Install the app and connect a model
Choose the macOS arm64, macOS x64 or Windows x64 installer from the official release. Open the installed app and confirm a working model connection before creating a project; desktop packages do not require a separate Node.js setup. For Linux or source setup, follow the Quickstart with Node.js 24.x and pnpm 10.33.2.
Read the author’s setup guideConfirm that the agent can work in the project
Authenticate the local agent in its own environment, then check Models & providers → Local CLI and use Rescan. Create a small project with a ready agent and confirm that its generated file appears in the preview. For access from another tool, copy that client's configuration from Settings → MCP server. On macOS, the system od utility may shadow OpenDesign's command; prefer the app's configuration with absolute paths.
Read startup and connection troubleshootingGive your AI this first task
These editorial task examples follow the skills and implementation at the reviewed commit. Replace the inputs and project details before use. The deliverables describe what to request, not results produced in our testing.
Use the web-prototype template and the currently selected design system to build a one-page project showcase for a freelance designer. Read brief.md and the logo, project images and contact link I supplied. List missing material rather than inventing clients, results or testimonials. Describe the section order first, then use the template's assets/template.html and references/layouts.md to create index.html in this project. Save the images used in the project and reference them by relative path. Include a project introduction, three services, case studies and a booking link; omit the case-study section if I supplied no evidence. Follow the design system's colors and typography, and identify working links versus demonstration interactions. Check the preview at 1440px and 390px for image proportions, keyboard focus and primary links, then review the template checklist. Return the actual files, asset list and check results, marking any checks you could not run. Continue revisions in this file and describe what changed.
Check what you receive
- An index.html file and its assets in the project, available for preview and further editing in Studio, with content grounded in the brief.
- Checks for desktop and narrow layouts, primary links, image proportions and interaction states, distinguishing demonstrations from working links.
- Confirm that the preview corresponds to the delivered files. Open exported files separately to check resources instead of treating a completion message as acceptance.
More about this skill
OpenDesign is a design application organized around project files. Its desktop workspace brings conversation, files and previews together, while a connected coding agent or model produces the content. A local agent with file access writes into the project and the preview follows those files; a plain API path receives a complete artifact response. The file-producing tasks below use the former path.
The workspace contains distinct resources. Skills describe methods, design templates supply layouts and starter files, design systems provide visual rules and may include tokens and components, and plugins package workflows or assets. They can work together, but importing a SKILL.md does not also install the desktop app, a model or its services.
References are most useful when they lead to explicit design decisions. The reference-design-contract skill separates qualities to preserve, content to change and elements to avoid copying, then writes DESIGN.md, an evidence record and a handoff. A complete selectable design-system package needs additional manifest and token files.
Prototypes and decks can remain HTML and asset files that you continue editing. Studio provides a preview and feedback surface; the layout is implemented in the files. Export options depend on the file type: HTML has PDF, image, ZIP and standalone HTML options, with PPTX available for detected decks. Check each format for its intended use, especially when a PPTX consists of slide images.
External coding agents can read current OpenDesign source files through MCP, reducing repeated exports and uploads. Confirm the project and file scope after connecting. Access to the design is the start of implementation: component structure, backend data, complete states, testing and release still need engineering work.
Sources and verification
Sources checked
We read the author documentation, task instructions and relevant implementation, and compared the three task bundles and export-format code with release 0.26.1. We did not install the app, call a model or export files; rendering and output still need acceptance checks in the actual environment.