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.

• AI editors and agents
• Chat assistants

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

1. Open the whole Ecozen 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/.

3. Save a checkpoint. If you use git, commit. If not, copy the folder. See Editing Safely.

4. Ask for one change. Name the file if you know it. Start your first request with “Read AGENTS.md first.” Some tools load it on their own, and the sentence costs nothing in the others. The Prompt Library has ready-made requests.

5. Review what changed. Every tool shows a list of edited files and the changes (“diff”). Check the list against the review checklist below before you accept.

6. Check the result in the browser, at desktop width and on a narrow window. 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.

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 pricing”.
• The page. “The section under the hero on /home-two/.”
• Your business. One paragraph: what you install, where, for whom, and what makes you different. Paste it into every copywriting request.
• Your real figures. Prices, warranties, tariff, years in business, number of installs. 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 stack layout of the benefits section”.
• What must not change. “Keep every key, option, and the number of items.”

Review Checklist

Before you accept a change, check:

• Only the files you expected were edited.
• Text was changed in src/content/ (or src/i18n/), not typed into a component.
• The files of every language you keep were updated (english/, french/, arabic/).
• Keys and indentation in Markdown frontmatter, TOML, and JSON still look like the rest of the file.
• No new colors like text-[#123456] in components. Ecozen uses its theme tokens (bg-primary, text-text-muted, bg-accent).
• No reviews, ratings, customer names, statistics, 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.
• The changed pages look right in the browser. astro-check doesn’t check section, about, contact, FAQ, pricing, or calculator files, and a misnamed page block is ignored without an error, so only the page shows these 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 Ecozen Works). If the change is in config.toml, check that the terminal printed [toml-watcher] ✓ Generated, and restart the dev server if it didn’t.
• It keeps going in circles. Undo to your checkpoint, start a new conversation, and ask for a smaller step.