Claude Design vs Stitch: build with Claude Code

This tutorial builds a university management application and compares two design workflows: Claude Design handed to Claude Code, and Google Stitch screenshots passed to Antigravity. The project uses Next.js 16, TypeScript and Tailwind CSS, with separate dashboards for administrators, faculty and students.

The speaker starts with a generated design system, adjusts its colors and transfers it through Claude Design's handoff link. Claude Code implements the interface before Clerk authentication and an InsForge database replace the mock data. The walkthrough covers CLI setup, MCP access and profiles linked to Clerk user IDs.

Much of the lesson concerns reviewing the coding assistant's output. The speaker identifies missing server identity checks and manually defined Clerk types, then works through webhook verification, a stopped ngrok tunnel and redirect errors. Later tests cover administrator approval for access, course enrollment and faculty grade submission. These are demonstrations within this project, rather than proof of universal security guarantees.

The final comparison uses Stitch to redesign selected pages in dark mode. Antigravity receives screenshots and a Design.md brief. The speaker judges the result a close visual match and prefers Stitch's usage allowance in this session. The workflow uses external services; it does not demonstrate local model inference or offline operation.