PhpStorm
The editor where you inspect files, routes, Blade views, CSS, and tests.
Back to How-to AI
Build a simple website with vibe coding
A beginner-friendly path for building locally with Laravel, PhpStorm, Codex, Claude, and clear testing habits.
Built locally with Codex
Frontend presentation built with Codex
A clean presentation of this public frontend: route, Blade, CSS, navigation, responsive sections, and local tests were shaped together with Codex.
How-to AI
The Next Input
Prompting, Suno, Midjourney, and vibe coding explained visually.
AI appsComparison pages
PromptingBeginner guide
VisualsPortfolio energy
CodexLocal workflow
Tool stack
Which AI should you use for each step?
Codex
Hands-on coding agent for local edits, tests, refactors, debugging, and browser checks.
Claude
Architecture thinking, copy, critique, edge cases, and explaining code in plain language.
Laravel
The app framework: routes, controllers, Blade views, assets, tests, and local server.
Workflow
From empty idea to usable result.
1. Explain the page like you would to a person
What should the visitor see? Which buttons? Which route? What mood? Which existing page should it match?
2. Let Codex read the codebase
Ask it to follow existing patterns: routes, controllers, Blade, Tailwind/CSS, and tests. Start small and local.
3. Work in short rounds
First route and view. Then content. Then styling. Then test. Then local build. This keeps the work manageable.
4. Use Claude as a thinking partner
Ask Claude to review structure, UX, and wording. Ask Codex to make the concrete code changes and run tests.
5. Test locally before publishing
Run focused PHPUnit tests, build assets, open localhost, and check text, mobile layout, links, and errors.
Concrete examples
Make the workflow visible before you start.
Build one route, one controller method, one Blade page, and one feature test first.
Use Codex for file edits and tests. Use Claude to pressure-test structure and explain confusing code.
Open localhost, inspect mobile width, confirm buttons, and make sure the layout feels calm.
Starter prompt
Use this as your first brief.
Add a local Laravel page for beginners. Follow the existing Blade and CSS patterns, create a named route, add navigation, write a feature test, and run only the relevant tests.
Portfolio references
Borrow visual language from finished work.
These Aivion Studios portfolio pieces are useful as reference points for mood, layout, cover direction, or web presentation. Each card links back to the portfolio source.
Website concept reference
Concept Site
Use as a reference for landing-page composition, polished visual direction, and vibe-coding output.
Product interface reference
Podflix Site
Useful for explaining how an AI-built product can move from idea to interface.
Midjourney-style visual reference
Fantasy 01
A strong example for mood, cinematic lighting, and visual world-building prompts.
Level
Easy, Medium, and Expert approach.
A static page with a title, copy, images, and two buttons.
A page with reusable content data, navigation, responsive layout, and route coverage.
A complete feature with database, forms, validation, policies, analytics, browser QA, and CI.