[VIP] wannabe: Design system in Claude Code [RU]

Design System in Claude Code: Build, Prototype, and Manage Design Systems with AI

Design System in Claude Code is a hands-on intensive from Wannabe focused on combining Figma, Claude, and React into a single AI-powered design workflow. Instead of designing interfaces only in Figma, you’ll learn to prototype directly in code using your own components and keep the design system synchronized across design, code, and documentation.

The course teaches a practical workflow for turning a Figma design system into a living development system that can be managed with AI.

You’ll learn how to:

• Set up Claude, Git, Next.js, and a VPS
• Connect Figma with Claude for more accurate design generation
• Let Claude create and modify designs directly in Figma
• Transfer a design system from Figma into React
• Build interface prototypes directly from your component library
• Manage design tokens and components through AI prompts
• Generate documentation, usage rules, and missing component variants
• Track design-system changes, coverage, and accessibility
• Deploy your prototypes to your own server
• Create a reusable CLAUDE.md containing your rules, stack, and design principles

The core workflow is:

• Figma → Claude → React → Design System → Prototype → Deployment

After the two-week intensive, the goal is to have a working sandbox inside a Next.js application where you can rapidly prototype interfaces from your own components. You can also ask Claude to modify tokens or components and propagate those changes across Figma, code, and documentation.

No programming experience is required: the course is designed around prompting Claude to write the code while you gradually learn to understand and control the result. It is aimed primarily at product and interface designers who work with design systems.

Stop treating your design system as a static Figma file. Build it as a living product that AI can help you maintain, evolve, and prototype with.