Build from scratch
Starting from an empty canvas? This walks you through building the map by hand, one node at a time, in the order CodeSpring is designed around. Follow the pictures. Every screen is the real interface.
Start with your project
Name your project
Open a new workspace and describe your app in a sentence. This central node is the root of the whole map. It holds your app name, a short description and the GitHub repo your agent builds into.
AI B-roll Maker
https://github.com/VolkisAI/ai-broll-makerConnect your AI agent
Claude Code, Cursor, Codex, Gemini CLI & more
Map your core features
Fill the Core Features folder
Off the project node sits a Core Features folder. It holds one card per main thing your app does. Add a card, name it, and describe it in plain language. Here we add a Dashboard and a Scanner.
Core Features
Core features and functionality
Dashboard
A single place to see every project, its status and open tasks.
Scanner
Point the camera at a document and pull the key details into the app.
Map the one problem you are solving and cut the rest. Planning by hand costs no tokens, so this is the cheapest and most valuable time you will spend.
Look at one feature card
Each card is a plain feature card: a name and a description, nothing else. There are no buttons on the card itself. Every action, adding a bridge, notes or a PRD, comes from the right-click menu.
A single place to see every project at a glance, with status and open tasks.
Add a bridge
Right-click to add a bridge
Right-click the feature card to open its menu, then choose Add Bridge. A bridge is where the detail lives, so the card stays clean while notes and specs hang off the bridge.
Add Bridge to Dashboard
Open the bridge menu
The bridge attaches to your feature. Click the plus on it to fan out everything you can add: Notes, Mood Boards, Wireframes, Sub-features and a PRD Bridge.
Describe how it works
Write a note
Add a Notes card and describe how the feature should behave in your own words. This is the detail your agent reads before it writes any code, so the more specific you are, the closer the result.
Notes
Dashboard
A single place to view all projects at a glance. The dashboard is the first screen users land on, so it has to answer one question fast: what should I work on next?
What it shows
- Every project with its status and last activity time
- Quick filters for active, shared, and archived work
- A rollup of open tasks pulled from each project board
Keep the layout calm. One primary action per card, and never more than 3 stats per tile so the screen stays scannable.
Pin a mood board and a wireframe
Want a certain look? Add a Mood Board and pin the colours and references you like. Want a certain layout? Add a Wireframe and sketch where things go. Both give your agent context that words alone would miss.
Design inspiration
Landing page hero
Break it into sub-features
Bigger features hold sub-features, the individual screens inside them. A Sub-features folder works just like Core Features, and each sub-feature card can have its own bridge, notes and PRD.
Sub-features
Child features
Analytics
Users can see the top level analytics, like revenue, cost, CPM and profit for example
Generate the PRD
Turn the feature into a plan
When a feature has enough detail, open its PRD Bridge. It writes a Frontend and a Backend PRD together, so the two sides stay consistent. Need to store data? A Database PRD also spawns small table nodes, so use it only when a feature really needs one.
Generate PRD
Get Started Creating Your PRD
Select the type of Product Requirements Document you'd like to generate
Frontend / UI
Generate requirements for user interface and frontend features
Backend Features
Generate requirements for backend logic and API endpoints
Database Design
Generate requirements for database schema and data models
With your PRDs generated, turn them into a build. See Docs and PRDs to generate one from any feature, Kanban and tasks to break it into steps, and Connect Claude Code to point your agent at the plan. For the whole loop end to end, follow Your first app.