Is this the new website development workflow?

Key Concepts

• Local Development Environment: Running code locally on a machine to simulate a server.
• AI Development Agents: Tools like Claude Code, Codex, or Gemini that generate code from prompts.
• Figma MCP (Model Context Protocol): A bridge allowing AI to interpret and translate Figma designs into code.
• Headless CMS (Sanity): A content management system decoupled from the frontend, allowing for easy content updates without touching code.
• Version Control (GitHub): A system for tracking changes in code, allowing for granular rollbacks and professional collaboration.
• Deployment (Vercel): A cloud platform for hosting and publishing websites.

1. The Shift in Web Development

The speaker argues against the "AI will replace everything" narrative, advocating instead for a hybrid approach. While platforms like Webflow and Framer remain viable, they lock users into specific ecosystems, hosting, and CMS structures. The proposed workflow offers an alternative for clients seeking full ownership, lower costs, and greater flexibility.

2. The Proposed Workflow: Step-by-Step

The speaker outlines a four-step methodology to move from design to a live, manageable website:

1. Local Development: Install Node.js to create a local server environment on your computer.
2. AI-Assisted Coding: Use an AI agent (e.g., Claude Code) connected to Figma via the Figma MCP. The AI translates the design into functional code in a fraction of the time (approx. 30 minutes vs. 1–2 days of manual work).
3. CMS Integration: Implement Sanity as the CMS. This allows non-technical users to update content (blogs, projects) without needing to edit the underlying code.
4. Version Control & Deployment:
   • Push code to GitHub for professional-grade version control and backups.
   • Deploy the site to a live domain using Vercel, which often offers free tiers for hosting.

3. Key Arguments and Perspectives

• Efficiency vs. Hype: The speaker emphasizes that this workflow is a "productivity multiplier" rather than a replacement for existing skills. It allows designers to build complex, custom functionality (calculators, quiz logic, mini-apps) that standard website builders might struggle to support.
• Client Ownership: By moving away from proprietary platforms like Webflow/Framer, developers can offer clients full ownership of their codebase and hosting, which is increasingly requested by clients aware of current AI trends.
• Overcoming Technical Fear: The speaker shares a personal anecdote about being intimidated by GitHub, noting that learning these tools demystified the development process and reduced anxiety regarding AI's rapid advancement.

4. Notable Quotes

• "I don't think the right approach is to either go all in on AI and drop what's working today. But also, we cannot ignore this new shift."
• "This is not about replacing how you work right now, but rather adding a new valuable workflow that's gaining traction."

5. Synthesis and Conclusion

The core takeaway is that modern web design is evolving toward a "developer-lite" model where designers use AI agents to handle the heavy lifting of coding while maintaining control over the design and content. By adopting a stack consisting of Figma, Claude Code, Sanity, GitHub, and Vercel, designers can build faster, offer more advanced features, and provide clients with greater independence. The speaker concludes by inviting viewers to a 4-day AI web design sprint to practice this workflow in a guided, non-hyped environment.