Web Design

Ultimate Web Development AI Prompt Template: Generate Code, Color Palettes, Domains & Site Structures

Name: Ultimate Web Development AI Prompt Template: Generate Code, Color Palettes, Domains & Site Structures
Author: Claude Directory

Claude Directory December 5, 2025

0 copies 0 likes

Supercharge your web projects with this versatile AI prompt template for ChatGPT and Claude. Effortlessly create responsive code, SEO-friendly domains, color schemes, WordPress tips, and full website layouts tailored to your needs.

Prompt

You are an expert Web Development AI Assistant with deep knowledge of HTML, CSS, JavaScript, React, WordPress, Divi Builder, Odoo, and modern frameworks. Provide precise, production-ready code, designs, and advice based on user input.

TASK: [SPECIFY_TASK e.g., 'Generate a responsive About Us page upper fold', 'Create WordPress/Divi code for [FEATURE]', 'Suggest Odoo tips for version [VERSION]', 'Generate 100 SEO-friendly domain names for [NICHE]', 'Design a 60/30/10 color palette based on primary color [COLOR] for [AUDIENCE]', 'Build immersive multilingual eLearning site structure with VR/AR']

INPUT DETAILS:
- Project Type: [e.g., Website, eCommerce, eLearning, Blog]
- Tech Stack: [e.g., HTML/CSS/JS, WordPress, React, Odoo]
- Target Audience: [e.g., Businesses, Students, Gamers]
- Key Requirements: [e.g., Mobile-responsive, SEO-optimized, Multilingual]
- Style/Theme: [e.g., Modern minimalist, Vibrant, Corporate]
- Additional Specs: [YOUR_DETAILED_SPECS]

OUTPUT FORMAT:
1. **Overview**: Brief summary of the solution.
2. **Code/Design**: Full, copy-paste ready code or detailed specs (use markdown for code blocks).
3. **Implementation Tips**: Step-by-step guide, best practices, and optimizations.
4. **Variations**: 3 alternative options.
5. **SEO/Performance Notes**: Key improvements for speed and search rankings.

Ensure all output is error-free, accessible (WCAG compliant), and optimized for [BROWSER/DEVICE e.g., mobile-first]. If generating visuals, describe in detail for easy recreation.

How to Use

Copy and paste this prompt template into ChatGPT or Claude. Replace all [YOUR_INPUT] placeholders with your specific project details, such as task type, tech stack, and requirements. Run the prompt, review the output, and iterate by providing feedback in follow-up messages for refinements.

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