From drawing to code with an HTML design export
Draw a labelled layout in SketchMason, generate a UI design and export standalone HTML. Learn what the export includes and what still needs engineering.
Try SketchMason freeDraw the interface you want to communicate
Sketch a header, content regions and actions, then label them. Generate the visual design from that structure and review it beside the drawing. Refine the screen before treating it as a development reference.
Export the design as standalone HTML
The HTML export gives you a browser-readable design artifact. Open it to inspect the result or share it as a reference. It is useful for communicating layout and visual intent during a handoff.
What the HTML file contains
Each export is one HTML file for one screen. Its styles are inline, written as plain CSS with no utility framework, and the design's colours are declared as CSS variables at the top of the file along with its font family. The markup is sanitised before it is written, so the file carries no scripts and no event handlers; anything that opens or switches, such as an expanding panel, is done in CSS alone. A viewport tag is set and the design's own media queries travel with it, so the layout can reflow on a narrow screen. Two things are linked rather than embedded. Typefaces load from Google Fonts and photographs load through SketchMason from Pexels, so the file needs a connection to look finished, and it credits Pexels whenever it uses their photographs.
How an engineer uses it
Open the file in a browser beside the code being written, and read exact values with the browser's developer tools: the colour variables, font sizes, gaps and corner radii as the design set them. The top-level sections of the markup make a reasonable first outline of components, one per section. When the same facts are wanted as text, export the written brief as well. It is a Markdown file that lists the page structure in order and ends with the full reference markup, and when the project has a style guide it also tables the colour tokens with their uses, the type scale and any radius and elevation values. Treat the pair as a specification of how the screen should look, not of how it behaves.
Where the export stops
The file is static. A form in it does not submit, a button does not navigate and nothing is saved. Each screen is a separate file, so a flow of three screens is three files with nothing routing between them, and a mobile version is a separate design with a file of its own. The copy and photographs are whatever the design was generated with until someone replaces them. Everything that makes the screen behave is the work described in the next section.
Build the application behaviour separately
A design export is not a deployed application. Your engineering work still includes data, authentication, integrations, accessibility checks and testing. Use the design to agree on the interface before implementing those behaviours.
Frequently asked questions
- Does drawing to code mean a complete working application?
- No. SketchMason generates UI designs and exports standalone HTML. Application logic, data connections and deployment require separate engineering.
- Can I export React components?
- The supported export described here is standalone HTML, not a React component package.
- Can I share a written specification instead?
- Yes. Export a written design brief when a teammate needs the intent and layout decisions for implementation.