Hi there, I’m Lai-Jing. I’m a digital product designer and product manager, a design educator and mentor, a career pivoter from architecture, and a compulsive bookmark collector…

Are you perpetually drowning in an ocean of fragmented content pieces?

Trying to learn from AI and tutorials—yet still feeling like you don’t have real command over your knowledge?

Then Syllabind is for you.

I’m connecting my best resources into focused, manageable syllabi—with practical exercises that pull you out of tutorial hell, help you stay sharp, and sort signal from noise. Everything here is based on paths I’ve already walked myself.

This guide is a 6‑week syllabus for creatives to build code literacy and regain creative control over vibe‑coding tools.

Subscribe to get updates on more syllabi like this.

It is 2026. Every day, a new “vibe coding” or “vibe designing” product or feature seems to ship. And while AI can impress us with decent designs from a single prompt, we still don’t have reliable, fine-grained control over the result. Somehow, even a simple change (like tweaking spacing) becomes difficult because the AI just “doesn’t get it,” and more opinionated creative expression feels even harder to achieve.

When prompting fails, code literacy becomes your lever for creative control. Understanding what’s possible (and what’s fragile) in today’s programming languages, frameworks, and libraries helps you course-correct when things go wrong—and push further when creativity is warranted. Let AI handle settings and authentication screens while you focus on the attention-grabbing moments and the highest-value capabilities that actually reach users.

Let AI be your best friend that makes your dreams come true, not the enemy that steals your job. With AI, we can go far by learning the right programming concepts without memorizing syntax. This binder uses that shift to our (designers’) advantage: you’ll move quickly through the main ideas, then collaborate with an LLM to realize your creative vision—with the vocabulary to describe constraints, evaluate output, and debug with confidence.

Learning outcomes

By the end of this binder, you will be able to:

• Steer AI-generated frontend work by writing clear prompts, reading the code it produces, finding the right files, and making targeted edits.

• Establish a “design-to-code-and-back loop”: translate a UI spec into implementation, and keep the spec in sync as the code evolves (so design intent doesn’t drift).

• Debug with AI using a repeatable workflow (reproduce → inspect → isolate → fix → verify) so you know what to do next.

• Use Git + GitHub for version control: understand the core terminology and concepts so you can direct AI tools to commit, push, and manage changes safely.

• Ship a small interactive website (deployed or runnable locally) you can share publicly or with potential employers, recruiters, or clients.

Target audience

This is not a bootcamp or ‘become an engineer’ track; it’s code literacy for creative control.

• Beginner designers who want a quick, modern ramp into web technologies so they can build (with AI) instead of waiting for handoff

• Experienced designers who have strong product instincts and taste, but want code literacy to direct AI tools, debug confidently, and raise the creative ceiling—shipping bigger visions beyond “good enough” AI output

Expected time commitment

• 10 hours a week (4–5 hours watching/reading, 4–6 hours doing exercises).

  ---

👩🏻‍💻 Don’t want to learn alone? 👨🏽‍💻

Apply to join a 6‑week, live Zoom seminar starting May 7, 2026, with a small cohort of fewer than 10 designers. Each week, we’ll tackle the readings together and share in‑progress work for feedback and accountability.

Register your interest

Prerequisite

Assumes intermediate-to-advanced knowledge in Figma design and prototyping, including: autolayout, constraints, absolute/relative positioning, components, variables.

At a glance

Week 1 – HTML/CSS mental models
Week 2 – JavaScript for interactions
Week 3 – Libraries & docs mindset (GSAP)
Week 4 – Out‑of‑the‑box vibe‑coding stack (React/Next/Tailwind/Shadcn)
Week 5 – AI‑assisted workflows (Cursor, Claude Code, Figma MCP)
Week 6 – Git/GitHub + shipping

Out of scope

• Mobile apps

• Code syntax

• Backend development

• Design explorations using vibe coding tools

Week 1: Let’s start at the very beginning —HTML/CSS

This week, we start by covering the latest discourse about designers’ relationship to code. Is coding knowledge still relevant when everyone seems increasingly reliant on vibe-coding tools? And how might our approach to learning code in the post-AI era differ from pre-AI?

Next, we will get into the very basics of “frontend” web development—i.e., how we control and define how visual and interactive elements, such as layouts, buttons, and text, appear in a browser.[1]

