Concept

CurrAIculum: Designing with AI, for AI Learners

A self-initiated concept project exploring how an AI design tool can take an idea from zero to a fully documented, designed and prototype-ready product.

AI-Assisted Design Claude Code · VSCode Figma MCP
Concept AI project cover image

1

Exploratory sprint: zero to deliverables in a single session

13

Section PRD document produced

7

Key deliverables; from competitive analysis to brand identity

My role

Took an idea from concept to functional prototype through research, strategy, design direction, documentation

Tools

Claude (Anthropic) · Figma MCP · GitHub Primer Design System

Duration

Exploratory sprint
(single session, iterative)

Type

Self-initiated concept · AI-assisted design exploration

Background & the Spark

This project started as a curiosity to try an AI tool as a genuine design partner from the very start of a project. No brief. No existing design system. Just an idea and a conversation.

So I started a conversation with Claude saying: "I want to design a product that offers free AI tutorials and a step-by-step guide personalized to the user's needs". What followed became CurrAIculum.

The Problem

Professionals in every field can sense that AI is changing their work, but most don't know what to learn, where to start, or whether the content they are consuming is even still relevant. Existing solutions like Coursera, LinkedIn Learning, newsletters, ChatGPT have gaps.

How might we give every professional a single destination that builds them a personalized, always-current AI learning path for free?

The Process

I deliberately structured the project the way I would a real 0-to-1 engagement: starting with market validation, moving through strategy and documentation, into design direction and visual identity. To give it a name, I called the product "Up-to-dAIt" at first, but eventually landed on "CurrAIculum".

Concept Pressure Testing

Competitive research · market validation · differentiation strategy

Product Strategy & PRD

8 personas · 4-stream business model · MVP feature scope · success metrics · 13-section PRD

Design System Selection

GitHub Primer selected · token mapping defined · component inventory built

Figma Design Prompt

Structured prompt for Claude Code + Figma MCP · 12 screens · realistic copy · 2 iterations

Phase 01

Concept Pressure Testing & Competitive Research

Before committing to the idea, I needed to know whether it already existed. I asked Claude to research the competitive landscape honestly; not to validate the concept, but to stress-test it.

The research surfaced two important findings. First, the enterprise learning space (Docebo, Degreed) had already validated the problem at scale, which was encouraging. Second, no B2C product had combined all four things I cared about: free-to-use, role-specific path generation (not filtering), a recency layer that surfaced what's new this week for your specific job, and hands-on application exercises within the same destination. The Coursera/Udemy merger, announced in December 2025 and explicitly framed around AI re-skilling, confirmed the market urgency without making the product redundant.

That research shaped three core differentiators I committed to before writing a single requirement:

Role-specific curriculum generation

Not a filtered catalog, but a path built from scratch around the user's actual tools, workflows, and skill gaps.

Recency as a core feature

An AI agent that continuously monitors new developments and maps them to your role, with an optional dynamic path that updates as the field moves.

Application over consumption

Every learning unit closes with something you actually do: a sandbox, a setup guide, a workflow exercise.

Competitive research prompt
Competitive research prompt

Phase 02

Product Strategy & PRD

This was the phase that surprised me most in terms of what AI-assisted design could produce. Rather than jumping to wireframes, I answered a structured set of questions around business model, personas, MVP scope, success metrics, competitors, constraints, and timeline framing, and asked Claude to synthesize everything from our conversation into a formal, pre-build Product Requirements Document.

The PRD that came out of that session covered: a mission statement and executive summary, 8 detailed user personas spanning Product Design, Engineering, Marketing, HR, Sales, Data Analysis, Customer Support, and Tech Management (deliberately cross-industry), a full competitive analysis table, MVP feature scope with UX requirements per feature, a business model built around the principle that education should be free, 10 success metrics with Year 1 targets, legal and licensing constraints around third-party content sourcing, and a phased product roadmap through Phase 4.

Glimpse of PRD generated by Claude
Glimpse of PRD generated by Claude
Prompt for Claude to generate UX Brief
Prompt for Claude to generate UX Brief
UX Brief presentation slides
UX Brief presentation slides

Phase 03

Design System Selection

Initially, I chose GitHub's Primer Web Design System as the foundation, but later decided to go with my own design system inspired by Autodesk's bold colors and AirBnB's crisp UI. The design system components I created were built with accessibility (WCAG 2.1 AA) in mind, and are token-based.

In a future iteration, I plan on using another Claude skill to create a full-fledged design system library.

Prompt to ask Claude to switch the design system to the one I built
Prompt to ask Claude to switch the design system to the one I built
A non-comprehensive design system library
A non-comprehensive design system library

Phase 04

Figma Design Prompt for Claude Code + Figma MCP

Rather than designing the screens myself in this exploratory phase, I treated the design prompt as a deliverable in its own right. I wrote a comprehensive, structured prompt for Claude Code with Figma MCP, specific enough to produce intentional output, but not so prescriptive that it would over-constrain the generation.

The prompt specified five key screens which I eventually combined into 3, to have all decision-critical information displayed in one place for ease of use.

01

Landing page: conveys to the user what the product does

02

Onboarding flow: conversational, 4-5 steps, smart suggestions

03

Dashboard: curriculum progress, recency surface, quick wins

I didn't include the content-consumption pages for this initial version, and got it to create just the basic flow.

Prompt for creating Figma designs and Typescript prototype
Prompt for creating Figma designs and Typescript prototype
Claude code confirming it finished creating website using HTML+CSS+Typescript
Claude code confirming it finished creating website using HTML+CSS+Typescript
Screenshot of webpages created by Claude Code + Figma MCP
Screenshot of webpages created by Claude Code + Figma MCP
Claude code confirming it created corresponding Figma screens via Figma MCP
Claude code confirming it created corresponding Figma screens via Figma MCP
Screenshot of corresponding Figma screens created by Claude Code + Figma MCP
Screenshot of corresponding Figma screens created by Claude Code + Figma MCP

Deliverables

Deliverable Description
Competitive analysis B2B and B2C landscape mapped; differentiation strategy defined
Business model Four-stream revenue model; free education principle documented
Persona set 8 cross-industry personas with role, tools, goals, gaps, and user quote
PRD v1.0 13-section pre-build product requirements document
Figma MCP prompt v2 Structured design prompt for Claude Code + Figma MCP
Design specs High-fidelity designs created and iterated over in Figma via MCP
Functional prototype Functional website created using Typescript that matched the designs

Final solution / prototype

All screens are live and can be accessed and interacted with by clicking the "View" buttons. Some of the interactions like certain micro-animations and transitions are a bit off since I had it convert the original TypeScript code to vanilla JavaScript.

Landing page

Onboarding flow

Learning path / dashboard

What I Learned

Treating AI as a design critic, not just a generator

The most valuable moments weren't when Claude produced something but when it pushed back. Being asked good probing questions helped me validate before I could focus on the visuals.

The prompt is a design artifact

Writing the Figma MCP prompt well required me to think through every design detail before any screen was generated. The prompt forced precision.

AI accelerates what slows projects down

Competitive research, PRD writing, design token documentation are essential but time-intensive, and often get compressed in real project timelines. Using an AI tool didn't replace the thinking, but it dramatically compressed the time between thinking and having a reviewable artifact.

Human-intervention is still necessary

The amount of time it took me create artifacts, designs and a functional prototype was really impressive. However, I did have to ask it to correct certain things in the PRD, fix layout and design issues in the designs and prototype, and prompt it to add delightful interactions and smooth animations within the prototype. Validating the user experience through actual usability studies is also still necessary.