Shuffle集成的AI设计助手是该工具的核心创新点。开发者可以通过两种方式触发AI功能：直接输入自然语言描述或上传设计稿图像。在自然语言模式下，例如输入’创建一个带搜索框的蓝色导航栏’，系统会基于语义理解生成符合要求的组件，并自动适配当前项目使用的框架（如Tailwind或Bootstrap）。
图像识别模式支持PNG/JPG格式的设计稿上传，AI会解析图像中的布局结构和视觉元素，生成对应代码组件。经测试，对于中等复杂度的设计稿，识别准确率可达85%以上，大大节省了从设计到代码的转换时间。所有AI生成的组件都保留完整编辑性，开发者可继续调整样式参数或内容元素。
值得注意的是，该功能采用了渐进式生成策略：先输出基础结构，再逐步添加细节样式，使得设计师可以分阶段验证和调整结果。
This answer comes from the articleShuffle: drag-and-drop editor for quickly building web templates, with support for the Cursor extensionThe
May not be reproduced without permission:AI productivity tools " Shuffle's AI-assisted design feature generates responsive components through natural language descriptions
English 
简体中文 
日本語 
Deutsch 
Português do Brasil