Workshop 01
Your First App From a Blank Prompt
Go from an empty chat box to a working, published web app in one sitting.
Overview
What you will build
A personal link-in-bio page with a contact form and a published URL.
Who it is for
Anyone who has never shipped software before and wants a real, live page they can send to someone by the end of the session.
Before you start
- — A browser and an account on an AI builder
- — No coding experience required
- — A rough idea of what you want the page to say
What you will walk away with
- Write a first prompt that produces a coherent app instead of a mess
- Read what the builder made and describe changes in plain language
- Publish to a public URL and share it
Resources
Open these in a second tab before you begin.
Instructions
Work through these in order. Where there is a prompt, copy it and fill in the parts in angle brackets.
- 01
Describe the outcome, not the code
Open a new project and write what the page is for, who reads it, and what they should do. Do not mention frameworks, libraries or file names — the builder decides those.
Build a single-page personal site for me. Purpose: introduce who I am and give people one clear way to contact me. Sections: a short hero with my name and one-line pitch, three links to my work, and a contact form (name, email, message). Tone: calm and confident, not salesy. Look: dark background, one warm accent colour, generous spacing, modern sans-serif type.
- 02
Read the result before changing anything
Scroll the whole preview. Write down the two or three things that are genuinely wrong for you. Resist the urge to fix everything at once — one clear change per message keeps the build stable.
- 03
Fix the copy first, the design second
Words are cheap to change and shape everything else. Replace the placeholder text with your real pitch, then adjust the visuals.
Replace the hero copy with this exact text: Headline: <your headline> Sub-line: <one sentence about what you do> Keep the layout and styling exactly as it is.
- 04
Set the look in one line
Pick a style from the Prompt Library and apply it as a whole, rather than nudging individual colours.
Restyle the whole page in this direction: <paste a design style from the Prompt Library>. Apply it consistently to background, cards, buttons and type. Do not change the content or the section order.
- 05
Make the contact form honest
A form that silently discards messages is worse than no form. Either wire it to something real or make it a mailto link and say so.
The contact form currently does nothing on submit. Change it so submitting opens the visitor's email client addressed to <your email> with the message prefilled, and show a short confirmation line under the button.
- 06
Publish and share
Publish, open the public URL in a private window, and check it on your phone. Send it to one person and note the first thing they ask about — that is your next task.
Build-along
The same journey as milestones, so you can stop at any point and pick it up later. Do not move on until the checkpoint is true.
Milestone 1 — Skeleton
One page with hero, links and form, in the builder's default styling.
Checkpoint — All three sections are visible and the page does not error.
Milestone 2 — Your words
Every piece of placeholder copy replaced with your own.
Checkpoint — Nothing on the page is text you would be embarrassed to publish.
Milestone 3 — Your look
A single coherent visual direction applied across the page.
Checkpoint — Background, buttons and type feel like one design, not three.
Milestone 4 — Live
Published and checked on a phone.
Checkpoint — The public URL loads for someone who is not signed in.
Build Submission
Send your published URL plus one sentence on the hardest part. Good submissions get a short written review.
Submissions are sent by message — nothing is stored on this site.
Submit your buildOther workshops