Replica Website

Website layout and style replication

I created a way to express a website layout and provided it as a prompt to AI, and the results are quite stable. Additionally, I tested a few models on the case where only styles and colors were replicated.

[Vibe Coding]

Related links: This article's

Refly Canvas

This was originally a test of AI rewriting website styles, but I would like to share a layout method I created.

I initially intended to describe the layout of the webpage like the green memo above. It is understandable for AI, but reviewing the many results was quite troublesome for me.

Therefore, I changed to the structure tested in the document below and did not look for any ready-made formats; I simply used brackets to mark it. Those who understand HTML might immediately understand it.

I referred to some Emmet rules, and I estimate that converting to Emmet’s writing style could work, but I haven't tried it, as Emmet is more suitable for writing on the fly.

The surprising part is that for someone like me who created this format, AI understood it very smoothly, and the generated layout meets the requirements.

https://refly.ai/share/canvas/can-ubbxitkzxgdwjsj0bo2g2g2s