Idea to roadmap
From an idea to a roadmap.
Two tutorials, idea to shipped app. This first one takes you from a rough idea to a planned project on disk: discuss it with Claude, design it with Claude Design, then let /story map the rest. Running example we'll carry through: a story generator for kids.
Written guide available · Video coming soon
Follow along
- 1.
Discuss your idea with Claude
Not Claude Code yet. Open claude.ai or the Claude app and start a fresh chat. Describe the 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." Chat is the right tool for fuzzy ideas.
- 2.
Push the conversation until you like the shape
Ask what could go wrong, what's the smallest shippable version, what's out of scope for v1. Claude can also mock up a working web demo right in the chat, and seeing one often stretches the scope in a useful way. Seeing ours made us want a native iPad companion too, so we folded that in.
- 3.
Ask Claude Code to write idea.md
Create an empty project folder (we called ours storybook). Open Claude Code inside it. Paste the chat or summarize the key points, then ask Claude Code to synthesize it as idea.md: what it is, who it's for, the core features, what's deliberately out of scope for v1.
- 4.
Design it with Claude Design
Head to claude.ai/design, feed it idea.md, and let Claude design the app for you. Iterate on screens until you like them, then export the design files into your project folder next to idea.md.
- 5.
Carry a prototype into a project
If you start with an app builder, bring the exported code into a repository. Use Storybloq to record the next stories, planning decisions, review findings, and handovers as you develop the prototype.
- 6.
Open Claude Code and run /story
With idea.md and the designs sitting in the folder, type /story. Claude Code notices there's no .story/ yet, reads your artifacts, and switches into setup mode. It asks a few quick questions (language, framework, design system) and proposes a full roadmap.
$/story - 7.
Refine the proposal
This is where your judgment counts 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 Claude wanted to fold bugs and tech debt into the roadmap; those belong in issues, not phase plans. One correction and we moved on.
- 8.
Get Codex's second opinion
Claude gives you three options: approve, refine yourself, or refine with a second opinion. The third is the recommended path. Codex flags gaps and risky assumptions, Claude folds the fixes in, and shows you a refined version. When it looks right, approve.
- 9.
Approve and watch the dashboard fill up
Point the Storybloq Mac app at the project folder. As Claude Code writes each file (config, roadmap, CLAUDE.md, stories) the dashboard updates live. Phases appear. Story cards stack up. In minutes you have a planned project on disk.
- 10.
Commit everything to git
git init, git add, git commit. The .story/ directory lives in your repo, tracked by git. That gives future sessions a recorded starting point, which is where the next tutorial starts.