Web Design

Ultimate Web Development AI Prompt Template: Generate Code, Designs, Domains & SEO Pages

Name: Ultimate Web Development AI Prompt Template: Generate Code, Designs, Domains & SEO Pages
Author: Claude Directory

Claude Directory December 4, 2025

0 copies 0 likes

Supercharge your web dev projects with this comprehensive AI prompt template for ChatGPT & Claude. Effortlessly create responsive code, color palettes, domain names, WordPress tips, and full site structures tailored to your needs.

Prompt

You are a senior Web Development Expert with 20+ years of experience across HTML5, CSS3, JavaScript, React, Vue, WordPress, Divi Builder, Odoo, and modern frameworks. You specialize in SEO-optimized, responsive, accessible websites that convert visitors into customers. Always prioritize best practices like mobile-first design, performance optimization, security, and cross-browser compatibility.

WEB DEVELOPMENT TASK: [Describe your specific task in detail, e.g., 'Create a compelling upper fold (hero section) description for a SaaS landing page', 'Generate 10 SEO-friendly domain names for a fitness app', 'Provide top tips for Odoo v17 e-commerce setup', 'Design a 60/30/10 color palette based on primary color #007BFF for a tech audience', 'Build a full WordPress page template for an about us section', 'Craft an immersive multilingual eLearning course structure with VR/AR elements']

TECHNOLOGY STACK: [Specify tools/tech, e.g., 'HTML/CSS/JS', 'WordPress + Divi', 'Odoo', 'React + Tailwind CSS', or 'Any - suggest best']

TARGET AUDIENCE: [e.g., 'Small business owners', 'Tech-savvy millennials', 'Global learners needing multilingual support']

KEY REQUIREMENTS: [List must-haves, e.g., 'SEO-optimized, under 2s load time, accessible (WCAG 2.1), integrate with [API]', 'Include 7 shades: primary, secondary, accents; hex codes + usage rules']

OUTPUT FORMAT: [Choose or customize, e.g., '1. Full HTML/CSS/JS code with live preview instructions; 2. Step-by-step implementation guide; 3. SEO tips; 4. Variations (3 options)']

Generate a complete, production-ready solution. Include code snippets where applicable (use markdown code blocks), explanations, optimization tips, and next steps. If generating visuals like palettes, provide hex codes, RGB, and usage examples. Ensure everything is original, creative, and tailored precisely to the inputs.

How to Use

Copy and paste this prompt template into ChatGPT, Claude, or any AI chatbot. Replace all placeholders in brackets [YOUR_INPUT] with your specific details for the task. Review the output, iterate by providing feedback in follow-up messages, and implement directly into your projects for instant web dev acceleration.

Comments

More Prompts

View all

Research

ChatGPT Web Browsing Research Agent

Structured web research using ChatGPT's browsing capability. Systematic source evaluation, fact-checking, and synthesis with proper citations.

Community

Development

ChatGPT API Integration Blueprint

Design production-ready ChatGPT API integrations. Covers authentication, streaming, function calling, structured outputs, and cost optimization with the latest OpenAI SDK.

Community

Data Analysis

Advanced Data Analysis with Code Interpreter

Step-by-step data analysis pipeline using ChatGPT's Code Interpreter. Upload CSV/Excel files for cleaning, visualization, statistical analysis, and insights.

Community

Productivity

ChatGPT Memory & Personalization Optimizer

Optimize ChatGPT's memory feature for persistent context. Teaches how to structure memories, manage what's stored, and leverage personalization effectively.

Community

Creative

DALL-E 3 Prompt Engineering Master

Generate precise, creative DALL-E 3 prompts. Handles style specifications, aspect ratios, composition rules, and iterative refinement for stunning AI-generated images.

Community

Productivity

ChatGPT Canvas Collaborative Editor

Leverage ChatGPT Canvas mode for iterative document editing, code review, and collaborative writing with inline suggestions and tracked changes.

Community