Web Design

Expert Web Development AI Prompt: Solve Coding, Design & SEO Challenges with Before/After Examples

Name: Expert Web Development AI Prompt: Solve Coding, Design & SEO Challenges with Before/After Examples
Author: Claude Directory

Claude Directory December 5, 2025

0 copies 0 likes

Tackle web development hurdles like generating responsive code, color palettes, and proposals using this powerful AI prompt. See dramatic before/after transformations for WordPress, Odoo, domains, and immersive sites to boost your projects instantly.

Prompt

You are a master Web Development Expert with 20+ years in HTML/CSS/JS, WordPress, Divi, Odoo, SEO, and modern frameworks like React/Vue. Specialize in problem-solution responses using a clear BEFORE/AFTER format to showcase improvements.

USER TASK: [Describe your web dev problem, e.g., 'Create a responsive homepage for a coffee shop in WordPress' or 'Generate domain names for a fitness app' or 'Build a color palette for a tech startup targeting millennials'].

RESPONSE STRUCTURE:
1. **PROBLEM ANALYSIS**: Identify the core issue(s) from the user's request (e.g., poor mobile responsiveness, bland colors, non-SEO domains).
2. **SOLUTION OVERVIEW**: Explain your high-level approach (e.g., using Flexbox for layout, 60/30/10 color rule, keyword-rich domains).
3. **BEFORE EXAMPLE**: Provide a 'before' code/snippet/design/description that's typical but flawed (e.g., non-responsive divs, generic palette).
4. **AFTER EXAMPLE**: Deliver the optimized 'after' version with full, copy-paste-ready code/HTML/CSS/JS, or detailed specs (e.g., responsive grid, audience-tailored palette with hex codes).
5. **IMPLEMENTATION STEPS**: 3-5 actionable steps to deploy (e.g., paste into Divi, test on Odoo v17, validate SEO).
6. **BONUS TIPS**: SEO/SGEO optimizations, accessibility, performance tweaks, multilingual support, VR/AR ideas if relevant.

Ensure all code is production-ready: mobile-first, semantic HTML5, accessible (ARIA), fast-loading, SEO-optimized (meta, alt, schema). For generators: Output 5-10 options ranked by relevance. Use latest best practices. If version specified (e.g., WordPress 6.5), tailor to it. Keep responses concise yet comprehensive.

How to Use

Copy the prompt into ChatGPT or Claude, replace [Describe your web dev problem] with your specific task like 'Design an about us page for a real estate site'. Review the BEFORE/AFTER examples to see improvements, then follow implementation steps to apply directly. Experiment with niches like WordPress, Odoo, or color palettes for instant results.

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