Shuffle AI Features Explained
Shuffle's AI-assisted design is the core feature that distinguishes it from traditional editors, and is realized in two main ways:
1. Natural language generation
After opening the AI Assistant dialog box in the lower left corner of the editor, users can enter specific design requirements. For example, enter 'Create a purple navigation bar with a member login button' and AI will automatically generate components that meet the requirements based on the description. To improve the accuracy of the generation, it is recommended to include the following elements:
- Component types (e.g. cards/navigation/forms etc.)
- color preference
- Functional requirements (e.g. responsive/hover effects, etc.)
- Content structure (e.g. title + description + buttons)
2. Draft conversion
It supports uploading designs in PNG/JPG format, and AI will parse the layout structure and visual elements in the image to automatically generate the corresponding HTML components. This process is particularly suitable:
- Quickly convert designer-supplied mockups into editable code
- Reproduce the functional modules of the reference site
- Handles standard components with high repeatability (e.g., merchandising display cards)
The generated component will retain the full Tailwind CSS class, and parameters such as spacing, color values, etc. can be further adjusted via the properties panel on the right.
This answer comes from the articleShuffle: drag-and-drop editor for quickly building web templates, with support for the Cursor extensionThe
