日本Anthropic公司于6月17日（当地时间）宣布对其AI设计工具「Claude Design」进行重大升级。本次更新的亮点在于与「Claude Code」的双向联动，显著提升了通过Claude Code生成的用户界面设计质量。此外，每次使用的Token消耗量降低，且使用限制与聊天、Claude Cowork及Claude Code统一管理。Claude Design现支持付费计划（Pro/Max/Team/Enterprise）用户使用。
Claude Code是一款代码生成与编辑工具，但其生成的UI设计往往显得粗糙。此次升级实现了Claude Design中精细设计的直接代码映射，而非通过截图重建，大幅提升设计还原度。
用户在Claude Code中使用“/design-sync”命令，可将本地代码库中的设计系统同步至Claude Design。同步以组件为单位，如按钮、卡片等，且每个组件会附带预览及使用说明。对于Web应用，支持从现有HTML/CSS中提取预览内容进行利用。
不过，笔者在尝试将正在开发的Web应用通过“/design-sync”同步时，系统未立即开始同步，而是建议先进行React化处理。这是因为该应用的UI未拆分为组件。需要注意的是，“/design-sync”功能主要面向已有设计系统的项目，未组件化的UI无法直接使用该功能。
此外，Claude Design还更新了设计系统导入功能，支持从GitHub仓库及设计文件导入多个设计系统，并能自动校验和修正输出内容。针对大型团队，新增加了管理员角色，支持锁定标准设计系统。编辑器方面新增了拖拽、调整大小及对齐等布局控制功能，提升设计操作的灵活性和效率。
