All Prompts
All Prompts
dashboardeditordesign-tooltailwindresponsivecanvassaaswebapp
AI-Powered UI Design Editor Dashboard
AI-powered UI редактор: панельный интерфейс с библиотекой компонентов, холстом, инспектором свойств и AI-подсказками. Идеально для SaaS-инструментов.
Prompt
<div class="overflow-hidden bg-white max-w-6xl border-gray-200 border rounded-2xl relative shadow-lg">
<!-- Topbar -->
<div class="flex bg-gray-50 border-gray-200 border-b pt-2 pr-3 pb-2 pl-3 items-center justify-between">
<div class="flex items-center gap-2">
<span class="h-3 w-3 rounded-full bg-red-500"></span>
<span class="h-3 w-3 rounded-full bg-yellow-500"></span>
<span class="h-3 w-3 rounded-full bg-green-500"></span>
<div
class="ml-3 hidden items-center gap-2 rounded-lg border border-gray-200 bg-white px-2 py-1 text-xs text-gray-600 sm:flex font-geist">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
data-lucide="sparkles" class="lucide lucide-sparkles h-3.5 w-3.5 text-blue-500">
<path
d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"
class=""></path>
<path d="M20 2v4" class=""></path>
<path d="M22 4h-4" class=""></path>
<circle cx="4" cy="20" r="2" class=""></circle>
</svg>
SORA Studio — AI UI Design Tool
</div>
</div>
<div class="flex items-center gap-2">
<button class="hidden rounded-md border border-gray-200 bg-white p-1.5 text-gray-600 hover:bg-gray-50 sm:inline-flex">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="save" class="lucide lucide-save h-4 w-4"><path d="M15.2 3a2 2 0 0 1 1.4.6l3.8 3.8a2 2 0 0 1 .6 1.4V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z" class=""></path><path d="M17 21v-7a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v7" class=""></path><path d="M7 3v4a1 1 0 0 0 1 1h7" class=""></path></svg>
</button>
<button class="hidden rounded-md border border-gray-200 bg-white p-1.5 text-gray-600 hover:bg-gray-50 sm:inline-flex">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="share-2" class="lucide lucide-share-2 h-4 w-4"><circle cx="18" cy="5" r="3" class=""></circle><circle cx="6" cy="12" r="3" class=""></circle><circle cx="18" cy="19" r="3" class=""></circle><line x1="8.59" x2="15.42" y1="13.51" y2="17.49" class=""></line><line x1="15.41" x2="8.59" y1="6.51" y2="10.49" class=""></line></svg>
</button>
<button class="rounded-md bg-blue-600 px-3 py-1.5 text-xs font-medium text-white hover:bg-blue-500 font-geist">Export Code</button>
</div>
</div>
<!-- Editor body -->
<div class="grid grid-cols-1 md:grid-cols-12">
<!-- Left panel - Components -->
<aside class="hidden md:block md:col-span-3 bg-gray-50 border-gray-200 border-r pt-3 pr-3 pb-3 pl-3">
<div class="mb-3 flex items-center justify-between">
<div
class="inline-flex items-center gap-2 rounded-md border border-gray-200 bg-white px-2 py-1 text-xs font-medium text-gray-700 font-geist">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
data-lucide="layers" class="lucide lucide-layers h-3.5 w-3.5">
<path
d="M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z"
class=""></path>
<path d="M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12" class="">
</path>
<path d="M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17" class="">
</path>
</svg>
Components
</div>
<button class="rounded-md border border-gray-200 bg-white p-1 text-gray-500 hover:bg-gray-50">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="plus" class="lucide lucide-plus h-4 w-4"><path d="M5 12h14" class=""></path><path d="M12 5v14" class=""></path></svg>
</button>
</div>
<div class="space-y-1 text-gray-700 h-[520px] flex flex-col">
<!-- Component Categories -->
<div class="flex gap-1 mb-3">
<button class="px-2 py-1 text-xs bg-blue-600 text-white rounded font-geist">UI Kit</button>
<button class="px-2 py-1 text-xs bg-gray-200 text-gray-600 hover:bg-gray-300 rounded font-geist">Templates</button>
<button class="px-2 py-1 text-xs bg-gray-200 text-gray-600 hover:bg-gray-300 rounded font-geist">Icons</button>
</div>
<!-- Component Library -->
<div class="bg-white rounded-lg p-2 mb-3 border border-gray-200">
<div class="text-xs text-gray-500 mb-2 font-geist">Basic Components</div>
<div class="grid grid-cols-3 gap-1">
<button class="p-2 rounded border border-gray-200 bg-white hover:bg-gray-50">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 text-blue-500 mx-auto"><rect width="18" height="18" x="3" y="3" rx="2" class=""></rect></svg>
</button>
<button class="p-2 rounded border border-gray-200 bg-white hover:bg-gray-50">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox"="" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 text-green-500 mx-auto"><circle cx="12" cy="12" r="10" class=""></circle></svg>
</button>
<button class="p-2 rounded border border-gray-200 bg-white hover:bg-gray-50">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 text-purple-500 mx-auto"><path d="M12 4v16" class=""></path><path d="M4 7V5a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v2" class=""></path><path d="M9 20h6" class=""></path></svg>
</button>
<button class="p-2 rounded border border-gray-200 bg-white hover:bg-gray-50">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 text-orange-500 mx-auto"><rect width="18" height="18" x="3" y="3" rx="2" ry="2" class=""></rect><circle cx="9" cy="9" r="2" class=""></circle><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" class=""></path></svg>
</button>
<button class="p-2 rounded border border-gray-200 bg-white hover:bg-gray-50">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 text-red-500 mx-auto"><path d="M12 20h9" class=""></path><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z" class=""></path></svg>
</button>
<button class="p-2 rounded border border-gray-200 bg-white hover:bg-gray-50">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 text-indigo-500 mx-auto"><rect width="7" height="7" x="3" y="3" rx="1" class=""></rect><rect width="7" height="7" x="14" y="3" rx="1" class=""></rect><rect width="7" height="7" x="14" y="14" rx="1" class=""></rect><rect width="7" height="7" x="3" y="14" rx="1" class=""></rect></svg>
</button>
</div>
</div>
<!-- Layer Hierarchy -->
<div class="bg-white rounded-lg p-2 flex-1 border border-gray-200">
<div class="text-xs text-gray-500 mb-2 font-geist">Layer Hierarchy</div>
<ul class="space-y-1 text-xs">
<li
class="flex items-center gap-2 rounded-md bg-blue-50 border border-blue-200 px-2 py-1 font-geist">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" data-lucide="square"
class="lucide lucide-square h-3.5 w-3.5 text-blue-600">
<rect width="18" height="18" x="3" y="3" rx="2" class=""></rect>
</svg>
Hero Section
<div class="ml-auto flex items-center gap-1">
<button class="w-3 h-3 rounded-full bg-blue-500"></button>
<button class="w-3 h-3 rounded-sm border border-gray-300">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-2 h-2 text-gray-400"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" class=""></path><circle cx="12" cy="12" r="3" class=""></circle></svg>
</button>
</div>
</li>
<li class="flex items-center gap-2 rounded-md px-2 py-1 hover:bg-gray-50 font-geist">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" data-lucide="type"
class="lucide lucide-type h-3.5 w-3.5 text-green-500">
<path d="M12 4v16" class=""></path>
<path d="M4 7V5a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v2" class=""></path>
<path d="M9 20h6" class=""></path>
</svg>
Main Heading
<div class="ml-auto flex items-center gap-1">
<button class="w-3 h-3 rounded-full bg-green-500"></button>
<button class="w-3 h-3 rounded-sm border border-gray-300">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-2 h-2 text-gray-400"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" class=""></path><circle cx="12" cy="12" r="3" class=""></circle></svg>
</button>
</div>
</li>
<li class="flex items-center gap-2 rounded-md px-2 py-1 hover:bg-gray-50 font-geist">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" data-lucide="type"
class="lucide lucide-type h-3.5 w-3.5 text-gray-400">
<path d="M12 4v16" class=""></path>
<path d="M4 7V5a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v2" class=""></path>
<path d="M9 20h6" class=""></path>
</svg>
Subtitle Text
<div class="ml-auto flex items-center gap-1">
<button class="w-3 h-3 rounded-full bg-gray-400"></button>
<button class="w-3 h-3 rounded-sm border border-gray-300">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-2 h-2 text-gray-400"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" class=""></path><circle cx="12" cy="12" r="3" class=""></circle></svg>
</button>
</div>
</li>
<li class="flex items-center gap-2 rounded-md px-2 py-1 hover:bg-gray-50 font-geist">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="h-3.5 w-3.5 text-purple-500">
<rect width="18" height="18" x="3" y="3" rx="2" ry="2" class=""></rect>
<circle cx="9" cy="9" r="2" class=""></circle>
<path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" class=""></path>
</svg>
Button Group
<div class="ml-auto flex items-center gap-1">
<button class="w-3 h-3 rounded-full bg-purple-500"></button>
<button class="w-3 h-3 rounded-sm border border-gray-300">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-2 h-2 text-gray-400"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" class=""></path><circle cx="12" cy="12" r="3" class=""></circle></svg>
</button>
</div>
</li>
<li class="flex items-center gap-2 rounded-md px-2 py-1 hover:bg-gray-50 font-geist opacity-60">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="h-3.5 w-3.5 text-yellow-500">
<rect width="14" height="20" x="5" y="2" rx="2" ry="2" class=""></rect>
<path d="M12 18h.01" class=""></path>
</svg>
Mobile Layout
<div class="ml-auto">
<span class="text-xs text-gray-400 font-geist">Hidden</span>
</div>
</li>
</ul>
</div>
<!-- AI Assistant Section -->
<div class="bg-gradient-to-r from-blue-50 to-purple-50 rounded-lg p-2 mt-3 border border-blue-200">
<div class="mb-1 flex items-center justify-between">
<div class="flex items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" data-lucide="sparkles"
class="lucide lucide-sparkles h-4 w-4 text-blue-600">
<path
d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"
class=""></path>
<path d="M20 2v4" class=""></path>
<path d="M22 4h-4" class=""></path>
<circle cx="4" cy="20" r="2" class=""></circle>
</svg>
<span class="text-xs font-medium font-geist text-blue-700">AI Assistant</span>
</div>
<button class="p-1 rounded border border-blue-200 bg-white hover:bg-blue-50">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-3 h-3 text-blue-600"><path d="M12 20h9" class=""></path><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z" class=""></path></svg>
</button>
</div>
<div class="text-xs mb-2">
<input type="text" placeholder="Describe what you want to create..." class="w-full px-2 py-1 text-xs border border-blue-200 rounded bg-white placeholder-gray-400 font-geist">
</div>
<div class="flex gap-1">
<button class="px-2 py-1 text-[10px] bg-blue-600 text-white rounded font-geist">Generate</button>
<button class="px-2 py-1 text-[10px] bg-white border border-blue-200 text-blue-600 rounded font-geist">Refine</button>
</div>
</div>
</div>
</aside>
<!-- Canvas -->
<main class="relative md:col-span-6 bg-gray-100">
<div class="flex items-center gap-2 border-b border-gray-200 px-3 py-2 text-xs text-gray-600 bg-white">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
data-lucide="eye" class="lucide lucide-eye h-4 w-4 text-blue-500">
<path
d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"
class=""></path>
<circle cx="12" cy="12" r="3" class=""></circle>
</svg>
<span class="font-geist">Design Mode</span>
<div class="text-gray-400">•</div>
<span class="font-geist text-gray-500">Desktop 1440px</span>
<div class="ml-auto flex items-center gap-1">
<div class="text-xs text-gray-500 font-geist">Zoom:</div>
<div class="text-xs text-gray-600 font-geist">100%</div>
<div class="h-4 w-px bg-gray-300 mx-2"></div>
<button class="rounded-md border border-gray-200 bg-white p-1 hover:bg-gray-50">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" class=""></path><polyline points="17,8 12,3 7,8" class=""></polyline><line x1="12" x2="12" y1="3" y2="15" class=""></line></svg>
</button>
<button class="rounded-md border border-gray-200 bg-blue-600 text-white p-1 hover:bg-blue-500">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="play" class="lucide lucide-play h-4 w-4"><path d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z" class=""></path></svg>
</button>
</div>
</div>
<!-- Canvas Toolbar -->
<div class="flex items-center justify-between border-b border-gray-200 px-3 py-2 bg-white">
<div class="flex items-center gap-2">
<button class="p-1 rounded border border-gray-200 bg-blue-600 text-white hover:bg-blue-500">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4"><path d="M12.586 12.586 19 19" class=""></path><path d="M3.688 3.037a.497.497 0 0 0-.651.651l6.5 15.999a.501.501 0 0 0 .947-.062l1.569-6.083a2 2 0 0 1 1.448-1.479l6.124-1.579a.5.5 0 0 0 .063-.947z" class=""></path></svg>
</button>
<button class="p-1 rounded border border-gray-200 bg-white text-gray-600 hover:bg-gray-50">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4"><rect width="18" height="18" x="3" y="3" rx="2" class=""></rect></svg>
</button>
<div class="h-4 w-px bg-gray-300"></div>
<div class="flex items-center gap-1">
<span class="text-xs text-gray-500 font-geist">Grid:</span>
<button class="px-2 py-0.5 rounded border border-gray-200 bg-white text-xs text-gray-600 hover:bg-gray-50 font-geist">8px</button>
</div>
</div>
<div class="flex items-center gap-2">
<button class="px-2 py-1 rounded border border-gray-200 bg-blue-600 text-white text-xs hover:bg-blue-500 font-geist">Desktop</button>
<button class="px-2 py-1 rounded border border-gray-200 bg-white text-xs text-gray-500 hover:bg-gray-50 font-geist">Tablet</button>
<button class="px-2 py-1 rounded border border-gray-200 bg-white text-xs text-gray-500 hover:bg-gray-50 font-geist">Mobile</button>
</div>
</div>
<div class="p-4 sm:p-6">
<div
class="overflow-hidden min-h-[400px] sm:min-h-[450px] bg-white border-gray-300 border rounded-xl relative">
<!-- Design Canvas Content -->
<div class="absolute top-6 right-6 left-6">
<div class="bg-white max-w-xl border-gray-200 border rounded-xl pt-4 pr-4 pb-4 pl-4 shadow-sm">
<h3 class="sm:text-3xl text-2xl font-semibold text-gray-900 tracking-tight font-geist">
AI-Powered UI Design</h3>
<p class="mt-1 text-sm text-gray-600 font-geist">Create beautiful interfaces with
intelligent design assistance and real-time collaboration.</p>
<div class="flex gap-2 mt-3 items-center">
<button class="inline-flex items-center gap-2 rounded-md bg-blue-600 px-3 py-1.5 text-xs font-medium text-white font-geist">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="sparkles" class="lucide lucide-sparkles h-3 w-3"><path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z" class=""></path><path d="M20 2v4" class=""></path><path d="M22 4h-4" class=""></path><circle cx="4" cy="20" r="2" class=""></circle></svg>
Generate Design
</button>
<button class="inline-flex items-center gap-2 rounded-md border border-gray-200 bg-gray-50 px-3 py-1.5 text-xs font-medium text-gray-700 font-geist">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="settings" class="lucide lucide-settings h-3 w-3"><path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915" class=""></path><circle cx="12" cy="12" r="3" class=""></circle></svg>
Customize
</button>
</div>
</div>
</div>
<!-- Design Elements -->
<!-- Grid overlay (subtle) -->
<div class="opacity-5 absolute top-0 right-0 bottom-0 left-0"
style="background-image: radial-gradient(circle, rgb(107, 114, 128) 1px, transparent 1px); background-size: 16px 16px; visibility: hidden;">
</div>
<!-- Selection indicators -->
<div class="bg-blue-500 w-2 h-2 border-blue-500 border-2 rounded-full absolute top-6 left-6"></div>
<div class="bg-white w-2 h-2 border-blue-500 border-2 rounded-full absolute top-6 right-6"></div>
</div>
<!-- AI Suggestions Bar -->
<div class="mt-4 p-3 bg-gradient-to-r from-blue-50 to-purple-50 border border-blue-200 rounded-lg">
<div class="flex items-center gap-3 mb-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
data-lucide="sparkles" class="lucide lucide-sparkles h-4 w-4 text-blue-600">
<path
d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"
class=""></path>
<path d="M20 2v4" class=""></path>
<path d="M22 4h-4" class=""></path>
<circle cx="4" cy="20" r="2" class=""></circle>
</svg>
<span class="text-xs font-medium text-blue-700 font-geist">AI Suggestions</span>
<div class="flex-1 bg-blue-200 rounded-full h-1">
<div class="bg-blue-600 h-1 rounded-full w-3/4"></div>
</div>
<span class="text-xs text-blue-600 font-geist">Processing...</span>
</div>
<div class="flex items-center justify-between text-xs text-blue-700">
<div class="flex items-center gap-2">
<span class="font-geist">Analyzing design patterns</span>
<div class="h-3 w-px bg-blue-300"></div>
<span class="font-geist text-blue-600">Generating layouts</span>
</div>
<div class="flex items-center gap-1">
<button class="px-2 py-0.5 rounded bg-white text-blue-600 hover:bg-blue-50 text-[10px] font-geist">Apply All</button>
<button class="px-2 py-0.5 rounded bg-blue-600 text-white text-[10px] font-geist">Review</button>
</div>
</div>
</div>
</div>
</main>
<!-- Right panel - Properties -->
<aside class="hidden md:block md:col-span-3 bg-gray-50 border-gray-200 border-l pt-3 pr-3 pb-3 pl-3">
<div class="mb-3 flex items-center justify-between">
<div
class="inline-flex items-center gap-2 rounded-md border border-gray-200 bg-white px-2 py-1 text-xs font-medium text-gray-700 font-geist">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
data-lucide="sliders-horizontal" class="lucide lucide-sliders-horizontal h-3.5 w-3.5">
<path d="M10 5H3" class=""></path>
<path d="M12 19H3" class=""></path>
<path d="M14 3v4" class=""></path>
<path d="M16 17v4" class=""></path>
<path d="M21 12h-9" class=""></path>
<path d="M21 19h-5" class=""></path>
<path d="M21 5h-7" class=""></path>
<path d="M8 10v4" class=""></path>
<path d="M8 12H3" class=""></path>
</svg>
Properties
</div>
<div class="flex gap-1">
<button class="rounded-md border border-gray-200 bg-white p-1 text-gray-500 hover:bg-gray-50">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-3 w-3"><path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" class=""></path><path d="M21 3v5h-5" class=""></path><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" class=""></path><path d="M8 16H3v5" class=""></path></svg>
</button>
<button class="rounded-md border border-gray-200 bg-white p-1 text-gray-500 hover:bg-gray-50">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="more-horizontal" class="lucide lucide-more-horizontal h-3 w-3"><circle cx="12" cy="12" r="1" class=""></circle><circle cx="19" cy="12" r="1" class=""></circle><circle cx="5" cy="12" r="1" class=""></circle></svg>
</button>
</div>
</div>
<!-- Property Tabs -->
<div class="flex gap-1 mb-3">
<button class="px-2 py-1 text-xs bg-blue-600 text-white rounded font-geist">Design</button>
<button class="px-2 py-1 text-xs bg-gray-200 text-gray-600 hover:bg-gray-300 rounded font-geist">Layout</button>
<button class="px-2 py-1 text-xs bg-gray-200 text-gray-600 hover:bg-gray-300 rounded font-geist">Code</button>
</div>
<div class="space-y-3 h-[480px] overflow-y-auto">
<!-- Selected Element Info -->
<div class="bg-white rounded-lg p-3 border border-gray-200">
<div class="flex items-center justify-between mb-2">
<span class="text-xs text-gray-600 font-geist">Selected Element</span>
<span class="text-xs text-blue-600 font-geist">Hero Section</span>
</div>
<div class="text-[10px] text-gray-500 space-y-1 font-geist">
<div class="flex justify-between">
<span>Position:</span>
<span>24px, 24px</span>
</div>
<div class="flex justify-between">
<span>Size:</span>
<span>400 × 160</span>
</div>
<div class="flex justify-between">
<span>Opacity:</span>
<span>100%</span>
</div>
</div>
</div>
<!-- Style Properties -->
<div class="bg-white rounded-lg p-3 space-y-3 border border-gray-200">
<div class="mb-2 flex items-center justify-between text-xs">
<span class="text-gray-700 font-geist">Appearance</span>
<span class="rounded-md bg-gray-100 px-2 py-0.5 text-[10px] text-blue-600 font-geist">Card</span>
</div>
<div class="grid grid-cols-2 gap-2 text-[11px]">
<button class="rounded-md border border-gray-200 bg-blue-600 px-2 py-1 text-white font-geist">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-1 inline h-3 w-3"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0" class=""></path><circle cx="12" cy="12" r="3" class=""></circle></svg>Fill
</button>
<button class="rounded-md border border-gray-200 bg-white px-2 py-1 text-gray-700 hover:bg-gray-50 font-geist">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-1 inline h-3 w-3"><path d="M12 2v20" class=""></path><path d="m15 19-3 3-3-3" class=""></path><path d="m19 9 3 3-3 3" class=""></path><path d="M2 12h20" class=""></path><path d="m5 9-3 3 3 3" class=""></path><path d="m9 5 3-3 3 3" class=""></path></svg>Border
</button>
<button class="rounded-md border border-gray-200 bg-white px-2 py-1 text-gray-700 hover:bg-gray-50 font-geist">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-1 inline h-3 w-3"><path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8" class=""></path><path d="M21 3v5h-5" class=""></path></svg>Shadow
</button>
<button class="rounded-md border border-gray-200 bg-white px-2 py-1 text-gray-700 hover:bg-gray-50 font-geist">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-1 inline h-3 w-3"><circle cx="11" cy="11" r="8" class=""></circle><line x1="21" x2="16.65" y1="21" y2="16.65" class=""></line><line x1="11" x2="11" y1="8" y2="14" class=""></line><line x1="8" x2="14" y1="11" y2="11" class=""></line></svg>Effects
</button>
</div>
<!-- Color picker -->
<div class="text-[10px]">
<div class="text-gray-600 mb-1 font-geist">Background Color</div>
<div class="flex gap-1">
<div class="w-6 h-6 rounded border border-gray-300 bg-white"></div>
<input type="text" class="flex-1 px-2 py-1 text-xs border border-gray-300 rounded bg-white font-geist" value="#FFFFFF">
</div>
</div>
</div>
<!-- Spacing -->
<div class="bg-white rounded-lg p-3 space-y-3 border border-gray-200">
<div class="mb-2 flex items-center justify-between text-xs">
<span class="text-gray-700 font-geist">Spacing</span>
<button class="text-[10px] text-blue-600 hover:text-blue-500 font-geist">Auto</button>
</div>
<div class="space-y-3">
<div class="space-y-1">
<div class="flex items-center justify-between text-xs">
<span class="text-gray-600 font-geist">Padding</span>
<div class="flex items-center gap-1">
<input type="range" class="w-16 h-1 bg-gray-200 rounded-full appearance-none" value="24" min="0" max="100">
<span class="text-gray-500 font-geist w-8 text-[10px]">24px</span>
</div>
</div>
</div>
<div class="space-y-1">
<div class="flex items-center justify-between text-xs">
<span class="text-gray-600 font-geist">Margin</span>
<div class="flex items-center gap-1">
<input type="range" class="w-16 h-1 bg-gray-200 rounded-full appearance-none" value="16" min="0" max="100">
<span class="text-gray-500 font-geist w-8 text-[10px]">16px</span>
</div>
</div>
</div>
<div class="space-y-1">
<div class="flex items-center justify-between text-xs">
<span class="text-gray-600 font-geist">Border Radius</span>
<select class="bg-white border border-gray-300 rounded px-2 py-1 text-[10px] text-gray-600 font-geist">
<option>12px</option>
<option>8px</option>
<option>16px</option>
<option>24px</option>
<option>Custom</option>
</select>
</div>
</div>
</div>
</div>
<!-- Typography -->
<div class="bg-white rounded-lg p-3 space-y-3 border border-gray-200">
<div class="mb-2 flex items-center justify-between text-xs">
<span class="text-gray-700 font-geist">Typography</span>
<button class="text-[10px] text-gray-500 hover:text-gray-400 font-geist">Reset</button>
</div>
<div class="space-y-2">
<div class="grid grid-cols-2 gap-2 text-[10px]">
<div>
<div class="text-gray-600 mb-1 font-geist">Font Family</div>
<select class="w-full bg-white border border-gray-300 rounded px-2 py-1 text-gray-600 font-geist">
<option>Inter</option>
<option>Geist</option>
<option>System</option>
</select>
</div>
<div>
<div class="text-gray-600 mb-1 font-geist">Font Size</div>
<input type="number" class="w-full bg-white border border-gray-300 rounded px-2 py-1 text-gray-600 font-geist" value="24">
</div>
</div>
<div class="grid grid-cols-2 gap-2 text-[10px]">
<div>
<div class="text-gray-600 mb-1 font-geist">Weight</div>
<select class="w-full bg-white border border-gray-300 rounded px-2 py-1 text-gray-600 font-geist">
<option>600</option>
<option>400</option>
<option>500</option>
<option>700</option>
</select>
</div>
<div>
<div class="text-gray-600 mb-1 font-geist">Line Height</div>
<input type="number" class="w-full bg-white border border-gray-300 rounded px-2 py-1 text-gray-600 font-geist" value="1.2" step="0.1">
</div>
</div>
<div class="text-[10px]">
<div class="text-gray-600 mb-1 font-geist">Text Color</div>
<div class="flex items-center gap-2">
<div class="w-4 h-4 rounded border border-gray-300 bg-gray-900"></div>
<span class="text-gray-500 font-geist flex-1">#111827</span>
</div>
</div>
</div>
</div>
<!-- AI Suggestions -->
<div class="bg-gradient-to-r from-blue-50 to-purple-50 rounded-lg p-3 space-y-3 border border-blue-200">
<div class="mb-2 flex items-center justify-between text-xs">
<span class="text-blue-700 font-geist">AI Recommendations</span>
<div class="flex items-center gap-1">
<span class="rounded-md bg-blue-100 px-2 py-0.5 text-[10px] text-blue-600 font-geist">3 new</span>
<button class="w-4 h-4 rounded border border-blue-200 bg-white hover:bg-blue-50 flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-2 h-2"><path d="M5 12h14" class=""></path><path d="M12 5v14" class=""></path></svg>
</button>
</div>
</div>
<div class="space-y-2 text-[11px]">
<div class="flex items-center justify-between p-2 bg-white rounded border border-blue-200">
<div class="flex items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="w-3 h-3 text-blue-500">
<path
d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"
class=""></path>
<circle cx="12" cy="12" r="3" class=""></circle>
</svg>
<span class="text-gray-700 font-geist">Improve Contrast</span>
</div>
<div class="flex items-center gap-1">
<button class="px-2 py-1 text-[9px] bg-blue-600 text-white rounded font-geist">Apply</button>
</div>
</div>
<div class="flex items-center justify-between p-2 bg-white rounded border border-blue-200">
<div class="flex items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="w-3 h-3 text-green-500">
<path d="M12 4v16" class=""></path>
<path d="M4 7V5a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v2" class=""></path>
<path d="M9 20h6" class=""></path>
</svg>
<span class="text-gray-700 font-geist">Optimize Spacing</span>
</div>
<div class="flex items-center gap-1">
<button class="px-2 py-1 text-[9px] bg-blue-600 text-white rounded font-geist">Apply</button>
</div>
</div>
</div>
</div>
</div>
<!-- Action Buttons -->
<div class="mt-4 flex gap-2">
<button class="flex-1 px-3 py-2 bg-blue-600 text-white rounded text-xs font-medium hover:bg-blue-500 font-geist">Generate Code</button>
<button class="px-3 py-2 bg-white text-gray-700 rounded text-xs font-medium border border-gray-300 hover:bg-gray-50 font-geist">Preview</button>
</div>
</aside>
</div>
</div>