Shuffle集成的AI设计助手是该工具的核心创新点。开发者可以通过两种方式触发AI功能:直接输入自然语言描述或上传设计稿图像。在自然语言模式下,例如输入’创建一个带搜索框的蓝色导航栏’,系统会基于语义理解生成符合要求的组件,并自动适配当前项目使用的框架(如Tailwind或Bootstrap)。
图像识别模式支持PNG/JPG格式的设计稿上传,AI会解析图像中的布局结构和视觉元素,生成对应代码组件。经测试,对于中等复杂度的设计稿,识别准确率可达85%以上,大大节省了从设计到代码的转换时间。所有AI生成的组件都保留完整编辑性,开发者可继续调整样式参数或内容元素。
值得注意的是,该功能采用了渐进式生成策略:先输出基础结构,再逐步添加细节样式,使得设计师可以分阶段验证和调整结果。
Essa resposta foi extraída do artigoShuffle: editor de arrastar e soltar para criar rapidamente modelos da Web, com suporte para a extensão CursorO