Customize Finzo With AI

Skill level: Beginner · Works with: Claude, Cursor, GitHub Copilot, Gemini, Windsurf, Codex, ChatGPT, and any other assistant

Finzo is built so that an AI assistant can change it safely. Three things make that work:

Content is separate from code. Almost every change is an edit to a Markdown, TOML, or JSON file: your site details in src/config/config.toml, plans in src/content/sections/<language>/pricing-section.md, posts in src/content/blog/, integrations in src/content/integration/. AI tools do this kind of task well.
Content files explain themselves. Section files list their options and allowed values in comments next to each key, so the assistant can see what is possible without guessing.
The theme ships instruction files for AI tools. They describe the folder structure and the rules for changing it. Most AI coding tools load them when you open the project folder.

The AI Instruction Files In Finzo

Finzo ships four instruction files at the top of the theme folder and three in hidden folders. Folders that start with a dot (.github/, .cursor/, .windsurf/) are hidden by default in Finder and File Explorer; your code editor shows them. You don’t need to edit any of these files. They are there for your assistant. Each edition ships its own copy, written for that edition.

File	Read by	What it contains
`AGENTS.md`	OpenAI Codex, Cursor, Windsurf, GitHub Copilot, and other tools that follow the `AGENTS.md` convention	The full rules: project map, content model, sections and page overrides, menus, styling, RTL, languages, motion, forms, editions, and the limits of the checks
`SKILLS.md`	Any assistant you point to it	Step-by-step recipes: add a section or page, switch a layout, edit menus, add or remove a language, make something work right to left, rebrand, add an icon, verify
`CLAUDE.md`	Claude Code	Imports `AGENTS.md` (the `@AGENTS.md` line), then a short list of the most important rules
`GEMINI.md`	Gemini CLI	The same as `CLAUDE.md`, for Gemini
`.github/copilot-instructions.md`	GitHub Copilot (coding agent, VS Code, CLI)	A short summary that points to `AGENTS.md` and `SKILLS.md`
`.cursor/rules/theme-architecture.mdc`	Cursor (always on)	The architecture rules, with a pointer to `AGENTS.md`
`.windsurf/rules/theme-architecture.md`	Windsurf (always on)	The same rules for Windsurf

The .vscode/ folder holds editor settings and recommended extensions, not AI rules.

Chat assistants in a browser (ChatGPT, Claude, Gemini) can’t read your folder. You paste AGENTS.md into the conversation yourself: see AI Workflow.

These files tell an assistant to:

keep editable text, links, images, buttons, and options in src/content/, not in components
make every change in every language: each language folder under src/content/, src/i18n/<language>.json, and src/config/menu.<language>.json
reuse Finzo’s CustomButton.astro, Icons.astro, and OptimizedImage.astro and the color tokens in src/styles/theme.css
use logical CSS classes (ms, pe, inset-s, text-start) so every page still works right to left in Arabic
read languages through src/config/language.json, never from a hard-coded language code
never invent testimonials, customer names, prices, metrics, or certifications
check changed pages at about 375 px and 1280 px wide, and at /ar/
run npm run astro-check when they finish

Two Ways To Work With AI

AI that can open your files

Cursor, Windsurf, Claude Code, GitHub Copilot in VS Code, Gemini CLI, Codex. Open the Finzo project folder in the tool and describe the change. It reads the instruction files, edits the files, and can run the checks. This is the best way to work.

Chat assistants

ChatGPT, Claude, or Gemini in the browser. They can’t see your project, so you paste AGENTS.md and the file you want changed, and copy the answer back. Fine for rewriting text, one file at a time.

What AI Is Great At In Finzo

Rewriting the sample copy for your product, in every language
Putting your plans, prices, and plan features in the pricing section file
Filling collections: blog posts, integrations, changelog entries, legal pages
Rewriting the feature and testimonial sections, and reordering the homepage
Changing menus, including the mega menu and the footer columns
Translating the site, adding a language, or turning one off
Explaining an error message and fixing it

What To Check Yourself

Prices and plan features. Every number in src/content/sections/<language>/pricing-section.md is a sample. An assistant can’t know your plans: give them to it, and read the result back.
Facts. AI writes convincing copy, and it can invent testimonials, customer names, user counts, uptime figures, awards, and compliance claims you never gave it. In a finance or banking site that is a real risk. Check every quote, number, and promise before you publish.
Regulatory and legal wording. The privacy policy, terms, and cookie policy are placeholders, and no sample copy on the site has been reviewed for financial-services rules. Have them reviewed for your business.
Longer names and labels. A company name, button label, or menu item longer than the sample can wrap or crowd the layout. Below md the root font size is text-base-sm, so every rem-based size shrinks: check the header, the mega menu, and the hero at about 375 px.
Arabic and French. Both are machine translated in the sample content. Open /ar/ after any layout change and have the text reviewed by a native speaker.
The result in the browser. npm run astro-check validates only the collections that have a schema: blog, integration, pages, and changelog. A wrong field or option in a sections, homepage, about, features, pricing, testimonial, contact, or author file does not fail the check, and an unknown icon name shows up only as a console warning in the browser.
Forms. Send one contact message and one newsletter signup on the live site, and check that they arrive.

Ready? Go to the Prompt Library for copy-paste prompts.