This is what a template prompt looks like. Copy this JSON, add your content into the marked fields, then paste the whole thing into Claude, GPT-4, or any LLM. It will output a complete, layout-safe HTML page.
{
"prompt_version": "2.0",
"template_id": "product-one-pager",
"llm_instruction": "You are an expert frontend developer. Generate a complete, valid HTML file using the content, design tokens, and section schema below. Use only inline CSS — no external dependencies except Google Fonts. Preserve the CSS variable system exactly. Do not invent content. Follow section order strictly.",
"design_tokens": {
"brand_color": "#D0021B",
"background": "#0a0a0a",
"text_color": "#f8f6f1",
"font_heading": "Bebas Neue",
"font_body": "Space Mono",
"theme": "dark",
"border_radius": "0px",
"max_width": "1100px"
},
"page_meta": {
"title": "Your Product Name",
"description": "SEO description here"
},
"sections": [
{
"type": "hero",
"layout": "split",
"headline": "Your Bold Headline Here",
"subheadline": "One sentence describing your product value.",
"cta_primary": { "label": "Get Started", "href": "#pricing" },
"cta_secondary": { "label": "See Demo", "href": "#demo" },
"badge": "New — Version 2.0"
},
{
"type": "features",
"layout": "grid-3",
"heading": "What You Get",
"items": [
{ "title": "Feature One", "description": "Short benefit description." },
{ "title": "Feature Two", "description": "Short benefit description." },
{ "title": "Feature Three", "description": "Short benefit description." }
]
},
{
"type": "pricing",
"heading": "Simple Pricing",
"tiers": [
{ "name": "Starter", "price": "$19", "description": "For individuals", "cta": "Buy Now", "featured": false },
{ "name": "Pro", "price": "$49", "description": "For teams", "cta": "Get Pro", "featured": true },
{ "name": "Agency", "price": "$149", "description": "Unlimited clients", "cta": "Buy Agency", "featured": false }
]
},
{
"type": "faq",
"items": [
{ "q": "Your question here?", "a": "Your answer here." }
]
}
],
"constraints": {
"no_frameworks": true,
"no_javascript_required": true,
"preserve_css_variables": true,
"mobile_responsive": true,
"max_external_fonts": 2
}
}