Stitch

What you get out of this

After this guide, you have a picture of how your home page and your product page should look, put together in an afternoon instead of a month of opinions. You can show it to an advisor, a customer or a partner, and you can give it to the person in the company who builds the website, along with ready-made code to start from.

Stitch is Google Labs' tool for making interfaces. You describe a screen in plain text, the tool draws it up, and you make changes by writing what you want different. No prior design knowledge is needed. What Stitch is not: a finished website. The draft is the starting point, not the goal.

What you need before you start

• A Google account and that you are over 18. Stitch is open to users from 18 in the countries where Gemini is available, and Sweden is one of them. If nobody in the company is 18 yet, make the sketches in Excalidraw and then build them in Penpot, which has no such limit.
• A decision on what the page should get the visitor to do. Buy, book, contact you, sign up for a list. A page with three different goals becomes a page without a goal.
• Your text. Heading, a short description of the product, the price if you have set one, and your contact route. Otherwise Stitch fills in with made-up text that looks like real text.
• Two or three colors and a font that you have already decided on, or the willingness to decide them now.
• A hand-drawn sketch on paper, photographed with your phone. Optional, but it gives much better results than text alone.

Time required and difficulty level

The first draft takes 20 minutes. Refining it until the company agrees takes another hour, and that hour goes to discussion rather than to the tool. The difficulty level is low to get started and medium to get a good result, because the quality of what comes out depends entirely on how concretely you describe what you want.

Write the brief before you open the tool

1. Write down who the page is for, in one sentence. Not "everyone", but for example "parents in Linköping who are going to buy a gift and have 200 kronor to spend".
2. List the blocks the page should contain, from top to bottom. For example: logo and menu, large image with heading and buy button, three products with prices, a paragraph about who you are, contact details.
3. Decide whether you draw mobile or desktop first. Almost all your visitors come from mobile, so start there and let the desktop version come after.
4. Gather the text in a document so that it can be pasted in. That is the difference between a draft you can show and a draft full of made-up words.

Make your first draft

1. Go to stitch.withgoogle.com and sign in with your Google account. The tool is free as long as it stays a preview in Google Labs, with a cap on how many generations you can make. The tool shows how many you have left.
2. Write your description in the prompt box. A prompt is the instruction you give the tool. Be specific about page type, target group, content and feel, in that order. Example:

   En startsida för mobil för företaget Ljusgården,
   som säljer handgjorda ljusstakar i återvunnen betong.
   
   Uppifrån och ner:
   logotyp och meny, stor produktbild med rubriken
   "Ljus som håller hela vintern" och en köpknapp,
   tre produkter i rad med bild, namn och pris,
   ett stycke om att vi är ett litet företag i Linköping,
   kontaktuppgifter i sidfoten.
   
   Färger: varm grå, off-white, en mörkgrön knappfärg.
   Rundade hörn, mycket luft, inga skuggor.

   That order works because the tool builds from top to bottom exactly as you wrote it, and because color and feel at the end do not push the content aside.
3. Upload your hand-drawn sketch if you made one, and ask the tool to use it as the starting point for the layout. That is often faster than describing placements in words.
4. Look at what comes back and change one thing at a time. Write Make the buy button dark green and move it above the product image, not five changes in the same sentence. With one change at a time you know which change made it better.
5. Replace all made-up text with your own. Paste in the real headings and the real prices. A draft with placeholder text looks finished and is therefore misleading.
6. Ask for the product page once the home page is in place, and ask explicitly for the same colors, the same fonts and the same button look. Two pages that look like two different companies is the most common mistake here.

How you know it worked

You can hold up the screen in front of someone who was not involved in the work, and that person can say in five seconds what you sell and where to click to buy. All text on the page is your own. The home page and the product page look like they belong together. If the draft passes that, it is ready to show to more people, and only then is it worth spending time on the build.

Take the draft further to a real site

1. Make a clickable version of the draft so that you can show how the visitor moves between the pages. Clicking your way through says more in a booth than a still image.
2. Export the code when the look is finished. Stitch gives you code for the page that the person building the site can start from.
3. Copy the design to Figma if someone in the company will refine it in a real design program. You can also take screenshots and add them to Penpot if you prefer to stick to free and open tools.
4. Bring the draft into the build. If you build in WordPress, the draft is your template: the same order of the blocks, the same colors, the same headings. That is much faster than designing in the build tool while you build.
5. Save the drafts and the dates. Being able to show how the design looked at the start and how it looks now is one of the simplest ways to show a client or investor that you have worked methodically.

The code that comes out is a draft, not a finished site. It lacks what makes a page usable in real life: secure payment, handling of customer data, and checks that the page works for someone using a screen reader. Never upload other companies' logos, product images or texts as source material either. What you get back then looks like their page, and selling under someone else's appearance is not allowed, not even in a small project.

If something goes wrong

• You cannot get in and receive a message about age: the limit is 18 years and it does not go around. Let someone in the company who has turned 18 run the tool, or make the sketches in Excalidraw and Penpot instead.
• The draft looks generic and could be any company: the description is missing your own text. Paste in real headings, real prices and a sentence about who you are, and run it again.
• Every new version changes things you were already happy with: write down what should stay. A phrasing like Keep the layout and colors exactly as they are, change only the footer works.
• The page looks good on the computer but cramped on the mobile: you have designed in the wrong order. Ask for the mobile version first and let the computer version be built from it.
• The generations run out in the middle of the work: the ceiling applies per account. Plan the heavy changes in advance, write a well-thought-out description instead of trying your way forward, and let someone else in the company take over on their own account.
• The code does not work when someone pastes it into the website: the code usually assumes that images and fonts are fetched from elsewhere. Treat it as a template for the look, and then build the page in the tool you will actually run it in.

What you do next

The draft will become a page you can visit. Start with Install WordPress and continue with WordPress with WooCommerce when you are ready to accept payments. If the texts on the page need a proper rewrite first, there is Get started with Google AI Studio.