
Did Anthropic just kill Figma?
Audio Summary
AI Summary
The speaker expresses excitement about Anthropic's new product, "Claude Design," noting its potential to simplify the creation of user interfaces (UIs) with AI models. Historically, designing good UIs with models has required significant effort, and the speaker has found Anthropic's Claude models to be effective for this purpose, specifically using Opus models for recent projects. The new product is anticipated to improve design capabilities, especially given the impact of Anthropic's "design skill" which, despite being simple markdown, significantly enhances UI design.
Before diving into the product, the speaker takes a brief moment to mention a sponsor, Clerk, an authentication and billing solution for developers. Clerk is highlighted for its ease of integration, security features, and ability to simplify setting up subscriptions, especially for agents and AI-powered applications. The "show component" in Clerk allows for conditional display of features based on user plans, streamlining the implementation of subscription-based services.
Returning to Claude Design, the speaker immediately begins exploring the interface. Key features observed include the ability to import a team's design system, create prototypes, and export to Claude Code. The product also supports generating multiple, varied design options, which the speaker emphasizes as a better approach than regenerating with the same prompt. The tutorial explains core functionalities: "mock it up" for wireframe explorations, "bring your context" by dropping images or mounting local codebases, "point at what to change" using comment tools, and "tweak values live" with "knobs mode" for direct CSS adjustments. Finally, designs can be "hand off to Claude Code," packaging them into a dev-ready folder.
The speaker decides to redesign the T3 Code marketing site as a first prototype, focusing on a dark mode design that highlights key features such as compatibility with existing AI harnesses (Claude Code, Codex, Open Code, Cursor), open-source nature, performance, Git/GitHub integration, and parallel work support. The initial output from Claude Design includes a design system plan, outlining fonts, colors, and a "dev tool feeling." The model also generates logical files for icons, JSX, and style CSS, clarifying that its purpose is to mock designs around a codebase, not directly integrate into it. This distinction is important, as large companies often invest heavily in synchronizing design systems (like in Figma) with actual codebases.
The speaker reflects on the collaborative design process in large companies, using their experience at Twitch as an example. The typical flow involves product managers identifying user issues, translating them into user stories, and collaborating with designers to create solutions. Designers then work with front-end developers to ensure implementability. The speaker emphasizes the value of bridging gaps between these roles, highlighting how their own career advanced by engaging deeply with both backend and design teams.
A specific anecdote about a designer named Iris illustrates the ideal collaborative dynamic. Iris, despite lacking development experience, was exceptionally skilled at asking the right questions to ensure designs met various technical and user needs. She even built a functional prototype of what became "Mod View" using vanilla HTML, CSS, and jQuery, demonstrating the power of a motivated individual with the right tools. This story underscores the speaker's excitement for Claude Design, envisioning it empowering similar individuals to create and test designs more effectively.
Reviewing the initial design for T3 Code, the speaker notes several issues, including word wrap problems, inaccurate mock UIs, and a cluttered top bar. The ability to leave comments directly on the UI and batch them for the AI to address is appreciated. However, the speaker encounters bugs, such as designs disappearing and high usage consumption, which raises concerns about the product's stability and cost. Despite these frustrations, the speaker acknowledges the product's polish compared to other Anthropic offerings.
After several iterations and providing more specific feedback, including supplying actual SVG logos, the design improves significantly. The speaker finds the resulting design to be a "good starting point" that is "absolutely workable." The export feature, which packages the design for Claude Code, is tested, and the AI correctly identifies the project directory and begins generating code based on the design system. The generated code uses traditional HTML and CSS, which is seen as a good base for integration.
The speaker concludes that Claude Design, despite its current limitations and cost concerns, is "the best software Anthropic's ever shipped." They see immense potential, especially for enterprise plans, and believe it could become a legitimately good product with further polish and features. The product is praised for being "different, useful, and takes advantage of their strengths," particularly Anthropic's strong design aesthetic. The speaker intends to continue using it for the T3 Code landing page, despite quickly approaching usage limits.