How modern frontend is usually structured (high level):

• HTML = structure (what is on the page)

• CSS = presentation (how it looks)

• JavaScript / TypeScript = behavior + state + data flow (how it acts)

This week, we will only cover the basics of HTML and CSS: the structure and styling layer that defines what’s on the page and how it looks. These building blocks are often used for “static” pages, but they can still be interactive (hover states, transitions, responsive layouts) even before we introduce JavaScript next week.

[1] As opposed to “backend,” which is everything that runs on servers (not in the browser) to store data, apply business rules, handle authentication, and send the right information back to the frontend via APIs (which would be the topic of a different binder!).

Sources

Total reading time: 4 hours 10 minutes

[Skim] What Is Code? If You Don’t Know, You Need to Read This [30 mins]

In 2015, Paul Ford opened his landmark essay “What Is Code?” with a warning: “The world belongs to people who code. Those who don’t understand will be left behind.” In 2026, that world has tilted even further. AI coding assistants and “vibe coding” tools—from Claude Code, Cursor, Windsurf, Lovable, Replit, v0 and more—let anyone turn natural‑language ideas into working software, collapsing the old wall between designer and developer. Yet the core dynamics Ford described haven’t changed: software still structures products, organizations, and power, and those who can think clearly about code shape what gets built.

This 38000-word article is widely recognized as a landmark for understanding programming. It lives on a beautifully designed, interactive multimedia website, and its code is open-sourced on the linked GitHub repo.

[Must] Designers Who Build: Learning to Code in the Age of AI | Jinyu Li | Layers 2025 [25 mins]

This is a talk by Jinyu Li, a senior product designer and street dancer in Berlin, about designers becoming end‑to‑end builders in an era of AI dev tools. She contrasts learning to code via manual ChatGPT workflows with newer “vibe coding” tools like Cursor, then examines their risks through two case studies: a Figma MCP design system that breaks from a single color-token change, and the Tea app, a vibe‑coded dating reputation app that leaked 1M users’ data. The talk emphasizes fundamentals, critical judgment, and solving real problems over AI hype.

[Skim] Lissa Explains it All -- HTML Help and Tutorials for Kids [30 mins]

A kid’s guide to HTML (1997), written by Lissa when she was 11 — and I was about the same age as her. Much of the site is dated, but the basic anatomy of a web page (HTML / head / body) is still explained more clearly here than almost anywhere else—and it’s where I started learning HTML and CSS.

[Must] Intro to HTML & CSS - Webflow University Courses [5 mins]

A pretty good overview of how the modern browser works and how to inspect client-side code of any website to get an understanding of page structure and styling.

