Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx agentmods add skills/s3yed/appie-kit/agentic-webdesign-framernpx skills add S3YED/appie-kit --skill agentic-webdesign-framergit clone --depth 1 https://github.com/S3YED/appie-kitWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/s3yed/appie-kit/agentic-webdesign-framer)<a href="https://agentmods.dev/skills/s3yed/appie-kit/agentic-webdesign-framer"><img src="https://agentmods.dev/badge/skills/s3yed/appie-kit/agentic-webdesign-framer.svg" alt="Measured on agentmods" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00056 | $0.00838 |
| Opus 5 | $0.00028 | $0.00419 |
| Sonnet 5 | $0.00011 | $0.00168 |
| Haiku 4.5 | $0.00006 | $0.00084 |
Grade A, and why
agentic-webdesign-framer scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 6d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 92 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Framer 3.0 — AI Agents for Visual Web Design
What it is
Framer 3.0 (June 16, 2026) brings AI agents directly into the Framer canvas. Two modes:
- Framer Agents (canvas-native) — AI works inside Framer, generating pages, writing code components, managing CMS, auditing SEO/accessibility
- External Agents — Claude Code, Cursor, Codex, and other AI tools connect directly to Framer projects (no separate MCP setup needed)
Also: Branching for team collaboration — isolated branches, review, compare, merge approved changes.
AI Credits
| Plan | Credits | Reset | Roughly |
|---|---|---|---|
| Free | 500 | Daily | ~2 landing pages |
| Basic | 1,000 | Monthly | ~5 landing pages |
| Pro | 3,000 | Monthly | ~10 landing pages |
Editor seats: $20/mo (halved from $40).
What Framer Agents Can Do
- Generate pages from scratch
- Generate designs from screenshots
- Handle responsive breakpoints
- Design within existing pages
- Create layouts and sections
- Organize color and text styles
- Add effects and interactions
- Write custom code components (React)
- Write and improve content
- Import and organize content
- Generate SEO metadata
- Manage CMS collections
- Create CMS detail pages
- Audit for broken links
- Audit accessibility issues
- Audit inconsistent styling
External Agents Setup
Connect Claude Code, Cursor, or Codex without separate MCP setup:
- Open Framer project → Settings → External Agents
- Copy the connection string
- Paste into your AI tool's configuration
External agents get access to the same canvas, CMS, styles, and publishing workflow.
Open-Source MCP Server (alternative)
For custom setups, use the community MCP server:
{
"mcpServers": {
"framer": {
"command": "npx",
"args": ["-y", "framer-mcp-server"],
"env": {
"FRAMER_PROJECT_URL": "https://framer.com/projects/YourProject--abc123",
"FRAMER_API_KEY": "fr_your_api_key_here"
}
}
}
}
MCP Tools (community server)
- CMS: list/get/add/remove collection items, get field schemas
- Design: read page structure, apply canvas changes via DSL
- Code: list/get/set code component files (React)
- Preview: generate local HTML preview, publish deployments
- Undo: all write operations snapshot previous state for rollback
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 6d ago First seen · 92 lines · 56 tokens per session scan A 713079045cef
agentic-webdesign-framer is a skill published in the GitHub repository S3YED/appie-kit (7 stars, last pushed 10d ago), licensed MIT. It adds 56 tokens to every session and 838 once invoked, about $0.0003 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.
Other skills, from other repositories
autogpt-agents
Autonomous AI agent platform for building and deploying continuous agents. Use when creating visual workflow agents, deploying persistent autonomous agents, or building complex multi-step AI automation systems.
seo-geo-optimizer
Comprehensive SEO/GEO/AEO analysis toolkit for optimizing content visibility across traditional search engines (Google, Bing), AI platforms (ChatGPT, Perplexity, Claude, Gemini, Grokipedia), answer engines (Google AI Overviews, Bing Copilot, featured snippets), voice assistants (Google Assistant, Siri, Alexa), and…
internal-linking-optimizer
Use when improving internal link structure, anchor text, orphan pages, crawl depth, site architecture, or link equity flow. 内链优化/站内架构.
geo-review-html
Render an interactive, self-contained HTML companion for a GEO content brief (04-content-brief) or a publish-ready draft (05-production), so a NON-technical client reviewer (founder, organizer staff, the domain expert filling slots) can fill REQUIRED-FILL slots, leave section-level comments, and approve/return work in…
follow-up-writer
Use when drafting a post-event follow-up message to someone met at a conference.
autogpt-agents
Autonomous AI agent platform for building and deploying continuous agents. Use when creating visual workflow agents, deploying persistent autonomous agents, or building complex multi-step AI automation systems.