Video summary

Framer Tutorial: Claude Can Design in Framer, You Just Have to Talk to It

Main summary

Key takeaways

Technology

Overview

This tutorial explains a workflow for building a complete, editable Framer website using Claude controlled by Framer “External Agents” (Cloud Code)—so you can generate and refine a full site without manually working section-by-section inside the Framer editor.

Key technological concepts / product capabilities

  • Framer + External Agents (Cloud Code): Claude can be connected to a Framer project via an external “agent” workflow.
  • Canvas vs external editing: The workflow contrasts built-in canvas agents (live/on-canvas editing) with external agent code that excels when working “outside the frame,” then pushes results back into Framer.
  • Native Framer output: Whatever Claude creates is returned as proper native, fully editable Framer layers (structured, stepped components), so you can still tweak everything afterward.

  • Iterative design pipeline: The approach emphasizes stage-by-stage prompting rather than one huge prompt:

    1. Layout + copy (low fidelity)
    2. Visual design (high fidelity, with typography/colors/references)
    3. Visual assets (images/gradients)
    4. Motion/interaction polish (animations)
    5. Navigation + wiring pages
    6. Responsiveness pass

Setup / how to connect Claude to a Framer project

  1. Go to Framer.com Agents / External to find integrations and copy the “installed prompt.”
  2. Launch Cloud Code (via terminal or desktop app).
  3. Provide the Framer project link when prompted.
  4. Cloud Code then asks you to log in to your Framer account, approve permissions, and open the connected project.
  5. After connection, Claude/Cloud Code can be instructed to edit the specific connected Framer project.

Prompting strategy (main analysis: how to get better results)

The speaker warns against giving AI a single massive instruction set (design system, fonts, colors, layout, etc. all at once), which tends to produce messy generic results.

Instead, prompt Claude like you would a real designer, in stages:

  • Start Simple: request a low-fidelity wireframe/structure first (finalize sections + layout + copy; avoid fonts/colors/visual direction).
  • Then Visual Language: later request high-fidelity design, including:
    • Preferred fonts (e.g., headings vs body fonts)
    • Color palette constraints
    • Design references to match the desired style
    • Optionally, Claude should ask clarifying questions if needed
  • Iterate with targeted edits: after initial results, refine with more specific requests (e.g., center-align hero, adjust typography, match header style).

What Claude builds during the workflow

  • Builds the landing page first with all sections in place.
  • Adds additional pages on request (example: About and Contact), and updates the Home page (e.g., hero background image).
  • Applies a consistent visual design language across pages once high-fidelity design is approved.

Image generation integration (GPT Image 2.0 / image prompts)

After the design language is finalized, Claude is used to generate detailed image prompts for GPT Image 2.0:

  • Prompts per section
  • Illustration style direction
  • Context-aware guidance (since Claude has full website context)

Then the user:

  • Copies those prompts into ChatGPT Image 2.0
  • Generates images
  • Manually replaces placeholders in Framer with the generated assets

For some sections, Claude also generates section-specific image prompts using provided layout references.

Gradients are generated in Image 2.0 by providing a gradient reference and instructing it to match the site’s color palette.

Animations and interactivity

  • Claude is instructed to add subtle animations to improve polish and engagement.
  • Claude also handles interactive map behavior (as mentioned in the subtitles).
  • The tutorial emphasizes that these changes are prompt-driven, but remain editable natively in Framer.

Navigation and structure editing

  • Claude can link pages and wire up navigation via prompting.
  • Because the output is native to Framer, the user can still do manual structural edits quickly (e.g., switch layout from grid to stack, adjust columns/spacing).

Responsiveness testing

Instead of manual responsive work, the workflow includes a step where Claude is asked to make the design responsive.

The speaker notes a few initial mistakes but concludes iteration/feedback fixes it (“just keep talking to Claude”).

Main speakers / sources (at end)

  • Primary speaker: The tutorial creator (unnamed in subtitles), demonstrating the workflow using Framer + Claude + Cloud Code + GPT Image 2.0.
  • Main system/source referenced: Claude via Framer External Agents (Cloud Code).

Original video