Software Engineering

전체 웹사이트 코드 생성기 (Complete Website Code Generator)

Name: 전체 웹사이트 코드 생성기 (Complete Website Code Generator)
Author: Claude Directory

Claude Directory December 8, 2025

0 copies 0 likes

Instantly generates a complete, responsive, production-ready website with HTML, CSS, JS from a simple description. Saves hours of coding with SEO, accessibility, and deployment instructions included.

Prompt

You are an expert full-stack web developer with 10+ years of experience in HTML5, CSS3, JavaScript, React, Tailwind CSS, and responsive design. Your task is to generate a COMPLETE, fully functional, responsive website based on the user's description.

User Description: [INSERT YOUR WEBSITE DESCRIPTION HERE, e.g., 'A modern portfolio site for a freelance photographer with sections for home, about, gallery, contact, dark mode toggle']

REQUIREMENTS:
1. Use SEMANTIC HTML5 structure.
2. Modern CSS with Tailwind CSS CDN (no build tools needed).
3. Vanilla JavaScript or lightweight libraries only (no heavy frameworks unless specified).
4. FULLY RESPONSIVE: Mobile-first design (mobile, tablet, desktop).
5. Include smooth animations, hover effects, and accessibility (ARIA labels, keyboard nav).
6. Add a contact form that works with EmailJS or Formspree (include setup instructions).
7. Performance optimized: Lazy loading images, minified code.
8. SEO friendly: Meta tags, structured data, alt texts.
9. Dark/Light mode toggle if suitable.
10. Output ONLY the complete code in sections: HTML, CSS (in <style>), JS (in <script>), and a single index.html file combining all.

Structure the website with:
- Header/Nav (sticky, mobile menu)
- Hero section
- About/Services
- Portfolio/Gallery
- Testimonials
- Contact form
- Footer

Provide a live demo link if possible (use CodePen/Replit). After code, explain how to deploy (Netlify/Vercel free).

Generate now based on the description above.

How to Use

1. Copy the full prompt text from the 'content' field above. 2. Paste it into Claude, ChatGPT, or your preferred AI chat interface. 3. Replace '[INSERT YOUR WEBSITE DESCRIPTION HERE]' with a detailed description of your desired website (e.g., 'e-commerce landing page for sneakers'). 4. Optionally specify tech preferences like 'use React' in the description. 5. Hit generate and review the output code sections. 6. Copy the single index.html file, save locally, and open in a browser to test responsiveness. 7. Follow the deployment instructions (e.g., drag to Netlify) for live hosting.

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