Request for AI guidance documentation.

[dianepettipas]

I arrived here when I clicked to give feedback for the WebStudio AI that is currently in Alpha.

I'm having a heck of a time trying to figure out what language to use for the AI to actually listen. Me and ChatGPT plus have been trying to just get two images to stagger.

Nothing I try accomplished this simple design. I'm trying to recreate the section in the image.

I've tried SO many prompts... I've tried using CSS terms... I'm just not getting anywhere.

Example prompts:
PROMPT:
In the left column, keep the container set to position: relative. Set the top image to position: relative and z-index: 2, without changing its size or placement. Set the bottom image to position: absolute, top: 30%, left: -20%, and z-index: 1, without changing its size.

The prompt above was the closest I got - but this was still very wrong.

PROMPT:
In the left column, place the two images in a container set to position: relative. Set the top image to position: relative, width: 70%, and z-index: 2. Then set the bottom image to position: absolute, width: 70%, top: 50%, left: 50%, transform: translate(-50%, -50%), and z-index: 1.

I even tried:
Keep both images the size they are. Bring the bottom image up so it covers 30% of the top image. Then shift the bottom image 50% to the right so they are staggered diagonally.

I realized early on that it's VERY easily overwhelmed and sometimes won't produce anything at all. But even when trying to take small steps, the results are difficult to decipher.

Can we get guidance documentation? How many instructions can we use in one prompt? what is it's limit? Is there language we should be using? Is there a prompt template you can provide? Or a trained GPT that understands it's limits and particularities?

[kof]

This will need to wait until we switch to newer models and see what works