AI Website Workshop

Workshop · Hands-on activity

Creating a Personal Financial Planning Web App

One idea. One shared prompt. Multiple working websites—built by AI coding agents.

Start the comparison See how we got there
01 Start with an idea No coding background required
02 Shape the prompt Ask AI to make the idea buildable
03 Compare the results Two blind comparison activities

The experiment

What happens when different AI models receive the same instructions?

This hands-on demonstration follows a simple workflow anyone can repeat: describe what you want to build, improve the request with an AI assistant, then give the same detailed prompt to several coding agents. In the two blind activities below, look for differences in design, usability, calculations, and interpretation before discussing what may have shaped those differences.

From plain language to working software

The two-prompt process

Use the copy buttons to try this workflow yourself.

Step 1

Ask for help writing the build prompt

Sent to ChatGPT 5.6

I want to use Codex to build a small educational web app for a workshop. The app will be a Personal Financial Planning Scenario Planner. It will demonstrate how an AI coding agent can turn an idea into a working website. I have no technical background, and I want to publish the website publicly using GitHub. What should my first prompt be?
Step 2

Give every coding agent the same detailed prompt

The shared build specification

Read the full promptClick to expand 
Build a complete, beginner-friendly educational web app called Personal Financial Planning Scenario Planner.

Purpose

This app will be demonstrated in a workshop to show how an AI coding agent can turn a plain-language idea into a working public website.

I have no technical background, so please make sensible decisions for me, explain important choices in plain English, and avoid unnecessary complexity.

Technical requirements

- Build a static website that can be hosted free on GitHub Pages.
- Use plain HTML, CSS, and JavaScript unless there is a compelling reason to use something more complex.
- Do not require a backend, database, login, paid service, API key, or build server.
- Store no personal data.
- Make the site responsive and accessible.
- Use clean, well-organized, commented code.
- Create all necessary project files, including:
  - index.html
  - CSS and JavaScript files
  - README.md
  - .gitignore
  - a suitable open-source license
- Make sure the site works when opened locally and when deployed from a GitHub Pages repository.

App experience

Create a polished single-page scenario planner that helps a user explore a simplified personal financial plan.

Include input sections for:

1. Current age
2. Planned retirement age
3. Current annual income
4. Current savings
5. Monthly savings contribution
6. Expected annual investment return
7. Expected annual income growth
8. Inflation rate
9. Current annual expenses
10. Expected retirement spending
11. Optional major future expense, such as education, a home purchase, or travel
12. The year or age when that major expense occurs

Include three selectable scenarios:

- Conservative
- Moderate
- Optimistic

Each scenario should adjust assumptions such as investment return, income growth, and inflation. Clearly show the assumptions being used and allow users to customize them.

Results

As the user changes inputs, calculate and display:

- Estimated savings at retirement
- Estimated savings after the major future expense
- Estimated first-year retirement spending
- A simple estimate of whether the plan appears on track
- The estimated gap or surplus
- A year-by-year projection chart
- A clear comparison of the three scenarios

Use transparent, simplified calculations. Add tooltips or short explanations for financial terms and calculation assumptions.

Include a prominent disclaimer explaining that this is an educational demonstration and not financial, tax, investment, or legal advice.

Design

Use a welcoming, professional workshop-friendly design.

- Clear headings and generous spacing
- Easy-to-read typography
- Accessible form labels
- Good keyboard navigation
- Strong color contrast
- Helpful validation messages
- Mobile-friendly layout
- No stock photography
- No excessive animation

Include example starting values so the app is useful immediately when opened.

Add buttons to:

- Reset the planner
- Load an example scenario
- Print or save the results as a PDF using the browser’s print feature

Quality checks

Before finishing:

1. Test the calculations with several example values.
2. Check for JavaScript errors.
3. Check the mobile layout.
4. Check keyboard accessibility.
5. Confirm that no sensitive data is transmitted or stored.
6. Confirm that all links and buttons work.
7. Confirm that the project is compatible with GitHub Pages.

Documentation and publishing

Write a beginner-friendly README.md that explains:

- What the app does
- The project file structure
- How to preview it locally
- How to create a GitHub repository
- How to upload or push the files
- How to enable GitHub Pages
- How to find the public website URL
- How to make future changes using Codex

At the end of your work, give me:

1. A plain-English summary of what you built
2. A list of the files you created
3. Instructions for testing it
4. Exact step-by-step instructions for publishing it publicly with GitHub Pages
5. Any limitations or assumptions in the financial calculations

Start by briefly outlining your implementation plan, and then create the complete app. Do not stop after giving instructions or sample code—create all required files and test the implementation.