FAQ Sections

<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'><div class='mx-auto grid max-w-6xl gap-12 px-6 py-24 md:grid-cols-[280px_1fr]'><nav class='space-y-1 text-sm md:sticky md:top-8 md:self-start'><p class='mb-3 text-xs font-semibold uppercase tracking-widest text-neutral-500'>On this page</p><a href='#q1' class='block rounded-lg bg-black px-3 py-2 font-medium text-white'>What is Windcraft?</a><a href='#q2' class='block rounded-lg px-3 py-2 text-neutral-600 hover:bg-neutral-50'>How does the code stay in sync?</a><a href='#q3' class='block rounded-lg px-3 py-2 text-neutral-600 hover:bg-neutral-50'>Can I animate things?</a></nav><div class='space-y-12'><div id='q1'><h3 class='text-xl font-semibold text-black'>What is Windcraft?</h3><p class='mt-3 text-neutral-600'>A visual editor for Tailwind. You draw or paste a page, edit it on a canvas, and the code stays plain HTML.</p></div><div id='q2'><h3 class='text-xl font-semibold text-black'>How does the code stay in sync?</h3><p class='mt-3 text-neutral-600'>Every control in the panel reads and writes Tailwind classes on the element. Change the code and the canvas follows.</p></div><div id='q3'><h3 class='text-xl font-semibold text-black'>Can I animate things?</h3><p class='mt-3 text-neutral-600'>Yes. Pick an animation from the library and it is added to your Tailwind config.</p></div></div></div></section>

<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'><div class='mx-auto max-w-xl px-6 py-24 text-center'><h2 class='text-3xl font-semibold tracking-tight text-black'>Need to know</h2><p class='mt-3 text-neutral-600'>The short answers.</p><div class='mt-10 divide-y divide-neutral-200 border-y border-neutral-200 text-left'><details class='group py-4'><summary class='flex cursor-pointer list-none items-center justify-between font-medium text-black'>Is it open to try?<span class='text-xl text-neutral-400 transition group-open:rotate-45'>+</span></summary><p class='mt-2 text-sm text-neutral-600'>Yes. Open the editor in your browser.</p></details><details class='group py-4'><summary class='flex cursor-pointer list-none items-center justify-between font-medium text-black'>Can I leave any time?<span class='text-xl text-neutral-400 transition group-open:rotate-45'>+</span></summary><p class='mt-2 text-sm text-neutral-600'>Yes. Copy your HTML and go.</p></details><details class='group py-4'><summary class='flex cursor-pointer list-none items-center justify-between font-medium text-black'>Is my work private?<span class='text-xl text-neutral-400 transition group-open:rotate-45'>+</span></summary><p class='mt-2 text-sm text-neutral-600'>Sample answer: describe your privacy rules.</p></details><details class='group py-4'><summary class='flex cursor-pointer list-none items-center justify-between font-medium text-black'>Who builds it?<span class='text-xl text-neutral-400 transition group-open:rotate-45'>+</span></summary><p class='mt-2 text-sm text-neutral-600'>A small team. Feedback is welcome.</p></details></div></div></section>

<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'><div class='mx-auto max-w-3xl px-6 py-24'><h2 class='text-4xl font-semibold tracking-tight text-black'>Before you start</h2><div class='mt-10 space-y-3'><details class='group rounded-2xl border border-neutral-200 bg-white p-5' open><summary class='flex cursor-pointer list-none items-center gap-4 font-medium text-black'><span class='font-mono text-sm text-neutral-400'>01</span>What do I need?<span class='ml-auto text-xl text-neutral-400 transition group-open:rotate-45'>+</span></summary><p class='mt-3 pl-9 text-neutral-600'>A browser. Open the editor and start.</p></details><details class='group rounded-2xl border border-neutral-200 bg-white p-5'><summary class='flex cursor-pointer list-none items-center gap-4 font-medium text-black'><span class='font-mono text-sm text-neutral-400'>02</span>Do I need Tailwind installed?<span class='ml-auto text-xl text-neutral-400 transition group-open:rotate-45'>+</span></summary><p class='mt-3 pl-9 text-neutral-600'>Not to design. The editor loads it for you.</p></details><details class='group rounded-2xl border border-neutral-200 bg-white p-5'><summary class='flex cursor-pointer list-none items-center gap-4 font-medium text-black'><span class='font-mono text-sm text-neutral-400'>03</span>Can I bring my own config?<span class='ml-auto text-xl text-neutral-400 transition group-open:rotate-45'>+</span></summary><p class='mt-3 pl-9 text-neutral-600'>Yes, in the Config tab.</p></details></div></div></section>

