Remake MenuGen: the original idea is from Andrej Karpathy's 25 April 2025 blog post: https://karpathy.bearblog.dev/vibe-coding-menugen/

remake-menugen-write-up.md

Goal

Remake MenuGen (try app)

• Creates a graphical restaurant menu from text or image of an existing menu

The original idea is from Andrej Karpathy's 25th April 2025 blog post: https://karpathy.bearblog.dev/vibe-coding-menugen/

"You can type up a menu or upload an image of an existing menu to Nano Banana directly"

Why

I wanted to experiment with the following tools and processes

• Claude Design for design and prototyping: https://claude.design/
• Allium for technical specifications: https://github.com/juxt/allium
• Claude Code for task management and tracking on GitHub Project board: https://github.com/users/dloopensource/projects/2/views/1
• Nano Banna (gemini-2.5-flash-image) for (text to image, image to image) image generation https://ai.google.dev/gemini-api/docs/models/gemini-2.5-flash-image

Try it out

1. Create an Gemini API Key with a PAID account at https://aistudio.google.com/
2. Go to MenuGen at https://dloopensource.github.io/menu-generator.github.io/
3. Copy and paste Gemini API Key into text box and Click "Save and continue" button. You may need to Click "Change API key" anchor
4. Enter menu text or upload an image of an existing menu and click "Generate menu" button

Project Links

• Code: https://github.com/dloopensource/menu-generator.github.io
• Github Project: https://github.com/users/dloopensource/projects/2/views/1

Findings / Learnings

1. Claude Design is a powerful tool for quickly creating high-fidelity designs and prototypes, and it allows for easy iteration and collaboration with other team members.

   • Did not use the "hand off" to claude code feature
   • Design made by Claude Design: https://claude.ai/design/p/019e0dba-a2d8-7567-a896-5fe9670536e3

2. @superpowers wrote markdown specifications e.g docs/superpowers/specs/2026-05-09-menu-generator-design.md with TypeScript and CSS in them before Allium specifications. Which on reflection:

   • Claude Optus 4.7 AI already wrote the implementation "too early"

3. Not every task can be completed by Agents Parallel. PRO: Good for reviewing before things are implemented and potentially wasting time and money.

   • Branch state got mangled by the worktree juggling. Cleaning up
   • Alot of time was spent pressing "yes" proceed with git commands that Agents wanted to run e.g.

     - cd /menu-generator.github.io/.worktrees/menu-generator-impl-b && git fetch origin
        This command changes directory before running git, which can execute untrusted hooks from the target directory. Approve only if you trust it.
     

4. Nano Banna image generation is not FREE

How

Used Claude Code: AI agents for parallel spec + test driven development and task management

Started with an brand new scaffolded Vite React TypeScript web app.

Step 1: Design and prototyping

1. Used Claude Design to create the design and prototype: in designs/photo-realistic-menu-generator.png and designs/photo-realistic-menu-generatorstandalone.html

Step 2: Planning and specification

Claude Opus 4.7 (Released April 2026) on high effort

1. Wrote the initial prompt to create a @superpowers plan for implementing the web app in prompts/initial-prompt.md

Step 3: Implementation

Claude Sonnet 4.6 (Released Feb 2026) + Claude Haiku 4.5 (Released Oct 2025) on high effort and eventually medium effort

1. Used Allium to write the technical specifications for each feature in specs/ directory
2. Used CLAUDE code to break down the implementation into smaller tasks and assign them to different Agents for parallel development, and to track the progress of each task on the GitHub Project board.
3. Agents review and merge PRs

Agents

• allium:tend — authors and maintains Allium specs in specs/. Runs allium check and allium analyse. Emits failing test skeletons via allium:propagate.
• test-engineer — completes the propagated test skeletons; writes RTL and user-event interactions; owns all *.test.ts(x) files. Does not write production code.
• frontend-engineer — writes all production code (components, hooks, reducers, services, styles) until failing tests pass. Does not author tests.
• code-health - review agent; checks PR and ensuring that the code is clean, well-structured, and follows best practices for maintainability and readability
• allium:weed — review agent; verifies spec-to-code alignment for any PR touching specs/*.allium or code that maps to a spec. Reports drift and blocks merge until resolved.

Next features for the future

• Export and share
• Support non English
• Select different AI image generator models
• Backend to store API keys
• Login with single sign on
• Observability for analytics for tracking

Agent hooks

• Before starting a coding task. Ensure a GitHub Project task is created linking to an Allium Spec, assigned to an Agent, and moving across the tasks through the columns. Defined Done: A PR is raised, reviewed, and merged to integration or develop branch.