Prompt Generator for Websites

Define Your Website with AI

Fill in the fields below to generate a detailed prompt that you can use with a web development AI.

Basic Website Information

1. Website Theme: Describe the main theme of your website.

2. Target Audience: Who is your website aimed at?

3. Key Sections (minimum 3, separated by commas): List the main sections of your website.

Design and Visual Style

4. Main Colors: Define the color palette you would like to use.

5. Visual Style: Describe the overall aesthetic of the design.

6. Preferred Typography (optional): Indicate if you have any font preferences (Google Fonts, etc.).

7. Include Logo in the Prompt: Check this option if you want the AI to consider including a logo named `logo.png` in the design.

8. Include Images in the Prompt: Check this option if you want the AI to consider including images in the design.

**Warning:** This option requires HTML knowledge to correctly manage image paths. If you are not familiar, it is better not to add this option to the prompt.

Interactions and Contact

9. Main Call to Action (CTA): The text of the main button or link you want the user to click.

10. Contact Phone (optional): The phone number for direct contact.

11. Contact Email (optional): The email address for inquiries.

12. Physical Address (optional): The address of your business or main location.

Social Media Links and Others

13. LinkedIn Link (optional):

14. X (Twitter) Link (optional):

15. Instagram Link (optional):

16. Facebook Link (optional):

17. GitHub Link (optional):

18. Other Important Links (optional, one per line): Additional links such as privacy policy, terms and conditions, etc.

Advanced Features

19. Additional Requirements or Specific Features (optional): Any other specific feature or functionality not mentioned before.

Generated Prompt:

☕ Support Me on Ko-fi

Workflow: Create Your Website with the Generated Prompt

Once you have generated your prompt, follow these simple steps to create and download your own website:

1. Copy the Prompt

Click the "Copy Prompt" button to save the generated text to your clipboard.

2. Choose Your Web Development AI

Access an AI capable of generating web code. Some popular options include:

**Gemini (like this AI):** You can paste it directly into our chat.
**ChatGPT (OpenAI):** Paste the prompt into the chat interface.
**Copilot (Microsoft):** Paste it into your development environment if you're using VS Code.
**Other code-specialized AIs:** There are many others available or in development.

3. Paste and Execute the Prompt

Paste the copied prompt into the AI interface and send it. The AI will start generating the HTML, CSS, and JavaScript code for your website.

4. Paste the Generated Code Here

Once the AI gives you the code, paste it into the corresponding sections below. **Important!** Paste each code section into its own box (HTML in HTML, CSS in CSS, and JS in JS).

HTML (`index.html`):

CSS (`style.css`):

JavaScript (`script.js`):

4.1. Add Your Images (Optional)

If your web design includes images, you can select them here to be automatically included in the ZIP file. The AI should have given you the image paths in the HTML (e.g., `src="images/my-image.jpg"`).

Select your images: You can select multiple images at once.

**Important!** If the AI suggests a folder for the images (e.g., `images/`), make sure to use that path in your HTML code so the images display correctly when unzipped.

4.2. Add Your Logo (Optional)

If you checked the "Include Logo" option in the prompt, you can upload the `logo.png` file here to be included in the ZIP.

Select your logo (`logo.png`): Make sure the file is named `logo.png` so it displays correctly in the AI-generated website.

5. Download Your Website

When you have the code and images ready, click the button to download your website as a ZIP file.

☕ Support Me on Ko-fi

6. Open Your Website Locally

Unzip the downloaded ZIP file. Inside, you will find `index.html`, `style.css`, `script.js`, and, if added, an `images/` folder with your photos. To view your website, simply double-click the `index.html` file in your folder. It will open in your default browser.

7. Customize and Refine

The generated code is a base. You can open the `.html`, `.css`, and `.js` files with a simple text editor (like Notepad++, VS Code, Sublime Text) and modify:

**Texts:** Change titles, paragraphs, and content to match your actual information.
**Images:** Replace example images with your own (make sure the paths in the HTML/CSS are correct).
**Styles:** Adjust colors, fonts, spacing, and responsiveness for a perfect design.
**Functionality:** Modify or extend the JavaScript if you need more complex interactions.

Remember that every time you make a change to the files, you must save and reload the page in your browser to see the updates.

8. Publish Your Website! (Optional)

Once you are satisfied with your website, you can publish it to make it accessible online. This generally involves:

**Getting Hosting:** A service that stores your web files.
**Getting a Domain:** The address of your website (e.g., `yourdomain.com`).
**Uploading the Files:** Use an FTP client or the hosting control panel to upload your folder (`index.html`, `style.css`, `script.js`, etc.).

If you need help with publishing, you can generate another prompt for the AI asking "how to publish my website created with HTML, CSS, and JS".