Anna Mazzanti Available for work

Independent AI product concept

An AI coach for turning ideas into testable prototypes

I designed and built CoSprint, an AI-guided workspace that takes a designer from a rough product idea to a tested prototype. The project was an experiment in rapid prototyping: using Claude Code, together with Figma, ChatGPT, and Maze, to go from concept to a working product.

Try the CoSprint prototype

Built with Claude Code

CoSprint workspace
Role
Product design & prototyping
Type
Independent concept
Tools
Claude Code, Figma, ChatGPT, Maze
Testing
5 participants on Maze

01 ConceptOverview

From a rough idea to a structured, testable prototype

CoSprint is an independent concept for an AI coach that helps product designers move from a rough idea to a structured, testable prototype. I designed the workflow and interface, then used Claude Code to build and iterate on a responsive prototype.

Problem

Turning an early idea into a clear plan takes many decisions: what to define, what to do next, and how to test the result. CoSprint explores how guided prompts and stage-by-stage support could help designers move forward while keeping control of the work.

What a sprint creates

  • Problem definition: the user, pain points, and opportunity
  • Core user flow: the main path from start to outcome
  • Test-ready prototype: wireframes, prototype tasks, and testing notes
  1. Idea Input
  2. Problem Definition
  3. User Persona
  4. User Flow
  5. Wireframes
  6. Prototype
  7. User Testing
  8. Iteration

Try the prototype

Start a sprint

The working CoSprint prototype, built with Claude Code. Create a project and move through the first two stages with the built-in coach.

Open full screen
  1. Click + New project and describe a rough idea.
  2. Open Ask AI and tap Review my idea or Suggest success metrics.
  3. Continue to Problem Definition and watch the coach give feedback as you type.
  4. Complete the stage to create a project brief, then find it on the dashboard.

02 ToolkitHow I built it

One workflow, four tools

This project was about rapid prototyping with AI. Each tool had one job, and Claude Code turned the design into a working product I could keep iterating on.

Build

Claude Code

Built and iterated on the interactive, responsive prototype, and helped define reusable button states.

Design system

Figma

Recreated the button states as Figma variables to keep the prototype consistent.

Brand

ChatGPT

Explored the CoSprint brand board: logo lockups, typography, color palette, and app icon.

Testing

Maze

Tested the prototype with 5 participants.

The coaching logic

CoSprint Sprint Planner skill

I created a Sprint Planner skill to make the coaching approach concrete. It helped me explore how AI guidance could support each step while keeping the designer in control.

  • 01 Clarify the problem
  • 02 Identify assumptions
  • 03 Plan a focused test

03 ProductSprint stages

Eight guided stages, one AI coach

Each stage turns the previous output into the next one. An AI coach sits beside the work with insights, critiques, and gaps to fix.

1

You stay in control

Every AI output can be edited, regenerated, or approved before moving on.

2

Coach, don’t decide

The AI coach suggests insights, gaps, and critiques. The designer makes the call.

3

Visible progress

Eight stages with clear states and a progress tracker show where you are.

4

Test-ready outputs

Each stage produces something usable, from a problem map to a clickable prototype.

Try the live prototype

04 BuildFrom design to working product

Built with Claude Code

A guided setup helps designers shape an initial idea into a sprint plan, then continue into a workspace for each stage.

User journey

CoSprint user journey

Brand

CoSprint brand board with logo lockups, Satoshi typography, color palette, and app icons
Brand board explored in ChatGPT: logo, type, color, and app icon.
CoSprint sign-up screen: Bring the spark, build the sprint
Sign-up screen using the brand: “Bring the spark. Build the sprint.”

Design system

From Claude Code to Figma variables

I used Claude Code to help define the design tokens and reusable button states, then recreated them as Figma variables. The code and the Figma file share the same names and values, which keeps the prototype consistent.

  1. 1

    Define the basics in code

    Colors, type, spacing, and corner radius become named tokens.

  2. 2

    Name them by purpose

    A raw color becomes “primary”, then “primary button background”.

  3. 3

    Build components with states

    Buttons get default, hover, focus, and disabled styles from those tokens.

  4. 4

    Mirror them in Figma

    The same tokens become Figma variables, so design and code match.

Example: one color, from code to Figma

Raw value--color-purple-500#5B4CF0
Purpose--color-primaryThe brand’s main action color
Component--button-primary-bgPrimary button background
Figma variableButton / primary / default5B4CF0 · hover 4A3BD8
CoSprint UI library foundations: color palette, typography, spacing scale, and radius tokens
Foundations. The tokens defined in code: color, type, spacing, and radius, plus how a raw value becomes a component decision.
CoSprint button states and other components next to the matching variables in Figma
Components in Figma. Button states built from those tokens (left) and the matching Figma variables (right).

05 TestUsability testing

Tested with 5 people on Maze

I tested the CoSprint prototype with 5 participants using Maze.

5
Participants
Maze
Testing platform

06 FinalResponsive prototype

From desktop to phone

I built CoSprint as a responsive prototype, so the whole sprint works on a phone as well as on a desktop: from the project dashboard, through each stage, to the AI coach.

The live CoSprint prototype on three phones: the project dashboard, the Idea Input stage, and the AI coach
Try the CoSprint prototype

Next project

Healthcare · E-commerce

Medicare Supplement shopping & online enrollment

View case study