Criando um Design System em 29 min com IA (Claude Code + Figma)

Creating Design Systems Efficiently

Introduction to the Technique

• The video introduces a technique for creating design systems quickly using three prompts in Clode and Figma, accessible even for those with no design experience.

• The process involves three main steps: generating style prompts, creating components, and organizing them within project pages.

Benefits of the Technique

• Ensures consistency across the project's design, enhancing professionalism by avoiding mismatched styles on different pages.

• Increases productivity for builders or developers by preventing the need to recreate existing components from scratch.

• Using AI to write code becomes more efficient as it reduces unnecessary token usage and streamlines component creation.

Required Tools

• To implement this technique, start a project in Cloud Code with the Chatsen library and Tailwind installed.

• Chatsen provides pre-built components that save time, while Tailwind is a styling framework that simplifies customization without starting from zero.

Practical Demonstration Setup

• The presenter uses Visual Studio with Cloud Code extension for an enhanced user experience during demonstration.

• A NextJS project is created as a base for showcasing how to apply the first prompt effectively.

Prompt Functionality Explained

• The first prompt extracts style inspiration from shared designs or screenshots rather than copying directly, ensuring originality.

• It initializes Chatsen in the project with extracted variables like colors and typography, updating the Global CSS file accordingly.

Extraction Process Details

• The Global CSS file serves as a template; its default content will be replaced with new style variables derived from reference materials provided through prompts.

• This extraction includes various elements such as color schemes and border settings essential for building a cohesive design system.

Component Installation and Project Foundation

• After extracting styles, additional demo components are installed to establish foundational elements of the design system.

• Viewers are informed that all prompts used in this demonstration will be available via the presenter's newsletter later in the week.

Newsletter and Design Project Overview

Introduction to the Newsletter

• The speaker mentions sending out a newsletter available for free on their Substack, encouraging viewers to subscribe for access to design prompts.

Design Project in Figma

• The speaker discusses a design project initiated in Figma, highlighting the importance of using screenshots as references for tasks.

• They emphasize filling in necessary variables for the project and demonstrate how to send prompts effectively.

Utilizing Screenshots and Variables

• While waiting for the system to process, they suggest alternative methods if one does not have a Figma project, such as sourcing designs from Pinterest.

• The speaker explains that users can copy design systems they like from Pinterest as image variables instead of relying solely on Figma screenshots.

Creating a Style Guide

Editing Global CSS

• The speaker authorizes edits to the Global CSS file, showcasing significant changes made based on initial prompts.

Structure of NextJS Pages

• They explain how NextJS organizes pages within an app folder and introduce a new page called "Style Guides" for accessing component libraries and design systems.

User Access Considerations

• A tip is provided about restricting user access to the style guide during deployment, ensuring it remains visible only in development mode.

Design System Development

Initial Creation of Design System

• Upon navigating to "Style Guides," viewers see the beginnings of a design system with color palettes created from initial inputs.

Color Variations and Semantic Colors

• The system generates semantic colors and variations following established conventions, enhancing usability across different contexts.

Typography and Component Integration

• Typography settings are displayed alongside border radii, shadows, and pre-built components like buttons that include interactive states.

Summary of Design System Features

• A summary section outlines foundational elements termed "design tokens" while noting that additional components need to be added by the user.

Creating a Billing Page with Components

Importing Necessary Components

• The speaker begins by demonstrating the process of creating a billing page, mentioning that they have already imported the card component and radio buttons necessary for displaying pricing options.

• They note that the only missing element is a table, which they will show how to import using a second prompt in Visual Studio.

Using Prompts for Component Integration

• The speaker introduces the structure of the second prompt, which will be shared in their newsletter. They encourage viewers to subscribe for access to this prompt.

• It’s emphasized that before using the second prompt, users must install the MCP (Multi-Component Package) from Chatsen to ensure proper functionality.

Installing MCP from Chatsen

• Instructions are provided on how to install the MCP from Chatsen by copying a command into the terminal within the project folder.

