SESSION PLAN
Five parts
PART 1
Course Introduction
Introduce ourselves, walk the syllabus, and say what “AI prototyping” actually means.
PART 2
Projects & Evaluation
The midterm, the final, and the weekly deliverable. Department policies on attendance and grading, and the AI use policy.
PART 3
Toolchain Overview
Name each piece and what job it does. Not how to use it yet — just why it exists.
PART 4
Account Setup
Every account created and working before you leave the room.
PART 5
Class Exercise
Update your README on GitHub, then build a one-page introduction with an AI tool and present it to your group.
PART 1 · COURSE INTRODUCTION
LECTURECourse Introduction
AI prototyping is using an agent to get from an idea to something running, fast enough that throwing it away and starting again costs an evening rather than a month. The bottleneck moves from typing to deciding: what to build, what to keep, and what to throw out.
Instructors
David Mendez
Staff Software Engineer · CNN
New York City
A full-stack engineer with over a decade of experience building dynamic, data-driven applications — educational games, agency work, and now real-time applications and interactive maps that power live news coverage and editorial storytelling.
BFA, Computer Animation and Interactive Media — FIT
Hedy Deng
Senior Software Engineer · WW International
New York City
A senior software engineer with over a decade of experience building performant, scalable and accessible web applications — from government sites to media platforms serving millions of users. Full-stack mindset, and a bias toward clean code and thoughtful UX.
BS — Cornell University
Course Syllabus
WEEK
DATE
TOPIC
WHAT HAPPENS
01
Sep 2
Introduction
Course intro, expectations and policies, the toolchain, and every account working before you leave
02
Sep 9
Your First Webpage & Git Basics
Hand-code a page, submit it through Classroom 50, and publish it to a live URL
03
Sep 16
Enter AI Coding
A real development environment, and prompting as a skill
04
Sep 23
Static App I — Designing with an Agent
Research a topic in AI and design a page about it with an agent. Learn what MCP actually is, and what makes a Figma file readable to code.
05
Sep 30
Static App II — Building & Deploying
Turn a Figma design into a working website. Learn what npm, Node.js, React and Next.js are, build your components in Storybook, and put the site live on GitHub Pages.
06
Oct 7
Full Stack App I — Build and Ship a Chat App
A working AI chat app built from a supplied wireframe, deployed to Vercel
07
Oct 14
Full Stack App II — Tools and Previews
A tool in your chat app, built on a branch and tested on a Vercel preview
08
Oct 21
Animations & Interactivity
3D scenes with React Three Fiber and animation with Motion. Midterm brief released.
09
Oct 28
Midterm Work Session
A full session dedicated to building the midterm
10
Nov 4
Sharpening Your Tools & Accessibility
Midterm due. Custom AI agent commands and skills, plus an accessibility pass on your own project.
11
Nov 11
Authenticated App I — Databases
Databases in plain language; modeling your data with accounts in mind
12
Nov 18
Authenticated App II — Production Readiness
The work between “it runs” and “it ships”. Final project announced.
13
Nov 25
Final Project Work Session
A full session dedicated to building the final project
14
Dec 2
Final Presentation Review
Work-in-progress presentations, structured peer critique, and final scope decisions
15
Dec 9
Final Presentations
Each student demos their live, deployed application
PART 2 · PROJECTS & EVALUATION
LECTUREProjects & Evaluation
Midterm Project
20 pointsMajor-Specific Project: students propose and build an original application of their own choosing — ideally connected to their major, portfolio, or an actual problem they want solved.
Final Project
30 pointsMy Creative Assistant: each student will analyze their own creative process and build a simple tool or agent that will help them improve it. The project must be deployed and must use a real data layer or an AI-powered feature.
Weekly Deliverables
30 pointsAccept each assignment and push your work to its repository before the deadline. Each repo needs a README.md listing what you built, the live URL where one exists, and any links that week’s deliverables call for.
Professionalism
20 pointsAttendance and punctuality, active participation in class, presentation quality, willingness to debug, ask questions, and help classmates, and overall engagement and responsibility.
Creative Technology & Design (CT&D) Attendance Policy
- Students are required to attend all classes, be on time, and remain for the entire class.
- Students who miss three classes for classes meeting once a week or four classes for classes meeting twice a week will receive a grade of “F.”
- A student who arrives 10 minutes after the start of class will be considered late.
- Two late occurrences = one absence.
- A student who arrives over 30 minutes late, or who does not return from the break, will be considered absent from the class.
- Working on projects for another class, or using digital devices for socializing or gaming during class time, will be recorded as an absence.
- An excused absence is still recorded as an absence. The difference is that an excused absence won’t impact your grade for professionalism and class participation.
AI USE POLICY
The tools are the subject matter. You own the output.
This course is built around AI-assisted development, so the use of AI tools is not merely permitted — it is the subject matter. You must be able to explain any choices in your project, and you are responsible for fact-checking output, avoiding stereotyping and bias, and ensuring your final work is unique and ownable.
AI DISCLOSURE
This website was made with AI in the loop.
The code and design files for this website were largely AI written. However, decisions like art direction, tech stack, and hosting were made by humans. Content is also a mix of AI generation, existing documentation, and personal experience, but humans proofread all of it to ensure quality. Most assets, like screenshots and videos, were made by humans.
PART 3 · TOOLCHAIN OVERVIEW
LECTUREToolchain Overview
TOOL
WHAT IT IS FOR
GitHub
Where the code lives and how versions are tracked
Classroom 50
Where assignments are handed out, submitted, and returned with feedback
VS Code
The editor everything happens in
Claude Code / Codex
The agent that writes and edits the code
Figma
Where the design system is defined
Vercel
Where the finished apps get deployed
How Classroom 50 works
It has no database of its own — it is a thin layer over GitHub. An assignment is a repository, submitting is pushing to it, and feedback is comments on a pull request.
Accept link
the instructor posts it
Your repo
in fitnyc-ct390
git push
that is the submission
Feedback PR
where comments land
PART 4 · ACCOUNT SETUP
LABAccount Setup
1
GitHub account
Create the account, then apply for GitHub Education with your FIT email. Approval is not instant, so start it tonight.
github.com/signup (opens in a new tab)Applying for GitHub Education, screen by screen
2
Figma account
Apply for Figma Education with your school email — an education seat is what lets you be part of an educational team. The review usually takes a few minutes, and the result arrives by email.
figma.com/education/apply (opens in a new tab)Applying for Figma Education
3
Classroom 50 account
Classroom 50 is where every assignment is handed out and submitted — but it cannot see you until you are inside the class GitHub organization.
FIRST
Fill out the Google form with your GitHub and Figma usernames and the email on your account. Then accept the fitnyc-ct390 invitation waiting in your inbox.
Google form (opens in a new tab)THEN
Sign in at classroom50.org with GitHub — not with an email and password. Confirm that fitnyc-ct390 appears there. If it does not, the invitation has not gone through yet.
classroom50.org (opens in a new tab)FINALLY
Accept the Week 1 assignment. Classroom 50 is a thin layer over GitHub: an assignment is a repository, submitting is pushing, and feedback is comments on a pull request. Accepting the link creates your own copy of the template.
Week 1 assignment (opens in a new tab)What you should see
4
ChatGPT Plus or Claude Pro account
Pick one and put it on a paid tier — either works for this class.
CHATGPT
Plus or above ($20/mo). Plus is free for students for four months — verify with your FIT email by October 31. Students can also claim $100 of Codex credits.
chatgpt.com/students/2026 (opens in a new tab)Codex student credits — terms (opens in a new tab)Creating your Claude or ChatGPT account
5
Vercel account
Sign in with GitHub so you can import your repos when we deploy later in the semester.
vercel.com (opens in a new tab)Signing in to Vercel with GitHub
PART 5 · CLASS EXERCISE
LABClass Exercise
1
Update your README on GitHub
Open your Week 1 assignment repository on github.com and edit README.md in the browser. Write three short things: what you would like to get out of this class, which AI tools you already have some familiarity with, and how often you use them. Commit the change from the same page.
Editing a README in the GitHub UI
2
Introduce yourself with an AI tool
Use any AI tool you like (e.g. Claude, ChatGPT, Gemini, etc) to make a single slide or HTML page carrying your name, your major, and one fun fact about yourself or something you are into right now. Then we break into groups: present your page to your group, and say which tool you used to build it and how you asked for it.
ON THE PAGE
Your name, your major, and one fun fact — something you are currently interested in counts.
IN YOUR GROUP
Introduce yourself to your group with the content you built. Mention the tool you used to create your slide/page and roughly what you asked it for.
DELIVERABLES