skip to content
▚shortwind
v0.1 · public beta

Let the model write @card, not forty classes.

Recipes are Tailwind shorthand an LLM writes instead of walls of utilities — expanded to byte-identical CSS at build. Same render, 41% fewer tokens.

Deploy with Cloud → Read the docs
Demo Opus 4.8
Dashboard.tsx
model writes 55 tok 
<div class="@card">
  <p class="@eyebrow">Revenue</p>
  <h3 class="@heading-md">$48,120</h3>
  <p class="@muted">+12.5% MoM</p>
</div>
build emits 93 tok 
<div class="rounded-lg border border-border bg-card text-card-foreground p-4">
  <p class="font-mono text-xs font-medium uppercase tracking-[0.2em] text-muted-foreground">Revenue</p>
  <h3 class="text-xl font-semibold text-foreground">$48,120</h3>
  <p class="text-sm text-muted-foreground">+12.5% MoM</p>
</div>
both render identically · 41% fewer tokens · Opus 4.8

Revenue

$48,120

+12.5% MoM

Cloud optional

Ship the page, not just the CSS.

page.html 
<div class="hero">
  <h1>Launch</h1>
  <p>You're live.</p>
</div>
↓ publish
your-page.shortwind.app

Launch

You're live.

Served free from the edge.

Any HTML, recipes or plain. No repo, no deploy config, page views never billed.

Start free → Quickstart
How it works
  1. 01

    Own your recipes

    init copies a recipes/ folder you edit. Versioned, yours, no black box.

  2. 02

    Agents write @card

    A generated SKILL.md hands your coding agents the whole recipe palette.

  3. 03

    Build expands it

    Recipes compile to Tailwind. Identical CSS, nothing extra shipped to the browser.

Catalog 25 families · 165 recipes
text layout surface card button badge form navigation list table dialog tooltip feedback progress skeleton empty code icon media site menu segmented sheet stat switch
npx @shortwind/cli@beta init