Skip to Content
View all events

Claude Design for Full Stack Development

Published by O'Reilly Media, Inc.

Intermediate content levelIntermediate

Hands-on web design with Claude’s AI tools

What you’ll learn and how you can apply it

  • Use Claude Design to build professional, responsive web layouts across grid, single-page, card-based, and advanced layout patterns
  • Identify common antipatterns and best practices when prompting Claude Design for UI and frontend projects
  • Apply advanced layout techniques such as split screen, bento box, and asymmetrical designs to create unique, visually compelling product pages

Course description

Claude Design is a new tool that lets full stack developers describe a layout and get production-ready frontend code in return. This hands-on, two-hour live course with Bruce Hopkins teaches you to build professional web UIs using Claude Design for every major layout pattern.

You’ll work through four complete layout projects using Claude Design, starting with grid-based layouts for a company website and proceeding to single-page layouts for a brand refresh. From there, you’ll build card-based layouts for an interactive web application and finish with advanced techniques like split screen, bento box, and asymmetrical designs for a flagship product page. If you’re not familiar with these terms, you’ll quickly learn what they mean and how to use them properly.

This live event is for you because...

  • You’re a frontend developer who wants to speed up UI development with AI-powered design tools.
  • You’re a UI/UX designer looking to prototype and build layouts faster using Claude.
  • You’re a backend developer who wants to learn modern layout techniques with AI assistance.
  • You’re familiar with Claude but want to use it specifically for UI and frontend work.
  • You want to deliver polished, professional web designs quickly without deep CSS expertise.

Prerequisites

  • A modern web browser (Chrome, Firefox, or Edge)
  • A Claude account with access to Claude Design
  • A text editor or IDE
  • Basic familiarity with HTML and CSS concepts
  • Experience using Claude or other AI assistants
  • An understanding of web layout concepts such as grids, cards, and responsive design

Recommended preparation:

Recommended follow-up:

Schedule

The time frames are only estimates and may vary according to how the class is progressing.

Introduction to the Claude ecosystem (15 minutes)

  • Presentation: Why Claude Design is best for UI and frontend projects; other components of the Claude ecosystem; design terminology; major antipatterns

Using Claude Design for grid-based layouts (30 minutes)

  • Presentation: Creating a new company website for quick engagement; using grid-based layouts
  • Demonstration: Using Claude Design for the website
  • Q&A
  • Break

Using Claude Design for single-page layouts (25 minutes)

  • Presentation: Creating a new look and feel for a website; using single-page layouts
  • Demonstration: Using Claude Design to revamp an old website
  • Q&A

Using Claude Design for card-based layouts (25 minutes)

  • Presentation: Creating an interactive UI for a web application; using card-based layouts
  • Demonstration: Using Claude Design to make a UI
  • Q&A

Using Claude Design for advanced layouts (25 minutes)

  • Presentation: Designing a unique product page for a flagship product; split screen, bento box, and asymmetrical layout styles
  • Demonstration: Using Claude Design for a bento box layout style
  • Q&A

Your Instructor

Bruce Hopkins

Bruce Hopkins is a Claude Certified Developer, an Intel Software Innovator for AI, and an Oracle Java Champion. He’s also the author of ChatGPT for Java and the coauthor of Beginning ChatGPT for Python.

Xlinksearch

Skills covered

  • Design Patterns
  • JavaScript
  • HTML
  • Responsive Web Design