What

Make Luca AI’s text-heavy Webflow marketing site scannable on any screen without rewriting its AI-optimized copy, and ship it as native Webflow components the team can edit without code.

Context

Luca AI’s marketing site carries a large body of AEO/GEO-optimized copy, written for AI crawlers and answer engines as much as for people, and that copy was largely fixed. The CEO handed me the front end of four pages — Homepage, How It Works, The Agent and Capital — for review. Even after a few passes there were real problems: mismatched calls to action, pricing that did not localize, sections several scrolls long, and testimonials on the Capital page with no attribution, which undercuts a product that runs on trust. The job was to make the same words scannable, on a desktop and on a phone. The site also runs on Webflow, which I had never used, and the team needed to keep editing it by hand after I left. So I had to learn Webflow itself, and then use Claude Code with Webflow’s MCP to turn my code mockups into native Webflow components, rather than embedded code that no one on the team could change.

Constraints

1. Copy written for AI crawlers. The text was optimized for answer engines and could barely change, so I worked with the external content specialist to clarify what each section was for, and changed structure and motion instead of words.
2. Sections built for a desktop. Several sections ran several scrolls long on a laptop alone, so each had to be restructured for a phone rather than shrunk to fit one.
3. A team that would maintain it without me. The site had to stay editable after I left, by people who do not write code, which ruled out a hand-coded build.
4. An 8-hour time difference. With a UK-based team, most of the collaboration happened asynchronously, through recordings, notes and daily updates.

Key Features

1. Consistency first

   Mismatched calls to action and other inconsistencies were fixed and cleared with the CEO before any layout work began.

2. A motion language

   Scroll-triggered and hover transitions, explored in a working demo file, pace the reading and cut how much text is on screen at once.

3. Two engines, one card

   The Smarts and The Capital sit side by side on a desktop, and share one card behind a segmented control on a phone.

4. Capabilities as a chip rail

   Six capability cards in a grid become a scrolling rail of chips over a single card on a phone.

5. Steps you swipe

   The four steps run in one row on a desktop, and become a swipe carousel with a counter on a phone.

6. A phone navigation sheet

   On a phone the navigation opens as a sheet over the hero, instead of a desktop menu squeezed small.

7. Native Webflow components

   Claude Code and Webflow’s MCP turned code mockups into Webflow-native components that work with CMS elements and respond cleanly.

8. Editable without code

   The team edits copy and content in Webflow themselves, so the site does not wait on a designer or a developer.

Open demo (opens in a new tab) ↗

Open demo (opens in a new tab) ↗

Open demo (opens in a new tab) ↗

Open demo (opens in a new tab) ↗

Open demo (opens in a new tab) ↗

The motion explorer and four mobile concepts, built as working pages for rounds of feedback with Luca’s UX lead, its engineers and the CEO, until we landed on designs everyone agreed on

Final Deliverable

Enlarge

Enlarge

Enlarge

Enlarge

Reflection

Building the concepts as working pages instead of static frames changed the conversations around them. The CEO reacted to how a section actually moved on a phone rather than to my description of it, and choosing between an accordion, a swipe and tabs became a matter of trying all three.

Shipping through Claude Code and Webflow’s MCP moved me from handing designs off to putting them live, and it taught me that directing AI tools takes more precision, not less: exact hex values, typefaces and easing curves, or the tools make design decisions of their own. The payoff is a site the team has kept editing without me.

What I would do differently is measure before launch. With scroll depth and call-to-action clicks recorded on the old pages, the redesign could be judged against a baseline instead of by eye.