floatboat
Open navigation menu

OpenDesign

OpenDesign is an open-source workspace for turning a design brief into interactive prototypes, presentation decks and motion graphics with an AI agent.

Write a design-system brief for an interactive prototype

Bring one user flow and the visual rules it should follow. Use OpenDesign’s project workflow to separate reusable brand rules from screen behavior and prepare files a reviewer can inspect.

List the screens, failure states, accessibility needs, and the approved design rules.

Copy the request into a new Floatboat conversation and provide the required material.

Download Floatboat

Your request for Floatboat

Preview and copy the request. It is not sent automatically from this page.

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

Read the original documentation and check the current environment and dependencies. Propose any new installation or tool connection before proceeding.

My task:
Review how OpenDesign combines DESIGN.md and prototype templates. Plan a three-screen onboarding prototype with a failed verification state. Separate reusable visual rules from per-screen behavior, identify assets I need to supply, and list what engineering must verify before implementation.

Expected deliverable:
A DESIGN.md outline, screen checklist, and an editable-artifact handoff plan.

From a design brief to an editable artifact

OpenDesign combines a design brief with an output template and an active design system. The design system centers on DESIGN.md, a portable description of visual rules, and can also include tokens, components and assets. In the prototype workflow, a coding agent applies those rules to produce HTML you can preview and refine.

With a filesystem-backed coding agent, the agent writes directly to the project files. A plain API run without file tools returns a complete artifact block instead. OpenDesign also provides an MCP server through which a configured external client can read files such as CSS tokens, JSX components and entry HTML from local projects.

The desktop app and self-hosted option let you work with local project files. Requests that use a cloud model or OpenDesign Cloud go to the corresponding service. Choose the execution path before you add a confidential design brief, source code or licensed assets.

What OpenDesign gives a design team

The workspace separates brand rules, output templates and agent behavior. You can change the format of a deliverable while keeping the design system available for the next iteration.

  • Reusable design systems

    Record color, typography, layout and component rules in DESIGN.md. Project packages can also carry tokens and component examples.

  • Multiple design surfaces

    Start from a template for an interactive prototype, a deck or a motion project. Export options vary by the artifact, such as PPTX for decks and MP4 for HyperFrames motion.

  • Editable handoff

    Use local project files as the handoff for engineering. The upstream MCP server can expose named files to a configured client when the workflow crosses repository boundaries.

OpenDesign use cases

Choose the format the reviewer can assess. A product flow may need a clickable prototype, while a launch deck needs a clear sequence and a motion concept needs timing you can inspect.

Prototype onboarding before assigning implementation

Supply the supported paths, error states and sample copy for a three-screen flow. Preview the HTML artifact with product and engineering, agree on the missing states, and pass the files plus acceptance criteria to the implementation owner.

Apply a shared visual system to campaign drafts

Put type scale, spacing and approved colors in DESIGN.md, then use those rules across a landing-page concept and a presentation. Compare how the hierarchy works in each format and retain the confirmed design system for the next brief.

Review a deck as a story and as a file

Use the deck workflow to structure a pitch around one decision and the evidence behind it. Review slide order and notes in the workspace, then open the exported file in the target presentation app to check type and layout.

Hand off a short motion study

Make a small HyperFrames motion draft for a feature reveal. Inspect the opening, transition and final frame, then share the timing decisions alongside the MP4 so the next revision can change one beat without rebuilding the concept.

Choose how to run OpenDesign

The desktop and source routes have different requirements. Confirm your platform and model access first, then choose a small artifact to check the complete handoff.

  • Desktop builds

    Upstream lists installers for macOS and Windows x64. It currently directs Linux users to run from source.

  • Source setup

    Follow the upstream quickstart for Node and pnpm versions and its development launcher.

  • Agent and data access

    Choose a supported installed coding agent or configure a model endpoint and credentials. Check provider handling of prompts and files before adding sensitive material.

Related Software Projects

Compare the workflows, operating requirements, and source licenses of these projects.

OpenDesign FAQ

What is DESIGN.md in OpenDesign?
It records visual rules for the active design system. Packages can also include design tokens, components, assets and source information.
Can I start from an existing design system?
Yes. A project can use a design-system package, including one centered on your own DESIGN.md. Check the license and provenance of any borrowed assets.
Does local-first mean no requests leave my device?
No. Cloud models and OpenDesign Cloud receive their respective requests. Confirm which runtime and service the project uses before sharing sensitive inputs.
How do I hand off a prototype to a developer?
Review the interactive result, then pass the HTML and relevant project files with behavior and accessibility requirements. Confirm which pieces need production implementation.
Can another agent read my OpenDesign files?
The upstream stdio MCP server can expose selected local project files to a configured MCP client. Review the client and the project material you plan to expose.
Is a Linux installer available?
The upstream quickstart currently directs Linux users to run from source. Check the releases page for changes before planning a rollout.