<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'><div class='mx-auto max-w-3xl px-6 py-24'><h2 class='text-4xl font-semibold tracking-tight text-black'>Questions</h2><div class='mt-10 divide-y divide-neutral-200 border-y border-neutral-200'><details class='group py-5' open><summary class='flex cursor-pointer list-none items-center justify-between font-medium text-black'>What happens to my designs?<span class='text-xl text-neutral-400 transition group-open:rotate-45'>+</span></summary><p class='mt-3 text-neutral-600'>They are saved in your projects. You can copy the HTML at any time.</p></details><details class='group py-5'><summary class='flex cursor-pointer list-none items-center justify-between font-medium text-black'>Can I work with a team?<span class='text-xl text-neutral-400 transition group-open:rotate-45'>+</span></summary><p class='mt-3 text-neutral-600'>Sample answer: describe your team features here.</p></details></div><div class='mt-10 flex flex-wrap items-center justify-between gap-4 rounded-2xl bg-black p-8'><div><h3 class='text-lg font-semibold text-white'>Still have questions?</h3><p class='mt-1 text-sm text-neutral-400'>We read every message.</p></div><a href='#' class='rounded-lg bg-white px-5 py-2.5 text-sm font-semibold text-black'>Contact us</a></div></div></section>

<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'><div class='mx-auto max-w-3xl px-6 py-24'><h2 class='text-center text-4xl font-semibold tracking-tight text-black'>Help centre</h2><div class='mt-8 flex justify-center gap-2 text-sm'><span class='rounded-full bg-black px-4 py-1.5 font-medium text-white'>Getting started</span><span class='rounded-full border border-neutral-300 px-4 py-1.5 text-neutral-700'>Editing</span><span class='rounded-full border border-neutral-300 px-4 py-1.5 text-neutral-700'>Account</span></div><div class='mt-10 divide-y divide-neutral-200 border-y border-neutral-200'><details class='group py-5' open><summary class='flex cursor-pointer list-none items-center justify-between font-medium text-black'>How do I start a page?<span class='text-xl text-neutral-400 transition group-open:rotate-45'>+</span></summary><p class='mt-3 text-neutral-600'>Create a design, then draw with the tools or paste HTML.</p></details><details class='group py-5'><summary class='flex cursor-pointer list-none items-center justify-between font-medium text-black'>Where do I see the code?<span class='text-xl text-neutral-400 transition group-open:rotate-45'>+</span></summary><p class='mt-3 text-neutral-600'>Open the code panel next to the canvas.</p></details><details class='group py-5'><summary class='flex cursor-pointer list-none items-center justify-between font-medium text-black'>Can I add several pages?<span class='text-xl text-neutral-400 transition group-open:rotate-45'>+</span></summary><p class='mt-3 text-neutral-600'>Yes, as frames in one project.</p></details></div></div></section>

<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'><div class='mx-auto max-w-5xl px-6 py-24'><h2 class='text-center text-4xl font-semibold tracking-tight text-black'>FAQ</h2><dl class='mt-14 grid gap-x-12 gap-y-10 md:grid-cols-2'><div><dt class='font-semibold text-black'>Can I start from scratch?</dt><dd class='mt-2 text-neutral-600'>Yes, draw with the rectangle, oval and text tools.</dd></div><div><dt class='font-semibold text-black'>Can I paste code?</dt><dd class='mt-2 text-neutral-600'>Yes, paste HTML and edit it visually.</dd></div><div><dt class='font-semibold text-black'>Is there a code panel?</dt><dd class='mt-2 text-neutral-600'>Yes, with HTML, CSS, JS and config tabs.</dd></div><div><dt class='font-semibold text-black'>Are animations included?</dt><dd class='mt-2 text-neutral-600'>A library of entrances, loops and hover effects.</dd></div><div><dt class='font-semibold text-black'>Does it support hover states?</dt><dd class='mt-2 text-neutral-600'>Yes, plus focus and breakpoints.</dd></div><div><dt class='font-semibold text-black'>Can I share a project?</dt><dd class='mt-2 text-neutral-600'>Yes, with a link for viewing.</dd></div></dl></div></section>

<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'><div class='mx-auto max-w-3xl px-6 py-24'><h2 class='text-center text-4xl font-semibold tracking-tight text-white'>Frequently asked</h2><div class='mt-12 divide-y divide-neutral-800 border-y border-neutral-800'><details class='group py-5' open><summary class='flex cursor-pointer list-none items-center justify-between font-medium text-white'>What is Windcraft?<span class='text-xl text-neutral-500 transition group-open:rotate-45'>+</span></summary><p class='mt-3 text-neutral-400'>A visual editor where every edit writes real Tailwind HTML.</p></details><details class='group py-5'><summary class='flex cursor-pointer list-none items-center justify-between font-medium text-white'>Who is it for?<span class='text-xl text-neutral-500 transition group-open:rotate-45'>+</span></summary><p class='mt-3 text-neutral-400'>Designers who want code, and developers who want a canvas.</p></details><details class='group py-5'><summary class='flex cursor-pointer list-none items-center justify-between font-medium text-white'>Does it need an account?<span class='text-xl text-neutral-500 transition group-open:rotate-45'>+</span></summary><p class='mt-3 text-neutral-400'>Sample answer: describe your sign-in rules here.</p></details><details class='group py-5'><summary class='flex cursor-pointer list-none items-center justify-between font-medium text-white'>Where is the code?<span class='text-xl text-neutral-500 transition group-open:rotate-45'>+</span></summary><p class='mt-3 text-neutral-400'>In the code panel next to the canvas, in HTML, CSS, JS and config tabs.</p></details></div></div></section>

