Designers, stop wasting time on mocks that get tossed. AI can whip up rough wireframes, logos, and landing pages in seconds. It’s not a threat; it’s 80% of the groundwork before you start.
Here's how to use AI for design:
- Component-level: Generate UI elements like buttons or nav bars.
- Page-level: Create full HTML landing pages from prompts.
- Brand-level: Build complete brand kits with colors and typography.
Component-Level
Use local LLMs to make clean Tailwind CSS components in Python:
import requests
import json
def generate_ui_component(description: str, framework: str = "tailwind", style: str = "modern") -> str:
system = f"Generate a {framework} component. Style: {style}."
try:
resp = requests.post("http://localhost:11434/api/generate", json={"model": "llama3.2:3b", "prompt": description, "system": system})
return resp.json()["response"].strip()
except:
return generate_fallback_component(description, framework)
def generate_fallback_component(description: str, framework: str) -> str:
return f"""<div class="component p-6 rounded-xl bg-white shadow-md border border-gray-100">
<h3 class="text-xl font-semibold text-gray-900 mb-2">{description}</h3>
<p class="text-gray-500 text-sm">Generated component placeholder</p>
<button class="mt-4 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
Get Started
</button>
</div>"""
components = {
"hero": generate_ui_component("hero section with headline, subtext, and CTA button"),
"pricing_card": generate_ui_component("pricing card with three tiers: Starter, Pro, Enterprise"),
"feature_grid": generate_ui_component("features grid showing 6 product features with icons"),
"testimonial": generate_ui_component("testimonial section with avatar, name, company, and quote"),
"cta_banner": generate_ui_component("call-to-action banner with gradient background")
}
for name, html in components.items():
print(f"Generated {name}: {len(html)} chars")
Full Landing Page
Generate a complete landing page from product details:
def generate_landing_page(product_name: str, tagline: str, features: list, price: str) -> str:
color_schemes = {
"blue": {"primary": "#3B82F6", "secondary": "#1D4ED8", "accent": "#DBEAFE"},
"green": {"primary": "#10B981", "secondary": "#059669", "accent": "#D1FAE5"}
}
colors = color_schemes["blue"]
features_html = "\n".join([f"""<div class="feature-card"><h3>{feat}</h3></div>""" for feat in features])
html = f"""
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{product_name} — {tagline}</title>
<style>
* {{ margin: 0; padding: 0; box-sizing: border-box; }}
body {{ font-family: system-ui, -apple-system, sans-serif; color: #111827; }}
.hero {{
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(135deg, {colors['primary']} 0%, {colors['secondary']} 100%);
color: white;
}}
.cta-btn {{
font-weight: 700; text-decoration: none;
}}
.features h2 {{ text-align: center; margin-bottom: 3rem; }}
.feature-card {{
background: white;
border-radius: 1rem;
padding: 1.5rem;
transition: box-shadow 0.2s;
}}
.feature-card:hover {{ box-shadow: 0 4px 20px rgba(0,0,0,0.08); }}
.bottom-cta h2 {{ font-size: 2rem; margin-bottom: 1rem; }}
.bottom-cta .cta-btn {{ background: {colors['primary']}; color: white; }}
</style>
</head>
<body>
<section class="hero">
<h1>{product_name}</h1>
<p>{tagline}</p>
<a href="#" class="cta-btn">Download Now</a>
</section>
<section class="features">
<h2>What's Included</h2>
{features_html}
</section>
<section class="bottom-cta">
<h2>Ready to build faster?</h2>
<a href="#" class="cta-btn">Download Now →</a>
</section>
</body>
</html>"""
with open("landing.html", "w") as f:
f.write(html)
print(f"Landing page generated: landing.html")
return html
page = generate_landing_page(
product_name="Video Workspace",
tagline="30 minutes of footage → 3 TikToks in 3 minutes. Fully automated.",
features=[
"YOLO-powered action detection",
"Whisper word-level captions",
"Auto-cut & highlight extraction",
"Multi-platform export (TikTok, Reels, Shorts)",
"Thumbnail AI generation",
"Batch processing pipeline"
],
price="$97"
)
Brand Kit
Generate a complete brand kit:
def generate_brand_kit(brand_name: str, industry: str, personality: str = "modern, trustworthy, technical") -> dict:
industry_hues = {
"tech": 210,
"health": 145,
"finance": 220,
"creative": 270,
"food": 25,
"education": 195,
"fitness": 15
}
base_hue = industry_hues.get(industry.lower(), 210)
brand_kit = {
"name": brand_name,
"industry": industry,
"personality": personality,
"colors": {
"primary": hsl_to_hex(base_hue, 80, 52),
"primary_dark": hsl_to_hex(base_hue, 80, 38),
"primary_light": hsl_to_hex(base_hue, 80, 94),
"secondary": hsl_to_hex((base_hue + 30) % 360, 70, 48),
"accent": hsl_to_hex((base_hue + 180) % 360, 75, 55)
},
"typography": {
"heading_font": "Inter",
"body_font": "Inter",
"mono_font": "JetBrains Mono"
}
}
def hsl_to_hex(h, s, l):
r, g, b = colorsys.hls_to_rgb(h/360, l/100, s/100)
return "#{:02X}{:02X}{:02X}".format(int(r*255), int(g*255), int(b*255))
css_vars = ":root {\n"
for key, value in brand_kit["colors"].items():
css_vars += f" --color-{key.replace('_', '-')}: {value};\n"
css_vars += "}"
brand_kit["css_variables"] = css_vars
return brand_kit
kit = generate_brand_kit("NEPA AI", "ai", "bold, technical, forward-thinking")
print(json.dumps(kit, indent=2))
with open("brand-kit.css", "w") as f:
f.write(kit["css_variables"])
print("Brand kit CSS saved.")
Export to Figma
Export the brand kit to Figma:
def brand_kit_to_figma_tokens(brand_kit: dict) -> dict:
return {
"global": {
"colors": {name: {"value": value, "type": "color"} for name, value in brand_kit["colors"].items()},
"fontSizes": {name: {"value": value, "type": "fontSizes"} for name, value in brand_kit["typography"]["sizes"].items()}
}
}
figma_tokens = brand_kit_to_figma_tokens(kit)
with open("figma-tokens.json", "w") as f:
json.dump(figma_tokens, f, indent=2)
print("Figma tokens exported: figma-tokens.json")
Get NEPA AI Design Studio Workspace for all this and more.
