Drop files here or browse
HTML, CSS, images, or any file
Analyze your uploaded project files (HTML, CSS, images) with AI and auto-generate a design guide with colors, typography, spacing, and more.
1
Source
🗎
Drop your image here or browse
PNG, JPG, GIF, WebP — Max 10 MB
2
HTML Editor
★
Templates
No templates yet.
3
Generate Shortcodes
/* Border radius utilities */
.rounded-sm img { border-radius: 4px; }
.rounded-md img { border-radius: 8px; }
.rounded-lg img { border-radius: 12px; }
.rounded-xl img { border-radius: 16px; }
.rounded-2xl img { border-radius: 24px; }
.rounded-full img { border-radius: 9999px; }
/* Icon center alignment */
.icon-center { align-items: center; }
.icon-center .icon-inner img { padding-top: 0; display: block; }
/* Max width utilities */
.max-w-400 { max-width: 400px; }
.max-w-500 { max-width: 500px; }
.max-w-600 { max-width: 600px; }
.max-w-650 { max-width: 650px; }
.max-w-700 { max-width: 700px; }
.max-w-800 { max-width: 800px; }
/* Position utilities */
.mx-auto { margin-left: auto; margin-right: auto; }
.ml-0 { margin-left: 0; margin-right: auto; }
.mr-0 { margin-left: auto; margin-right: 0; }