Browse the docs ▾

Tutorials

Build a site from a screenshot or design

Opmiz has no image-to-site tool, and it doesn't need one. You read the reference, turn it into exact ops, and compare your work with it.

The brief: a screenshot or mock-up from the owner, and "make my site look like this".
You'll end with a draft that follows the reference's layout, type, colour and spacing, built from editable sections the owner can change in the builder.
Check the rights first. Use a reference for its direction. Don't copy another company's logo, words, photos or a distinctive design unless the owner has the right to use them. If the reference is a competitor's site, say so and make something that's the owner's own.

1. Describe the design in writing

Before any op, write down what you see, as this becomes your plan:

Colours

Four roles: primary, accent, background and text. Add other colours by name.

Type

Heading and body fonts, and a size for each level, at both large and small widths.

Spacing

The page's maximum width, the padding between sections and the gap between cards.

Shape

Corner radius, borders, shadows, and filled or outline buttons.

Structure

Each section, top to bottom, and how many columns it has.

2. Set tokens before layout

Put the type scale and colours into the theme. set_theme takes colors, fonts, add_colors, add_text_styles, corners and buttons. A text style can use clamp() for its size, so one style works at every width. Everything you build afterwards can point at these styles with set_style_links, which keeps the site consistent and lets the owner change it in one place.

3. Build sections from the top

Add each section with add_section, which builds it in one op and lays it out for computers, tablets and phones, or element by element with add_element. A whole page fits in one file of up to 1,000 ops, sent through create_ops_link. Use kind: "columns" for columns and container for groups, and name them with name, so the Layers panel makes sense to the owner later.
For a layout the column presets don't match, use set_style on a container: display: "grid" with gridTemplateColumns, or display: "flex" with gap. Desktop, tablet and mobile values override common ones, so a layout change usually needs breakpoints: ["desktop","tablet","mobile"].

4. Use real or licensed images

Don't crop images out of the reference. Ask the owner for theirs, or pass an https address for an image they are allowed to use. set_background handles section backgrounds and gradients. SVG files aren't accepted, so supply icons as PNG or WebP, or choose from the icon names in get_element_catalogue, using add_element with kind: "icon" and set_icon.

5. Compare and correct

Take a screenshot at the reference's width, with get_page_screenshot and full_page: true. Look at the two side by side and list differences in order of size: layout first, then spacing, then type, then colour. Fix them in a small batch and take another. Three or four rounds usually get close. See Review your work with screenshots.

6. Make your own phone layout

A desktop reference says nothing about a phone. Decide how each section should stack, then set mobile styles and check. If the reference is phone-only, do the same for desktop.

What may not match exactly

Effects needing custom code

Scroll animation, custom scripts and CSS beyond the allowed properties aren't available. Hover and focus changes with transition are, and so are layered gradients, blur, rotation and blend modes.

Forms

Add the form with add_form, with the reference's fields. It takes responses once the site is published, and they reach the Inbox.

Fonts

Google fonts only. Choose the nearest one and say so if the reference uses a paid font.

Exact pixels

Aim for the same design at every width, not an identical image at one.

‹ Previous

Online store

Tokens from a reference

{ "op": "set_theme",
  "colors": {
    "primary": "#1F3A5F",
    "accent": "#C8553D",
    "background": "#FAF7F2",
    "text": "#1B1B1B" },
  "fonts": {
    "heading": "Playfair Display",
    "body": "Source Sans 3" },
  "corners": "soft",
  "add_text_styles": [
    { "name": "Hero title",
      "size": "clamp(36px, 6vw, 72px)",
      "weight": "700",
      "line_height": "1.05",
      "font_ref_key": "heading_font" }
  ] }

A grid that stacks on a phone

{ "op": "set_style",
  "ref": "home/plans/plans-row",
  "property": "gridTemplateColumns",
  "value": "repeat(3, 1fr)",
  "breakpoints": ["desktop"] }

{ "op": "set_style",
  "ref": "home/plans/plans-row",
  "property": "gridTemplateColumns",
  "value": "1fr",
  "breakpoints": ["tablet", "mobile"] }

‹ Previous

Online store