Watch Me AI the UI
In this workshop, come along as I upgrade the visual design of our Laracasts team dashboard. As you'll see, design work can sometimes be a bit tricky to orchestrate. Can AI properly evaluate a screenshot and convert it to CSS? Well, yes...and no! But luckily, we have a variety of techniques we can use to increase our odds of success. Let's go!
Series episodes
The First Try
8m 34sUse AI and screenshots to refresh an outdated team dashboard, rebuild in a first pass, then refine layout, modals, and assignment flow.
Tests Are Your Safety Net
6m 51sSet up Pest browser tests as a safety net for your Laravel app—use data-test selectors, @ shorthand, and grouped specs to iterate faster.
The Screenshot Approach
11m 26sIterate your dashboard UI: seed a demo team, add an admin /team/demo endpoint, and use Chrome + screenshot checks for pixel-perfect polish.
The Figma Link Approach
7m 37sUse a Figma node link as source of truth—pull exact values via MCP and Implement Design to refine UI faster and avoid AI mistakes.
How to Organize Upgrades
13m 23sUpgrade to Inertia.js v3 fast with an AI-guided migration plan, new APIs, and optimistic UI updates for a snappier dashboard.
