Agentic webdesign framer

Skill S3YED/appie-kit/skills/agentic/agentic-webdesign-framer

Build Your Own AI Employee. The complete starter kit for OpenClaw + Hermes Agent. 155 deduplicated skills, drag-and-drop workspace, case studies, install scripts.

Install

npx -y skills add S3YED/appie-kit --skill agentic-webdesign-framer

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

6 stars6 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Use Framer 3.0 Agents and External Agents — AI-driven website building, design, and CMS management from Claude Code, Cursor, and Codex. Canvas-native agents generate pages, designs, layouts, code components, and run audits.

SKILL.md

3.4 KB, as published. Nobody here has run it

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

When to Use

Building marketing sites, landing pages, portfolios
Teams that need visual design + AI assistance
When you want AI to work inside a visual canvas (not just generate code)
Rapid prototyping with design fidelity

Pitfalls

Complex web apps with custom logic/deeply nested components may need manual intervention
Agent occasionally produces templated layouts despite respecting style systems
AI credits consumed per agent action — monitor usage on high-iteration tasks
External Agents is Framer-native (not open MCP) — locked to Framer's connection method
Community MCP server is third-party, not official Framer

Version

Framer 3.0, released June 16, 2026. All plans.