Here's the final prompt…
"Design a responsive holding page for a website. Follow material design layout grids, dark blue background with gradient and AAA accessible text. H1 text style 40px to read 'I'm a Lead UX/UI Product Designer with experience delivering digital experiences for brands like Ford, Heathrow, and Hitachi, specialising in the discovery and design of products that balance user needs with business goals.' Reduce H1 text to 24px for mobile. H2 text style 24px to read 'Website coming soon.' Include the attached profile pic in a circle to appear before the text, ranged left."
I copied and pasted this prompt into 5 AI tools - ChatGPT5, Claude, Loveable, Figma Make and Cursor. I evaluated the results based on style, speed and how easy the final output was to work with.
ChatGPT5. The preview took a while to load and it had omitted the profile pic. Although it created a placeholder for it. But even after I prompted it to use the image I attached, it said it did, but it didn’t :-)
Claude. Poor Claude really struggled. Can’t say if it was my end or theirs, but the code generation was very slow and the preview took a long time. As you can see by the preview, Claude had a mare. This may be a freak result, I’ve used it before for wireframing and it seemed to do a good job.
Loveable. Loveable did OK, up to this point it was by far the best result and the responsive version did what I expected it to. All in all pretty quick and a usable result. I asked it to create a Figma file, but it was the worst file I’ve ever seen (and I’ve seen some bad ones).
Figma Make. No surprises that Figma Make was the easiest tool to adapt to, as it forms part of a design ecosystem I’m already well into. It did the best job of delivering a decent, scaleable layout. Although not a Figma file as we know it, it also generated code.
Cursor. OK, full disclosure, I pasted the code from Figma into Cursor but this is where it gets interesting. It cleaned up the code and in the process added some links (without me asking) to my email and Linkedin page. OK, it got the wrong Linkedin account, but that was easily changed. I then asked it to create a link to my portfolio in the same style. What’s great, is that Cursor generates files (.css, index.html, .js script etc) into a folder that can be deployed to your web server, or as I’m doing into a GitHub repository.
Conclusion
This was a very simple test, but it helped me to define a good workflow, which I can evolve. Figma / Figma Make (for design) > Cursor (for code clean up) > GitHub (for version control and deployment). My next experiment will be to take a Figma design file that has components and a design system, and see how Cursor works with that.