The AI Workflow

Skill level: Beginner · Time: 5 minutes to set up

The same loop works for every change: save a checkpoint → ask → review → check → keep or undo.

AI editors and agents
Chat assistants

For Cursor, Windsurf, Claude Code, GitHub Copilot in VS Code, Gemini CLI, Codex, and similar tools.

Open the whole Homio project folder in the tool (the folder with package.json), not a single file or the unzipped download around it. The tool needs that folder to find AGENTS.md and its own rules file.
Start the site with npm run dev so you can watch the change happen at http://localhost:4321/.
Save a checkpoint. If you use git, commit. If not, copy the folder. See Editing Safely.
Ask for one change. Name the file if you know it. Start your first request with “Read AGENTS.md first.” Most tools load it on their own, and the sentence costs nothing in the others. For a bigger job, add “Follow the matching recipe in SKILLS.md.” The Prompt Library has ready-made requests.
Review what changed. Every tool shows a list of edited files and the changes (“diff”). Check them against the review checklist below before you accept.
Check the result in the browser. npm run dev picks up a saved change to config.toml on its own. Restart it after you change fonts.json, trailingSlash, or anything in [settings.multilingual]: Astro reads those only when it starts. Ask the assistant to run npm run astro-check, or run it yourself.
Keep it or undo it. Commit if you are happy. If not, ask the tool to revert, or restore your checkpoint.

For ChatGPT, Claude, Gemini, or any assistant in a browser tab.

Give it the rules once per conversation. Open AGENTS.md in your editor, copy all of it, and paste it with: “These are the rules of the website theme I’m editing. Follow them in every answer.”
Paste the file you want to change, with its path. For example: “Here is src/content/homepage/english/-index.md:” and the whole file.
Ask for the change and the full file back: “Return the complete file, ready to paste, and change nothing else.”
Paste the answer over the file in your editor and save.
Check the result in the browser. If the terminal shows an error, copy the error and paste it back into the chat.

Chat assistants work best for text: rewriting copy, translating, writing posts and service descriptions. For a change that touches several files, such as a new service (service file, rate card, menu) or a new area, an AI editor saves a lot of copying.

Give The AI Good Context

The more precise the request, the better the result. Useful things to include:

The file. “Edit src/content/pricing/english/-index.md”, not “edit the prices”.
The page. “The section under the hero on /home-cleaning/.”
Your business. One paragraph: what you clean or fix, where, for whom, and what makes you different. Paste it into every copywriting request.
Your real figures. Rates, add-on prices, discounts, ZIP codes, years in business, number of crews. If you don’t give them, tell the assistant to keep the sample values and list them for you to replace.
The layout name. Copy it from the comment next to layout: in the section file: “use the split layout of the hero”.
What must not change. “Keep every key, id, and the number of items.” Ids such as standard-cleaning or biweekly link files together: the service file, its rate card, the reviews, and the booking form.

Review Checklist

Before you accept a change, check:

Only the files you expected were edited.
Text was changed in src/content/, src/config/, or src/i18n/, not typed into a component.
Both languages were updated: the english/ and french/ files, en.json and fr.json, menu.en.json and menu.fr.json (unless you turned French off).
Prices and other numbers are identical in the English and French pricing files. npm run build prints a [pricing] warning when they differ.
Keys, ids, and indentation in Markdown frontmatter, TOML, and JSON still look like the rest of the file.
No new colors like text-[#123456] in components. Homio uses its theme tokens (bg-primary, bg-sage, bg-accent, text-dark).
No reviews, ratings, review counts, customer names, insurance amounts, or prices were made up. Where you didn’t provide them, the assistant kept the sample items and told you which ones to replace.
npm run astro-check reports no errors. It also runs npm run check-i18n, which lists missing translations and menu differences.
The changed pages look right in the browser:
- at about 375 px wide (a phone, with the mobile action bar at the bottom) and at 1280 px
- in light and dark mode (the sun and moon button in the header)
- in English and French (the language switch, or /fr/ in front of the path)

astro-check doesn’t validate the files in src/content/sections/ and src/content/contact/, and a misnamed page block is ignored without an error. Only the page shows those mistakes.

When The AI Gets Stuck

There is an error in the terminal. Copy the whole error, including the file name and line number, and paste it with: “Fix this error. Explain the cause in one sentence.”
The change does nothing. Ask: “Which file does this text come from on this page? Check the route, the page’s named block, and the section file.” A page block overrides the section file (see How Homio Works). If the change is in config.toml, restart npm run dev.
A [business] value doesn’t show. The build prints a [business] warning when a value is in the wrong format (for example a phone number that isn’t +15550100199 style) and ignores it. Paste the warning to the assistant.
It keeps going in circles. Undo to your checkpoint, start a new conversation, and ask for a smaller step.