If you really want to see what I was messing with email me. I’ll share on non public forums.

The reason for the post is that even without the actual website one should be able to envision the technique and how it may or may not work. Also if you look above recently I added links to the Claude.md for another thing I was working on for a friend that also had to solve this problem.

Just want to give people the tools to use ai well from my own findings

I am still trying to learn how to wrangle Claude properly, but I have this Claude.md[1] for that I used to make the website. In particular one of the last rules about using imageMagick for comparison.

I haven’t touched this website in a bit (waiting on client) so now I use playwright mcp for the screenshots and the browser interactions.

[1] https://github.com/panda01/hartwork-woocommerce-wp-theme/blo...

Here is the line from my Claude code to get something like this. Keep in mind I didnt use mcp for playwright with this particular implementation but it is my preferred method currently. Tha

CRITICAL - When implementing a feature based off of an image mockup, use google chrome from the applications folder set the browser dimensions to the width and height of the mockup, capture a screenshot, and compare that screenshot directly to the mockup with imagemagick. If the image is less than 90% similar go back and try and modify the code so that way the website matches the mockup closer. If a change you make makes the similarity go down, undo it, and try something else. be mindful the fonts will never be laid out exactly like the mockup, please use blur at a max of 10% to see if the images are closer matching. If you spend more than 10 cycles screen-shotting and comparing, stop and show the user how similar they are mentioning any problems

The more text the harder it becomes and it’s why we really need the blue because fonts are almost always rendered differently.

Yes ai can’t see, it only understands numbers. So tell it to use image magick to compare the screenshot to the actual mockup, tell it to get less than 5% difference and don’t use more than 20% blur. Thank me later.

I built a whole website in like 2 days with this technique.

Everyone seems to have trouble telling ai how to check its work and that’s the real problem imho.

Truly if you took the best dev in the world and had them write 1000 lines of code without stopping to check the result they would also get it wrong. And the machine is only made in a likeness of our image.

PS. You think Christian god was also pissed at how much we lie? :)

Comments URL: https://news.ycombinator.com/item?id=47501937

Points: 1

# Comments: 0

I’ll go first. My new favorite line in my Claude.md. Helps me get around any ambiguity I have with my llm about what is being built or understood by tasks.

CRITICAL: Always make detailed plan with sections for Analysis, specifications, to do list to achieve the spec, and a step by step manual testing strategy for any request a user makes. Always, even when "accept edits on", ask the user to confirm the plan in its entirety. If the user requests changes to any of the plan, make a new plan considering their requests and present it to the user. Never ever start editing files until the user has approved the plan without requesting changes to it. Do not consider the task done until all of the testing Manual Checking strategies successfully passes.

Comments URL: https://news.ycombinator.com/item?id=47465415

Points: 15

# Comments: 11

Thorough CLAUDE.md, that makes sure it checks the tests, lints the code, does type checks, and code coverage checks too. The more checks for code quality the better.

It’s just a bowling ball in th hands of a toddler, and needs to ramp and guide rails to knock down some pins. Fortunately we get more than 2 tries with code.

Comments URL: https://news.ycombinator.com/item?id=47125293

Points: 1

# Comments: 1

This even if their was a gain from watching others suffer, the lack of discipline, guidance, sternness, is way more detrimental than the positives of fearing the consequences

My favorite instruction is using component A as an example make component B

Clearly the comma thing is a bug, it's the lack of wanting to fix it actually that is a bit disheartening, and why I think it is a deadish repo

1 such bug, find a foreign language with commas in between numbers instead of periods, like Dutch(I think), and a lot of prices on the page. It’ll think all the numbers are relevant text.

And of course I tried to open a pr and get it merged, but they require tests, and of course the tests don’t work on the page Im testing. It’s just very snafu imho

This is just one more layer on top, and one more possible point of failure/frustration, as illustrated by this parent comment.

Comments URL: https://news.ycombinator.com/item?id=39898004

Points: 27

# Comments: 43