Using AI to Build Instant UI: Prototyping with Claude Artifacts & Tailwind

(Participants will be provided access to Claude Sonnet 3.5 for the workshop)

This workshop focuses on the full software lifecycle (IDE, Deployment, Logic). It is purely focused on Design Speed. It is perfect for Product Managers, Marketers, or Founders who need to visualize ideas instantly without waiting for a designer. The goal is to explore AI techniques that helps us to quickly build a complete "SaaS Marketing Kit" (Landing Page + Pricing Calculator + Admin Dashboard).

This workshop turns non-designers into UI wizards using Anthropic's "Artifacts" feature. Participants will learn how to bypass Figma and Photoshop entirely, using natural language to generate professional, code-backed user interfaces in seconds. The focus is on "Painting with Prompts"¿learning the vocabulary of modern design (Tailwind CSS, Shadcn UI, Glassmorphism) to manipulate Claude into generating stunning interactive prototypes.

By the end of this workshop, attendees will have had an opportunity to develop a portfolio of high-fidelity dashboards, landing pages, and components that can be handed directly to developers or used in pitch decks.

Topic Outline

Session 1

Module 1: The Artifact Revolution
Objective: Setting yourself up for success
The Feature Toggle: Ensuring everyone has "Artifacts" enabled in Feature Preview.
Text vs. UI: Understanding when Claude writes text vs. when it renders a window.
The Can (and Can't) Do for UI/UX: Understanding the realistic limitations and deliverables you can provide your team.
Prompt and Recovery: How to get the most out of your language, and what to do when things don’t go your way
Hello World: Generating our first component: "Create a modern credit card checkout form with a gradient background."

Module 2: The Language of Aesthetics
Objective: Learning to speak "Designer."
Keywords that Work: We test the difference between "Make a button" and "Make a ghost-variant button with a rounded-full radius and a hover scale effect."
Style Keywords: Prompting for visual effects—"Add a glassmorphism card with a frosted glass effect."
Component Libraries: Requesting Shadcn UI components—"Use a Shadcn dialog for the signup modal."
The Tailwind Cheat Code: How to ask for specific Tailwind classes (e.g., bg-slate-900, text-transparent bg-clip-text) to get exact visual results.

Module 3: Project A - The Converting Landing Page
Objective: Building a full-page scrollable site.
Sectioning: We prompt iteratively: "Add a Hero section," then "Add a Testimonial Grid below it," then "Add a Pricing Table."

The Pricing Calculator: Adding interactivity: "Make the pricing table interactive. Add a toggle to switch between monthly and annual billing, and a slider to select the number of users. Update the total price dynamically."
Visual Hierarchy: Using prompts to fix spacing and font weights. "Increase the whitespace between sections to 100px (py-24)."

Session 2

Module 4: Project B - The Interactive Dashboard
Objective: Complex Data Visualization.
Charting: "Create a sales dashboard with a line chart for revenue and a pie chart for user demographics using Recharts."
State Management: Making it clickable. "Add a filter dropdown. When I select 'Last 7 Days', animate the chart data changing."

Module 5: Remixing & Iterating
Objective: The "Vibe Shift."
The Reskin: We take our dashboard and say: "Redesign this entire dashboard to look like a 'Cyberpunk' video game interface." Then: "Now make it look like a minimalist Swiss design poster."
Mobile Review: Resizing the browser to teach responsive prompting.

Module 6: The Handoff (Exporting)
Objective: Getting the code out.
React vs. HTML: How to ask Claude to give you the raw HTML file to save to your computer.
Publishing: A quick trick to publish the Artifact to a shareable public URL so they can send it to friends/colleagues.

Q&A and discussion