AI Prompt

AI Prompt 10 · Prompt with tool row

A prompt box with a row of small tool chips above it (Search, Image, Code) and a microphone button beside send.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <section class='bg-neutral-50 p-10'><div class='mx-auto max-w-2xl'><div class='flex flex-wrap gap-2 text-sm'><span class='rounded-full bg-black px-3.5 py-1.5 font-medium text-white'>Code</span><span class='rounded-full border border-neutral-300 bg-white px-3.5 py-1.5 text-neutral-700'>Image</span><span class='rounded-full border border-neutral-300 bg-white px-3.5 py-1.5 text-neutral-700'>Search</span></div><div class='mt-3 flex items-end gap-2 rounded-3xl border border-neutral-300 bg-white p-2 pl-5 focus-within:border-black'><textarea rows='2' placeholder='Describe the change' class='min-w-0 flex-1 resize-none py-2.5 text-base outline-none'></textarea><button type='button' class='grid h-11 w-11 shrink-0 place-items-center rounded-full text-neutral-500 hover:bg-neutral-100' aria-label='Voice'>●</button><button type='button' class='grid h-11 w-11 shrink-0 place-items-center rounded-full bg-black text-lg text-white' aria-label='Send'>↑</button></div></div></section>

AI Prompt 09 · Thinking state

The moment while a reply is being written: three pulsing dots in a bubble and a stop button in the prompt box.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <section class='bg-white p-8'><div class='mx-auto max-w-2xl space-y-6'><div class='ml-auto max-w-sm rounded-2xl rounded-br-md bg-black px-4 py-3 text-sm text-white'>Build a contact page.</div><div class='flex items-center gap-3'><span class='grid h-8 w-8 shrink-0 place-items-center rounded-full border border-neutral-300 text-xs'>✦</span><div class='flex gap-1.5 rounded-2xl bg-neutral-100 px-4 py-3'><span class='h-2 w-2 animate-pulse rounded-full bg-neutral-500'></span><span class='h-2 w-2 animate-pulse rounded-full bg-neutral-500 [animation-delay:150ms]'></span><span class='h-2 w-2 animate-pulse rounded-full bg-neutral-500 [animation-delay:300ms]'></span></div></div><div class='flex items-end gap-2 rounded-2xl border border-neutral-300 p-2 pl-4'><textarea rows='1' disabled placeholder='Writing a reply' class='min-w-0 flex-1 resize-none bg-transparent py-2 text-sm outline-none'></textarea><button type='button' class='grid h-9 w-9 place-items-center rounded-full border-2 border-black text-black' aria-label='Stop'>■</button></div></div></section>

AI Prompt 08 · History sidebar and chat

A two-pane layout: a narrow list of past chats with a new-chat button, and the open conversation with a prompt box.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <div class='grid min-h-[520px] bg-white md:grid-cols-[260px_1fr]'><aside class='border-b border-neutral-200 bg-neutral-50 p-4 md:border-b-0 md:border-r'><button type='button' class='w-full rounded-lg bg-black py-2.5 text-sm font-semibold text-white'>+ New chat</button><p class='mt-6 px-2 text-xs font-semibold uppercase tracking-widest text-neutral-400'>Today</p><ul class='mt-2 space-y-1 text-sm'><li class='rounded-lg bg-white px-3 py-2 font-medium text-black ring-1 ring-neutral-200'>Pricing page layout</li><li class='rounded-lg px-3 py-2 text-neutral-600'>Footer links</li><li class='rounded-lg px-3 py-2 text-neutral-600'>Dark navbar</li></ul></aside><main class='flex flex-col'><div class='flex-1 space-y-5 p-8'><div class='ml-auto max-w-sm rounded-2xl rounded-br-md bg-black px-4 py-3 text-sm text-white'>Add a yearly toggle.</div><div class='max-w-md text-sm text-neutral-700'>Added a Monthly / Yearly switch above the plans.</div></div><div class='border-t border-neutral-200 p-4'><div class='flex items-end gap-2 rounded-2xl border border-neutral-300 p-2 pl-4'><textarea rows='1' placeholder='Message' class='min-w-0 flex-1 resize-none py-2 text-sm outline-none'></textarea><button type='button' class='grid h-9 w-9 place-items-center rounded-full bg-black text-white'>↑</button></div></div></main></div>

