A structured design produces a better app than a prompt or a pile of notes. That's the whole premise. When the screens, data models, routes, and roles are pinned down before any code exists, three things happen:
- The agent, or the developer, already knows what to implement. There's no guessing at what a page needs or what shape the store should have.
- The client sees what's in the product before it's built. A design they can walk through is a better review surface than a repo.
- The generated code inherits the structure. Guards resolve against the role matrix, data models feed the codegen directly, and the whole thing comes out in dependency order.
I wanted a tool where the design is the artifact, and the code is derived from it rather than the other way round. That became Nodlume.
What it is
Nodlume is a visual workspace for system design of a React app. You lay out screens, data models, API routes, roles, and theme as connected nodes across a few tabs. The workspace keeps them consistent with each other:
- A page marked as needing auth resolves against the RBAC matrix, so the generated guard already knows which roles may enter.
- A data model is defined once. The codegen reads it, and nothing else holds a copy.
- The structure board knows which target you're building for and offers the right component catalogue.
One design, five targets
The same design emits:
- A Next.js App Router tree for web
- A Tauri shell around that tree for desktop
- An Expo Router app for mobile
- An Ink CLI for terminal
- A Manifest V3 extension for browser extensions
The design itself doesn't change between targets. The routes, guards, and data are the same; only the files that come out differ. Web and extension use shadcn components, terminal uses Ink's, and mobile uses React Native's.
What you walk away with
Three deliverables:
- A project report. Roles, features, traceability, and the RBAC matrix, in a form a client or teammate can review without opening a code editor.
-
An implementation plan. The generated modules in dependency order, stores first and pages last, so a developer or a coding agent can build without guessing what comes next. It ships in the generated
AGENTS.md. - Scaffolded code. The project files as a zip or a push to a GitHub repo, with an optional AI pass that implements each file in that order.
Collaboration
Projects can be shared with editors and viewers, with live cursors and presence when more than one person is in the workspace. Share links can be passcode-protected and set to expire, and a shared link can render the project report instead of the workspace.
Where it stands
The free tier is enough to design a full project and export the skeleton. AI generation is credit-metered, and paid plans mostly buy more of that.
What I'd like to know is where the design model breaks for your apps. Nodlume assumes a page/data/route/role shape, and I'm sure there are apps that don't fit it. I'd also like to hear which target you'd actually use, since the non-web ones were built on my own guesses about demand.
Try it at nodlume.dev.
Top comments (0)