The new design stack: Claude Code + Framer
How to make your design workflow more efficient
There’s a dirty little secret in the design community: many of us have terrible portfolio websites. Not because we lack taste, we obsess over other people’s products daily. But because building your own thing, for yourself, with no brief and no deadline, is uniquely paralyzing. You know too much. Every font choice feels consequential. Every layout feels like a statement.
I’ve had “redesign portfolio” sitting in my personal Notion for three years.
Then, over one weekend in April, I shipped it. Not a placeholder. Not a “coming soon” page. A real, live portfolio, using Claude and Framer as my co-builders. And the process revealed something bigger than a productivity hack: it’s a signal of where the design-to-web workflow is fundamentally heading.
The Stack That Actually Changes the Game
Before I walk you through how this worked, here’s what made it feel different from every other “just use AI to build your site” promise:
Framer has quietly matured into something genuinely impressive. It’s no longer just a prototyping tool with a publishing button bolted on. In 2026, Framer lets you describe what you want, tweak it visually, and publish, all without touching a code editor. Its AI site generation takes a plain-English prompt and returns a multi-page layout instantly. But the real magic is the visual editor underneath: the canvas feels like a design tool, not a block-dragging interface, which matters enormously when you care about how things actually look.
Claude, meanwhile, isn’t just a chat assistant you paste into anymore. Framer now has a native MCP plugin that creates a live connection between your Framer project and Claude. You can ask Claude to create custom code components and insert them directly into your canvas, update color styles across your entire project with a single command, or export Framer components as production-ready React code. That’s not a side workflow, that’s a full AI-in-the-loop design system.
And then there’s Framer Workshop, the built-in Claude integration that powers faster and smarter suggestions, and now runs on all code components, not only those created with Workshop. It updated to Claude 4.5 in March 2026, and the speed difference is noticeable.
How I Actually Built It
I started in Claude (the web interface, not Code) with a deceptively simple prompt: describe my background, the tone I wanted, editorial, not corporate, and link to a few reference sites I admired. Claude helped me map out the site architecture, draft section copy, and think through what case studies to feature and how to frame them.
This part matters more than people realize. Framer AI is brilliant at layout, but it can’t tell you what story your work should tell. That judgment, what to show, what to cut, what the through-line of your career actually is, that’s still entirely yours. What Claude does is help you externalize it faster, get it out of your head, and into structure.
Then I took that content foundation into Framer.
You open a new project, select “Generate with AI,” and type a prompt like “portfolio website for a freelance brand designer with a dark theme, project gallery, about section, and contact form.” What comes back isn’t a template, it’s a starting point that already reflects the brief. From there, the Figma-like canvas is where your design sensibility takes over. You’re not coding; you’re making real decisions about space, hierarchy, and motion.
For the parts that needed custom behavior, a scroll-triggered case study reveal, a work filter, I used the Framer MCP plugin with Claude. The setup is surprisingly straightforward: install the plugin, copy the MCP URL, and run a single command to connect Claude Code to your project. Once connected, you can describe what you want in natural language and watch it appear in the canvas. Not perfectly every time, but close enough that the iteration loop is fast.
The whole process, content architecture, copy, layout generation, custom components, polish, took a weekend. A focused weekend, but a weekend.
What This Means for How We Work
This isn’t just about speed. Something more interesting is happening structurally.
Claude Code can generate strong starting points fast, but detailed refinement usually means repeated prompt changes, code inspection, and redeploys. Framer bridges that gap, offering a visual-first workflow to refine and ship with total confidence. The implication: these tools aren’t competing, they’re complementary. Claude is strongest at the planning and logic layer. Framer is strongest at the design execution and publishing layer. Used in sequence, they cover each other’s gaps.
Framer produces the most beautiful designs for portfolios of any AI builder tested in 2026, and portfolios, it turns out, are the perfect use case for this workflow: visual-first, content-light, and deeply personal.
There’s also something worth naming about what still requires you. AI excels at structure; humans at nuance. Claude created a solid framework, but the personality, the sequencing of work, the decision about what to lead with, that came from judgment built over years of doing the work. The tool amplified that judgment; it didn’t replace it.
This is the thesis I keep coming back to across every AI tool I use: as execution gets faster, taste becomes the bottleneck. When anyone can ship a portfolio in a weekend, the ones that stand out are the ones with a clear point of view.
A Practical Framework for Designers
If you want to try this workflow, here’s how I’d approach it:
Phase 1 — Content (Claude): Before you touch Framer, use Claude to do the hard thinking. Feed it your resume, your case study notes, anything you’ve written. Ask it to help you identify the narrative arc of your career, suggest what to feature, and draft the copy for each section. Do multiple rounds of this. The quality of your Framer output is downstream of the quality of your content inputs.
Phase 2 — Structure (Framer AI): Use Framer’s AI generation to get a layout on screen quickly. Don’t fall in love with the first output — use it as a starting point to react to. What’s working? What feels off? Your design eye will know immediately.
Phase 3 — Polish (Framer canvas + Claude MCP): This is where the real work happens. Adjust the visual details in the Framer editor directly. For anything that needs custom code — interactions, filtering, dynamic content — use the Framer MCP plugin to bring Claude into the canvas.
Phase 4 — Ship, then iterate. The biggest trap with personal portfolios is treating them as finished objects. They’re not. Publish what you have. Add to it over time.
The Bigger Shift
What happened to me over that weekend is a preview of a broader change in how designers will work. The boundary between designing and building is collapsing — not because coding is becoming obsolete, but because the feedback loop between intention and output is getting dramatically shorter.
With the power of Framer combined with AI design workflows, we’re entering an era where creativity and speed converge — where designers and builders alike can focus on brand, strategy, and experience while the machine handles the heavy lifting of layout and responsiveness.
The question worth sitting with: if shipping no longer requires months of dev time or a five-figure freelance budget, what are you still waiting for?
The portfolio won’t build itself. But now, it almost can.
Are you using AI tools to build or iterate on your portfolio? I’m curious what’s working and what’s still broken, drop a comment below.
References
Brochu, A. (2025, November 9). Collaborating with Claude: How I Built a Portfolio Website with AI. Medium. https://medium.com/@alexis.brochu/collaborating-with-claude-how-i-built-a-portfolio-website-with-ai-and-lived-to-tell-the-tale-a5c3bd9d5b27
Mcinerney, L. (2026, April). Built a Portfolio Site With My Own AI Chatbot Using Claude Code. Medium. https://medium.com/@lovely.mcinerney/built-a-portfolio-site-with-my-own-ai-chatbot-using-claude-code-66ca39ae15b7
Framer. (2026). Framer MCP Plugin. https://www.framer.com/marketplace/plugins/mcp/
Framer. (2026, March). Workshop: Claude 4.5 Update. https://www.framer.com/updates/workshop-claude-4-5
Framer. (2026). Framer vs Claude Code. https://www.framer.com/compare/framer-vs-claude-code
FramertoAI. (2026). Framer to Claude Code Guide. https://framertoai.com/guides/framer-to-claude
Effloow. (2026, April). Framer Review 2026: The AI Website Builder Designers Actually Want. https://effloow.com/articles/framer-review-ai-website-builder-guide-2026
NxCode. (2026). AI Website Examples 2026. https://www.nxcode.io/resources/news/ai-website-examples-2026
Go-techsolution. (2025). Framer and AI: The Future of No-Code Website Building. https://go-techsolution.com/framer-and-ai-the-future-of-no-code-website-building-in-2026
Contra. (2026). Explore Framer MCP and Claude Code for Creative Design. https://contra.com/community/e9kpLE0s-explore-framer-mcp-and-claude-code