AI Prompt 07 · Answer with code block

An assistant reply that includes a dark code block with a copy button and a row of small action buttons.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <section class='bg-white p-8'><div class='mx-auto max-w-2xl'><div class='flex gap-3'><span class='grid h-8 w-8 shrink-0 place-items-center rounded-full border border-neutral-300 text-xs'>✦</span><div class='min-w-0 flex-1'><p class='text-sm leading-relaxed text-neutral-700'>Here is a rounded button with a hover state:</p><div class='mt-3 overflow-hidden rounded-xl bg-black'><div class='flex items-center justify-between border-b border-neutral-800 px-4 py-2 text-xs text-neutral-400'><span>html</span><button type='button' class='rounded px-2 py-0.5 hover:bg-neutral-800 hover:text-white'>Copy</button></div><pre class='overflow-x-auto p-4 font-mono text-sm leading-6 text-neutral-300'><code>&lt;a class='rounded-full bg-black px-6 py-3
           text-white hover:opacity-85'&gt;
          Get started
        &lt;/a&gt;</code></pre></div><div class='mt-3 flex gap-2 text-sm'><button type='button' class='rounded-lg border border-neutral-200 px-3 py-1.5 text-neutral-600 hover:bg-neutral-50'>Insert</button><button type='button' class='rounded-lg border border-neutral-200 px-3 py-1.5 text-neutral-600 hover:bg-neutral-50'>Regenerate</button></div></div></div></div></section>

AI Prompt 06 · Hero start screen

A start screen with the Windcraft logo, a big question and a prompt box with example cards below. Sample prompts.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <section class='bg-white px-6 py-20'><div class='mx-auto max-w-3xl text-center'><img src='https://raw.githubusercontent.com/Tolaj/windcraft/main/docs/media/logo.png' alt='Windcraft' class='mx-auto h-8 w-auto'><h1 class='mt-8 text-4xl font-semibold tracking-tight text-black'>What do you want to build?</h1><div class='mt-8 flex items-end gap-2 rounded-3xl border border-neutral-300 p-2 pl-5 text-left shadow-sm'><textarea rows='2' placeholder='A landing page for a coffee shop' class='min-w-0 flex-1 resize-none py-2.5 text-base outline-none'></textarea><button type='button' class='grid h-11 w-11 shrink-0 place-items-center rounded-full bg-black text-lg text-white'>↑</button></div><div class='mt-6 grid gap-3 text-left sm:grid-cols-3'><div class='rounded-2xl border border-neutral-200 p-4 text-sm text-neutral-700'>A pricing page with three plans</div><div class='rounded-2xl border border-neutral-200 p-4 text-sm text-neutral-700'>A dashboard with a sidebar</div><div class='rounded-2xl border border-neutral-200 p-4 text-sm text-neutral-700'>A blog with a featured post</div></div></div></section>

AI Prompt 05 · With model and attach

A larger prompt box with a footer row holding an attach button, a model select and the send button.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <section class='bg-neutral-50 p-10'><div class='mx-auto max-w-2xl overflow-hidden rounded-2xl border border-neutral-300 bg-white focus-within:border-black'><textarea rows='4' placeholder='Describe what you want to build' class='w-full resize-none px-4 py-4 text-base outline-none'></textarea><div class='flex items-center justify-between px-3 pb-3'><div class='flex items-center gap-2'><button type='button' class='grid h-9 w-9 place-items-center rounded-lg text-neutral-600 hover:bg-neutral-100' aria-label='Attach'>⎘</button><select class='rounded-lg border border-neutral-200 bg-white px-2.5 py-1.5 text-sm text-neutral-700 outline-none'><option>Fast</option><option>Balanced</option><option>Thorough</option></select></div><button type='button' class='grid h-9 w-9 place-items-center rounded-full bg-black text-white' aria-label='Send'>↑</button></div></div></section>

