A design system and skill for shipping marketing pages

When I joined Medal, one of the first problems proposed to me was a way to ship out new marketing pages with speed.

Previously, new Medal webpages were put up with Claude Code + Vercel and zero design input, which led to inconsistencies from the navbar and footer being different on each page, to different shades of the brand green. Other signs of vibe-coded design showed too: an eyebrow on every section, and no oversight over information hierarchy.

This contrasted greatly with the website's thoughtfully designed main landing page, which had appropriate use of the product's brand colors, language, and design.

So the problem was, how might I design and streamline a lightweight process so that new pages can be put up with better output?

My first thought was to start from zero on the canvas of Figma and put together a component library as well as design tokens for Medal's web pages. The thought process was to document a source of truth, then port it into the codebase via Figma's Code Connect and Claude Code.

I wanted the component library to mimic a website builder's templates — the kind found on Framer, Squarespace, and Wix — built off atomic design: atoms (design tokens like font, size, padding), molecules (singular components), and organisms (default component arrangements).

From there Claude Code, with Figma MCP and Code Connect, worked its magic to add these designs and tokens into Medal's web pages repo. That let me start testing and creating webpages to fine-tune the components, and eventually turn it into a skill.

A component library will only help generate pages if it has something to read from, so the next step was making a skill that has context and memory of how these components should be put together, and when and why. That ended up as a context file and two commands.

/marketing-pages
/page-refactor

Although very similar, the /marketing-pages command was for creating new marketing pages and /page-refactor was for redoing existing pages to bring them up to date on the new component system. Ultimately these commands got a new web page to about 90% completion, which left the next 10% for attention to detail and information before shipping.

Splitting these commands kept the instructions short, and prompted users for context or assets if any were missing.

In the end I used this to ship:

Targeted ad pages

Campaign pages

To ensure this would get reused going forward, I synced with the marketing lead as well as messaged them more context via Slack, so that output was not reliant on me.

If I had more time, I would have gone back and made a document for running these commands and handling quality assurance going forward.