What this prompt does
This prompt directs Claude or ChatGPT to design a browser-based, Figma or Canva-style canvas tool. You set [tool_name] and [tool_purpose], then describe the [primary_use_case], the [target_users], the [canvas_type], and the [framework]. The model designs the top toolbar, the left tools-and-layers panel, the center canvas, the right properties inspector, plus the collaboration and export behaviors and the framework implementation.
It works because a design tool is a dense, stateful editor where toolbar, layers, canvas, and inspector must stay in sync. By naming [canvas_type] (for example HTML5 Canvas with an SVG overlay) and [framework], the model grounds the rendering and state decisions in a concrete stack. The [target_users] and [primary_use_case] variables shape which tools and properties get prominence — a wireframing tool emphasizes different inspector fields than a freeform illustration tool.
When to use it
- You're building a canvas-based editor and need the four interface regions designed coherently.
- You want a tools palette with keyboard shortcuts and context-sensitive option bars laid out.
- You need a layers panel with tree view, drag reorder, visibility, lock, and grouping.
- You're designing a properties inspector for position, size, fill, stroke, shadow, and text.
- You want infinite canvas behavior — zoom, pan, smart guides, marquee, transform handles — specified.
- You need multi-user collaboration cursors and export options designed.
Example output
The model returns a region-by-region design document. The top toolbar covers file and edit menus, zoom controls, sharing, and presence indicators. The left panel details the tools palette with shortcut badges, the layers tree, and an assets panel. The canvas section specifies infinite zoom and pan, smart guides, selection, and transform handles. The right inspector covers design and text properties plus a prototype tab. The closing [framework] section grounds it in your canvas library, state management, and rendering approach. Expect a detailed editor spec, not finished code.
Pro tips
- Set
[canvas_type]precisely; HTML5 Canvas versus SVG versus a hybrid changes how the model designs rendering and the chrome overlay. - Pin
[framework]to a real canvas library (Konva.js, Fabric.js, or PixiJS) so performance notes apply. - Use
[primary_use_case]to bias which tools and inspector fields get emphasis — wireframes versus polished prototypes differ. - Keep the keyboard-shortcut badges in scope; a design tool lives or dies by its shortcuts.
- Multi-select transform and smart guides are the hardest parts — keep them explicit so the model details the interactions.
- Ask the model to expand the layers panel or inspector separately if you want component-level state detail.
