Why Identifying Your Bottleneck Matters More Than Choosing AI Tools

The single most important step in building any AI automation is pinpointing the exact problem before opening any tool. Most solopreneurs start by exploring AI tools and hoping something sticks. I started by asking: where am I losing the most time for the least creative output?

The answer was the gap between "blog post written" and "blog post published." HTML formatting, CMS field mapping, newsletter embed codes - none of it required creative thinking. All of it could be systematized.

This is what strategy before tools looks like in practice. That clarity shaped everything that came next. Whether you're running a content-heavy business or building your first blog, the principle holds: know what you're solving before you pick the solution.

The 4 Components That Power AI Blog Automation on Framer

Four tools working together replace the entire manual publishing process - and none of them require a developer background. I'm a lawyer turned web designer turned AI strategist. I learned everything by doing it.

Claude Code - Anthropic's AI assistant, available as a VS Code extension and standalone CLI. It reads your project files, executes commands, and connects to external services through MCP (Model Context Protocol) servers.

Framer MCP Server - The bridge between Claude Code and your Framer project. It gives AI direct access to your page structure and CMS, so blog posts can be created programmatically - without opening Framer.

CLAUDE.md - A single markdown file in your project root that contains everything about your brand: voice, keywords, audience rules, content structure. Every piece of content references this file automatically. Write it once, and every post follows your brand guidelines.

Custom Skills - Reusable instruction sets (markdown files) that define specific workflows. I built two:

- Writing skill: Writes GEO-optimized blog posts in my brand voice

- Publishing skill: Publishes them to the CMS with correct HTML formatting and field mapping

One command to write. One command to publish. That's the system.

Step-by-Step Setup: From Installation to First Automated Post

Setting up this system takes about 2–3 hours — and you only do it once. Here's the process broken into three stages.

Install and Connect

Install the Claude Code VS Code extension, then create a .mcp.json file in your project root with your Framer MCP connection URL (found in your Framer project settings). Test the connection by asking Claude Code to show your project structure.

When you see your entire website - every page, every section, every element — appear inside your code editor, that's when it clicks. This isn't a toy. It's infrastructure.

Map Your CMS First

Understanding your CMS structure before automating anything prevents hours of debugging later. Ask Claude Code to list all collections and show you every field with its ID and type.

The critical discovery I made: Framer's CMS requires dir="auto" on every HTML element - paragraphs, headings, list items. Without it, formatting breaks silently. I found this by reading an existing CMS item's raw HTML. Map first, build second.

Create Your Brand File and Skills

Define your brand in a CLAUDE.md file: voice, audience, keywords, content rules, SOPs. This becomes the foundation for everything. My file contains the complete brand guidelines, product information, tone of voice rules, and keyword strategy — all in one place.

Then build your skills - instruction files that encode your exact workflow:

- Writing skill: Blog types, tone rules, keyword pools, structure template, GEO checklist

- Publishing skill: HTML conversion rules, CMS field mapping, content splitting logic, fixed values

The publishing skill handles the trickiest part automatically - splitting a blog post across multiple CMS fields. The intro goes into one field. The first three H2 sections go into Main Text. Additional sections go into Main Text 2. The conclusion goes into Closing Remarks. All HTML-formatted, all with correct attributes.