Back to Collection
⚡ Claude 3.5 Sonnet
verified safe

Semantic Single Page HTML Designer

By SR Prompts Board
•
June 5, 2026
•
4 min read
Semantic Single Page HTML Designer

Terminal Blueprint & Commands

Prompt Workbench

Select a tool tab to optimize prompt configurations automatically.

// Active target: ChatGPTUTF-8
Act as a High-Converting landing page architect. Task: Write a single-file, production-ready HTML landing page. Design & Structure Rules: 1. Use modern, premium visual styling (smooth dark theme, gradients, glowing buttons). 2. Implement responsive layout blocks (Hero, Features grid, Testimonial carousel, Pricing grid, FAQ Accordion, Footer). 3. Load aesthetic typography from Google Fonts (e.g. Inter, Outfit, or Space Grotesk). 4. Use inline SVG vector icons instead of loading heavy icon fonts. 5. Build custom CSS variables for easy branding colors (primary, accent, background). 6. Return the entire code inside a single code block. Product/Niche Details: [insert product name, description, features, and target audience]
Presets:

How to use with ChatGPT

Step 1: Setup Workspace

Navigate to chatgpt.com. Select the GPT-4o model option from the dropdown menu in the upper left corner to support reasoning.

Step 2: Paste & Formulate

Paste the copied prompt from above directly into the chat input bar. Customize placeholder text brackets (e.g. `[Subject]`) with your own inputs.

Step 3: Refine Results

If the output needs adjustments, follow up with feedback like: "Add more details on feature X" or "Make the tone slightly more formal".

Pro Tip for ChatGPT:ChatGPT responds best to roleplay constraints. If you customize the prompt, you can add: 'Adopt the style of Steve Jobs' at the beginning to force a specific formatting aesthetic and presentation style.
Advertisement

Editorial Insight

This page building template instructs the model to draft complete, single-file HTML sites with embedded design system rules, clean layouts, and zero external script dependencies.

Generates a complete, high-CTR single page HTML website with modern responsive grid layouts, embedded CSS gradients, Google Fonts, and SVG icons.

Calibrated Model Settings

Recommended EngineClaude 3.5 Sonnet
Aspect Parameter16:9
Temperature Values0.2 (deterministic coding) to 0.7 (creative scripting)
Token Length Limits2048 to 4096 tokens
Formatting DirectivesClean markdown formatted output code blocks

Expected Result Output

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>AI Blueprint - High CTR Landing Page</title> <style> :root { --primary: #7C3AED; --accent: #A3E635; --bg: #0B0B0F; } body { background-color: var(--bg); color: #fff; font-family: 'Inter', sans-serif; } </style> </head> <body> <!-- Complete Single Page Markup --> </body> </html>

Workflow Use Cases

Product LaunchQuick, high-CTR splash pages for SaaS apps or e-books.
Lead CaptureOptimized forms to capture email newsletters.
Portfolio ShowcaseSleek, single-page resume pages with interactive sections.

💡 Creator Tips & Variations

  • •Interactivity: Ask the model to code interactive Accordions for the FAQ section using details/summary tags.
  • •SEO Meta Tags: Instruct the model to generate semantic OpenGraph title, description, and canonical link tags in the head section.
  • •Tailwind CDN: You can specify Tailwind CDN loadout inside the header to write custom class names directly.

⚠️ Pitfalls & Mistakes to Avoid

  • •Leaving brackets empty without filling in your custom variables (e.g., submitting '[insert topic]' directly to the model).
  • •Not enforcing formatting limits, allowing the AI to generate long conversational intros and outros instead of clean, copyable code.
Advertisement

FAQ & Help

Q. Which AI model works best with this text template?

This prompt is optimized for advanced reasoning models like GPT-4o, Claude 3.5 Sonnet, and Gemini 1.5 Pro. It also works with smaller local models like Llama 3 but requires clear constraint enforcement.

Q. How do I prevent the model from generating conversational text?

Add a system rule: 'Do not write any introductory or concluding text. Return ONLY the raw formatted output.'

Explore Other Templates

Tailwind CSS Component Architect

Tailwind CSS Component Architect

Claude 3.5 Sonnet / GPT-4o

Inspect Blueprint →
Robust Python Automation Web Scraper

Robust Python Automation Web Scraper

GPT-4o / Claude 3.5 Sonnet

Inspect Blueprint →
Shell Automation Task Runner

Shell Automation Task Runner

GPT-4o / Claude

Inspect Blueprint →
Home
Prompts
Articles
Upcoming
About