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.
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.
A note on Claude Build
Anthropic is also launching Claude Build, their one-shot app builder in the spirit of Lovable. It's great for prototypes: paste a prompt, get a running app. Storybloq is for the engineered version of that app: real git history, tickets, planning, independent review, handovers across sessions. Use both. Prototype quickly with Build, then ship properly with Storybloq.
- 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, tickets) the dashboard updates live. Phases appear. Ticket 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's the artifact that makes every future session pick up exactly where you left off, which is where the next tutorial starts.