All Prompts
All Prompts
dashboardlayouttailwindresponsivechatcode-previewdark-themeui
AI Code Generator Dashboard Layout
Шаблон дашборда для AI-генератора кода. Темный, стекловидный UI с чатом, предпросмотром кода и экспортом. Адаптивный, на Tailwind CSS.
Prompt
<div
class="[animation:fadeSlideIn_0.9s_ease-out_0.5s_both] sm:px-6 lg:overflow-visible lg:pb-0 lg:pl-8 lg:pr-8 mt-24 mb-24 pr-8 pb-0 pl-8 max-w-7xl flex items-center justify-center min-h-screen"
style="mask-image: linear-gradient(180deg, transparent, black 0%, black 30%, transparent);
-webkit-mask-image: linear-gradient(180deg, transparent, black 0%, black 30%, transparent);">
<div class="sm:p-3 bg-neutral-950 border border-neutral-800 rounded-3xl pt-2 pr-2 pb-2 pl-2 relative">
<!-- subtle space glow -->
<div class="grid grid-cols-1 lg:grid-cols-12 gap-3 sm:gap-4 relative gap-x-3 gap-y-3">
<!-- Left Sidebar -->
<aside
class="lg:col-span-3 flex flex-col bg-neutral-900/60 ring-neutral-800 ring-1 rounded-2xl pt-4 pr-4 pb-4 pl-4">
<div class="flex items-center justify-between">
<div class="inline-flex items-center gap-2">
<span class="text-white text-sm font-medium tracking-tight font-geist">
DesignFlow
</span>
</div>
<button class="inline-flex items-center justify-center w-8 h-8 rounded-lg hover:bg-neutral-800 transition text-neutral-300 ring-1 ring-neutral-800">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M4 12h16" class=""></path>
<path d="M4 6h16" class=""></path>
<path d="M4 18h16" class=""></path>
</svg>
</button>
</div>
<div class="mt-4 flex items-center gap-3">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/57ff8f09-a1ef-4c2d-a129-c6e65a08af58_320w.jpg" alt="Avatar" class="w-8 h-8 object-cover ring-neutral-700 ring-1 rounded-full">
<div class="">
<p class="text-white text-sm font-medium tracking-tight font-geist">
Alex Chen
</p>
<p class="text-neutral-400 text-xs font-geist">Lead Developer</p>
</div>
</div>
<div class="mt-4">
<div class="flex items-center gap-2 bg-neutral-900 ring-1 ring-neutral-800 rounded-xl px-3 py-2">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-neutral-400" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5">
<circle cx="11" cy="11" r="8" class=""></circle>
<path d="m21 21-4.3-4.3" class=""></path>
</svg>
<input type="text" placeholder="Search designs..." class="w-full bg-transparent outline-none text-sm text-neutral-200 placeholder-neutral-500">
</div>
</div>
<div class="mt-6">
<p class="text-[11px] uppercase tracking-[0.2em] text-neutral-500 mb-2 font-geist">
Navigation
</p>
<nav class="space-y-1">
<a class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm text-neutral-300 hover:bg-neutral-800 transition font-geist"
href="#">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5">
<rect x="3" y="3" width="7" height="7" rx="1" class=""></rect>
<rect x="14" y="3" width="7" height="7" rx="1" class=""></rect>
<rect x="14" y="14" width="7" height="7" rx="1" class=""></rect>
<rect x="3" y="14" width="7" height="7" rx="1" class=""></rect>
</svg>
Dashboard
</a>
<a class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm text-neutral-100 bg-neutral-800 ring-1 ring-neutral-700 font-geist"
href="#">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-blue-400" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5">
<polyline points="16 18 22 12 16 6" class=""></polyline>
<polyline points="8 6 2 12 8 18" class=""></polyline>
</svg>
Code Generator
</a>
<a class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm text-neutral-300 hover:bg-neutral-800 transition font-geist"
href="#">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5">
<path d="M12 2 2 7l10 5 10-5z" class=""></path>
<path d="m2 17 10 5 10-5" class=""></path>
<path d="m2 12 10 5 10-5" class=""></path>
</svg>
Components
</a>
<a class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm text-neutral-300 hover:bg-neutral-800 transition font-geist"
href="#">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5">
<path
d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"
class="">
</path>
</svg>
Integrations
</a>
</nav>
</div>
<div class="mt-6">
<p class="text-[11px] uppercase tracking-[0.2em] text-neutral-500 mb-2 font-geist">
Recent Projects
</p>
<ul class="space-y-1 text-sm">
<li class="px-3 py-2 rounded-lg text-neutral-300 hover:bg-neutral-800 transition font-geist">
E-commerce dashboard redesign
</li>
<li class="px-3 py-2 rounded-lg text-neutral-300 hover:bg-neutral-800 transition font-geist">
SaaS landing page template
</li>
<li class="px-3 py-2 rounded-lg text-neutral-300 hover:bg-neutral-800 transition font-geist">
Mobile app UI conversion
</li>
<li class="px-3 py-2 rounded-lg text-neutral-300 hover:bg-neutral-800 transition font-geist">
Design system components
</li>
<li class="px-3 py-2 rounded-lg text-neutral-300 hover:bg-neutral-800 transition font-geist">
React component library
</li>
</ul>
</div>
<div class="mt-auto pt-4">
<div
class="relative overflow-hidden rounded-2xl bg-gradient-to-b from-neutral-900 to-neutral-950 ring-1 ring-neutral-800 p-4">
<div class="absolute inset-x-0 -top-6 h-14 bg-gradient-to-b from-blue-500/10 to-transparent"></div>
<p class="text-sm text-white font-medium tracking-tight font-geist">
Upgrade to Pro
</p>
<p class="text-xs text-neutral-400 mt-1 font-geist">
Unlock advanced features and ship 10x faster
</p>
<div class="flex items-center gap-2 mt-3">
<img class="w-6 h-6 object-cover ring-neutral-700 ring-1 rounded-full" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/fa45d691-5e28-4ddb-8f86-2fe1444c0306_320w.jpg" alt="">
<img class="w-6 h-6 object-cover ring-neutral-700 ring-1 rounded-full" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/548251c7-a97a-4c25-8e2d-79f4498b49e0_320w.jpg" alt="">
<img class="ring-1 ring-neutral-700 w-6 h-6 object-cover rounded-full" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/1798060b-f297-4981-a4f3-745854800fb8_320w.jpg" alt="">
<button class="ml-auto inline-flex items-center gap-2 text-xs text-white bg-blue-500 hover:bg-blue-400 transition rounded-full px-3 py-1.5 ring-1 ring-blue-400 font-geist">
Upgrade now
</button>
</div>
</div>
</div>
</aside>
<!-- Main Creative Area -->
<main
class="lg:col-span-6 bg-neutral-900/60 ring-1 ring-neutral-800 rounded-2xl p-4 sm:p-6 relative overflow-hidden">
<!-- stars -->
<div class="pointer-events-none absolute inset-0">
<div class="absolute left-10 top-8 w-1 h-1 rounded-full bg-white/20"></div>
<div class="absolute left-1/3 top-14 w-1 h-1 rounded-full bg-white/30"></div>
<div class="absolute right-16 top-10 w-1 h-1 rounded-full bg-white/20"></div>
<div class="absolute right-1/4 top-1/3 w-1 h-1 rounded-full bg-white/30"></div>
<div class="absolute left-1/4 bottom-12 w-1 h-1 rounded-full bg-white/20"></div>
</div>
<header class="flex items-start justify-between">
<div class="">
<h2 class="text-xl sm:text-2xl text-white font-geist font-light tracking-tighter" style="">
AI Code Generator
</h2>
<p class="text-sm text-neutral-400 mt-1 font-geist">
Transform your design files into production-ready code
instantly
</p>
</div>
<div class="inline-flex items-center gap-2">
<button class="w-8 h-8 rounded-lg ring-1 ring-neutral-800 hover:bg-neutral-800 text-neutral-300 inline-flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<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>
</header>
<div
class="mt-4 rounded-2xl bg-gradient-to-b from-neutral-900 to-neutral-950 ring-1 ring-neutral-800 p-4 sm:p-6 relative">
<div class="absolute inset-0 rounded-2xl ring-1 ring-white/5 pointer-events-none"></div>
<div class="flex items-center justify-between">
<span class="inline-flex items-center gap-2 text-[11px] text-neutral-300 bg-neutral-800/70 rounded-full px-3 py-1 ring-1 ring-neutral-700 font-geist">
<span class="w-1.5 h-1.5 rounded-full bg-blue-500"></span>
Design Input
</span>
<div class="inline-flex items-center gap-2">
<button class="w-8 h-8 inline-flex items-center justify-center rounded-full ring-1 ring-neutral-800 text-neutral-300 hover:bg-neutral-800">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="m15 18-6-6 6-6" class=""></path>
</svg>
</button>
<button class="w-8 h-8 inline-flex items-center justify-center rounded-full ring-1 ring-neutral-800 text-neutral-300 hover:bg-neutral-800">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="m9 18 6-6-6-6" class=""></path>
</svg>
</button>
</div>
</div>
<!-- Prompt bubble -->
<div class="max-w-xl mt-4 mb-6 ml-auto">
<div
class="rounded-2xl bg-neutral-800/80 ring-1 ring-neutral-700 text-sm text-neutral-200 px-4 py-3 font-geist"
style="">
Convert this Figma dashboard design into a responsive
React component with Tailwind CSS. Include proper
component structure, state management, and ensure it's
mobile-first with clean, maintainable code.
</div>
</div>
<!-- Card carousel -->
<div class="w-full mx-auto">
<div class="grid grid-cols-1 items-stretch justify-stretch">
<div class="relative z-10 group">
<!-- Simplified single glass container -->
<div
class="w-full h-full min-h-[280px] rounded-2xl overflow-hidden bg-zinc-900/60 backdrop-blur ring-1 ring-white/10 shadow-[0_4px_20px_rgba(0,0,0,0.3)]">
<!-- Inner content -->
<div class="p-5 h-full flex flex-col">
<!-- Header -->
<div class="flex items-center justify-between mb-4">
<span class="text-sm text-white font-medium tracking-tight font-geist">
Dashboard.tsx
</span>
<span class="inline-flex items-center gap-1 text-[10px] text-blue-200 bg-blue-900/40 rounded-full px-2 py-0.5 ring-1 ring-blue-600 font-geist">
<span class="w-1.5 h-1.5 rounded-full bg-blue-400"></span>
Active
</span>
</div>
<!-- Code Area -->
<div
class="flex-1 bg-zinc-950/80 rounded-xl p-4 font-mono text-xs space-y-1.5 overflow-auto ring-1 ring-white/5">
<div class="text-rose-300 font-geist">
export default function Dashboard() {'{'}
</div>
<div class="text-emerald-300 pl-4 font-geist">
const [data, setData] = useState([]);
</div>
<div class="text-sky-300 pl-4 font-geist">
useEffect(() => {'{'}
</div>
<div class="text-amber-200 pl-8 font-geist">
fetchData();
</div>
<div class="text-sky-300 pl-4 font-geist">{'}'}, []);</div>
<div class="text-violet-300 pl-4 font-geist">return (</div>
<div class="text-zinc-400 pl-8 font-geist">
<Layout>
</div>
<div class="text-zinc-400 pl-12 font-geist">
<Grid data={data} />
</div>
<div class="text-zinc-400 pl-8 font-geist">
</Layout>
</div>
<div class="text-violet-300 pl-4 font-geist">);</div>
<div class="text-rose-300 font-geist">{'}'}</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Response bubble -->
<div class="mt-6 max-w-xl">
<div
class="rounded-2xl bg-neutral-800/80 ring-1 ring-neutral-700 text-sm text-neutral-200 px-4 py-3 font-geist">
Perfect! I've generated production-ready React components
with Tailwind CSS. The code includes responsive
breakpoints, proper TypeScript types, and follows best
practices. Ready to copy and use immediately.
</div>
</div>
<!-- tags -->
<div class="mt-4 flex items-center gap-2 flex-wrap">
<span class="inline-flex items-center gap-2 text-xs text-blue-300 bg-blue-900/30 rounded-full px-3 py-1 ring-1 ring-blue-700 font-geist">
React + TypeScript
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-blue-300" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="m20 6-11 11-5-5" class=""></path>
</svg>
</span>
<span class="inline-flex items-center gap-2 text-xs text-blue-300 bg-blue-900/30 rounded-full px-3 py-1 ring-1 ring-blue-700 font-geist">
Tailwind CSS
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-blue-300" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<rect x="3" y="3" width="14" height="18" rx="2" class=""></rect>
<path d="M7 7h6" class=""></path>
<path d="M7 11h6" class=""></path>
</svg>
</span>
</div>
</div>
<!-- Creative Tools -->
<div class="mt-4 flex items-end gap-3">
<div class="flex-1 rounded-2xl bg-neutral-900 ring-1 ring-neutral-800 px-3 py-2">
<div class="flex items-center gap-2">
<button class="inline-flex hover:text-blue-400 transition text-neutral-400 w-8 h-8 items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<rect x="3" y="3" width="18" height="18" 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>
<input type="text" placeholder="Upload your design file or paste URL..." class="flex-1 bg-transparent outline-none text-sm text-neutral-200 placeholder-neutral-500">
</div>
</div>
<button class="w-12 h-12 rounded-2xl bg-blue-500 hover:bg-blue-400 transition ring-1 ring-blue-400 inline-flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="m12 2 3 7 7 3-7 3-3 7-3-7-7-3 7-3 3-7z" class=""></path>
</svg>
</button>
</div>
<p class="mt-2 text-[11px] text-neutral-500 font-geist">
DesignFlow generates clean, production-ready code. Your
designs are processed securely and never stored.
</p>
</main>
<!-- Right Sidebar -->
<aside
class="lg:col-span-3 flex flex-col bg-neutral-900/60 ring-neutral-800 ring-1 rounded-2xl pt-4 pr-4 pb-4 pl-4">
<div class="flex items-center justify-between">
<span class="inline-flex items-center gap-2 text-xs text-blue-200 bg-blue-900/40 rounded-full px-3 py-1 ring-1 ring-blue-700 font-geist">
<span class="w-1.5 h-1.5 rounded-full bg-blue-500"></span>
DesignFlow Pro
</span>
<button class="w-8 h-8 inline-flex items-center justify-center rounded-lg ring-1 ring-neutral-800 text-neutral-300 hover:bg-neutral-800">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M12 3v18" class=""></path>
<path d="M3 12h18" class=""></path>
</svg>
</button>
</div>
<div class="mt-4 flex items-center gap-6">
<button class="relative text-sm text-white">
<span class="font-geist">EXPORTS</span>
<span class="absolute -bottom-2 left-0 right-0 h-0.5 bg-white rounded-full"></span>
</button>
<button class="text-sm text-neutral-500 font-geist">SETTINGS</button>
</div>
<div class="mt-6">
<div class="flex items-center gap-2 mb-2">
<p class="text-sm text-neutral-300 font-medium tracking-tight font-geist">
Active Conversions
</p>
<span class="inline-flex items-center text-[11px] text-black bg-blue-400 rounded-full px-2 py-0.5 ring-1 ring-blue-300 font-geist">
Live
</span>
</div>
<div class="space-y-2">
<!-- Project 1 -->
<label class="flex items-start gap-3 p-3 rounded-xl ring-1 ring-neutral-800 bg-neutral-900 hover:bg-neutral-800 transition cursor-pointer">
<span class="relative w-4 h-4 rounded-md ring-1 ring-neutral-700 bg-neutral-900"></span>
<div class="flex-1">
<p class="text-sm text-neutral-200 font-geist">
Landing page components
</p>
</div>
</label>
<!-- Project 2 (active) -->
<div class="p-3 rounded-xl ring-1 ring-blue-700 bg-blue-900/20">
<label class="flex items-center justify-between">
<div class="flex items-center gap-3">
<span class="relative w-4 h-4 rounded-md ring-1 ring-blue-600 bg-blue-500/20">
<span class="absolute inset-0.5 rounded-[3px] bg-blue-400"></span>
</span>
<p class="text-sm text-neutral-200 font-geist">
Dashboard UI Kit
</p>
</div>
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-blue-300" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="m6 9 6 6 6-6" class=""></path>
</svg>
</label>
<ul class="mt-3 space-y-2 text-sm text-neutral-400 pl-7 list-disc">
<li class="font-geist">React components with hooks</li>
<li class="font-geist">Responsive Tailwind styles</li>
</ul>
</div>
<!-- Project 3 -->
<label class="flex items-start gap-3 p-3 rounded-xl ring-1 ring-neutral-800 bg-neutral-900 hover:bg-neutral-800 transition cursor-pointer">
<span class="relative w-4 h-4 rounded-md ring-1 ring-neutral-700 bg-neutral-900"></span>
<div class="flex-1">
<p class="text-sm text-neutral-200 font-geist">
Mobile app screens
</p>
</div>
</label>
</div>
</div>
<div class="mt-6">
<p class="text-sm text-neutral-300 font-medium tracking-tight font-geist">
Export Formats
</p>
<div class="mt-3 space-y-3">
<!-- React -->
<div class="flex items-center justify-between p-3 rounded-xl ring-1 ring-neutral-800 bg-neutral-900">
<div class="flex items-center gap-3">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-neutral-300" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5">
<polyline points="16 18 22 12 16 6" class=""></polyline>
<polyline points="8 6 2 12 8 18" class=""></polyline>
</svg>
<div class="">
<p class="text-sm text-neutral-200 font-geist">
React + TypeScript
</p>
<p class="text-xs text-neutral-500 font-geist">
Modern component library
</p>
</div>
</div>
<div class="relative w-10 h-6 rounded-full bg-blue-900/30 ring-1 ring-blue-600">
<span class="absolute right-1 top-1 w-4 h-4 rounded-full bg-blue-400"></span>
</div>
</div>
<!-- Vue -->
<div class="flex items-center justify-between p-3 rounded-xl ring-1 ring-neutral-800 bg-neutral-900">
<div class="flex items-center gap-3">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-neutral-300" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5">
<circle cx="12" cy="12" r="3" class=""></circle>
<path
d="m12 1 2.35 2.35L17 1h5v5l-2.35 2.35L22 11v2l-2.35 2.35L22 18v5h-5l-2.35-2.35L12 23l-2.35-2.35L7 23H2v-5l2.35-2.35L2 13v-2l2.35-2.35L2 6V1h5l2.35 2.35z"
class="">
</path>
</svg>
<div class="">
<p class="text-sm text-neutral-200 font-geist">
Vue 3 Composition API
</p>
<p class="text-xs text-neutral-500 font-geist">
Script setup syntax
</p>
</div>
</div>
<div class="relative w-10 h-6 rounded-full bg-blue-900/30 ring-1 ring-blue-600">
<span class="absolute right-1 top-1 w-4 h-4 rounded-full bg-blue-400"></span>
</div>
</div>
<!-- HTML -->
<div class="flex items-center justify-between p-3 rounded-xl ring-1 ring-neutral-800 bg-neutral-900">
<div class="flex items-center gap-3">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-neutral-300" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5">
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" class=""></path>
<polyline points="14,2 14,8 20,8" class=""></polyline>
<line x1="16" y1="13" x2="8" y2="13" class=""></line>
<line x1="16" y1="17" x2="8" y2="17" class=""></line>
<polyline points="10,9 9,9 8,9" class=""></polyline>
</svg>
<div class="">
<p class="text-sm text-neutral-200 font-geist">
HTML + Tailwind
</p>
<p class="text-xs text-neutral-500 font-geist">
Vanilla JavaScript included
</p>
</div>
</div>
<div class="relative w-10 h-6 rounded-full bg-neutral-800 ring-1 ring-neutral-700">
<span class="absolute left-1 top-1 w-4 h-4 rounded-full bg-neutral-500"></span>
</div>
</div>
</div>
</div>
</aside>
</div>
</div>
</div>