How to Write Step-by-Step Guides With Screenshots, Fast

Why step-by-step guides are worth writing

Every team has tasks that only one person knows how to do: issuing a refund, adding a user, publishing a page, running the month-end report. When that person is on leave, work stops or someone guesses. A short step-by-step guide, sometimes called an SOP (standard operating procedure) or a how-to, fixes that.

The problem is that writing one by hand is slow. You do the task, stop to take a screenshot, crop it, paste it into a document, describe the step, and repeat twenty times. This post covers how to write a good guide quickly, first by hand and then with a tool that does most of the typing for you.

Plan the guide before you write it

A few minutes of planning saves a lot of editing later. Before you start, write down:

• Who the guide is for. A new hire needs more detail than a teammate who has done the task once.
• The goal in one sentence, for example "Add a new supplier to the accounting system".
• What the reader needs before they start: access, a login, a file or a piece of information.
• Where the task starts and where it ends, so the guide does not wander into related tasks.

How to write each step

Good steps are short and start with a verb. Each one describes a single action the reader takes. Compare these two:

Weak: "The settings can be found under the profile menu and there you should change the notifications as needed."

Clear: "Click your profile picture, then click Settings." followed by "Open the Notifications tab."

Some rules that help:

• One action per step. If a step has "and then" in it, split it.
• Use the exact label from the screen in quotes, such as Click "Create project".
• Say what the reader should see after an important step, so they know it worked.
• Put warnings before the step they apply to, not after.
• Number the steps. People lose their place when they switch between the guide and the app.

How to add screenshots to a how-to guide

Screenshots turn "click the gear icon" into something the reader can match at a glance. On Windows, Win+Shift+S opens the Snipping Tool so you can capture a region of the screen. On a Mac, Cmd+Shift+4 does the same. For long web pages, see our guide on how to take a full page screenshot in Chrome.

To make screenshots useful rather than decorative:

• Crop to the part of the screen that matters, with a little context around it.
• Highlight the button or field with a box or an arrow, and number it to match the step.
• Blur or cover emails, customer names, API keys and anything else private before you share the guide.
• Keep the browser zoom and window size the same across screenshots so they look consistent.

Share the guide and keep it up to date

Pick a format that your team will actually open. A single web page or PDF is easy to send. Markdown works well if your team keeps documentation in a wiki or a code repository.

Guides go out of date when the software changes, so add the date you last checked it at the top. When someone reports that a step no longer matches the screen, fix it straight away. A guide that is wrong once stops being trusted. If you collect a lot of screenshots while doing this, our post on how to organize screenshots on Windows may help.

A faster way: record the task once

Writing steps by hand works, but most of the effort is mechanical: capture, crop, label, describe. That is the part we built FlowGuide to do. It is a Chrome extension that watches the task you do in your browser and writes the how-to for you.

Here is how it works:

• Open the FlowGuide side panel from the Chrome toolbar and press Start recording, or press Alt+Shift+R.
• Do the task once, as you normally would. Clicks, typed fields, dropdown choices, the Enter key, new pages and tab switches each become a numbered step with a screenshot.
• Step titles are written in plain language, such as Click "Create project" button, and the element you used is outlined and numbered on the screenshot.
• Fix a title, add a note, reorder or delete steps, and draw extra boxes, arrows and labels on any screenshot.
• Export a single HTML page, Markdown with an images folder, a PDF or a JSON backup.

Keeping private data out of your guides

Guides often get recorded in real admin panels, which is where private data lives. FlowGuide's Smart Blur pixelates emails, API keys, tokens, card numbers and password fields automatically, and you can drag over anything else to hide it. Passwords are never written into step titles, and you can hide every typed value in Settings.

FlowGuide has no servers. Guides are saved in your Chrome profile on your computer, there is no account, and it only records between Start and Stop, with a red REC badge on the toolbar icon the whole time. Removing the extension removes your guides, so export anything you want to keep.

There is also an optional AI rewrite for friendlier step titles, using your own Google Gemini, OpenAI or Claude key. Only step text is sent; screenshots never leave your browser. You do not need it: titles are written automatically without AI.

Try FlowGuide

If you write guides a few times a year, the checklist above and a screenshot tool are enough. If you document processes every week, recording the task once and editing the result is much faster than building it by hand.

FlowGuide is coming soon to the Chrome Web Store and will be free. It works in Google Chrome version 123 or newer. If you would like to try it before launch, request early access.