Design Library to Token Walkthrough.mp4

TOOLS USED:

• Figma ( Paid plan needed to use Figma MCP)
• Claude Cowork (Paid plan needed to use Cowork)
• Cursor

The prompt used to create the codified brand kit:

<aside> 📌

I want to build a branded prototype system based on the design system in this Figma file: [ LINK TO FIGMA FILE ]

Do not build the prototype yet.

Your first task is to analyze the Figma file and create a clear implementation plan for turning the design system into a reusable, codified design kit that I can open in Cursor and use to build branded prototypes.

The final design kit should be built with React, HTML, and CSS. It should include reusable components, design tokens, styling conventions, and example usage patterns that match the Figma design system as closely as possible.

Before writing any code, please create a plan that includes:

1. The design system elements you will extract from the Figma file, such as colors, typography, spacing, buttons, cards, forms, layout patterns, icons, and reusable UI components.
2. The proposed file and folder structure for the React project.
3. The recommended approach for translating Figma styles into code, including design tokens and CSS variables.
4. A list of components that should be codified first.
5. Any assumptions you are making about the Figma file, brand system, or prototype needs.
6. Any questions or clarifications needed before implementation.

Do not start codifying the design system until I have reviewed and approved the plan.

Once I approve the plan, you can begin creating the design kit step by step.

</aside>