Report a bug

What went wrong?

Design with Claude: from idea to design system — AI Academy

AI Academy/Courses/Design with Claude: from idea to design system

⌘K

UK Sign in Sign up

Intermediateappliedclaude

Design with Claude: from idea to design system

How to use Claude for design work: from rough sketches to a complete design system. Full breakdown of the design.md format — structure, tokens, components, screens. Working with tools: Stitch MCP for UI generation, Figma integration. Patterns for iterative design and component documentation through AI dialogue.

3modules

7lessons

188 mintotal time

Developers and designers who want to accelerate their design process with AIaudience

Progress

0%0 / 7 lessons

Sign in to save your progress.

Module 1

Claude as a design partner

What Claude can actually do in design, how to frame tasks clearly, and how to get predictable results.

What Claude can do in design

A realistic overview of Claude's design capabilities: generating mockups, describing components, critiquing existing designs, and building design systems. What Claude does well — and where it falls short.

How to talk about design with Claude

Prompt patterns for design tasks: how to provide references, describe constraints, iterate effectively, and get predictable results. The difference between subjective requests and structural prompts.

Module 2

Design.md — complete format guide

Structure, syntax, and practice of writing design.md. How to pass your entire design system to Claude in a single file.

1

What is design.md and why you need it

Design.md is a structured markdown file that describes your entire design system. Why this works better than explaining your design in every prompt. How design.md connects Claude, Stitch, Figma, and your codebase.

18 min

Design.md syntax: tokens, components, screens

Complete breakdown of the design.md structure: from metadata to screen descriptions. Color tokens, typographic scale, spacing, components with states, layout patterns. Real examples from production projects.

Building a real project's design.md in one session

A step-by-step process: how to start from scratch and get a working design.md in one Claude session. The 'sketch → tokens → components → validation' pattern. How to prevent divergence between the document and the code.

Module 3

Tools: Stitch and Figma

How to use design.md with Stitch MCP for UI generation and with Figma for working with existing design files.

Claude + Stitch: UI generation from design.md

Stitch MCP lets Claude directly create and edit UI screens based on your design.md. How to upload your design system, generate screens through natural language, iterate through descriptions, and export results.

Claude + Figma: from design to code

Figma MCP gives Claude direct access to your design files. How to read components, extract tokens, generate code-connect mappings, and convert a Figma mockup into working code that strictly follows your design system.

AAI AcademyEN Start learningCatalog

Overview

AI Academy Progress Achievements Leaderboard Insights Notes Notifications Team API Pricing Settings

Learning

Tracks8 Courses51

Libraries

Prompts30 Workflows12 Tools22 Compare Blog

Updated · May 14, 2026