Idea to roadmap
From an idea to a roadmap.
The hard part isn't writing code. It's knowing what to build, in what order, and what to leave out. This tutorial walks you from a rough idea to a planned project on disk, using a real example we'll keep building across the tutorials: a story generator app for kids.
Follow along
- 1.
Open a chat with Claude
Not Claude Code yet. The regular Claude app (or claude.ai in a browser) is better for exploring a fuzzy idea. Start a new conversation and describe your idea in your own words. Ours: "a story generator for kids aged 5 to 9 that picks a character, a setting, and a theme, then writes a short illustrated story."
- 2.
Push back on your own idea
This is the step most people skip. Don't accept Claude's first response. Ask: what could go wrong? What's the simplest version we could ship? What's out of scope for v1? What are we pretending isn't a problem? A good conversation here saves days of wrong work later.
- 3.
Let Claude show you a demo, then stretch the scope
On our run, Claude built a working web mockup right there in the chat. Seeing it made us realise we wanted more: a native iOS app too, so a kid can use it on an iPad. So we kept chatting and asked Claude to expand the scope to one shared story engine with two front ends, web and iOS. Let the conversation surprise you before you lock anything in.
- 4.
Ask Claude to synthesize the idea
When the idea feels solid, ask Claude to synthesize the conversation. Something like: "Can you synthesize this? What we're building, who it's for, the core features, and what we're deliberately not building yet." Claude gives you a clean markdown summary. Copy it out or save it as a file. We saved ours as IDEA.md.
- 5.
Drop IDEA.md into a new project folder
Create an empty folder for the project (we called ours storybook). Put IDEA.md inside. No other files yet. No git init needed yet. Just the folder and the spec.
- 6.
Open Claude Code and run /story
Open Claude Code in that folder, type /story, and press Return. Claude Code notices there's no .story/ yet, spots your IDEA.md, and switches into setup mode. It'll ask a few quick questions (language, framework, design system preferences) and then propose a full roadmap.
$/story - 7.
This is where you come in
The plan is where your judgment matters most, not later while reviewing finished code. Read the proposal carefully. Catch the one or two things that feel off, leave the rest. On our run I only had one correction: Claude wanted to pile issues into the roadmap. Issues are bugs and technical debt, they don't belong in a phase plan. I pointed that out, Claude fixed it. The architecture (a shared story engine with a web client and an iOS client) looked right, so I left it alone.
- 8.
Hand it to Codex for a second opinion
Claude Code gives you three options: approve as-is, refine it yourself, or refine with a second opinion. We picked the third - the recommended path. Claude hands the plan to Codex, Codex flags gaps and risky assumptions, Claude folds the fixes in, and shows you the refined version. When it looks right, say approve.
- 9.
Approve and watch the dashboard fill up
When it looks right, say approve. Open the Storybloq Mac app and point it at the project folder. As Claude Code writes each file (config, roadmap, CLAUDE.md, tickets) the dashboard updates live. Roadmap phases appear. Ticket cards stack up. In minutes you have a planned project on disk, ready to build.
- 10.
Commit everything to git
git init, git add, git commit. The .story/ directory lives in your repo, tracked by git, readable by any AI or human who opens it later. This is the artifact that makes every future session pick up exactly where you left off.