[erikw]

Very interesting that Fable took more creative liberties. Have you tried giving Fable the same task, but also specifying that it implement a pixel-perfect design? I think that I prefer the Fable implementation. I find the UI elements in the Fable implementation to have more contrast, which feels more usable to me. I also like how the right padding on the "Book Your Escape" CTA in the upper right matches the top and bottom padding, which I think is an improvement over the mockup.

[jjcm]

All of these are using a build skill which specifies rules for building it, requirements to create a pixel perfect implementation, and tooling to help in that process. Here's the build skill / instructions I pasted in to both of them:

> Create a web page implementation from the following instructions:

> https://diffui.ai/build/Spa_Booking_Experience_build.md?auth...

[hbcondo714]

> You are an elite frontend engineer and design-to-code specialist. The design image is the primary source of truth; your code is the translation layer. Do not reinterpret or "improve" the design into something generic — reproduce it faithfully.

Thank you for sharing this. I was just using OpenAI's Product Design plugin[1] to create designs but it just didn't reproduce it in code faithfully so will need to try this.

[1] https://openai.com/business/plugins/product-design/

[jjcm]

http://impeccable.style/ also just released their latest version which has some image->html conversion. They just released a couple days ago and haven't had a chance to try, but I suspect theirs is a bit more robust than mine for pure LLM instructions. Worth trying and comparing it with mine.