Pick an agent that works on your real project, then give it your design system. I added pages to two of our Framer templates, one with Claude Code and one with Codex. Both pages matched the template. The agent came down to preference. What made the pages right was the design system the agent was given.
I'm Sophia from Omakase. We build Framer templates, and our new ones ship with an Agent Kit. It's an add-on that gives an AI agent the design system a template comes with, so the pages it adds look like they belong.
Key takeaways
Choose an agent that edits your real project. Claude Code and Codex both connect to Framer.
An agent without your design rules guesses. When we tested Claude Code on Mindly without the Kit, it made duplicate components and changed a shared button.
With the Kit, Codex added a page to Ampcore that needed no fixes, and our in-house designer signed it off.
Claude Code or Codex was a matter of preference. Codex's images came out sharper, likely because OpenAI's image model is built into it.
What makes a good AI agent?
Most guides judge a web design AI agent by its personality. I judge it on two things. Can it work on my actual project? And does it follow my design, or invent its own? Here's how each trait looks when you're building on a real template.
It understands that you’re out of your comfort zone
Most people who buy a template aren't designers. They chose a template so they wouldn't have to make design calls. A good agent respects that by making the calls the template already made, not new ones.
It can only do that if it can see those decisions. Without them, it falls back on its own taste, and every new page drifts a little further from the rest of the site. That's the gap Agent Kit fills. It hands the agent the template's design system, so someone who isn't a designer can ask for a page and get one that fits.
It grills you (in a good way)
A good agent checks before it builds. When I tested Claude Code on Mindly with the Agent Kit, its first move was to audit the template. It found existing bugs before it wrote anything.
Without the Kit, Claude Code skipped that step and went straight to building. It made duplicate components and edited a shared button that other pages use. The questions don't have to come as a chat. An agent that inspects your project first is asking the right questions of the right source.
It explains the “why”
An agent should be able to say why it built a page the way it did. On a template, the answer should point to your design, not to general best practice. "I reused your existing pricing card" is a real reason. "Pricing cards convert well" is a guess.
So ask. After a build, ask the agent which components it reused and which rules it followed. If the answer could apply to any website, it wasn't working from yours.
It covers your blind spots
The Mindly test is the best example I have. The run with the Kit flagged problems in the template that we hadn't spotted. Those bugs were there in both runs, but only the agent with the Kit went looking for them.
A good agent checks your project against your own rules and catches what you'd miss on a quick look. That's worth more than any suggestion it makes.
It knows when to say "we're done"
Done should mean the page matches the site, not that the agent ran out of ideas. When I used Codex with the Agent Kit to add a page to Ampcore, it built the page from the template's design system and stopped.
The page needed no fixes. I showed it to our in-house designer, who said it was fine. That's the bar: done when it matches, and nothing more.
Collaboration is a two-way street
An agent can only follow rules it has. Your half of the job is giving it the right ones and keeping a person in the loop.
Be specific, be verbal
Adjectives aren't instructions. "Clean and modern" means something different to every agent. Your design system is the specific version: colours, type, spacing, the components you already have, and how your pages are put together.
Write it down once, and every agent reads the same thing. That's what an Agent Kit is: a template's design decisions, written for an agent.
Take a hybrid approach
Let the agent build and let a person judge. On Ampcore, Codex built the page and our designer reviewed it. The agent handles production. The human keeps the taste.
Embrace the “Undo” button
Try things where mistakes are cheap. Framer's branches let agent edits land on a copy of your site, so you can review them before anything goes live. Before you let any agent work on a client site, run it on a branch or a duplicate first.
You learn by trying
I've run the Agent Kit with two agents. Here's what happened.
Claude Code | Codex | |
|---|---|---|
Template | Mindly | Ampcore |
Task | Add a new page | Add a new page |
With the Agent Kit | Audited the template first, found existing bugs, reused existing components | Built the page from the template's design system, no fixes needed |
Without the Agent Kit | Made duplicate components, edited a shared button | Not tested |
Images | No built-in image model | Generated with OpenAI's image model, sharper in my run |
Designer review | Signed off as fine | Signed off as fine |
Both did the job. I preferred Codex because it felt smoother, and its images were sharper. That's likely because Codex has OpenAI's image model, gpt-image-2, built in, while Claude Code doesn't generate images on its own. But smoother is my preference, not a verdict. If you already pay for one of them, start there.
The full Claude Code test, with and without the Kit, is in How to Connect Claude Code to Framer Without Framer MCP. For how Framer's own agent compares, read Framer AI in 2026.
The real lesson from both tests: switching agents changed very little. Giving the agent the template's design system changed everything. Agent Kit is available on Mindly, Solwell, Ampcore, Millbrook and Johnson & Green. Start with the agent you have, give it your design, and see what it builds.
