Documentation

How Windcraft works

The gallery, projects, the editor and agents, step by step. If a word looks unfamiliar, check the glossary at the bottom.

What is Windcraft?

Windcraft has two doors. The gallery is where you come to look at designs and choose one. The editor is where you make a design, with its code beside it. Every design lives in a project.

It is for developers who want code to copy, designers who want to work visually, teams who want one look across a product, and anyone building with an AI coding tool. It is free.

Quick start

Open the gallery, pick a category, and look at a design. Press Code to see it, and the copy button to take it. No account needed.
Press Open in editor to make your own copy, or Save to keep it. Both ask which project it goes in.
Or press New design in the top bar: a dialog opens with the code on the left and the design on the right. Write or paste code, press Save, and choose its project. (On the Projects page the top bar has New project, which makes a project and opens the editor on a blank page with the code panel below it.)
Set the project's look (colours, font, corners) on its page, then turn Public on for any design you want to share in the gallery.

The gallery

The gallery is organised by category.

Preview and Code: switch between how a design looks and its code. Pick Desktop, Tablet or Mobile in the pill beside Preview and Code (the last two in a device frame, at the device's real screen size), light or dark, or full screen.
Copy: copy the code. You need no account for this.
Save and Open in editor, under the three dots at the end of the toolbar: Save puts a private copy into one of your projects; Open in editor makes your own copy in a project and opens it.
Pages and Components: once the gallery holds both, tabs at the top show all designs, only whole pages, or only components.

Projects

A project is where everything starts: a design cannot exist outside one. It is a folder for your pages and components, with one shared look, a share link, and a place to export from.

New project (top bar) creates it at once and opens the editor on a blank page. Rename it on its page.
The Projects page lists your projects as cards, each with the categories of the designs in it. Search by name or tag in the top bar, tick one or more categories in the All Categories dropdown, and press tag chips below to narrow further. A project shows when it matches any ticked category and any chosen tag.
The project page shows a board of every page and component. Drag frames to arrange them. Two tabs list them as Pages and Components: a design's category decides which (the Pages category group are pages, every other category is a component).
Parts of a page are made for you: each time a page is saved, its header, sections and footer become separate parts, listed under Components as "from page name" and under the page in the Pages tab. Saving the page again updates them; a part you changed by hand keeps your code.
Select an item to open its details: set its category and tags, turn Public on or off, export it, see its history and restore a version, move it to another project, tick Use as AI reference, or delete it. Search, a category filter and tag chips narrow the list.
Import adds designs from HTML files, a zip, or pasted HTML. Long pages can be split into sections.
Design guide (Projects page) downloads a markdown summary of your designs, for a CLAUDE.md or an agent.
Deleting a project deletes everything in it.

The editor

The editor shows the design and its code side by side. Edit either: change the code and the design follows, drag or restyle on the canvas and the code follows.

Tools: select, hand, interact (try the page as it will run), frame, shapes, text, and an add menu.
Preview (the play button) opens the project's prototype in its own tab, at /prototype/…: every page, one at a time and full screen, the way a visitor sees it. It shows the saved version of your pages. The page fills the screen, with a toolbar floating over it at the top right (drag it by its handle, or minimize it to a small chip) that has the arrows (or the Left and Right keys) to move between pages, Share, and a scaling menu (Actual size, Responsive (Z), Desktop, Tablet and Mobile (the last two in a phone or tablet frame, at the device's real screen size), Fit width, Fit width and height, Fill screen, and Hide UI with Cmd or Ctrl and \\). Share makes a link anyone can open to click through the pages (no code, no editing, no account). Stop sharing in the same box ends the link. The Interact tool is different: it runs the page you are editing, right on the canvas.
Code panel: syntax colours, auto-closing tags, find and replace, Tailwind class suggestions, and Format to tidy it. It sits below the design by default; the dock button moves it to the left, and your choice is remembered.
Properties: edit an element's spacing, size, type, colour, border and effects. Each value is written to where it comes from (a Tailwind class or CSS).
Save opens a small form under the toolbar: name, category (which decides page or component), project, description, tags, and visibility. A new project's first save asks only for a name.
New design in the gallery's top bar opens the same editor in a dialog, with a button to open it in the full editor.

A project's look

On the project page, the Theme tab holds four choices that the editor, every preview and your exports use:

Brand colour: one colour. Its eleven shades become brand-50 to brand-950, and the colour itself is brand-600.
Gray: which of Tailwind's five grays gray-* means here.
Font: a Google Fonts family, or the system font.
Corners: how round rounded-* is.

Change it once and every page and component in the project follows.

Export and history

Any design can be copied or exported as HTML, React, Vue or Svelte, and as a design spec or a profile. The page code stays plain HTML with Tailwind, so you are never locked in.

To keep the project's look in exported code, take the theme setup too: it is a small Tailwind config for the brand colour, gray, font and corners.

Every change keeps the earlier version. Open an item's History to see them and restore one.

Connect your tools

The Connect page (in the sidebar, signed in) lets AI tools read and write your projects, instead of guessing. Pick your tool there and follow its short guide. All of it is optional.

Claude on the web: add Windcraft as a custom connector in claude.ai, paste the address shown on the page, and allow access. No token is needed. A Run test button checks the connection.
Claude Code: put your access token in an environment variable, then run claude mcp add with the command on the page. A downloadable kit adds a project config and a CLAUDE.md section.
Cursor and other MCP clients: use the server address and an Authorization: Bearer header with your token.
Figma plugin: sign in with your account once, then send a design into a project as editable code.
Claude Design: download a pack of your design guide and the designs marked Use as AI reference, and attach it there.

Access token

Claude Code, Cursor and other MCP clients sign in with an access token, kept in its own box on the Connect page. It is shown once when you create it; you can regenerate it or revoke it, and either stops the old one at once. Treat it like a password: anyone who has it can read and add to your projects. Keep it in an environment variable or your tool's secret settings, never in a file you share. The Connected list on the page shows the apps and Figma sign-ins with access, each with a Disconnect button.

What the agent can do

get_design_guideA summary of your designs: colours, fonts, spacing and an index. Agents read it first.

get_contextWhich account and active project the agent is working in.

list_projects, get_project, create_project, update_project, set_active_projectSee, create and change projects (name, description, brief), and choose the one saves go to.

search_componentsFind designs by keyword or tag.

get_componentGet one design as HTML, React, Vue or Svelte.

get_design_specLook at a design as a labelled tree of elements.

apply_design_patchMake small changes to a design by element id.

save_component, save_design, save_pagesSave a component, a finished page, or several pages. Every save goes into a project: name one, or set an active project.

list_tagsList your tags.

Glossary

Gallery: Public designs, by category, most liked first.
Project: Where designs live: a folder with a shared look, a share link and exports.
Page and component: A page is a whole screen; a component is a smaller part. Both live in a project.
Theme: A project's brand colour, gray, font and corners.
Public: A design turned on for the gallery. Private by default.
Share link: A view-only link to a whole project.
MCP: The standard that lets coding tools use your projects.
Access token: A secret that lets a tool like Claude Code use your projects. Claude on the web and the Figma plugin sign in instead.

Still stuck? See Support.