AI Prompt 04 · Dark prompt

A prompt box on a black page with a dark field, a white send button and grey hint text.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <section class='bg-black p-10'><div class='mx-auto max-w-2xl'><div class='flex items-end gap-2 rounded-3xl border border-neutral-800 bg-neutral-950 p-2 pl-5 focus-within:border-neutral-600'><textarea rows='2' placeholder='Ask anything' class='min-w-0 flex-1 resize-none bg-transparent py-2.5 text-base text-white placeholder-neutral-600 outline-none'></textarea><button type='button' class='grid h-11 w-11 shrink-0 place-items-center rounded-full bg-white text-lg text-black' aria-label='Send'>↑</button></div><p class='mt-3 text-center text-xs text-neutral-500'>Answers can be wrong. Check important details.</p></div></section>

AI Prompt 03 · With suggestion chips

A centered heading, a prompt box and a row of suggestion chips underneath.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <section class='bg-white px-6 py-20'><div class='mx-auto max-w-2xl text-center'><h1 class='text-4xl font-semibold tracking-tight text-black'>What shall we design?</h1><div class='mt-8 flex items-end gap-2 rounded-3xl border border-neutral-300 p-2 pl-5 text-left shadow-sm'><textarea rows='2' placeholder='Describe a page' class='min-w-0 flex-1 resize-none py-2.5 text-base outline-none'></textarea><button type='button' class='grid h-11 w-11 shrink-0 place-items-center rounded-full bg-black text-lg text-white' aria-label='Send'>↑</button></div><div class='mt-5 flex flex-wrap justify-center gap-2 text-sm'><span class='rounded-full border border-neutral-300 px-4 py-1.5 text-neutral-700'>A pricing page</span><span class='rounded-full border border-neutral-300 px-4 py-1.5 text-neutral-700'>A dashboard</span><span class='rounded-full border border-neutral-300 px-4 py-1.5 text-neutral-700'>A sign-in screen</span></div></div></section>

AI Prompt 02 · Chat conversation

A short conversation: a black bubble for the user on the right, a plain reply on the left, and a prompt box at the bottom.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <section class='bg-white p-8'><div class='mx-auto flex max-w-2xl flex-col gap-6'><div class='ml-auto max-w-sm rounded-2xl rounded-br-md bg-black px-4 py-3 text-sm text-white'>Make the hero button a pill.</div><div class='flex gap-3'><span class='grid h-8 w-8 shrink-0 place-items-center rounded-full border border-neutral-300 text-xs'>✦</span><div class='max-w-md text-sm leading-relaxed text-neutral-700'>Done. I changed <code class='rounded bg-neutral-100 px-1.5 py-0.5 font-mono text-xs text-black'>rounded-md</code> to <code class='rounded bg-neutral-100 px-1.5 py-0.5 font-mono text-xs text-black'>rounded-full</code> on the button.</div></div><div class='flex items-end gap-2 rounded-2xl border border-neutral-300 p-2 pl-4'><textarea rows='1' placeholder='Reply' class='min-w-0 flex-1 resize-none py-2 text-sm outline-none'></textarea><button type='button' class='grid h-9 w-9 place-items-center rounded-full bg-black text-white' aria-label='Send'>↑</button></div></div></section>

AI Prompt 01 · Simple prompt box

A rounded prompt box with a text area and a round send button on the right.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <section class='bg-white p-10'><div class='mx-auto max-w-2xl'><div class='flex items-end gap-2 rounded-3xl border border-neutral-300 bg-white p-2 pl-5 shadow-sm focus-within:border-black'><textarea rows='2' placeholder='Ask anything' class='min-w-0 flex-1 resize-none py-2.5 text-base outline-none'></textarea><button type='button' class='grid h-11 w-11 shrink-0 place-items-center rounded-full bg-black text-lg text-white' aria-label='Send'>↑</button></div></div></section>