# SketchMason

> SketchMason turns labelled boxes on a canvas into a finished UI design.

SketchMason is an AI design tool that turns a hand-drawn
interface sketch into a finished, consistent UI design. You draw a rough frame
on a canvas, or drop in a photo of one sketched on paper, describe what
belongs in it, and SketchMason generates the screen
against a design system read from your own mood board. A design exports as a
standalone HTML file or as a written brief. The layout comes from the sketch,
not from a prompt.

Official social: https://x.com/usesketchmason, https://x.com/danieldxdere

## Design guides

- [Sketch to Figma: plan your design handoff](https://www.sketchmason.com/sketch-to-figma): Explore a sketch-to-Figma workflow with SketchMason. Resolve your layout on the canvas, export a design brief, and rebuild in Figma.
- [Wireframe to UI: turn layout into interface design](https://www.sketchmason.com/wireframe-to-ui): Go from wireframe to UI with labelled boxes, a mood board and live design generation. Refine the interface and export HTML or a design brief.
- [Hand-drawn wireframe to Figma: a practical handoff guide](https://www.sketchmason.com/hand-drawn-wireframe-to-figma): Plan a hand-drawn wireframe-to-Figma handoff: photograph or redraw the layout in SketchMason, refine the UI, and share a brief for a manual Figma rebuild.
- [Drawing to code: export your UI design as HTML](https://www.sketchmason.com/drawing-to-code): Draw a labelled layout in SketchMason, generate a UI design and export standalone HTML. Learn what the export includes and what still needs engineering.
- [draw-a-ui alternative: compare the drawing workflows](https://www.sketchmason.com/vs/draw-a-ui): Compare SketchMason and draw-a-ui: a hosted canvas for refining UI designs versus an open-source drawing-to-HTML project.
- [Uizard alternative: compare wireframe-to-UI workflows](https://www.sketchmason.com/vs/uizard): Compare SketchMason with Uizard for wireframe-to-UI work. Both start from a photo of a hand-drawn wireframe; they differ in what comes back.
- [Visily alternative: compare UI design and Figma handoff](https://www.sketchmason.com/vs/visily): Compare SketchMason and Visily for UI design. See how a labelled sketch workflow differs from a workflow with a documented Figma transfer plugin.

## Links

- [SketchMason](https://www.sketchmason.com/): what it is and how it works
- [Start free](https://www.sketchmason.com/auth/sign-up): make an account and draw; two generations to begin, no card
- [Sketch to UI](https://www.sketchmason.com/sketch-to-ui): how a labelled sketch becomes a screen
- [Compare](https://www.sketchmason.com/compare): how this differs from Uizard, Stitch and prompt-to-app tools
- [Explore](https://www.sketchmason.com/explore): designs people made with it
- [Blog](https://www.sketchmason.com/blog): notes on how it is built
- [FAQ](https://www.sketchmason.com/faq): common questions
- [About](https://www.sketchmason.com/about-us): who it is
- [What it costs](https://www.sketchmason.com/pricing): the plans and top-ups