Introduction
In this use case, we'll show how this web page was generated. The initial HTML and CSS were created from the displayed prompt.
AI used: GPT-4
Prompt:
I want to create the structure of a website, knowing that the project will contain 365 prompts that I will assign to different AIs and display the results. The idea is to have a main page that will reference to another webpage (one per day). The first page will contain the name of the website, possibly a logo, a simple footer, and maybe a 7-column matrix with rows, one referencing each day. Clicking on that cell will take you to another specific page that will display the prompt text, the AI used, and the code returned by the AI, as well as a link to another web page with the code implementation. I want to do all of this using the fewest third-party libraries and with static pages, using Amazon's S3 as the web server if possible.
Result:
General Website Structure
1. Home Page: index.html
Contains:
Site name and possible logo.
Brief explanation of the project.
365-day matrix (7 columns per row, similar to a calendar, but numbered from 1 to 365).
Clicking on a day takes you to its respective page (/prompts/day001.html, etc.).
Simple footer with your name or copyright.
2. Individual Pages: /prompts/day001.html, /prompts/day002.html, ..., /prompts/day365.html
Each contains:
Day title and number (e.g., "Day 1").
Prompt used.
AI used (GPT-4, Claude, Gemini, etc.).
AI-generated output (code).
Link to the implementation (can be CodeSandbox, JSFiddle, GitHub Pages, etc.).
Uniform and simple style.
/ (root)
│
├── index.html
├── style.css
├── /prompts/
│ ├── day001.html
│ ├── day002.html
│ └── ... to day365.html
└── /assets/
└── logo.png (optional)Tips
- If you want to create a website, start with a prompt to generate something generic.
- Give more precise instructions about specific things (for example, I want the design to be responsive).
- If you don´t have experience and enter a prompt with too many details, the generated code may be too complex.