type
{ "type": "anime-style livestream thumbnail", "character": { "hair": "{argument name=\"hair color\" default=\"short silver hair with cyan underlights\"}", "eyes": "large bright blue", "outfit": "white col
AI-generated demonstration · #095 · UI & UX Design · 16/9

Prompt
{
"type": "anime-style livestream thumbnail",
"character": {
"hair": "{argument name=\"hair color\" default=\"short silver hair with cyan underlights\"}",
"eyes": "large bright blue",
"outfit": "white collared shirt, black tie with silver accents, black jacket, black beret with a large blue heart jewel, blue jewel brooch, black choker",
"pose": "smiling gently, looking at viewer, positioned on the right side"
},
"background": "pastel blue with white clouds, sparkles, stars, small bows, and a subtle grid pattern",
"typography_and_ui": {
"top_left_speech_bubble": "まったりおしゃべりしよ〜♡",
"main_title": {
"text": "{argument name=\"main title\" default=\"雑談配信\"}",
"style": "large, soft blue gradient, white outline, decorated with small hearts, positioned on the middle-left"
},
"bottom_left_badges": {
"count": 3,
"style": "white pill-shaped buttons with a purple heart icon on the left",
"labels": [
"{argument name=\"badge 1 text\" default=\"初見さん〇\"}",
"{argument name=\"badge 2 text\" default=\"ポイント回収〇\"}",
"{argument name=\"badge 3 text\" default=\"ROM〇\"}"
]
},
"bottom_right_cloud_bubble": "気軽にコメントしてね♡"
}
}Style Breakdown
Use spacing, type scale, and a clear primary action to establish hierarchy. Keep labels short and use invented account names and neutral navigation.
Recommended Parameters / Aspect Ratio
Start with the template aspect ratio 16/9 to preserve the demonstrated framing. Use a standard preview resolution first, then increase output size after the composition works. Model-specific steps and guidance values are not supplied for this example; use your selected provider's defaults and adjust one setting at a time. Results vary between models.
Review Your Result
Review button alignment, text legibility, and repeated component spacing at full size. A generated interface is a visual concept, not working software.
Use Case Scenarios
Use this exercise for early wireframe discussions or visual direction boards. Rebuild the approved layout in accessible HTML before testing it with users.
Templates demonstrate visual techniques. They are not evidence of real events or endorsements. Use fictional subjects and authorized materials. Report concerns to [email protected].