What it is
A complete design implementation pack.
An AI Kit combines written guidance, portable design tokens, Tailwind and CSS code, screenshots, a walkthrough video, and one approved component collection.
AI Kit · Overview
Design context your coding agent can actually use.
AI Kits turn a website's visual language into a practical system of guidance, tokens, code, media, and components—ready for your team or coding agent to apply.
Why it works
Humans and coding agents share one source of truth.
The visual references show the intended result while the instructions and code explain the rules behind it, reducing guesswork from screen to screen.
What you build with
A focused collection, not a pile of unrelated examples.
Every kit is assigned to an ordered collection, so its buttons, forms, cards, and other elements all belong to the same visual language.
One connected system
Everything needed to reproduce the visual language.
Screenshots communicate the outcome. Tokens and styles carry the rules. Instructions tell the agent how to apply them. The assigned collection supplies the real interface building blocks.
ai-kit/
Instructions
Markdown
Design tokens
JSON
Implementation
Tailwind + CSS
Visual reference
Screens + video
Components
Ordered collection
Ready to build
Put the kit in your project and keep it in the loop.
Follow the four-step workflow to choose a system, read its guidance, integrate its code, and build from its component collection.
See the complete workflowExplore systems