(text: https://university.webflow.com/course-lesson/build-structure-background-preview)

[Must] Code • Plan, Design + Code Your First Website (Lessons 3-22) [1h 45mins]

SuperHi teaches designers how to code. Rik narrates in a clear “over-the-shoulder” style that helps you internalize how code is built. Most content is paid, but this course is free.

I’ll include free SuperHi videos throughout the binder. Stay high level, skim if you want, and feel free to watch at 2× speed.

[Skim] Welcome! | Cheshire’s Easy HTML/CSS Tutorial [15mins]

A Reddit user cheryllium created this beginners’ HTML/CSS guide to get people comfortable with HTML/CSS. You should be able to get through this quickly to get a high-level concept.

[Must] Why You Should Stop Watching Tutorials and Reading Docs + Escaping tutorial purgatory… [10 mins]

Hear from a developer who shares the mindset shift needed to avoid getting stuck in tutorial purgatory, along with personal tips for mastering a new technical skill.

[Inspiration] CodePen [30 mins]

CodePen is a browser-based playground for writing and sharing small HTML, CSS, and JavaScript experiments and seeing results instantly. Click around to explore the site, and observe how the three layers work together.

Exercise

Create a typographic poster

This week’s goal is to get comfortable with HTML and CSS on CodePen.

There’s a lot you can do with just HTML and CSS! San Francisco-based designer Do-Hee Kim challenged herself to create 100 Days of Fonts to show that even with free Google Fonts, you can create premium-looking web design.

Inspired by her project, use this as the starting point for your first coding experiment.

1. Go to https://codepen.io/pen/. Create an account if you want to save your work.

2. In the HTML box, write something in plain text, without code. If you can’t think of anything, try writing your name and your mood, like this: “Hi, my name is __. Today I’m feeling [Calm/Ecstatic/Powerful/Sad/Angry].

3. Challenge yourself to style it with HTML and CSS — change the font, add line breaks, and add a splash of color.

If you need help, refer to Cheshire’s Easy HTML/CSS Tutorial from this week’s resources!

Week 2: JavaScript for designers

Total reading time: 3 hours 35 minutes

JavaScript is the language that runs inside the browser and turns static HTML/CSS into an interactive product. It lets you:

• Respond to user input (clicks, typing, scrolling)

• Update the UI over time (animations, transitions, showing and hiding content)

• Manage UI state (loading, error, empty, success)

• Talk to the network (fetch data from APIs, save forms) ← out of scope for this binder

JavaScript is a deep well, but let’s try to keep it simple and relevant to frontend and design. In this binder we focus on a high-level idea: using the DOM (the browser’s “map” of a page) to create interactions, without going deep into syntax. This will help you review AI-generated code, describe changes clearly, and debug faster.

Sources

[Must] The JavaScript DOM explained in 5 minutes! 🌳 [5 mins]

Although the narration sounds robotic, this video is incredibly helpful for visualizing the DOM because it keeps the DOM tree on screen the entire time. This visual reference will be useful as we use it as an anchor throughout the week.

[Must] The DOM in 4 minutes [5 mins]

The video is actually 3.5mins — and it will set your mental model straight.

[Must] DOM Manipulation and Events | The Odin Project [45 mins]

The Odin Project is a free, open-source, volunteer-run curriculum. It is text-based, but easy to follow. In the Assignment section, item 1 goes deeper on events without much overwhelm. Use it for a broader overview, not to master every detail.

[Must] How to make a Javascript accordion [15 mins]

Now, let’s put all that theoretical knowledge into practice. In this video, Isabel, an instructor at SuperHi, talks through how to build an accordion element from scratch with HTML, CSS, and Javascript. Do not focus too much on the exact syntax. Instead, pay attention to how the three layers reference each other and how the interaction is expressed in code.

[Must] Coding Tutorials [2 hours]

Checkout SuperHi! youtube playlist and watch 2-3 more examples that pique your interest and to spark creative inspiration.

[Must] Everything You Need to Know About Coding with AI // NOT vibe coding [15 mins]

This video explains the difference between “vibe-coding” (coding based purely on “vibes”) and AI-assisted coding with precision, which is the approach we aim for in this binder.

Exercise

Add JavaScript interactions to your typographic poster

This week’s goal is to add interactive JavaScript to the mini project you built on CodePen in Week 1. You do not need to write the JavaScript yourself; instead, use AI to help. The key is to describe what you want clearly so you can achieve the desired effect efficiently.

1. Open your project and think of an interaction you want for your typographic poster. Keep it playful! For example: make letters shake on hover, use the left and right arrow keys to change the composition, or reveal the text line by line on scroll.

2. Describe the interaction in this format: “When the user does X, Y happens to Z. It resets when A happens.” Here, “X” could be a mouse event, page scroll, or key up/down; “Y” could be an element changing color, rotating, or scaling; and “Z” is the target element (use an existing CSS selector if you already have one; if not, add a simple class like .title so JS can reliably find it). “A” is what returns it to the original state. Keep it simple and use your knowledge of JavaScript’s capabilities as a guide.

3. Paste the HTML and CSS code into an LLM chatbot of your choice (eg. ChatGPT, Claude, Gemini), along with your JavaScript instructions.

4. Review the output and fine-tune it if needed. Ask the AI to explain it in 3 bullets as a sanity check: (1) what HTML element it targets, (2) what event it listens to, and (3) what CSS changes it applies. If anything does not match your expectations, correct it. This is a helpful debugging technique.

5. Paste the code back into your CodePen project.

If you need help, refer to Cheshire’s Easy HTML/CSS Tutorial from last week’s resources!

🎨 It’ll be fun to html together 🎹

Apply to join a 6‑week, live Zoom seminar starting May 7, 2026, with a small cohort of fewer than 10 designers. Each week, we’ll tackle the readings together and share in‑progress work for feedback and accountability.

Register now

Week 3: Working with coding libraries — the docs mindset

Total reading time: 3 hours 15 minutes

A library is a reusable collection of prewritten code (functions, components, styles, or utilities) that you import into a project to add capabilities without building everything from scratch. Some frontend libraries make it much easier to create impressive visuals and interactions, such as smooth animations, scroll-driven effects, and 3D or canvas-based graphics. For example:

• three.js via WebGL - creates interactive 3D graphics in the browser

• GSAP - choreographs smooth, precise UI and motion

• matter.js - simulates motion physics and collisions for interactive scenes

In the vibe-coding era, we can accomplish much more, much faster than in the past, when everything had to be coded by hand. AI can generate a lot of this quickly, but without the right mental models it’s hard to prompt precisely, evaluate the output, and debug issues. The good news is that having the right concepts, plus a clear sense of today’s possibilities and limits, can take us surprisingly far through prompting.

To avoid overwhelm, this week focuses on two things:

1. How to adopt new libraries in an AI-assisted workflow, and

2. how to apply that through hands-on experimentation with one particular library, GSAP.

The same approach can be reused when learning and using other frameworks you might encounter.

Sources

[Must] Moxy 3D Mockup Studio - Less Flat. More Fab. by Susanna Nevalainen [30 mins]

Read Susanna’s write-up of her award-winning Figma Make-a-thon entry that uses three.js and other libraries to bring her creative vision to life. Notice her design-to-dev process, how she prompts, the challenges and roadblocks she encountered, and the knowledge she applied along the way.

[Must] damien on Twitter / X - 3 Lovable examples and a guide on GSAP animations [15 mins]

This is an incredibly useful article with three inspiring vibe-coded prototype examples and a write-up that breaks down the frontend development process. Notice what the author specifies to the AI tool in terms of specs and code snippets.

See the three examples here:

• Nøva (templatenova.lovable.app)

• Oak Atelier (oakatelier.lovable.app)

• VØID Intelligence (void-dance.lovable.app)

[Must] Coding Tutorials vs. Documentation: Which is Better for Learning? [5 mins]

Most beginners gravitate toward tutorials when learning a new technical topic, but we often underestimate the usefulness and importance of official documentation. Both are incredibly useful and complement each other. This article supports why, this week, we will lean more on official documentation as we approach a new subject.

[Must] #4: Read ALL The Documentation [10 mins]

While the article above discusses the “why,” this one covers the “how”: how to approach reading documentation and what to look for.

[Skim] resources | GSAP | Docs & Learning [2 hours]

Study this doc (Getting Started section) and try to glean for the following:

1. What’s this library for? What are 2-3 most common use cases?

2. Notice the action verbs used across the library — they indicate functionality. Pick 5 that interests you.

3. Look out for pitfalls and constraints — these indicate limitations.

[Inspiration] Student work • SuperHi [15 mins]

Browse SuperHi’s student-work gallery for inspiration. As you click through projects, note what each piece is trying to do (layout, interaction, animation, 3D, etc.) and which stack or library makes it possible.

Exercise

Reading documentation in the vibe coding era

If AI can generate working code in seconds, why read docs at all? Because docs help you build taste + precision: you learn both the possibilities and the limitations of the library—so you can prompt better, judge output faster, and debug with confidence.

1. Skim the landing page. Get a sense of what the library is for and what you can do with it.

2. Identify the library’s “verbs.” Skim headings and look for the core API calls. For GSAP, these often include creating tweens, creating timelines, targeting elements, controlling timing and easing, and responding to scroll.

3. Collect pitfalls and constraints. Look for sections like “caveats,” “browser support,” “performance,” “accessibility,” “reduced motion,” and “common mistakes.” These become prompt constraints later.

4. Ask AI to translate the docs into your own words. Prompt: “Summarize this doc page into 5 bullet points: what it does, when to use it, common pitfalls, and a tiny example.” (You’re using AI as a reading partner, not as a source of truth.)

5. Build a personal “prompt template” for this library. Example: “Use GSAP timelines. Respect prefers-reduced-motion. Don’t animate layout-thrash properties. Explain the selectors you used.”

6. Copy the smallest example into CodePen (or your local project) and get it working unchanged first. Treat this as your “known-good” baseline.

7. Make one deliberate change at a time. Change exactly one variable (duration, easing, stagger, selector, etc.), observe the result, and write a one-line note: “I changed X → effect Y.”

Once you feel like you understand how the library works, create your own project with it, and/or write a blog post that includes your prompt template to share with the world.

🪑 Let’s do this together 🪑

Apply to join a 6‑week, live Zoom seminar starting May 7, 2026, with a small cohort of fewer than 10 designers. Each week, we’ll tackle the readings together and share in‑progress work for feedback and accountability.

Register now

Week 4: The “out of the box” vibe-coding stack

Total reading time: 3 hours 35 minutes

When you open apps like Figma Make or Replit, enter a prompt, and watch them spin up a web app prototype automatically, the codebase you get usually reflects a default stack built from a few common libraries and frameworks.

• Framework (app structure + routing): Next.js (built on React), Nuxt (built on Vue), SvelteKit (built on Svelte)

• UI library: React, Vue, Svelte

• Styling approach: Tailwind CSS or CSS modules

• Component kit: shadcn/ui, Radix UI, Material UI

• Data fetching: built-in fetch, or a helper like React Query (TanStack Query)

This week, we’ll read the introductions in the official documentation for these tools as a habit-building practice. Building on what we’ve learned in previous weeks, these documentation sites should make some sense. Once you get more comfortable with them, vibe coding will feel a lot less like dealing with a black box.

Goal for this week: build a mental model so you can read AI-generated JS, ask for the right changes, and debug behavior without memorizing syntax.

Sources

[Must] React in 100 Seconds [2 mins]

React is a UI library for building web interfaces out of reusable “components.” This video gives you a fast overview of the big ideas you’ll keep seeing in React code—components as functions, passing information into a component, and letting the UI “remember” things and update when something changes.

[Skim] Quick Start – React [1 hour]

Start with React’s Learn guide for the official, beginner-friendly mental model of how React works. Start with “Quick Start” page, then hop over to the 4 “Learn React” pages to get comfortable with the core concepts:

• Describing the UI — Build interfaces by composing reusable pieces called components.

• Adding interactivity — Handle user input with events and update state to keep the UI in sync.

• Managing state — Structure and share state as your app grows.

• Escape hatches — Do work that reaches outside React’s render cycle (for example: reading/writing to browser APIs, focusing an input, syncing with external systems) using effects and refs when needed.

[Must] Next.js in 100 Seconds // Plus Full Beginner’s Tutorial [12 mins]

This video gives you a quick big-picture intro to Next.js, followed by a short demo. Although Next.js includes both frontend and backend capabilities, it’s useful to get familiar with it for AI-assisted coding because it helps you understand where frontend code sits within the framework.

[Skim] Next.js Docs [1 hour]

Keep this documentation handy as a guide to look up when needed.

Start with “Project Structure,” “Layouts and Pages,” “Linking and Navigating” for the basics before hopping into other pages that might interest you. Look out for action verbs (which indicate function/API) and constraints, which are limitations to be aware of.

“CSS” would be a good segue into the next resource!

[Must] Tailwind in 100 Seconds [2 mins]

This overview quickly covers what Tailwind was meant to solve, as well as the predominant limitations and criticism it faces.

[Skim] Utility-First - Tailwind CSS [30 mins]

Skim the Core Concepts section to get the mental model for how Tailwind works. Then treat the reference pages as your lookup table: when you need a specific utility, you can quickly find the class name and the exact CSS it maps to.

[Must] Shadcn UI in 100 Seconds: The Ultimate Tailwind CSS Hack You Need! 🚀 [2 mins]

Here’s a 100-second intro into Shadcn, not by Fireship, but with a touch of humor and sarcasm.

[Must] AI-First UIs: Why shadcn/ui’s Model is Leading the Pack | Refine [7 mins]

This blog post explains why Shadcn is the default UI component library for most AI code generation tools.

[Skim] Introduction [30 mins]

This is the official documentation of shadcn. Pay closer attention to the introduction page, and then just hop around the skim through the rest of the pages to see what’s there!

[Optional] Beautiful themes for shadcn/ui — tweakcn | Theme Editor & Generator [10 mins]

Explore tweakcn — a visual theme editor for shadcn/ui + Tailwind that lets you generate and fine-tune your design tokens (colors, radius, typography, etc.) and export the config/CSS so your whole component library updates consistently without hand-editing a bunch of classes.

Exercise

Sketch out your capstone project idea — Personal website / product landing page

This week, we will begin to work on our final capstone project — which will culminate in Week 6. This project is inspired by the steps laid out designer-builder damien on X, which we read about last week.

One piece of portfolio advice I often give junior designers is this — 100% of your website visitors will see your hero space, so it is critical to use it well and make sure your elevator pitch shines through. Check out the following two examples!

I can’t think of a higher-leverage exercise than creating a thoughtful, interactive experience at the top of your landing page, using both AI and your own coding knowledge.

So, without further ado — let’s begin.

1. Brainstorm and sketch an interactive hero for your personal website on paper. Consider: What are you passionate about? What look and feel do you want to create? What message do you want to convey? What kind of playful interactive or animated experience do you want to create? (Consider what GSAP can accomplish for you, or learn about a different frontend library such as three.js, p5.js, etc.)

2. Build a mood board with your inspirational references, and define the visual system, including fonts and colors.

3. To maintain creative direction and control, start by designing the layout composition and preparing visual assets in Figma.

4. In Figma, write out the layout rules and animation specs in a text box next to your artboards, so you have a record you can always refer to.

5. Sketch 2–3 breakpoint variants (mobile / tablet / desktop) and note what changes.

   We will start the vibe coding process next week.

📌 Grading Rubric

References:

Week 5: AI-assisted design and development

Total reading time: 4 hours 35 minutes

This week, we finally dive into vibe-coding head on, armed with the programming knowledge from previous weeks. The goal is neither to be too prescriptive or overwhelm you with too many tools and theory. Right now, everyone is still exploring AI workflows and experimenting with them in different ways — the most productive thing I can do for you here is to provide you with the starting points for exploration. We will first go through a high level mental map of AI design, then set up Cursor, Claude Code, Figma MCP(s), and we will close it out with some quick tips for debugging.

Sources

[Must] CLAUDE CODE FOR DESIGNERS (Full Course - 4 Hours) [2 hours]

In this 4‑hour course, Alen Faljic from d.mba teaches designers agentic design using Claude Code, with a strong focus on practical workflows. It gives you a solid mental model for how LLM‑based AI agents work, plus concrete ways to start on the right foot. What it covers:

• what AI ‘agents’ and ‘agentic’ design are;

• how to orchestrate workflows that combine AI’s probabilistic ‘thinking’ with deterministic scripts and skills for reliability;

• core concepts like system prompts, skills, context rot, MCPs and related tooling;

• real applications such as building and shipping simple sites and apps while incorporating AI-native design systems;

• automating research and operational workflows.

Feel free to watch at 2X speed and slow down when needed.

[Must] The AI Design Map: A Practical Guide for Designers into 2026 [5 mins]

This Substack article provides a helpful breakdown of vibe-designing tool categories and when to use each. It distinguishes tools for divergent thinking (early exploration and brainstorming) from those for convergent production (polish and refinement, closer to shipping). Use it as a reference to structure your workflow, but you do not need to follow it strictly.

[Must] Cursor · Workshops [1 hour]

Cursor — the popular AI code editor (IDE) — maintains a very good archive of webinar content. Scroll down to “On-demand sessions” and look for “Cursor 101” for an introduction to the tool.

[Must] Claude Code overview - Claude Code Docs [15 mins]

Claude Code is a command-line tool you run in a terminal, so you can use it from any editor or IDE that gives you a terminal (including Cursor). Cursor and Claude Code are separate tools: Cursor provides its own built-in AI chat/models, while Claude Code uses the models and settings from your Anthropic/Claude setup. Use this guide to install and run Claude Code for the first time.

[Must] Vibe Coding Guide for Designers [8 mins]

Watch your hard work pay off — This 8-minute video that explains why for designers having a fundamental understanding of code will help bridge the gap between design canvases and production-code.

[Must] Figma Console MCP - Turn Your Design System Into a Living API [30 mins]

Figma Console MCP is a third-party MCP server (maintained by TJ Pitre) that connects your AI assistant to your Figma files through the Figma Console plugin and Figma’s plugin APIs. Compared to the official Figma MCP, it focuses on deeper access to design-system primitives (for example: variables/tokens, styles, pages and layers) to support workflows like inspecting, updating, and syncing design decisions with code. See “Figma MCP vs. Console MCP” (under “Guides”) for a side-by-side comparison if you want the details.

[Must] Figma tutorial: How to set up Figma remote MCP server [April 2026] [5 mins]

Watch this tutorial to kick start your exploration of Figma’s official, first-party MCP.

This MCP can read designs, generate code, capture live web pages into Figma layers, and (as of the March 2026 update) write directly to the canvas —creating and editing frames, components, variables, and auto layout using Figma-native structure and matching your code-base design system.

The official server and Figma Console MCP are designed to be complementary: use the official server for code-to-canvas workflows (capture/code generation), and use Console MCP for design-system workflows like token architecture, batch variable operations, parity checks, and documentation when you need them.

[Must] Announcement: Agents, Meet the Figma Canvas | Figma Blog [15 mins]

Read the March 2026 announcement blog when agents on canvas was first released.

[Must] What Is Debugging? | IBM [20 mins]

What should you do if your AI output keeps throwing bugs and errors? This IBM guide explains a general debugging methodology that you can translate and apply to AI-assisted workflows.

[Must] Vibe debugging best practices that gets me unstuck. [10 mins]

This Reddit post offers practical, in-the-trenches tips for debugging vibe-coded projects.

Exercise

Productionize your hero with AI-assisted coding

For the following two weeks, you’ll turn your Week 4 hero concept into a working codebase you can run and share. Use your Figma mockups + written specs as your source of truth, then generate a first pass in a vibe-coding tool of your choice (Figma Make, v0, Replit, Cursor, Claude Code, etc.) and iterate with this loop: reproduce → inspect → isolate → fix → verify.

1. Copy your Week 4 layout rules + animation specs into your tool’s prompt, and attach or reference your Figma mockups + assets.

2. Generate a baseline that matches the layout (don’t optimize yet); get it running locally or in a hosted preview.

3. Make at least 3 targeted edits: (a) layout/spacing, (b) typography, and (c) one interaction/animation.

4. Debug any issues using the loop above, and verify the fix (refresh, test the trigger, and confirm it resets correctly).

5. Open the folder structure and identify where these live: routes/pages, components, styles/tokens, and assets; then answer: “Where would I change the hero copy, layout, and animation?”

6. Optional: Add a second page to the site, and observe if the same styles and components are being used consistently. If not, try to get to the root of the issue by debugging and refactoring the code.

If you need help, reference damien’s “Prompt Template” for inspiration.

Feel free to continue working on this next week, since Week 6 (Git/GitHub) is largely informational.

Grading rubric:

Capstone: Frontend Code Literacy for Designers in the AI Era - Grading Rubric

Week 6: Git and GitHub

Total reading time: 2 hours 16 minutes

In the final week, we’ll cover the essentials of Git and GitHub: how to save your work in a repository, understand version history, and collaborate without stepping on each other’s toes. We’ll cover Git + GitHub, which are used for storing and sharing your code. For static sites that use only HTML/CSS/JS, GitHub Pages is often the simplest deployment path once your repo is set up.

(For fullstack apps that include authentication, servers, and API routes, which is out of scope for this binder, you’ll likely use a cloud hosting platform such as Vercel. We won’t cover that step by step in this binder. If you go this route, you may ask your vibe-coding tool to guide you through deployment — most of them do a pretty good job.)

Sources

[Must] Git and GitHub for Poets [2 hours 16 mins]

This (older) YouTube playlist gives a friendly, conceptual introduction to Git and GitHub—version control, repositories, commits, branches, merges, and pull requests—using a hands-on workflow. Get familiar with the vocabulary and mental model; you don’t need to memorize terminal/Bash commands.

Exercise

Continue to work on your capstone project!

If you are running the build locally on your machine, use what you learned this week to push the code to GitHub. If you are using Claude Code or Cursor, you can ask the LLM to run git commands in natural language, with an understanding of the concepts and terminology.

✨ Let’s study together. ✨

Apply to join a 6‑week, live Zoom seminar starting May 7, 2026, with a small cohort of fewer than 10 designers. Each week, we’ll tackle the readings together and share in‑progress work for feedback and accountability.

Register your interest

💝 Thank you for reading and supporting. What do you want to learn next?

Share Syllabind — Not Another Bootcamp