- Section: Code assistant
- Video (NOT downloaded): https://www.youtube.com/watch?v=ED6hH4u4Apc
- Video duration: 38min04s
Description
_(no description)_
Downloaded resources
14-claude-sonnet-5-vs-opus-48.pdf— claude_sonnet5_vs_opus48_prompt_pack.pdf (ok (16487 bytes))
Claude Sonnet 5 vs. Opus 4.8: Three One-Step Build Prompts. A simple prompt pack for testing two assistant models' performance in design, app functionality, and complex game logic.
Portfolio Website Tests design, copy, layout, responsiveness, and polish. Personal Finance Tests forms, calculations, local storage, validation, and dashboard UX. 2 App
Castle Defense Tests game logic, waves, movement, scoring, upgrades, and win/loss states. 3 Game
Use the same prompt for both models, in the same environment, with the same rules. Then compare the final results side by side. How to Use This Prompt Pack Run each test as a one-step build. Give Claude Sonnet 5 and Claude Opus 4.8 exactly the same prompt, then compare the final output without giving either model extra help.
Recommended setup: React + Tailwind CSS, the same editor or coding environment, the same prompt, the same amount of follow-up help, and the same manual test checklist.
Test What It Measures Score
Portfolio Website Design quality, copy, responsiveness, spacing, visual polish /10
Personal Finance App Functionality, calculations, local storage, validation, usability /10
Castle Defense Game Game loop, enemy movement, defenders, scoring, upgrades, win/loss logic /10
One simple final question for the video: Is Opus 4.8 still clearly better, or is Sonnet 5 now good enough for most people?
Claude Sonnet 5 vs Opus 4.8 Prompt Pack | Page 2 Prompt 1: Portfolio Website Objective: test design sense, writing, layout, responsiveness, and polish.
Build a modern personal portfolio website for a freelance designer and developer named Alex Morgan.
Use React and Tailwind CSS.
The website should feel premium, clean, and modern. It should look like something a real creative professional could use to get clients.
Create a full landing page with the following sections:
- Hero section
- Strong headline
- Short subheadline
- Two call-to-action buttons
- A visual area that shows a profile card, project preview, or creative mockup
- About section
- Short professional bio
- Skills and tools
- A clean layout that feels personal but professional
- Featured projects section
- Show 4 projects
- Each project should have a title, category, short description, and visual card
- Add hover effects
- Services section
- Show 3 services:
- Website Design
- Web Development
- Brand Identity
- Testimonials section
- Include 3 realistic client testimonials
- Contact section
- Contact form with name, email, project type, and message
- Add basic form validation
- Show a success message after submission
- Footer
- Include social links and copyright text
Design requirements:
- Premium portfolio style
- Clean spacing
- Modern typography
- Fully responsive for desktop, tablet, and mobile
- Smooth hover effects
- Subtle animations
- Good visual hierarchy
- Make it look polished, not like a basic template
Technical requirements:
- Use React components
- Use Tailwind CSS
Claude Sonnet 5 vs Opus 4.8 Prompt Pack | Page 3
- Keep everything frontend-only
- No backend required
- No external APIs
- Make sure the app does not crash
- Include comments for important sections
At the end, include a manual testing checklist for:
- Desktop responsiveness
- Mobile responsiveness
- Contact form validation
- Success message after form submission
- Hover effects
- All sections rendering correctly
Claude Sonnet 5 vs Opus 4.8 Prompt Pack | Page 4 Prompt 2: Personal Finance Web App Objective: test forms, calculations, state management, local storage, validation, and useful dashboard design.
Build a functional personal finance web app called BudgetFlow.
Use React and Tailwind CSS.
The app should help users track income, expenses, savings goals, and monthly budget progress.
Core features:
- Dashboard overview
- Show total income
- Show total expenses
- Show remaining balance
- Show savings progress
- Show spending by category
- Add transaction form
The user should be able to add a transaction with:
- Transaction name
- Amount
- Type: income or expense
- Category
- Date
- Notes
- Transaction list
- Show all transactions
- Allow users to filter by income, expense, or category
- Allow users to search transactions by name
- Allow users to delete a transaction
- Budget categories
Create default categories:
- Housing
- Food
- Transportation
- Entertainment
- Shopping
- Health
- Education
- Other
- Savings goal tracker
- User can set a savings goal name
- User can set a target amount
- User can add money toward the goal
- Show percentage progress
- Show how much is left to reach the goal
- Charts and visual summaries
- Add a simple chart or visual breakdown for spending by category
- Add a monthly income vs expense summary
- Use simple frontend visuals if a chart library is not available
- Local storage
- Save transactions to local storage
- Save savings goal to local storage
Claude Sonnet 5 vs Opus 4.8 Prompt Pack | Page 5
- Data should still be there after refresh
- Validation
- Do not allow empty transaction names
- Do not allow invalid amounts
- Do not allow negative amounts
- Show helpful error messages
- UI requirements
- Clean dashboard style
- Modern cards
- Clear labels
- Responsive layout
- Easy to understand
- Works well on desktop and mobile
Technical requirements:
- Use React state properly
- Use a clean component structure
- Use Tailwind CSS
- Keep everything frontend-only
- No backend required
- No external APIs
- Make sure the app does not crash during normal use
- Add comments for the main logic
At the end, include a manual testing checklist for:
- Adding income
- Adding expenses
- Deleting transactions
- Filtering transactions
- Searching transactions
- Budget totals updating correctly
- Savings goal updating correctly
- Local storage persistence after refresh
- Form validation
- Mobile responsiveness
Claude Sonnet 5 vs Opus 4.8 Prompt Pack | Page 6 Prompt 3: Castle Defense Game Objective: test complex one-shot construction with game logic, waves, movement, scoring, upgrades, and win/lose states.
Build a complete browser-based game called Castle Defense.
Use React and Tailwind CSS.
Game concept: The player is defending a castle from waves of enemies. Enemies move from the left side of the screen toward the castle on the right side. The player places defenders on the battlefield to stop the enemies before they reach the castle.
The game should feel like a simple tower defense game.
Core gameplay:
- Enemies move from left to right across the game board
- If an enemy reaches the castle, the player loses one life
- The player starts with 20 lives
- The player starts with 150 gold
- The player earns gold when enemies are defeated
- The game has 10 waves
- Each wave should become harder
- The player wins after surviving all 10 waves
- The player loses if lives reach 0
Enemy types:
- Goblin
- Fast movement
- Low health
- Reward: 10 gold
- Orc
- Medium speed
- Medium health
- Reward: 20 gold
- Troll
- Slow movement
- High health
- Reward: 35 gold
- Dark Knight
- Appears in later waves
- High health
- Medium speed
- Reward: 50 gold
Defender types:
- Archer
- Low cost
- Fast attack speed
- Low damage
- Knight
- Medium cost
- Medium attack speed
- Medium damage
- Mage
- Higher cost
- Slower attack speed
- Area damage
- Guardian
- Expensive
- Increases the capacity of nearby defenders
Required features:
- Start screen with game explanation
- Game board
- Defender selection panel
- Place defenders by selecting one and clicking on the board
- Do not allow placement if the player doesn’t have enough gold
- Enemies should move across the board
- Defenders should automatically attack enemies within range
- Display attack animations or visual effects
- Wave system
- Gold system
- Lives system
- Scoring system
- Defender upgrade system
- Victory screen
- Game over screen
- Restart button
- Pause button
- Simple button to toggle sound, even if it only uses a visual sound state
- Activity log explaining what’s happening during the game
Interface requirements:
- Make the game feel polished and fun
- Use a fantasy castle theme
- Clear game board
- Clean cards and buttons
- Display the current wave, lives, gold, and score
- Display defender stats before placing it
- Display enemy health visually
- Responsive desktop and mobile layout
Technical requirements:
- Keep everything in a single working React app
- Use React state properly
- Use a clean component structure
- Avoid external APIs
- Avoid backend requirements
- Use local state only
- Add comments for the game's main logic
- Ensure the game doesn’t freeze during normal gameplay
At the end, include a manual testing checklist for:
- Start the game
- Place each type of defender
- Prevent placement when there isn’t enough gold
- Enemies moving correctly
- Defenders attacking enemies
- Enemy health decreasing
- Gold increasing after enemies are defeated
- Lives decrease when enemies reach the castle
- Waves getting harder
- Upgrading defenders
- Pause and restart the game
- Win after wave 10
- Lose when lives reach 0
- Mobile responsiveness