<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'><div class='mx-auto max-w-3xl px-6 py-24'><h2 class='text-4xl font-semibold tracking-tight text-black'>Good to know</h2><div class='mt-10 space-y-4'><div class='rounded-2xl border border-neutral-200 bg-white p-6'><h3 class='font-semibold text-black'>Is there lock-in?</h3><p class='mt-2 text-neutral-600'>No. Your pages are plain HTML and Tailwind, so you can take them anywhere.</p></div><div class='rounded-2xl border border-neutral-200 bg-white p-6'><h3 class='font-semibold text-black'>Can I paste an existing page?</h3><p class='mt-2 text-neutral-600'>Yes. Paste it in and edit it visually.</p></div><div class='rounded-2xl border border-neutral-200 bg-white p-6'><h3 class='font-semibold text-black'>Is it free?</h3><p class='mt-2 text-neutral-600'>Sample answer: replace this with your own pricing note.</p></div></div></div></section>

<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'><div class='mx-auto grid max-w-6xl gap-12 px-6 py-24 md:grid-cols-[1fr_1.8fr]'><div><h2 class='text-4xl font-semibold tracking-tight text-black'>Questions</h2><p class='mt-4 text-neutral-600'>Cannot find what you need?</p><a href='#' class='mt-3 inline-block font-medium text-black underline underline-offset-4'>Contact support</a></div><div class='divide-y divide-neutral-200 border-y border-neutral-200'><details class='group py-5' open><summary class='flex cursor-pointer list-none items-center justify-between font-medium text-black'>Does it work with Figma?<span class='text-xl text-neutral-400 transition group-open:rotate-45'>+</span></summary><p class='mt-3 text-neutral-600'>There is a Figma plugin that brings a frame in as HTML.</p></details><details class='group py-5'><summary class='flex cursor-pointer list-none items-center justify-between font-medium text-black'>Can Claude or Cursor use it?<span class='text-xl text-neutral-400 transition group-open:rotate-45'>+</span></summary><p class='mt-3 text-neutral-600'>An MCP server lets them read your library and save designs.</p></details><details class='group py-5'><summary class='flex cursor-pointer list-none items-center justify-between font-medium text-black'>How do interactions work?<span class='text-xl text-neutral-400 transition group-open:rotate-45'>+</span></summary><p class='mt-3 text-neutral-600'>You set a rule on an element. It is saved as an HTML attribute, and a small script the editor adds runs it.</p></details><details class='group py-5'><summary class='flex cursor-pointer list-none items-center justify-between font-medium text-black'>Can I export my pages?<span class='text-xl text-neutral-400 transition group-open:rotate-45'>+</span></summary><p class='mt-3 text-neutral-600'>Copy the HTML any time. It is already plain code.</p></details></div></div></section>

<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'><div class='mx-auto max-w-3xl px-6 py-24'><h2 class='text-center text-4xl font-semibold tracking-tight text-black'>Questions, answered</h2><div class='mt-12 divide-y divide-neutral-200 border-y border-neutral-200'><details class='group py-5' open><summary class='flex cursor-pointer list-none items-center justify-between font-medium text-black'>Do I need to write code?<span class='text-xl text-neutral-400 transition group-open:rotate-45'>+</span></summary><p class='mt-3 text-neutral-600'>No. Draw on the canvas or paste a page, then edit with the panel. The code is there when you want it.</p></details><details class='group py-5'><summary class='flex cursor-pointer list-none items-center justify-between font-medium text-black'>Is the output plain HTML?<span class='text-xl text-neutral-400 transition group-open:rotate-45'>+</span></summary><p class='mt-3 text-neutral-600'>Yes. Pages are HTML with Tailwind classes. There is no Windcraft-only format.</p></details><details class='group py-5'><summary class='flex cursor-pointer list-none items-center justify-between font-medium text-black'>Which Tailwind versions work?<span class='text-xl text-neutral-400 transition group-open:rotate-45'>+</span></summary><p class='mt-3 text-neutral-600'>Both v3 and v4.</p></details><details class='group py-5'><summary class='flex cursor-pointer list-none items-center justify-between font-medium text-black'>Can I use my own Tailwind config?<span class='text-xl text-neutral-400 transition group-open:rotate-45'>+</span></summary><p class='mt-3 text-neutral-600'>Yes. The Config tab sits next to the code and applies live.</p></details><details class='group py-5'><summary class='flex cursor-pointer list-none items-center justify-between font-medium text-black'>Which browsers are supported?<span class='text-xl text-neutral-400 transition group-open:rotate-45'>+</span></summary><p class='mt-3 text-neutral-600'>It is tested in Chrome. Other browsers may work but are not tested yet.</p></details></div></div></section>