Framer + Claude AI

Building my portfolio site with Framer and Claude AI

Framer canvas showing this portfolio site across desktop, tablet and phone breakpoints

The challenge

I'd never used Framer before. I already work with AI-driven, no-code tools day to day, so the idea wasn't new — this specific tool was.

Normally a new tool means a slow climb before I trust myself to explore it properly. I wanted Claude to close that gap: set everything up, get me moving fast, and let me explore Framer from session one instead of tiptoeing around it.

Process

I worked conversationally instead of hand-coding. I described each section, its content, and its layout in plain language, and let the agent build the pages, CMS collections, and components directly on the canvas. Then I refined the details — spacing, copy, image treatment — through that same back-and-forth, instead of touching markup or CSS directly.

Gallery

Results

The core site came together fast: a home page, a projects listing backed by a working CMS, and a detail page for each project. It publishes straight from the tool, in a fraction of the time a hand-coded build would take.

Key learnings

AI-assisted, no-code tools like Framer can ship a real site fast, at a quality close to hand-built. The trade-off: you're working within what the tool's design system exposes, not what CSS allows. A few effects I'd normally reach for in code — like a custom underline under text — aren't exposed yet, so some details on the live site are simpler than I'd have built by hand. Knowing where that ceiling sits, and not fighting it, matters as much as the speed you gain.

Role

Framer + Claude AI