# The AI Workflow
## 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.**
For Cursor, Windsurf, Claude Code, GitHub Copilot in VS Code, Gemini CLI, Codex, and similar tools.
1. **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.
2. **Start the site** with `npm run dev` so you can watch the change happen at [http://localhost:4321/](http://localhost:4321/).
3. **Save a checkpoint.** If you use git, commit. If not, copy the folder. See [Editing Safely](/homio/beginner/editing-safely/).
4. **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](/homio/ai-customization/prompt-library/) has ready-made requests.
5. **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.
6. **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.
7. **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.
1. **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."
2. **Paste the file you want to change**, with its path. For example: "Here is `src/content/homepage/english/-index.md`:" and the whole file.
3. **Ask for the change and the full file back**: "Return the complete file, ready to paste, and change nothing else."
4. **Paste the answer over the file** in your editor and save.
5. **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](/homio/getting-started/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.