Claude Code and Figma Make: A Revolution in AI Design

A Transformation in the World of Design

My Journey in the Design Industry

After spending seven years in the design sector, I found that most of my work involved creating visuals and wireframes. These elements were then handed off to engineers to be translated into code. My role often boiled down to that of a translator, transforming requirements into concepts, then into files, waiting for others to convert them into finished products.

Evolution of My Workflow

The year 2024 marked a turning point in my career. With the introduction of Claude Code, Figma Make, and advanced language models (LLMs), my working methods changed radically. Static deliverables gave way to functional demos. Instead of navigating through component libraries, I now connect my design system to Claude Code to generate interfaces. I conduct my research and synthesis through ChatGPT projects. In this new role, I am no longer just a translator, but a conductor, directing AI to execute tasks while applying my expertise to evaluate the results. My seven years of experience have not become obsolete; they have simply evolved, with the skills remaining the same but their application changing.

Developing a "Design Sense" in Code

Designers have often felt frustration: the gap between what they envision and what they can actually build. Figma is a fantastic tool that slows down the process and encourages reflection, as it acts as an intermediary layer. The instincts developed are primarily spatial and visual, similar to drawing on paper. However, in a real product, design manifests in the system and time, through the behavior of the interface with real data, the fluidity of animations, and the logic between interactions. These skills require a completely different set of muscles.

How to Develop Design Sense in Code?

• Externalize your tacit knowledge: With AI, the cost of creating a first draft is significantly reduced. The challenge lies in producing a quality first draft and iterating effectively from it, thus testing your ability to convey your implicit knowledge to the AI.

• The 3C framework helps: Context, Components, Criteria.

  • Context: Provide the AI with an overview of your project, including goals, target audience, constraints, and previous decisions. For ongoing projects, I maintain an updated context file that the AI consults in each session.

  • Components: The tools you provide to the AI to accomplish the work. While LLMs have reasoning and retrieval capabilities, specific scaffolding is necessary for specialized tasks like code review or frontend design.

  • Criteria: Clearly define quality standards for the AI's output, specifying what it should not generate. Negative constraints are often more effective than positive instructions, and it is crucial to integrate a self-evaluation mechanism for the AI.

Execute It Yourself

Observing someone perform a task and doing it yourself are two distinct experiences. While there are many tutorials on AI, true understanding comes from practice.

• My 3-step guide to AI prototyping: Ask the AI to design a project architecture and observe the organization of files and modules. Request it to write tests and analyze its handling of edge cases. Follow an error message until you fully understand it.

By going through this process, you will discover that many technical fears were unfounded.

Redefining the Design Process

Jenny Wen, design lead for Claude, stated in Lenny's podcast that the traditional design process is outdated. More specifically, the speed of engineering has outpaced linear design methods, leaving designers with little time to focus on static visual specifications. The long-term design vision has become impractical.

Back to Basics

Before the AI era, designers had a limited understanding of how software worked internally, primarily operating at the level of abstraction: visuals, interactions, information architecture. AI has altered this ratio, nearly eliminating the cost of "how to build," thus freeing up cognitive time and resources to focus on the fundamental question: what should this thing be?

Build Your Own Scaffolding

Every designer encounters obstacles in the workflow where tools do not fit perfectly. Options were limited: tolerate the friction or invest more manual effort. Waiting for a new tool was rarely an option. Now, designers can create their own tools, a customized scaffolding for each specific task.