Day 1 - Wednesday Nov 5th

Goal: Learn basics through using web technologies

Introduction

15 min

Overview

Welcome to Design Days X AI. Setting context and expectations for the two-day sprint.

Steps

  • Max says welcome and introduces agenda
  • Explain the philosophy: Why this hands-on approach?
  • Designers love rectangles - they make us feel safe. But safety is not where good design lives.
  • Our products are made of inputs, latency, screen sizes, actual API data, and error states.
  • Getting our hands dirty with the actual building materials of our products

Tips

  • Why Cursor over Lovable or Figma Make?
  • 1. One tool, real code, real shipping - outputs are portable code you can keep, extend, and ship
  • 2. Lower cognitive load, higher flow - single AI-native IDE keeps people in one mental model
  • 3. Teaches durable AI fluency - learn to direct AI, read errors, structure prompts
  • 4. Collaboration that scales - teams can branch, PR, review with paper trail
  • 5. Risk + compliance sanity - local code, pinned deps, controllable API use

Task 1: Make a Small Thing & Learn Basics

90 min

Overview

Build a to-do list web app and learn Cursor fundamentals along the way. Focus on planning, prompting, and understanding core concepts.

Steps

  • Start with planning: How to start a project without painting yourself into a corner
  • Learn Cursor basics: Context window, Prompting, Modes (Plan/Agent/Ask), Models
  • Understand context window: AI has limited "memory" - give it just enough context
  • Master prompting structure: Goal + Context + Tech stack + Constraints + Examples
  • Build a to-do list using Next.js, Tailwind, shadcn
  • Keep it lightweight and frontend-only for now (backend comes later)
  • Set up Git repository for version control
  • Use Cursor to write commit messages

Tips

  • Context Window: "The AI eats words as tokens. Limited memory. Give just enough context."
  • Prompting Template: GOAL: Make a to-do list | CONTEXT: Tech (Next.js, Tailwind, shadcn) | CONSTRAINTS: Lightweight, frontend-only for now
  • Models: Speed? → Haiku 4.5 | Complex architecture? → Sonnet 4.5 or GPT-5 Pro | Pure coding? → GPT-5 Codex | Multi-file? → Composer 1
  • Cursor Rules: Long-term memory for your project. Set guardrails. Choose rule types: always, auto, manual
  • Multi-agents: Break down complex tasks with different agents handling different components
  • Internal browser: Great for UI testing, screenshots, console logs - less copy/paste

Troubleshooting

  • If AI forgets context: Add more specific details or reduce scope
  • If build fails: Check internal browser console logs
  • Git issues: Remember - this is your infinite redo button. You will mess up, that's ok.

Resources

Lunch Break

60 min

Break for lunch at Åpent

Task 2: MCP Servers & Figma Integration

120 min

Overview

Explore Model Context Protocol (MCP) servers, focusing on Figma integration. Turn designs into code, create design systems, and deploy live.

Steps

  • Introduction to MCP servers - extending AI capabilities
  • Set up Figma MCP server
  • Learn how to prepare Figma files for MCP (proper naming, structure)
  • Generate code from Figma frames - start simple (V1)
  • Refine with spec-driven approach: write detailed specifications (V2)
  • Use browser in Cursor for real-time UI testing
  • Create a design system in one prompt
  • Add features: image upload, interactions
  • Deploy to Vercel - make it live on the web
  • Optional: Make it weird with shaders

Tips

  • Figma MCP capabilities: Generate code from frames, extract design context, retrieve FigJam resources, use Code Connect
  • V1 Prompt: "Look at this design in Figma and come up with a plan to turn this app into what you see."
  • V2 Prompt: Add detailed specs - what pages do, interactions, default states, etc.
  • Spec-driven development: AI needs context. Spend time upfront describing what you want.
  • Design system prompt: "Create a design system based on this app's styles and components. Make it so changes in the design system update everywhere."

Troubleshooting

  • Figma not connecting: Check MCP server configuration
  • Code doesn't match design: Add more detailed specifications in prompt
  • Deploy breaks: Check build logs, fix errors incrementally

Resources

Task 3: Backend with Supabase

90 min

Overview

Add a backend to the app with supabase

Steps

  • Go here https://supabase.com/docs/guides/getting-started/mcp and set up the MCP server for the project
  • Go into plan mode and just ask cursor to help you set up a backend with supabase
  • Add environmental variables

Tips

  • It's some secret stuff the app needs to know, to run. So instead of putting it in the code, we store it somewhere outside the code but the app knows where to go and get it. It's basically how we securely store the key to the kingdom

Resources

Task 4: Hacking on the Portal

90 min

Overview

Add a backend to the app with supabase

Steps

  • Use git and pull down the repo "merchant portal frontend" locally on your machine
  • Get it running. Ask cursor for help
  • You have to enter the user's NIN/SSN the first time. I assume it's not a big deal if you all log in as the same person, but here are some options if you log in with Norway → BankID: 29059030742 01011000300 Both have a one-time code (OTP) and the password qwer1234. You can also log in as a Finnish user by selecting Bank credentials (Finland), clicking "Aktia", and then pressing all the black buttons that appear afterward to log in as a Finnish default user.
  • Try redesigning something

Tips

  • Use AI to understand unfamiliar codebases
  • Ask: "Get to know this codebase and tell me what we need to do to run it locally"
  • Start with small changes to build confidence
  • Use git branches for experimental changes

Troubleshooting

  • Dependencies fail: Check Node version, try clearing cache
  • Environment setup: Ask AI to help troubleshoot specific errors
  • Portal won't start: Check all required env vars are set

Dinner & Wrap

60 min

Overview

End of Day 1