Elizabeth Lin – Prototyping with Cursor

A self-paced online course taught by Elizabeth Lin

AI tools like Cursor are expanding what’s possible for designers and non-developers. Instead of spending hours manually crafting prototypes, you can now build interactive prototypes in minutes.

Whether you want to create a custom portfolio from scratch or build with components straight from your Figma design system, this course is a great fit for you!

Explore two ways of working with Cursor

• Creative exploration
  How can Cursor be a creative partner in your work? What novel ideas can you generate with the help of an LLM? Design with a variety of visual styles, explore creative typography, and create a working piano.
• Technical execution
  What are practical ways for using Cursor in your design process? Using a Model Context Protocol (MCP), convert a design system into components for building pixel perfect prototypes. Learn to build prototypes with real data.

What You’ll Learn In Prototyping with Cursor

• Foundations: Getting started
  Learn the basics of Cursor, set up your development environment, and practice git basics.
• Project 01: Customize your homepage
  Personalize your project’s landing page with visual styles and creative prompts.
• Lesson: Debugging 101
  Master essential debugging techniques to fix errors in your code.
• Lesson: Deploy your website
  Publish your projects to the web using Vercel.
• Project 02: Make a piano
  Create a working interactive piano.
• Project 03: Play with type
  Explore CSS typography effects and animations beyond traditional design tools.
• Lesson: Rules
  Learn to create global and project-specific rules to guide Cursor’s behavior.
• Project 04: Note-taking interface
  Create a window-based note app with rich text editing.
• Project 05: Digital bookshelf
  Build a database-powered prototype using the Notion API.
• Lesson: Your first MCP
  Connect Cursor to external apps like Figma using Model Context Protocol.
• Lesson: Start from scratch
  Set up a Next.js project independently and connect it to GitHub.
• Project 06: Design library
  Convert Figma design systems into reusable code components.
• Project 07: Remix an arcade game
  Build a game using AI-generated starter templates.