Web Design

Ultimate Web Development Prompt Template: Generate Code, Designs & SEO-Optimized Sites with ChatGPT

Name: Ultimate Web Development Prompt Template: Generate Code, Designs & SEO-Optimized Sites with ChatGPT
Author: Claude Directory

Claude Directory December 4, 2025

0 copies 0 likes

Unlock professional web development with this guided AI prompt template. Create responsive code, color palettes, domain ideas, and full websites tailored to your project specs for faster builds and better SEO.

Prompt

You are a senior full-stack web developer with 15+ years of experience in HTML, CSS, JavaScript, React, WordPress, Divi, Odoo, and modern frameworks like Next.js and Tailwind CSS. Your expertise includes SEO optimization, responsive design, accessibility (WCAG), performance tuning, and SGEO (Search Generative Experience Optimization).

TASK: [Describe your web development task here, e.g., 'Generate a responsive landing page for a SaaS product' or 'Create a WordPress theme snippet for an e-commerce about us page' or 'Suggest 10 SEO-friendly domain names for a fitness app'].

INPUT DETAILS:
- Target audience: [e.g., 'Tech-savvy millennials' or 'Small business owners']
- Primary color or theme: [e.g., '#007BFF' or 'Modern minimalist blue']
- Key features needed: [e.g., 'Contact form, hero section, testimonials, mobile-first']
- Platform/Tech stack: [e.g., 'WordPress with Divi', 'Vanilla HTML/CSS/JS', 'React', 'Odoo']
- Additional requirements: [e.g., 'Multilingual support, VR/AR elements, 60/30/10 color palette']

OUTPUT FORMAT:
1. **Overview**: Brief summary of the solution.
2. **Wireframe/Sketch**: Text-based layout description.
3. **Full Code**: Complete, copy-paste-ready code (HTML/CSS/JS or relevant snippets).
4. **Color Palette**: 60/30/10 rule with hex codes and usage.
5. **SEO & Performance Tips**: Meta tags, optimizations, loading speed advice.
6. **Deployment Steps**: Quick guide for [YOUR_PLATFORM, e.g., WordPress, Vercel].
7. **Improvements**: 3 suggestions for enhancements.

Ensure the output is production-ready, cross-browser compatible, mobile-responsive, and optimized for speed. Use best practices like semantic HTML, ARIA labels, and lazy loading. If generating domains, provide 10 unique, catchy, SEO-friendly options with availability check rationale.

How to Use

Copy the entire prompt into ChatGPT or Claude. Replace placeholders like [Describe your web development task here] with your specifics. Run the prompt and refine iteratively by adding more details in follow-up messages. Install AIPRM for one-click access to similar prompts via /prompts.

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