noemica-io

noemica-io / design-graph

Public

AI design tools give you pages. Design Graph gives you flows. A canvas where each node is an AI-generated screen and each edge is a user action — so you see the whole product experience, not just variants. Files on disk, any coding agent, MIT.

noemica.io ai canvas claude claude-code design-system
16
3
100% credibility
Found Apr 22, 2026 at 16 stars -- GitGems finds repos before they trend. Get early access to the next one.
Sign Up Free
AI Analysis
HTML
AI Summary

Design Graph is a browser-based canvas that visualizes AI-generated HTML design screens as an interactive graph of connected user flows and variants.

How It Works

1
🔍 Discover Design Graph

You hear about a fun tool that turns AI-made screens into connected maps of user journeys, perfect for exploring product ideas.

2
📥 Get it ready

Download the files to your computer and start the viewer by opening the main page in your web browser.

3
🖼️ See the magic canvas

A beautiful map pops up showing example screens linked by user actions, like branches in a story, and you can pan, zoom, and click around easily.

4
Choose your path
🔄
Explore examples

Dive into the sample flows, click nodes to see full screens, and get inspired by the branching paths.

➕
Start fresh project

Make a new space for your ideas by naming it and letting it appear in your list.

5
🤖 Add fresh ideas

Ask an AI helper to create new screen variations that fit right into your map, watching them appear live as you go.

6
🔗 Connect and arrange

Drag screens into place, link them with actions like 'tap button' or 'swipe down', and watch your product flow take shape.

🎉 Your flow comes alive

Zoom out to admire the full map of your product's user experience, with endless variants at every turn, ready to share or refine.

Sign up to see the full architecture

5 more

Sign Up Free

Star Growth

See how this repo grew from 16 to 16 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 design-graph?

Design Graph turns AI-generated screens into interactive flows on a zoomable canvas, where nodes represent HTML pages and edges show user actions like clicks or scrolls. Unlike typical design tools ai that spit out isolated pages, it maps entire product journeys, letting you cluster variants and explore branches spatially. Serve it via any static HTTP server like Python's http.server on port 3333 for instant live reloads as new pages drop in.

Why is it gaining traction?

It stands out by keeping everything as files on disk—MIT licensed, no accounts or APIs—while integrating with any coding agent for parallel variant generation. Users get real-time canvas updates in seconds, full-screen previews, filters for upstream/downstream flows, and URL-sharing for exact views, making design graphic ai workflows feel alive without SaaS lock-in. The hook: branch promising ideas while dead ends stay visible for context.

Who should use this?

Solo founders prototyping design github repo flows before coding, UI designers using design tools app for divergent explorations beyond Figma exports, or frontend teams generating design graphic portfolio variants with Claude or GPT. Ideal for design github actions system design sessions where you need quick, comparable screens in a navigable graph.

Verdict

Try it for early-stage design graph experiments—solid docs and zero-setup make the 16 stars and 1.0% credibility score forgivable for such a fresh HTML tool. Still maturing with low adoption, so pair it with proven AI agents rather than betting the farm.

Sign up to read the full AI review Sign Up Free

Similar repos coming soon.