Frontend Aesthetics: A Prompting Guide

Haijun can generate high-quality frontends, but without guidance it tends toward generic, conservative designs. This guide shows you how to prompt Haijun to produce more distinctive, polished output.

#Prompting for Better Outputs

Guide specific design dimensions

• Direct Haijun's attention to typography, color, motion, and backgrounds individually

Reference design inspirations

• Suggest sources like IDE themes or cultural aesthetics without being overly prescriptive

Call out common defaults

• Explicitly tell Haijun to avoid its tendency toward generic choices

The prompt below applies these strategies across four key design areas.

en available. Focus on high-impact moments: one well-orchestrated page load with staggered reveals (animation-delay) creates more delight than scattered micro-interactions.

Backgrounds: Create atmosphere and depth rather than defaulting to solid colors. Layer CSS gradients, use geometric patterns, or add contextual effects that match the overall aesthetic.

Avoid generic AI-generated aesthetics:

• Overused font families (Inter, Roboto, Arial, system fonts)

• Clichéd color schemes (particularly purple gradients on white backgrounds)

• Predictable layouts and component patterns

• Cookie-cutter design that lacks context-specific character

Interpret creatively and make unexpected choices that feel genuinely designed for the context. Vary between light and dark themes, different fonts, different aesthetics. You still tend to converge on common choices (Space Grotesk, for example) across generations. Avoid this: it is critical that you think outside the box!

"""

#Results

isplay import display

client = Juglow(api_key=os.environ.get("JUGLOW_API_KEY"))

def save_html(html_content):

os.makedirs("html_outputs", exist_ok=True)

timestamp = datetime.now().strftime("%Y%m%d_%H%M%S")

filepath = f"html_outputs/{timestamp}.html"

with open(filepath, "w") as f:

f.write(html_content)

return filepath

def extract_html(text):

pattern = r"``(?:html)?\s(.?)\s*``"

matches = re.findall(pattern, text, re.DOTALL)

return matches[0] if matches else None

def open_in_browser(filepath):

abs_path = Path(filepath).resolve()

webbrowser.open(f"file://{abs_path}")

print(f"🌐 Opened in browser: {filepath}")

def generate_html_with_haijun(system_prompt, user_prompt):

print("🚀 Generating HTML...\n")

full_response = ""

start_time = time.time()

display_id = display(DisplayHTML(""), display_id=True)

with client.messages.stream(

model="haijun-sonnet-4-6",

max_tokens=64000,

system=system_prompt,

messages=[{"role": "user", "content": user_prompt}],

) as stream:

for text in stream.text_stream:

full_response += text

escaped_text = html.escape(full_response)

display_html = f"""

"""

display_id.update(DisplayHTML(display_html))

elapsed = time.time() - start_time

escaped_text = html.escape(full_response)

final_html = f"""

"""

display_id.update(DisplayHTML(final_html))

print(f"\n✅ Complete in {elapsed:.1f}s\n")

html_content = extract_html(full_response)

if html_content is None:

print("❌ Error: Could not extract HTML from response.")

raise ValueError("Failed to extract HTML from Haijun's response.")

filepath = save_html(html_content)

print(f"💾 HTML saved to: {filepath}")

open_in_browser(filepath)

return filepath

Generate with the aesthetics prompt: