basta

basta / OpenDesign

Public

A Figma-like canvas for HTML, driven by AI coding agents

14
0
100% credibility
Found Apr 27, 2026 at 14 stars -- GitGems finds repos before they trend. Get early access to the next one.
Sign Up Free
AI Analysis
TypeScript
AI Summary

OpenDesign is an open-source local design tool that stores editable web screens as plain HTML files with a live draggable canvas and two-way sync to your text editor or AI agents.

How It Works

1
🚀 Discover OpenDesign

You hear about this free local design tool that lets AI helpers create real web screens as simple files.

2
💻 Start the app

Download it to your computer and launch with a simple command to see the welcoming project screen.

3
📁 Make a new project

Pick a name for your design project and instantly get a blank canvas ready for screens.

4
🎨 Build your first screen

Tell your AI buddy what screen you want—like a login page—and watch it appear as a live, draggable preview.

5
🖱️ Arrange and play

Drag screens around the canvas, resize them, and see smart lines help them snap perfectly into place.

6
✏️ Tune the look

Open the side panel to tweak colors, fonts, and sizes right there, with changes updating everywhere instantly.

✅ Designs saved forever

Your beautiful screens live as everyday web files you can edit anytime, share, or turn into a real app.

Sign up to see the full architecture

5 more

Sign Up Free

Star Growth

See how this repo grew from 14 to 14 stars Sign Up Free
Repurpose This Repo

Repurpose is a Pro feature

Generate ready-to-use prompts for X threads, LinkedIn posts, blog posts, YouTube scripts, and more -- with full repo context baked in.

Unlock Repurpose
AI-Generated Review

What is OpenDesign?

OpenDesign is a Figma-like canvas React app in TypeScript that lets you drag, resize, and arrange self-contained HTML frames on an infinite canvas, with live two-way sync to your filesystem. AI coding agents drive it via slash commands like /frame or /frontend-design, generating frames from prompts while pulling design tokens from DESIGN.md files. It solves cloud-locked design tools by storing everything as plain, git-diffable HTML and Markdown—no proprietary formats, runs locally with Vite.

Why is it gaining traction?

Unlike Figma-like editors on GitHub or closed tools like Claude Design, OpenDesign outputs shippable HTML via agents, with a tokens panel for instant CSS var previews and one-click AI suggestions. The HTTP API and SSE events make it agent-native, letting you /port existing apps or generate alternatives without plugins. Devs dig the filesystem-first approach: edit in VS Code, see changes on canvas in 100ms.

Who should use this?

Frontend devs prototyping UIs with Claude Code, opencode, or Gemini CLI agents, especially those porting codebases or iterating designs via /alternatives. Solo makers building agent-driven apps who want a local Figma-like canvas over cloud SaaS. Avoid if you need team collab or vector exports.

Verdict

Promising open design AI experiment (14 stars, 1.0% credibility) with strong docs, full server tests, and MIT license—try it if agents are your workflow, but expect rough edges in a pre-1.0 tool. Pair with your fav IDE for quick wins.

(198 words)

Sign up to read the full AI review Sign Up Free

Similar repos coming soon.