The Framer Agent Playbook
🔗 https://framer-agent-playbook.framer.website/
A copy-ready prompt library for Framer Agents: 280 real prompts across 7 categories, each with a live animated preview of what it builds. Press ⌘K to fuzzy-search all 280.
The twist — the whole site was built by the agent itself. Every section, component, the recolor, the breakpoints, all 280 cards prompted into existence on the canvas. The Playbook is proof of what it teaches.
280 prompts (40/category, with difficulty + credit estimates) · 14 distinct live previews · a ⌘K command palette · a design.md Presets hub with 4 full copyable systems · real React code components · working light + dark mode · 3 breakpoints.
Via the agent CLI + MCP: generated the page structure, wrote and placed all 280 cards, recolored the site through design tokens, created tablet breakpoints, and built the code components. A 7-way parallel run wrote all 280 prompts in ~90s. I orchestrated and reviewed.
Could: generate whole pages from a sentence, restructure layouts, create breakpoints, recolor sitewide via tokens, author hundreds of components, write and fix code components.
Couldn't (yet): no delete in the editing grammar (overwrite-and-reuse instead); brand-new code components fail to insert the normal way and need two publishes to bundle; edits inside component/template definitions don't stick (only page content does); code-file edits need the plugin open; theming one mode left the other broken until tokens were mirrored.
The rough edges are the point: where agent-built sites are effortless today, and where a human still steps in.
Built for the Framer Agents Hackathon.
The Framer Agent Playbook
🔗 https://framer-agent-playbook.framer.website/
A copy-ready prompt library for Framer Agents: 280 real prompts across 7 categories, each with a live animated preview of what it builds. Press ⌘K to fuzzy-search all 280.
The twist — the whole site was built by the agent itself. Every section, component, the recolor, the breakpoints, all 280 cards prompted into existence on the canvas. The Playbook is proof of what it teaches.
280 prompts (40/category, with difficulty + credit estimates) · 14 distinct live previews · a ⌘K command palette · a design.md Presets hub with 4 full copyable systems · real React code components · working light + dark mode · 3 breakpoints.
Via the agent CLI + MCP: generated the page structure, wrote and placed all 280 cards, recolored the site through design tokens, created tablet breakpoints, and built the code components. A 7-way parallel run wrote all 280 prompts in ~90s. I orchestrated and reviewed.
Could: generate whole pages from a sentence, restructure layouts, create breakpoints, recolor sitewide via tokens, author hundreds of components, write and fix code components.
Couldn't (yet): no delete in the editing grammar (overwrite-and-reuse instead); brand-new code components fail to insert the normal way and need two publishes to bundle; edits inside component/template definitions don't stick (only page content does); code-file edits need the plugin open; theming one mode left the other broken until tokens were mirrored.
The rough edges are the point: where agent-built sites are effortless today, and where a human still steps in.
Built for the Framer Agents Hackathon.
Syauqizaidan Khairan Khalaf