• The speaker also mentions installing an additional MCP for Figma following similar steps as with Chatsen.

Verifying Installation of MCPs

• After installation, it is crucial to restart Cloud services; otherwise, newly installed MCPs may not be recognized.

• Users can verify successful installation by checking terminal logs or querying if they can access both MCP components.

Understanding Prompt Structure and Functionality

• The speaker explains that once installed, prompts will utilize these components effectively. They clarify that if a requested component exists, it will fetch details and usage examples; otherwise, it may create custom components based on existing ones.

• A detailed explanation follows about how prompts interact with available components and what happens if certain components need customization or combination into new forms.

Practical Demonstration of Prompt Usage

• The speaker plans to demonstrate using prompts practically rather than just explaining them theoretically. This approach aims to enhance understanding through real-time application.

Creating Components in Design Systems

Understanding Component Creation

• The speaker discusses the importance of using existing components, specifically mentioning a "table" component found in the ChatCN library. This ensures that users are aware of available resources before creating new ones.

• A recommendation is made to explore the ChatCN website for existing components and their functionalities, which aids in understanding what options are available for design.

Building and Approving Components

• After sending a prompt, a list of components is generated. The speaker emphasizes the need to approve actions taken by the code generator to ensure desired outcomes.

• A new folder structure is created within the sidebar for components, showcasing how a "table" component has been successfully added.

Variations and Documentation

• The newly created table includes various styles such as captions and footers, which will be useful for specific applications like billing history tables.

• The initial setup prompt establishes foundational styles (colors, fonts, spacing), while subsequent prompts are used repeatedly to create additional component groups within the design system.

Adding New Component Groups

• When adding another group of components (e.g., bar charts), it’s necessary to use prompts again. This illustrates how each component type requires its own setup process.

• As new folders are created (like one for bar charts), updates occur in real-time within the sidebar navigation, reflecting changes immediately.

Finalizing Design System Pages

• Each newly created component comes with documentation detailing variations and configurations that adhere to established design tokens.

• Moving on to prompt three involves creating an example page (billing page). This step personalizes the project by integrating previously defined components into a cohesive layout.

Utilizing Figma for Design Implementation

• Instructions are provided on how to integrate designs from Figma or through screenshots if Figma access isn't available. This flexibility allows users without direct access to still implement designs effectively.

Creating a Design System with Figma and Prompts

Customizing the Prompt for Design Creation

• The speaker discusses customizing a prompt using specific variables, including the page name and URL from Figma to extract design information.

• They emphasize using components from their design system, specifically mentioning "sidebar 07" from Chatsen, before sending the prompt to create the desired page.

Consistency in Design Elements

• Upon reviewing the created page, it is noted that it aligns well with the original Figma design despite some differences due to not having a complete design system established in Figma.

• The speaker highlights that styles of cards and buttons are consistent with their design system, ensuring uniformity across elements like badges and tables.

Efficient Design System Creation

• The approach discussed allows for maintaining consistency throughout the project by reusing components rather than creating new ones from scratch.

• Historically, creating a design system required significant resources (designers and developers), but utilizing prompts can streamline this process significantly.

Techniques for Extending Your Design System

• To effectively use this technique, start by prompting style variables based on references created in Figma or visual inspirations sourced from platforms like Dribbble or Pinterest.

• The first prompt will generate essential design tokens such as colors, typography, shadows, and primary components like buttons and cards.

Adding Additional Components

• A second prompt can be used to extend the initial design system by adding other necessary components not included initially (e.g., tables or charts).

• For instance, if needing bar charts on a new page, one should use prompts to create this section while documenting all previously created components.

Handling Component Refactoring

• If an unintended component is created instead of importing an existing one from the design system, users are advised to request refactoring of that component back to what was originally designed.

Engagement Encouragement

• The speaker invites viewers to engage with their content by liking the video and commenting on their thoughts. They also encourage subscriptions for future updates.