Publicis Sapient
Course

Vibe Code
for Designers

From pixels to production — ship real products with AI. A 3-week hands-on course for designers to generate real, functional prototypes using vibe coding techniques.

3 weeks
2h / session
Designers
2 Help Points
2 assignments + final

What You'll Learn

Scaffold and navigate a Next.js project using the terminal
Use MCP servers with Claude to generate UI components
Connect Figma design systems to live code via Code Connect
Build and publish a multi-brand design system in Storybook
Add motion and animation using Framer Motion
Deploy a functional product to a public URL

Presentations

Week 1Available

Frontend Engineering 101

AI Component Generation

  • What is vibe coding and why it matters
  • Terminal basics & Next.js scaffolding
  • Tailwind CSS & Markdown
  • MCP servers & Claude Skills
  • Generating UI components with Claude
  • GitHub: commits, branches & PRs
TerminalNode.jsNext.jsTailwind CSSClaude MCPGitHub
View presentation
Week 2Coming soon

Design System, Motion & Deploy

From Figma to Production

  • Figma MCP: tokens & components into code
  • Multi-brand design system & theming
  • Storybook: living component library
  • Code Connect: Figma to real code
  • Motion design with Framer Motion
  • Deploy to Vercel end-to-end
Figma MCPStorybookCode ConnectFramer MotionVercel
Preview
Week 3Coming soon

Show & Tell

Final Project Presentations

  • Live 5-min demo of deployed product
  • Peer critique & feedback round
  • Group discussion: lessons learned
  • No new content — this session is yours
Your deployed URL
Preview

Course Timeline

W1
HP1
A1
W2
HP2
FP
W3

Evaluation

Assignment 1 — Multi-Brand Design System

Before Week 2

25%

Assignment 2 — Vibe-Coded Dashboard

Before Week 3

25%

Final Project — Complete Product

Week 3 Show & Tell

40%

Participation & Peer Critique

Ongoing

10%

Resources

Submit Homework

Upload your Loom walkthrough for each assignment.

Documentation

15 reference guides covering all course topics.