From f06c5c75377bed4cb71c6c26e516314859723975 Mon Sep 17 00:00:00 2001 From: Jeff Emmett Date: Sun, 14 Dec 2025 13:32:20 -0500 Subject: [PATCH] Create task task-050 --- ...eature-(Wireframe-to-Working-Prototype).md | 52 +++++++++++++++++++ 1 file changed, 52 insertions(+) create mode 100644 backlog/tasks/task-050 - Implement-Make-Real-Feature-(Wireframe-to-Working-Prototype).md diff --git a/backlog/tasks/task-050 - Implement-Make-Real-Feature-(Wireframe-to-Working-Prototype).md b/backlog/tasks/task-050 - Implement-Make-Real-Feature-(Wireframe-to-Working-Prototype).md new file mode 100644 index 0000000..f64c530 --- /dev/null +++ b/backlog/tasks/task-050 - Implement-Make-Real-Feature-(Wireframe-to-Working-Prototype).md @@ -0,0 +1,52 @@ +--- +id: task-050 +title: Implement Make-Real Feature (Wireframe to Working Prototype) +status: To Do +assignee: [] +created_date: '2025-12-14 18:32' +labels: + - feature + - ai + - canvas +dependencies: [] +priority: medium +--- + +## Description + + +Implement the full make-real workflow that converts wireframe sketches/designs on the canvas into working HTML/CSS/JS prototypes using AI. + +## Current State +The backend infrastructure is ~60% complete: +- ✅ `makeRealSettings` atom in `src/lib/settings.tsx` with provider/model/API key configs +- ✅ System prompt in `src/prompt.ts` for wireframe-to-prototype conversion +- ✅ LLM backend in `src/utils/llmUtils.ts` with OpenAI, Anthropic, Ollama, RunPod support +- ✅ Settings migration in `src/routes/Board.tsx` loading `makereal_settings_2` +- ✅ "Make Real" placeholder in AI_TOOLS dropdown + +## Missing Components +1. **Selection-to-image capture** - Export selected shapes as base64 PNG +2. **`makeReal()` action function** - Orchestrate the capture → AI → render pipeline +3. **ResponseShape/PreviewShape** - Custom tldraw shape to render generated HTML in iframe +4. **UI trigger** - Button/keyboard shortcut to invoke make-real on selection +5. **Iteration support** - Allow annotations on generated output for refinement + +## Reference Implementation +- tldraw make-real demo: https://github.com/tldraw/make-real +- Key files to reference: `makeReal.ts`, `ResponseShape.tsx`, `getSelectionAsImageDataUrl.ts` + +## Old Branch +`remotes/origin/make-real-integration` exists but is very outdated with errors - needs complete rewrite rather than merge. + + +## Acceptance Criteria + +- [ ] #1 User can select shapes on canvas and trigger make-real action +- [ ] #2 Selection is captured as image and sent to configured AI provider +- [ ] #3 AI generates HTML/CSS/JS prototype based on wireframe and system prompt +- [ ] #4 Generated prototype renders in interactive iframe on canvas (ResponseShape) +- [ ] #5 User can annotate/modify and re-run make-real for iterations +- [ ] #6 Settings modal allows configuring provider/model/API keys +- [ ] #7 Works with Ollama (free), OpenAI, and Anthropic backends +