OpenDesign Tutorial: Create Web Pages, Prototypes & Slides with Less AI Fluff

What OpenDesign Can Do

OpenDesign ( nexu-io/open-design, Apache-2.0) is an open-source design tool that connects coding assistants like Claude Code, Codex, Cursor, and OpenCode. It places chat, generated files, and live previews in a single workspace. You describe requirements, pick a design style, let the assistant generate, then iterate while watching the preview. Besides ad-hoc prompts, you can reuse saved design specifications.

Prototyping: Official support for HTML interactive prototypes with page navigation, tab switching, and modals. For a booking tool you can produce the time-selection, data-entry, and confirmation pages to validate flow. Real booking collection and reminders still need backend APIs.

Presentations: Generates HTML slides runnable in the browser, with export to PDF and PPTX. The PPTX output keeps text and shapes editable. If you already have project background, screenshots, and conclusions, you can ask OpenDesign to lay them out. Always review the exported file for font substitution, chart clarity, and line-wrapping issues.

Getting Started with a Page

Desktop installers exist for macOS Apple Silicon, macOS Intel, and Windows x64. As of 5 September 2026 the listed version is v0.21.1 (released 31 August). This version allows skipping OpenDesign Cloud login: you can pick a local command-line assistant or use BYOK (bring your own API key). If you already use a supported coding assistant, keep using it. In the Studio you see chat, files, and preview together.

Prepare real product material: a description, actual screenshots, a concrete feature list, and any existing brand guidelines. The article gives a prompt template for a booking-tool homepage:

Create a homepage for a booking tool aimed at independent consultants. After reading, visitors should know how to create a booking page and how clients pick a time. Product intro and screenshots are attached. First propose two page structures explaining content layout; do not generate full pages yet. Use existing brand colors, prioritize mobile reading. Mark missing features/data as "to be added"; do not invent testimonials or partner logos.

First decide content order: where the "Create booking page" entry sits, which feature deserves expansion, where screenshots clarify most. After structure is set, generate. If the primary button lacks prominence, adjust its position and surrounding copy before tweaking fonts, spacing, or colors. Keep each iteration focused so versions stay comparable.

Once the homepage works, extend to the client-facing time-picker, info form, and confirmation pages. Have someone unfamiliar with the design walk the flow; where they stall or misunderstand is more actionable than "doesn't feel premium enough."

Reducing "AI Taste" by Starting from Concrete Content

"AI taste" here means vague copy, filler sections, and uniform layouts for different content types. Example: "empower efficient collaboration" tells nothing; "clients get auto-confirmation and a pre-meeting reminder" does. Fake testimonials are worse than leaving the section out.

Layout from content: Steps suit sequential display; plan comparisons suit side-by-side cards; product details may need a large screenshot. They don't all belong in same-sized cards. Rounded corners, gradients, and shadows are fine but don't create distinction by themselves. If three hero buttons compete, instruct:

Top-screen three buttons too prominent; keep only "Create booking page" as primary. Turn the flow into continuous steps, enlarge product screenshot. Leave approved copy untouched.

When giving reference images, specify what you like: heading-to-body size ratio, screenshot area share, overall content density — not just "match this style." These feedback habits transfer to other generative tools.

Saving Decided Styles for Reuse

OpenDesign stores design rules in DESIGN.md. Built-in design packs also include tokens.css (style values) and manifest.json (pack metadata); the legacy DESIGN.md format remains supported. Selecting a pack feeds its rules to the assistant. For the booking tool you might write:

Light background, blue for primary buttons and selected states. Product screenshots keep original aspect ratio. Slides reuse the site's typeface and accent color.

If a project already has a design system, migrate that instead of maintaining two sources. Later outputs can be checked against these rules; point out exact deviations rather than restarting from "make it cleaner."

Costs, Privacy, and Video Export Reality Check

Open-source does not mean free model calls. Pricing page lists Free, Plus, Pro, Max tiers: Free supports local assistants and BYOK; paid tiers include recurring hosted-model quotas. BYOK consumes the connected provider's quota, not OpenDesign's. Video generation uses HyperFrames to render HTML/CSS animations to MP4, but the pricing page marks hosted video generation as "coming soon" — don't assume a subscription unlocks all video features today.

Local software may still send requests to the cloud. Privacy policy: local BYOK requests go straight to your configured model provider; OpenDesign Cloud routes through their hosted service. Verify which path your data takes before feeding proprietary material.

During a trial, time how long a page takes from start to discussable version, plus iteration and export time. Fast first draft but long rework may not be a net win. Finish one complete booking page first; that single exercise reveals whether the tool fits your workflow before committing to a full site or deck.

Product details verified against official sources as of 5 September 2026. Booking-page example and two diagrams illustrate method; no hands-on client testing performed, so actual output quality is not guaranteed.

Reference Links

Website: https://open-design.ai/zh/ Download: https://open-design.ai/zh/download/ Repository:

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