Review one website change before buying an AI developer
Turn one visible website change into an approval-ready brief, isolated preview, journey check and evidence pack with five ongoing-free tools.
A small website-change pack: a one-page change contract, before-and-after sketch, isolated component preview, desktop and narrow-screen journey checks, Lighthouse notes and a named build-or-buy trigger.
Start with the change a person must be able to review, not an AI developer membership. The visual is a FreeStack concept, not an Ovren or tool screenshot.
About this guide & its examples
This original FreeStack workflow uses a fictional café promotion banner and five ongoing-free tools. It does not alter a live site, run an external AI developer, measure customer behaviour or claim a tested provider result. Official sources checked 24 October 2026.
Illustrations are FreeStack concepts, not provider screenshots. Check the free limits below and test your own files before delivery.
Free boundaries before you start
What’s free, whether you need an account, and when we last checked.
Excalidraw · checked 2026-10-24
The free whiteboard remains free forever with an infinite canvas, full editor, unlimited scenes, compressed image uploads, browser-stored personal libraries, link collaboration and PNG, SVG and editable JSON exports. The current comparison also lists 10 AI requests a day. Automatic cloud sync, workspace organisation, comments and managed teams are paid Plus features. Keep an independent source-file copy.
The repository does not explicitly establish current account requirements for every hosted sharing action. Do not infer no account from the MIT licence.
Visual Studio Code · checked 2026-10-24
VS Code is free for private and commercial use on supported Windows, macOS and Linux systems. Core editing is not a hosted storage or AI allowance; extensions, Settings Sync, Copilot, remote services and deployment infrastructure have separate terms.
No Microsoft account is required for core local editing. Optional sync, marketplace or hosted services can require accounts.
Storybook · checked 2026-10-24
MIT-licensed local frontend workshop for building, documenting and testing components in isolation, with no provider project quota. Hosting a published Storybook, CI, add-ons and the application itself are separate.
No provider account is required for the local open-source package. Package registries, source hosts and deployment targets may require accounts.
Playwright · checked 2026-10-24
Apache-2.0 browser automation and test software with local Chromium, Firefox and WebKit support and no provider test-run quota. CI minutes, browsers, environments and test data are separate.
No provider account is required for local installation and runs. Package registries, CI and hosted test services have their own account requirements.
Lighthouse · checked 2026-10-24
Apache-2.0 local web-page auditing software for performance, accessibility and best-practice signals, with no provider audit quota. Results are lab evidence and vary with run conditions; they do not replace field data or specialist review.
No provider account is required for the open-source local tool. Chrome profiles, CI, saved reports and hosting are separate.
A small example to aim for
Weekend menu banner
Does it look right?
Does the code hold up?
Keep the visual approval, page evidence and actual diff in one review pack.
FreeStack concept · not an Ovren or provider screenshot, test or customer result.
Illustrative example · adapt it to your project.
Jump to a step
Write a one-change contract
In VS Code, create a short Markdown brief for one visible change: add a weekend-menu banner above the café homepage opening hours. Name the affected route, the exact copy, who approves it and what must remain unchanged. Exclude checkout, customer data, analytics and navigation. Add acceptance checks for text, link destination, dismissal behaviour and narrow screens. A change small enough to explain on one page is easier to price, preview and review.
Sketch the before and after
Use Excalidraw to draw the current header, the proposed banner and the page state after dismissal. Label the sketch as a fictional concept. Add notes for keyboard focus order, text contrast and the smallest supported width. Export a PNG for review and keep the editable .excalidraw source. This resolves placement and copy questions before code or provider credits are involved.
Isolate the component
Implement the banner in a local branch and give it Storybook stories for the default, long-copy, dismissed and narrow states. Keep the story data fictional. Review the component without depending on a complete production environment, then record any application-specific assumptions. Storybook is an MIT-licensed local workshop; publishing a hosted Storybook and operating a real application are separate jobs.
Check one critical journey
Write a small Playwright check that opens the local page, finds the banner, follows its link and confirms dismissal behaves as specified. Capture desktop and narrow-screen screenshots for the evidence pack. Run it against a disposable local or approved test environment. A passing scripted journey covers only the assertions you wrote; it is not a security review, accessibility audit or guarantee that unrelated pages still work.
Inspect the page and document limits
Run Lighthouse on the approved test page and save the report with the date, URL and run conditions. Treat performance scores as lab evidence that can vary with hardware, network simulation and page state. Review the banner manually with keyboard-only navigation and at the named widths. Record failures and unknowns next to the acceptance checks instead of turning one score into a release claim.
Pay only for the missing requirement
Keep the free local workflow when one person can prepare and review occasional changes. FreeStack editorial upgrade triggers: a managed clickable preview for non-technical reviewers, repeated parallel changes, governed repository access, an auditable approval trail, supported framework coverage or an agreed service level. Name the missing requirement and compare it with the time and risk of operating the local workflow before buying an AI developer membership.
Your workflow, connected.
Follow the steps and carry the output into the next stage. These are suggested handoffs, not automatic integrations.
- 01Bound the change
VS Code core use is free for private and commercial work. Extensions, sync and hosted AI services have their own terms.
Change contract + acceptance checks - 02Make approval visible
Excalidraw's MIT-licensed core editor is ongoing-free; its managed Plus workspace is separate.
Before/after concept + editable source - 04Check the path
Playwright is Apache-2.0 software and runs locally. Browsers, test data, environments and CI infrastructure remain your responsibility.
Assertions + screenshots - 05Collect bounded evidence
Lighthouse is Apache-2.0 local auditing software. Its lab results do not replace field data, user research or specialist audits.
Report + manual review notes
Provider information
Check current plans and documentation before committing to a workflow.
View 7 provider links
- Excalidraw: free open-source editor, exports and local-first behaviour
- VS Code: free private and commercial use
- Storybook: isolated component workshop and MIT licence
- Playwright: browser automation and Apache-2.0 licence
- Lighthouse: web-page auditing and Apache-2.0 licence
- Ovren: documented plan, preview, report and pull-request flow
- Product Hunt: Ovren Live Preview maker answers and launch evidence
A couple of useful questions
Do I need an AI developer to complete this guide?
No. The useful output is the reviewed change pack. A human can implement the bounded change, or the same pack can constrain a later coding agent. Buying a service is justified only when a named delivery or governance need remains.
What stays free?
Excalidraw, Storybook, Playwright and Lighthouse publish ongoing-free open-source software. VS Code core is free for private and commercial use. Your device, repository, test environment, hosting, CI and any external AI model remain separate.
Is a Storybook story the same as the live page?
No. It isolates a component state. The application can add routing, data, permissions, styles and failures that the story does not reproduce, so keep a page-level check and code review in the handoff.
What does Save this toolkit keep?
The existing FreeStack flow saves the five catalogue tools to your private stack after sign-in. It does not copy the brief, connect a repository, run tests, publish a preview or buy a provider plan.
What would you try?
Share your result or ask a specific question about this workflow.
Join the conversation