What You'll Build
By the end of this project, you'll have a working AI tech news digest tool — and a solid, version-controlled development process that makes your next project faster and smarter.
What You'll Need
You don't need any coding experience. You just need the two tools below and about 45 minutes.
You'll use ChatGPT (with the browsing plugin enabled) to pull live headlines, then Claude to write the code. Free tiers work for both — though ChatGPT browsing requires Plus for the native plugin.
VS Code, Notepad++, or even plain Notepad works. You'll save your HTML file locally and open it in a browser to preview. You'll also keep a Markdown file open to log your prompt history.
Let's Build It
Follow these five steps in order. Each one builds on the last — and each one practices a real skill from this week's tutorials.
Write Your Specialist System Prompt
Before you touch any code, you need to set up your AI specialist. A good system prompt tells the AI exactly who it is, what it cares about, and how it should respond — so every answer you get is consistent and useful. Open a new conversation in Claude and paste the prompt below. This becomes your analyst persona for the whole project.
Once you've pasted it, save it in a new file called prompt-history.md under a heading like ## v1 — System Prompt. This is the start of your version control record.
You are TechDigest AI — a specialist technology news analyst. Your job is to help me build an HTML tech news digest page.
Your personality:
- You write in clear, plain English — no jargon unless necessary
- You are concise: summaries are 2-3 sentences max
- You always attribute sources and flag if something is speculation vs confirmed news
- You care about accuracy and will say "I'm not sure" rather than guess
- You format code cleanly and explain what each section does
Your focus areas: AI, developer tools, software engineering, and open-source technology.
When I give you news headlines or raw text, you will summarise them in your style. When I ask for code, you will write clean HTML and CSS. Confirm you understand this role by saying: "TechDigest AI ready. Give me your headlines or tell me what to build."
Claude should respond in character — confirming its role as TechDigest AI, not just acknowledging your message generically. If it writes a long essay instead of the short confirmation, that's a sign your system prompt needs to be more directive. Note that response in your prompt-history.md — you'll refine it later if needed.
Fetch Live Headlines with ChatGPT Browsing
Now switch to ChatGPT with the browsing plugin (or the native web search feature in GPT-4o). You're going to use it to pull today's real tech headlines — something Claude can't do on its own without web access. The key skill here is being specific about what you want so ChatGPT returns structured, usable data rather than a vague paragraph.
When ChatGPT gives you the results, copy the entire response. You'll paste it into Claude in the next step. Also log this prompt in your prompt-history.md under ## v1 — Web Fetch Prompt.
Search the web for the top 5 technology news stories from the past 24 hours. Focus on: AI tools, developer tools, software engineering, or open-source projects.
For each story return exactly this format:
STORY 1
Headline: [exact headline]
Source: [publication name]
URL: [link]
Date: [date published]
Key fact: [one sentence — the most important thing to know]
Only include stories you can verify with a real URL. If you can't find 5, return however many you can confirm. Do not summarise or editorialize — just return the raw structured data.
You should get 3–5 stories in a clean, consistent format with real source names and working URLs. If ChatGPT gives you a prose paragraph instead of the structured format, that's feedback you can use — add a line to your prompt history noting "needs stricter format enforcement" and try rephrasing with "You MUST use exactly this format, no exceptions." Checking that the URLs actually open is the trust step from the browsing tutorial.
Build the First Version of Your Digest Page
Go back to Claude — it's still in character as TechDigest AI from Step 1. Paste in the raw headline data from ChatGPT and ask Claude to build the first version of your HTML digest page. You're handing off structured data to a specialist and letting it do what it's good at: writing clean code around that content.
When Claude returns the code, save it as digest-v1.html and open it in your browser. Log this as ## v1 — First Code Build in your prompt history file with a note about what it looked like.
Here is today's raw tech news data from a web search:
[PASTE YOUR CHATGPT OUTPUT HERE]
Build me a single-file HTML tech news digest page using this data. Requirements:
1. Dark background (#0a0f1a), white headline text, grey body text
2. A page title at the top: "TechDigest — [today's date]"
3. Each story as a card with: headline, source name, a 2-sentence summary you write in your TechDigest AI style, a category tag (pick from: AI, Dev Tools, Open Source, Software), and a "Read more" link to the URL
4. Use inline CSS only — no external stylesheets or frameworks
5. Cards should have a dark surface colour (#111827), rounded corners (12px), and subtle border (#1e2d40)
Return the complete HTML file contents only. Add a comment at the top: so I can track versions.
Claude should return a complete, self-contained HTML file you can save and open directly. Check: do the cards show up? Is the dark background applied? Are the summaries 2 sentences and in plain English? If something is missing — like the category tags or the version comment — note exactly what's wrong. You'll fix it in Step 4 using the structured feedback loop.
Run the Feedback Loop and Log Your Changes
This step is where the real skill-building happens. You're going to look at your v1 digest, identify what needs improving, and give Claude structured feedback using the iteration loop format. Vague feedback like "make it better" doesn't work. Specific feedback like "the category tags have no visible styling — add a background colour and padding" does. Write down 2–3 things you want changed before you send the prompt.
After Claude responds, save the new file as digest-v2.html and log this round in prompt-history.md under ## v2 — Feedback Round 1. Note what changed and what still needs work.
I reviewed digest-v1.html in my browser. Here is my structured feedback:
WHAT'S WORKING:
- [Write one thing that looks good, e.g. "The card layout is clean and the dark background is correct"]
WHAT NEEDS FIXING (be specific):
1. [Specific issue #1 — e.g. "The category tags have no background colour — they're invisible against the dark card. Add a coloured pill badge: green for AI, blue for Dev Tools, orange for Open Source, purple for Software."]
2. [Specific issue #2 — e.g. "The 'Read more' links look like plain text. Style them as a small button with a green border and green text."]
3. [Specific issue #3 — e.g. "There's no spacing between the page title and the first card — add 32px of margin."]
WHAT I WANT TO ADD:
- A footer at the bottom that says "Generated by TechDigest AI — [today's date]" in small grey text, centred.
Please return the full updated HTML file with the comment at the top. Do not summarise the changes — just return the complete file.
All three of your specific issues should be resolved in v2. If Claude only fixed one or two, that's useful information: your feedback prompt needs to be even more explicit, or you need to send issues one at a time. This is exactly the iteration loop the tutorial covers — observe, describe specifically, iterate. Compare your v1 and v2 files side by side to see what actually changed.
Finalise Your Version History and Write a Recap
The last step isn't about the tool itself — it's about your development process. A version history is only useful if you actually write it down. You're going to ask Claude to help you complete your prompt-history.md file by generating a proper change log and a reusable prompt template you can take into your next project. This is the habit that separates people who get better at AI from people who stay stuck.
Paste your full prompt history log into Claude along with the prompt below. Save the output into your prompt-history.md file under a final heading: ## Project Recap. You now have a documented, version-controlled AI project you can hand to your future self.
Here is my full prompt history log from this project:
[PASTE YOUR prompt-history.md CONTENTS HERE]
Please do three things:
1. CHANGE LOG: Write a short change log in this format:
v1 — [what was built]
v2 — [what was changed and why]
(Add more versions if I have them)
2. WHAT I LEARNED: Write 3 bullet points describing what this session taught me about prompting AI effectively, based on the feedback I gave and how the outputs changed.
3. REUSABLE TEMPLATE: Write a starter system prompt I can reuse for any future "AI builds me an HTML page" project — strip out anything specific to TechDigest and make it general.
Format the output as clean Markdown I can paste directly into my prompt-history.md file.
Claude should return a clean Markdown block with all three sections. The "What I Learned" bullets should reflect your actual feedback from Step 4 — they'll be specific to your session. The reusable template is the real prize here: it's a generalised system prompt you've earned through the work you just did, not one you downloaded from the internet.
Common Issues
Add the line "You MUST follow this exact format. Do not use any other structure." at the top of your browsing prompt. If it still drifts, send each instruction as a numbered list item — models follow lists more reliably than paragraphs.
If Claude stops writing in character, start your next message with: "Reminder: you are TechDigest AI. Stay in character." For longer sessions, paste your system prompt again at the top of a fresh conversation — context windows have limits.
Make sure you're saving the file with a .html extension and opening it directly in a browser (not in your text editor). If the styles aren't applying, check that Claude included the inline CSS inside a <style> tag in the <head>.
Send one change at a time if you're getting partial fixes. Also try numbering your items with a clear header like "FIX ALL OF THE FOLLOWING BEFORE RETURNING:" — this signals that all items are required, not optional suggestions.
Try narrowing the time window: change "past 24 hours" to "past 48 hours" or "this week". If browsing is returning old results, toggle the browsing plugin off and back on — occasionally it caches its search state.
Add a follow-up: "Make the template more specific — include placeholder sections for [topic], [colour scheme], and [page purpose] that I can fill in each time." A template with fill-in-the-blank slots is more useful than a vague starting point.
What You Learned
This project wasn't just about building a news page — it was about building the habits that make every future AI project faster and better.
You wrote a system prompt that gives AI a consistent role, tone, and focus area — and you saw how it changes the quality and consistency of every response in that conversation.
You used ChatGPT's browsing capability to pull live, verifiable data in a format you controlled — and practised checking sources before trusting the output.
You practised the observe → describe → iterate loop: spotting what was wrong, describing it specifically, and getting a measurably improved output instead of just re-running the same prompt.
You kept a running prompt history file that documents every decision, change, and lesson — a habit that turns a one-off project into a reusable playbook for next time.
Tips for Going Further
Finished the core project? Here are five ways to push it further and keep building your skills.
Ask Claude to add JavaScript buttons that show/hide cards by their category tag (AI, Dev Tools, etc.). This turns your static page into an interactive tool — and gives you practice asking AI to add interactivity to existing code.
Repeat this whole workflow every Monday morning. After 4 weeks, compare your prompt history files — you'll see your prompts getting sharper and your feedback rounds getting shorter. That's real, measurable improvement.
Rewrite your system prompt for a completely different niche: finance news, design inspiration, science papers, or sports. The exact same workflow works — the only thing that changes is the persona and the browsing query. This is how you build a repeatable process.
Create a GitHub repo and commit each version of your HTML file with a clear commit message. Now you have real version control — you can diff v1 vs v2 and see exactly what changed. This is the next level of the "version control for AI conversations" skill.
Repeat Step 4 two more times with increasingly fine-grained feedback — move from layout fixes to typography, then to micro-details like spacing and colour. You'll discover the point where additional feedback stops improving things, which is a genuinely useful thing to know about AI iteration.