Turn Product Screens Into a Help Article

I build Settl, an expense-splitting app, solo with Claude. This is how I turn current product screenshots into a result I can inspect, including where the AI must stop.

The 30-second version

The workflow takes current product screenshots, a walkthrough, user role, expected result, and known alternate paths and returns a help article with ordered steps, matched screenshots, prerequisites, alternatives, and a tested outcome. Use a browser recording or screenshots, Claude for the draft, and GitHub Actions or n8n to create a review ticket.

Code handles exact calculations, validation, duplicate protection, and state changes. Claude handles messy language, classification, and drafts. A person approves anything irreversible, sensitive, or customer-facing.

Document the screen that exists, not the one you remember.

Why the naive version fails

Most demos show one clean input moving into one polished output. Real work has missing fields, conflicting sources, timeouts, and duplicate events. A model may fill a blank because nobody told it to return null.

Here, the danger is documenting stale UI, exposing customer data, skipping permissions, or publishing screenshots with private details. The fix is a visible system with strict inputs, saved evidence, stop conditions, and one owner for exceptions.

Every run should answer:

What started it? The original event and received time.
What evidence did it use? Files, records, links, and dates.
What did code check? Validation, arithmetic, matching, and status.
What did Claude draft? Language, labels, or options.
Who approved the action? A person or an explicit safe rule.

Map and extract before building

Map the boundary first. This stops a small automation from quietly gaining permission to act.

Workflow: Turn Product Screens Into a Help Article
Input: current product screenshots, a walkthrough, user role, expected result, and known alternate paths
Output: a help article with ordered steps, matched screenshots, prerequisites, alternatives, and a tested outcome

Return the trigger, strict input fields, rule or code steps, Claude steps, external actions, approval gates, and failure paths. Do not build yet.

Then turn the source into named fields. Keep the evidence beside each field so a reviewer can open the original.

Workflow: Turn Product Screens Into a Help Article
Input: current product screenshots, a walkthrough, user role, expected result, and known alternate paths
Output: a help article with ordered steps, matched screenshots, prerequisites, alternatives, and a tested outcome

Extract only supported facts from the attached safe sample. Return valid JSON with source evidence, confidence, and missing_information. Use null for missing values. Do not infer or act.

Validate the extracted shape. Reject missing required fields or wrong types. Run totals, dates, matching, scoring, and permissions in code.

Add the controls that make it usable

Use this order whether you build with n8n, Make, Zapier, GitHub Actions, or a small service:

Receive and save the input. Assign a stable run ID before doing work.
Remove or protect sensitive data. Pass only the minimum needed fields.
Extract into a strict shape. Keep nulls and confidence visible.
Run exact checks. Validate fixed values outside the model.
Create a draft or proposed action. Do not execute it yet.
Apply the approval rule. A person reviews risky and customer-facing actions.
Execute once and save the result. Keep the external ID to block duplicates.
Queue failures. Never silently drop the original work.

Review the final draft before enabling actions:

Review this proposed turn product screens into a help article output. List unsupported claims, missing fields, sensitive data, calculations that belong in code, and actions missing approval. Return PASS only when all are resolved.

Choose the smallest useful stack

Use a browser recording or screenshots, Claude for the draft, and GitHub Actions or n8n to create a review ticket.

Use n8n when the workflow mainly connects existing tools, needs visible branching, and will be maintained by an operator. Use GitHub Actions when the trigger and result live around code. Use a small service when you need strong tests, high volume, complex permissions, or careful retry behaviour.

Choose the place where your team can inspect a failed run and safely replay it. The useful result is not the diagram. It is evidence you can debug.

Test the ugly cases

Give the article to a clean test account and follow it without using any knowledge that is not on the page.

Design eight tests for turn product screens into a help article: normal, missing, malformed, duplicate, conflicting, permission failure, tool failure, and human stop. Give input, expected state, prohibited side effect, and saved evidence.

Save each test input and result. The workflow should finish once or stop visibly. It should never guess through a broken dependency.

Run this on your codebase

Paste this into Claude Code with the workflow files open. For n8n, attach the exported workflow JSON and safe sample payloads.

Workflow: Turn Product Screens Into a Help Article
Input: current product screenshots, a walkthrough, user role, expected result, and known alternate paths
Output: a help article with ordered steps, matched screenshots, prerequisites, alternatives, and a tested outcome

Plan the implementation. Separate code from Claude, require source evidence, add duplicate protection, safe retries, approval before irreversible actions, logs, alerts, replay, and acceptance tests. Do not use real customer data. Stop for plan approval before building.

Download the runnable pack

Start with the safe dry-run. It validates fictional input and returns a reviewable draft without publishing or changing another system.