Remix.run Logo
fluidcruft 2 days ago

It's now got everything close after adding this final prompt:

    We are very close. The footer is positioned in roughly the correct location
    but the fonts, font sizes, font color and line spacings are all slightly
    off.
This took quite a while and it build a few more tools to get there. And this was fine from a distance but it was using a san-serif when the screenshot has a serif etc. So I decided to push. From here it got very messy...

One of the issues is that Claude's text detection was getting tripped up by writing scripts using RGB space instead of something more hue-aware. It knew the text was red but was trying to isolate it by just looking at the red channel. But the grey dots from the background show up bright in the red channel so Claude would think those were center dots between the links that needed to be reproduced in the text. I gave it a hint:

    I think dots from the background image are causing issues. Are you detecting the text
    by looking only at the red channel in RGB space? The red channel will be bright on 
    white pixels in RGB. You could try using hue to separate text from background or use
    distance from the target RGB value.
Claude decided to switch to HSV space. But it took quite a bit of effort to keep Claude remembering to use HSV because tools it had already written were still RGB and not updated (as were intermediate images that were not updated). Then it would try to step back and get a big picture as a sanity check and "discover" it had missed the dots that are obviously there. And when you would tell it there are no dots, you get the "You're absolutely right! They're vertical bars!" So it was a struggle. This is the closest I got:

https://imgur.com/a/79Iv1jO

Again, the top image stuff was done in the first shot with the prompt in the first one. Everything else has been about the footer. Claude has been writing a lot of clever scripts to measure font metrics and pick fonts etc, but it keeps falling over those dots. I could probably get it to work better with adding directives for text handling to CLAUDE.md and nuking context and some of the scripts it created.

thecr0w 2 days ago | parent [-]

ha this is awesome. I'm going to link this comment in the post. Great work. lmk if you end up pushing it up to github.