odd diff

[samuelstroschein]

Reproduction:

# Before

```md
How I got Claude Design to make a landing-page hero that did not look generic

I got a bunch of questions about how I made this landing page in Claude Design, so here is the actual workflow.

The short version: I did not ask for a full landing page upfront. I gave it the ICP, gave it reference sites that already hook me, forced it to generate multiple hero directions, then kept narrowing the visual hook.

![The end result](assets/iterate/01-end-result.png)

**TL;DR**

1. Pasted the ICP and product screenshots into Claude Design
2. Added reference sites for the vibe/structure, like [superset.sh](http://superset.sh) and [code.visualstudio.com](http://code.visualstudio.com)
3. Asked for 3 different hero variants instead of one design
4. Picked the strongest direction and iterated only on the hook
5. Kept removing anything that did not support the core message: Claude/Codex + Markdown + multi-file diffs

---

The product is Flashtype, a Markdown editor for people working with Claude, Codex, Claude Code, ChatGPT, or other AI agents on local files.

The core ICP was basically:

> People using AI agents to collaborate on local Markdown files, docs, notes, wikis, or project workspaces. They want to edit documents with agents while still getting diffing and version control.

Full ICP is here if useful: [icp.md](https://github.com/opral/flashtype/blob/12c64994daaca9f3cbbee5021191fab94a706c67/icp.md)

## Step 1: Do not start with the full page

I started by asking Claude Design for three hero directions.

This was important. If the hero does not hook, the rest of the landing page does not really matter.

Option 1 was the obvious winner.

Why it worked:

- It said what the product actually is
- It showed Claude/Codex in the context of the product
- It made the diffing value visible immediately
- It avoided vague AI landing-page copy like "agents write, you review"

This is the first direction Claude came back with:

![First result](assets/iterate/02-first-result.png)

The big lesson here: feed Claude the ICP and reference sites that already work for that persona. The better the context, the less generic the output.

## Step 2: Make the visual hook painfully obvious

After the first version, the app screenshot was too busy and the page was not popping enough.

So I followed up with something much more specific:

- Include Claude and Codex as prominent logos
- Show a file picker on the left, so it feels like a workspace across multiple files
- Remove tabs from the mock screenshot
- Keep the screenshot focused on the real "want that" moment: Claude, multiple files, diffs
- Say "Markdown editor", not "document editor"

That got it much closer:

![Second result](assets/iterate/03-second-result.png)

Small copy note: "Markdown editor" worked way better than "document editor" here. It is more specific, and it speaks to the actual user.

## Step 3: Stop when the hook is obvious

Final pass was mostly about making the page more direct:

- Put Claude/Codex into the headline
- Make the logos bigger
- Simplify the app crop
- Add proper CTAs
- Stop trying to show every feature

Final version:

![Third result](assets/iterate/04-third-result.png)

At that point, the hero had the three things I wanted people to notice instantly:

- Claude/Codex
- Markdown workspace
- Diffs

That was enough. More detail would probably have made it worse.

## Takeaway

Claude Design got much better once I stopped treating it like "make me a landing page" and started treating it like an iteration partner.

The useful pattern was:

1. Give it the ICP
2. Give it references that already work
3. Ask for multiple directions
4. Pick the strongest one
5. Iterate on the hook, not the whole page

Also, some of the first options were bad. Option 2 was honestly kind of slop. But option 1 had the right idea immediately, and that was enough to build on.

PS: Access to Fable 5 definitely helped. I am using Opus 4.8 to iterate on the design now and do not feel much regression, maybe because it already has all the context.

Patch

*** Begin Patch
*** Update File: /private/tmp/flashtype-replay-smoke/replay-smoke.md
@@
 **TL;DR**
 
-1. Pasted the ICP and product screenshots into Claude Design
-2. Added reference sites for the vibe/structure, like [superset.sh](http://superset.sh) and [code.visualstudio.com](http://code.visualstudio.com)
-3. Asked for 3 different hero variants instead of one design
-4. Picked the strongest direction and iterated only on the hook
-5. Kept removing anything that did not support the core message: Claude/Codex + Markdown + multi-file diffs
+1. I gave Claude Design context first: who the product is for, screenshots, and a few landing pages I liked.
+2. I asked for 3 different hero ideas instead of one full landing page.
+3. I picked the best direction and kept improving only the first-screen hook.
+4. I made the page focus on the obvious value: Claude/Codex working with Markdown files and showing diffs.
+5. I removed anything that made the screenshot or headline harder to understand.
*** End Patch

Diff is shown as removed at the bottom? Question is: Is this a bug/limitation in the lix md plugin or html diff? or both?

Expected behavior is to only see the paragraphs as inline diff change