Why Strategy Comes Before the Automation

Before I picked up any tool, I asked one question: Where am I losing the most time for the least creative output?

The answer was obvious. The gap between "blog post written" and "blog post published" was pure repetition. 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. Most solopreneurs start by exploring AI tools and hoping something sticks. I started by identifying the bottleneck. 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 the System

You don't need a developer background for this. 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 SEO-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: Setting Up AI Blog Automation on Framer

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

Before automating anything, understand your CMS structure. 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

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. Every skill and every conversation draws from it.

Build Your Skills

Create instruction files that encode your exact workflow:

- Writing skill: Blog types, tone rules, keyword pools, structure template, SEO 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.