Draw My UI

Draw My UI is a generate concepts tool. Draw My UI lets you sketch interface layouts on a tldraw canvas, then uses your own OpenAI, Anthropic, or Google API key to generate functional UI code from the selected shapes.

Draw My UI is a web app built on tldraw that turns rough hand-drawn interface sketches into functional code. The premise is simple: you sketch boxes, labels, and layout on an infinite canvas, select the shapes you want, and click Make Real. The tool then sends the sketch and a system prompt to a large language model, which generates a working UI. This makes it a practical bridge between low-fidelity wireframing and a first code draft, especially for designers and developers who think visually and want to skip the repetitive setup of HTML and CSS. The tool is aimed at product designers, front-end developers, and founders who prototype quickly. It is not a full design suite or a production code generator; it is a fast way to explore layout ideas in code. Because it relies on external model providers, you need to bring your own API key for OpenAI, Anthropic, or Google. In Settings you paste the key for each provider you plan to use, pick a model from the available list, and optionally adjust the system prompt. From there, draw a screen, select the shapes that represent the UI, and click Make Real. The output appears as a rendered interface, which you can use as a starting point for further development. In practice, Draw My UI sits between whiteboard tools and code editors. It is more direct than exporting a design to a handoff tool, and more forgiving than writing markup from scratch. The workflow encourages iteration: sketch, generate, refine the sketch, regenerate. It works best for standard interface patterns such as forms, dashboards, and landing page sections, where the model can infer structure from simple shapes. For complex interactions or pixel-perfect designs, it is a starting point rather than a final solution. Compared with AI design tools that generate polished visuals, Draw My UI focuses on turning intent into code with minimal ceremony. It does not replace a design system or a developer, but it removes friction from the first step of building an interface.