HTML/CSS via prompting

[EpharGy]

I'm away from home still for a while longer so haven't had a chance to update to the latest changes (i cant just update via ST due to my changes i've made so will need to wait til i'm home as it's not letting me remote in atm).

Anyways, i've been having fun integrating this into Immersive HTML/CSS type prompting directly into Silly Tavern. It's very reliant on the strength of the LLM and the image gen model.
LLM: GLM5 Thinking
Model: Illustrious (amthrustsNSFWPINK_alchemyMix176)
No Character Lora
No Character Card/Lorebook info for the characters.

Some the the text stuff is hallucinated, this would probably be mitigated if i had a a character card for the character.

Prompt:
I'm going to list a character and a franchise, your job is to:

1. Give a quick 1 paragraph character profile

• 1-3 sentences only, this is to ensure you are getting the right character/franchise details and doesn't need to be a complete bio

2. Then perform an Image Injection for the character

• you'll need to add in other tags to create an appropriate image. I'd like a minimum of 3 images, 1 close up Portrait, 1 full body shot, 1 dynamic shot.
• I'd also like additional full body/dynamic shots (max of 2 extra), if the character has other iconic outfits that we should represent. (if there are none that you can think of we don't need extra.)

3. Use immersive html/css

• The Image Injection extension automatically switches the block marker and displays the image url in it's place, so you should build/apply html or css with that in mind (ie the "block" becomes your image url).
• Use colour theory and create something that is thematic for the subject.
• Ensure any label elements will not be covered by the images (images should be the bottom layer), ie Z Index.
• Ensure you use a Flexible layout that wraps gracefully on different screen sizes
• You'll likely need to apply some width/height reszing to get images to fit where you want them, but the output image sizes are below.
  here are the sizes. (you'll likely want to apply width/height resizing, not everything needs to be in large size)
  • Portrait: 832 x 1216
  • Square: 1024 x 1024
  • Landscape: 1216 x 832
  • Cinema: 1344 x 704
• Get fancy and try to be thematic to the subject/franchise/theme, ie side by side images, unleash your creativity.

Then on next message:
Character, Franchise
Any details i know the LLM gets wrong.