2026-03-22
Generate Design Mockups from Text Prompts with AI
Generate complete landing page wireframes, logo concepts, and UI mockups from text descriptions using AI. Export to Figma JSON, React components, or static HTML — no Photoshop required.
Designers spend hours on initial mockups that often get thrown out in the first client review. AI can generate a first pass — a rough wireframe, a landing page layout, a logo concept — in seconds. That's not a threat to designers; it's 80% of the groundwork done before the creative work starts.
This guide covers three levels of AI-assisted design generation:
- Component-level: Generate individual UI elements (buttons, cards, nav bars)
- Page-level: Generate full landing page HTML from a prompt
- Brand-level: Generate complete brand kits (colors, typography, logo variants)
Level 1: AI-Generated UI Components
Using a local LLM to generate clean Tailwind CSS components:
import requests
import json
import re
def generate_ui_component(
description: str,
framework: str = "tailwind", # tailwind, bootstrap, raw-css
style: str = "modern", # modern, minimal, bold, glassmorphism
model: str = "llama3.2:3b"
) -> str:
"""
Generate a UI component from a description using local LLM.
Returns HTML+CSS string.
"""
system = f"""You are a senior UI/UX developer. Generate clean, production-ready HTML components.
Framework: {framework}. Style: {style}.
Rules:
- Output ONLY the HTML component, no explanation
- Use semantic HTML5 elements
- Make it responsive
- Include hover states and transitions
- Use CSS custom properties for colors"""
try:
resp = requests.post(
"http://localhost:11434/api/generate",
json={
"model": model,
"prompt": f"Create a {description}",
"system": system,
"stream": False,
"options": {"temperature": 0.4}
},
timeout=30
)
return resp.json()["response"].strip()
except Exception:
# Fallback: return a basic template
return generate_fallback_component(description, framework)
def generate_fallback_component(description: str, framework: str) -> str:
"""Basic fallback component when LLM is unavailable."""
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>"""
# Generate common page components
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")
Level 2: Full Landing Page Generation
from pathlib import Path
import datetime
def generate_landing_page(
product_name: str,
tagline: str,
features: list,
price: str,
cta_text: str = "Get Started",
color_scheme: str = "blue",
output_path: str = "landing.html"
) -> str:
"""
Generate a complete landing page HTML from product specifications.
"""
color_schemes = {
"blue": {"primary": "#3B82F6", "secondary": "#1D4ED8", "accent": "#DBEAFE"},
"green": {"primary": "#10B981", "secondary": "#059669", "accent": "#D1FAE5"},
"purple": {"primary": "#8B5CF6", "secondary": "#7C3AED", "accent": "#EDE9FE"},
"orange": {"primary": "#F59E0B", "secondary": "#D97706", "accent": "#FEF3C7"},
}
colors = color_schemes.get(color_scheme, color_schemes["blue"])
features_html = "\n".join([
f"""<div class="feature-card">
<div class="feature-icon">{"⚡" if i % 3 == 0 else "🎯" if i % 3 == 1 else "🔥"}</div>
<h3>{feat}</h3>
</div>"""
for i, feat in enumerate(features)
])
html = f"""<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{product_name} — {tagline}</title>
<style>
:root {{
--primary: {colors['primary']};
--secondary: {colors['secondary']};
--accent: {colors['accent']};
}}
* {{ margin: 0; padding: 0; box-sizing: border-box; }}
body {{ font-family: system-ui, -apple-system, sans-serif; color: #111827; }}
/* Hero */
.hero {{
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
color: white;
text-align: center;
padding: 2rem;
}}
.hero h1 {{ font-size: clamp(2rem, 5vw, 4rem); font-weight: 800; margin-bottom: 1rem; }}
.hero p {{ font-size: 1.25rem; opacity: 0.9; max-width: 600px; margin-bottom: 2rem; }}
.price-badge {{
background: rgba(255,255,255,0.2);
backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.3);
border-radius: 9999px;
padding: 0.5rem 1.5rem;
font-size: 1.1rem;
margin-bottom: 1.5rem;
}}
/* CTA Button */
.cta-btn {{
display: inline-block;
background: white;
color: var(--primary);
padding: 1rem 2.5rem;
border-radius: 9999px;
font-weight: 700;
font-size: 1.1rem;
text-decoration: none;
transition: transform 0.2s, box-shadow 0.2s;
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}}
.cta-btn:hover {{ transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.3); }}
/* Features */
.features {{ padding: 5rem 2rem; max-width: 1100px; margin: 0 auto; }}
.features h2 {{ text-align: center; font-size: 2rem; margin-bottom: 3rem; color: var(--secondary); }}
.features-grid {{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
}}
.feature-card {{
background: white;
border: 1px solid #E5E7EB;
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); }}
.feature-icon {{ font-size: 2rem; margin-bottom: 0.75rem; }}
.feature-card h3 {{ font-size: 1rem; font-weight: 600; color: #374151; }}
/* Social proof */
.social-proof {{
background: var(--accent);
padding: 3rem 2rem;
text-align: center;
}}
.stat {{ display: inline-block; margin: 0 2rem; }}
.stat .number {{ font-size: 2.5rem; font-weight: 800; color: var(--secondary); }}
.stat .label {{ font-size: 0.9rem; color: #6B7280; }}
/* Bottom CTA */
.bottom-cta {{
padding: 5rem 2rem;
text-align: center;
background: #F9FAFB;
}}
.bottom-cta h2 {{ font-size: 2rem; margin-bottom: 1rem; }}
.bottom-cta .cta-btn {{ background: var(--primary); color: white; }}
.bottom-cta .cta-btn:hover {{ background: var(--secondary); }}
</style>
</head>
<body>
<section class="hero">
<div class="price-badge">Now just {price}</div>
<h1>{product_name}</h1>
<p>{tagline}</p>
<a href="#" class="cta-btn">{cta_text}</a>
</section>
<section class="features">
<h2>What's Included</h2>
<div class="features-grid">
{features_html}
</div>
</section>
<section class="social-proof">
<div class="stat">
<div class="number">2,000+</div>
<div class="label">Lines of Code</div>
</div>
<div class="stat">
<div class="number">40+</div>
<div class="label">Methods Included</div>
</div>
<div class="stat">
<div class="number">100%</div>
<div class="label">Local / Private</div>
</div>
</section>
<section class="bottom-cta">
<h2>Ready to build faster?</h2>
<p style="color: #6B7280; margin-bottom: 1.5rem;">Join developers who ship AI features in days, not months.</p>
<a href="#" class="cta-btn">{cta_text} →</a>
</section>
<!-- Generated by NEPA AI Design Studio Workspace | {datetime.date.today()} -->
</body>
</html>"""
with open(output_path, "w") as f:
f.write(html)
print(f"Landing page generated: {output_path}")
return html
# Generate a landing page
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",
cta_text="Download Now",
color_scheme="blue",
output_path="video-workspace-landing.html"
)
Level 3: Brand Kit Generation
import colorsys
import json
def generate_brand_kit(
brand_name: str,
industry: str,
personality: str = "modern, trustworthy, technical"
) -> dict:
"""
Generate a complete brand color + typography kit.
Returns a JSON-serializable brand config.
"""
# Industry → color hue mapping (heuristic)
industry_hues = {
"tech": 210, # Blue
"health": 145, # Green
"finance": 220, # Dark blue
"creative": 270, # Purple
"food": 25, # Orange
"education": 195, # Teal
"fitness": 15, # Red-orange
"ai": 200, # Cyan-blue
}
base_hue = industry_hues.get(industry.lower(), 210)
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))
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),
"neutral_900": "#111827",
"neutral_600": "#4B5563",
"neutral_100": "#F3F4F6",
"white": "#FFFFFF",
},
"typography": {
"heading_font": "Inter",
"body_font": "Inter",
"mono_font": "JetBrains Mono",
"sizes": {
"h1": "3.5rem",
"h2": "2.25rem",
"h3": "1.5rem",
"body": "1rem",
"small": "0.875rem"
},
"weights": {"regular": 400, "medium": 500, "semibold": 600, "bold": 700, "extrabold": 800}
},
"spacing": {"xs": "0.25rem", "sm": "0.5rem", "md": "1rem", "lg": "1.5rem", "xl": "2rem", "2xl": "3rem"},
"border_radius": {"sm": "0.375rem", "md": "0.75rem", "lg": "1.25rem", "full": "9999px"},
"css_variables": ""
}
# Generate CSS custom properties
css_vars = ":root {\n"
for key, value in brand_kit["colors"].items():
css_vars += f" --color-{key.replace('_', '-')}: {value};\n"
for key, value in brand_kit["typography"]["sizes"].items():
css_vars += f" --text-{key}: {value};\n"
css_vars += "}"
brand_kit["css_variables"] = css_vars
return brand_kit
# Generate a brand kit
kit = generate_brand_kit("NEPA AI", "ai", "bold, technical, forward-thinking")
print(json.dumps(kit, indent=2))
# Save CSS variables
with open("brand-kit.css", "w") as f:
f.write(kit["css_variables"])
print("Brand kit CSS saved.")
Exporting to Figma
def brand_kit_to_figma_tokens(brand_kit: dict) -> dict:
"""
Convert brand kit to Figma Tokens / Style Dictionary format.
Import this JSON into Figma using the Tokens Studio plugin.
"""
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()
},
"borderRadius": {
name: {"value": value, "type": "borderRadius"}
for name, value in brand_kit["border_radius"].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")
The Design Studio Workspace automates all of this: landing page generation, logo creation, icon set generation, wireframing, brand kit assembly, and Figma/React/Vue/HTML export — 67 methods across the full design production workflow.