Prompt:

---

A00 Publishable Prompt

---

I want you to recreate RealDraw Pro as a browser-based application using exactly three files: one HTML file, one CSS file, and one JavaScript file.

The goal is to build an entire RealDraw-style drawing suite, not just a simple canvas demo. Based on the researched feature set, this should aim to capture the spirit of RealDraw Pro: vector drawing, bitmap-style rendering, editable objects, layers, fills, gradients, transparency, shadows, bevels, lighting, textures, natural-media effects, object transforms, non-destructive effects, and export-oriented workflows.

I understand that this is difficult to implement fully. That is why I want you to approach it responsibly and incrementally.

Start small. First ask yourself what the first useful feature should be. For example, maybe the first feature is a canvas, a drawing surface, or a basic application window. Then reason about what is needed to make that feature work well.

For each feature, ask strong engineering questions before moving forward. For example:

Will this satisfy the user request?

Will this move the project closer to RealDraw-style feature parity?

Will this create a good user experience?

Will this be performant?

Will this be resilient?

Will this be maintainable?

Will this work in a browser with only HTML, CSS, and JavaScript?

Will this integrate cleanly with the features already built?

Will this support future features such as layers, effects, tools, and export?

Am I done, or is there another essential feature missing?

Continue this process through multiple phases. After each phase, ask what three or four features should be added next. Use a bottom-up approach where the application grows from a simple canvas into a more complete drawing suite.

Think through the software architecture carefully before producing the final result. Consider the document model, rendering system, tools, selection behavior, object manipulation, layer handling, undo and redo, effects, performance, and user interface.

The final output should be the complete implementation shown directly as three files:

index.html

styles.css

app.js

Do not provide a vague outline. Do not stop at a prototype if more can reasonably be implemented. Build as much of the drawing suite as possible within these constraints.

The trick here is to be responsible for the software you build and for the quality of the work you do. Keep questioning the design. Keep asking what is missing. Keep improving the implementation until the result is as close as possible to a usable RealDraw-style browser application.

Do you definitely know how to ask good questions while building this?