FORSMILE
JA
AI2026/06/01

Anthropic Unveils New AI 'Claude Design' for Automatic UI Generation Through Dialogue

U.S. AI startup Anthropic has released 'Claude Design,' a conversational visual generation tool. It automatically generates designs for websites and slides from natural language instructions, outputting them as HTML code. This article delves into the technical background and potential impact of this new feature, which is set to accelerate collaboration between engineers and designers.

Back to Blog

A New Design Experience Born from Dialogue

U.S. AI startup Anthropic, via Anthropic Labs—its division for developing experimental products—unveiled a new visual generation tool called 'Claude Design' as a research preview on April 17, 2026. This tool can generate sophisticated visual deliverables, such as website prototypes, presentation slides, and application UI mockups, through natural language dialogue. Users simply describe what they want to create in text, and Claude Design produces initial design proposals, which can then be refined through further dialogue and inline comments. This sets it apart from typical image generation AIs; its standout feature is that it outputs deliverables not as static images, but as actual HTML, CSS, and JavaScript code that runs in a browser. It is not intended to fully replace existing design tools like Figma or Canva but is positioned as a new category of tool that bridges the design and development processes.

Technical Details

Claude Design's powerful capabilities are built upon Anthropic's latest large language model, 'Claude Opus 4.7'. This model boasts advanced visual understanding, supporting high resolutions of approximately 3.75 million pixels, enabling it to accurately discern intricate UI details and the spatial relationships within layouts. This allows it to process diverse contexts—such as existing website URLs, image files, and brand guidelines—in addition to text instructions. From this, it can automatically construct comprehensive 'design systems' that include company-specific color palettes, typography, and UI components. Beyond HTML output, the generated designs also support export in PDF, PowerPoint (PPTX), and Canva formats, facilitating integration into various workflows. Moreover, it features a handoff function to Anthropic's autonomous coding agent, 'Claude Code,' allowing for the seamless transfer of design intent as structured information into the implementation phase.

Impact on Engineers and Future Outlook

The advent of Claude Design has the potential to significantly transform development workflows, particularly for frontend engineers and UI/UX designers. There are already reports of prototyping processes, which traditionally took weeks, now being completed in just a few conversational exchanges, dramatically accelerating iteration speed in the early stages of development. Even non-designer roles, such as engineers and product managers, will be able to easily create high-quality design proposals and mockups. This will foster smoother team communication and facilitate faster decision-making. The integration with Claude Code will streamline the transition from design to implementation even further, liberating engineers from routine UI coding and enabling them to concentrate on implementing more complex business logic. Moving forward, the ability for engineers to accurately evaluate the quality of AI-generated code, and to modify and integrate it while considering maintainability and scalability, is expected to become an increasingly crucial skill.

📦
Amazon で関連書籍・ツールを検索
artificial intelligence machine learning LLM book
Amazonで探す →(アソシエイトリンク)