Sign In

About

A component library your AI tools can actually use

Windcraft started as a place to browse and edit Tailwind components. It is now a place to keep them, so everything you build, and everything AI builds for you, stays consistent.

The problem

AI can write a good pricing section in seconds. What it can't do is remember your pricing section: your colors, your spacing, your buttons. Every new chat starts from zero, and your UI slowly drifts into ten slightly different styles.

Without a library three chats, three styles vs With your library one consistent style

What this app does about it

  • 1Keeps your components with tags and version history, so you can find them and undo changes.
  • 2Grounds AI in your own work. When you generate a component, the best matches from your library are shown to the AI as examples.
  • 3Exports anywhere: HTML, React, Vue and Svelte.
  • 4Plugs into coding agents over MCP, so Claude Code and Cursor read from, and save to, the same library.

Projects and the gallery, in one line each

Projects

Private by default. Yours. Where every design lives, and the only thing AI and agents read.

Gallery

Public. Where people look and choose, like and copy. Save a copy into a project, or open it in the editor, to use it.

Who it's for

  • Developers and designers who build many pages and want them to look related.
  • Anyone using AI to build UI who is tired of re-explaining their style every time.
  • Small teams who want one place for approved components (shared workspaces are planned, see below).

Principles

Yours stays yours
Private components are visible only to you. AI reads only your own projects, never the public gallery.
Nothing is lost
Every edit keeps the previous version.
No lock-in
Export to plain code any time. Your components are just HTML.
Safe previews
Pasted code runs in a sandbox and can't reach your account.
Bring your own AI
Use your Anthropic key or a local model. You choose the provider.

What's coming

Plans, not promises. Ordered by how much they would help.

  1. Smarter matching. Find references by meaning ("plans" finds "pricing"), not just keywords.
  2. Teams. Shared workspaces with members, so a library can be a team's source of truth.
  3. Design tokens. Store brand colors, fonts and radius, and hand them to AI and agents directly.
  4. Quality checks. Automatic mobile, accessibility and dark-mode checks with a badge per component.

Built with

Node.js and Express, Handlebars, MongoDB, Tailwind CSS, and the Anthropic API (or a local model). The source is on GitHub.

Read the documentation Open your projects