01
Choose the right kit
Review its screenshots, visual direction, and component collection before you commit to the system.
Tutorial · Four steps
Build consistently in four steps.
Choose an AI Kit, give its guidance and styles to your project, and let every new interface start from the same visual system.
02
Read the guidance
Start with the implementation instructions and use the tokens as the shared language for every screen.
03
Wire up the code
Bring in the Tailwind or CSS layer once, then adapt it to the framework and structure already in your project.
04
Build from the collection
Reuse the kit's approved elements and compare the result with the screenshots and walkthrough as you iterate.
01 · Download
Start with the complete kit, not isolated snippets.
Pro members can download every structured file. Keep the files together until you decide whether Tailwind or plain CSS best fits the project.
- Read instructions.md first
- Use tokens.json as the shared vocabulary
- Choose one stylesheet path
- Keep screenshots and video nearby
ai-kit.zipComplete pack
instructions.mdAgent guidancetokens.jsonPortable design valuestailwind.cssTailwind-ready layerstyles.cssFramework-agnostic CSSscreenshots/Visual referenceswalkthrough.webmMotion referenceCompare every meaningful state
Use the gallery for composition and detail; use the walkthrough for transitions, responsive behavior, and flow.
02 · Observe
Let the references define the target.
Before editing code, review the screenshot gallery and video. Note the page rhythm, density, type scale, component states, and motion that are hard to communicate through tokens alone.
03 · Integrate
Give your coding agent a precise starting prompt.
Put the kit files in your project, paste this prompt, and let the agent adapt the system to your existing framework without inventing a second visual language.
Integration prompt
Use this AI Kit as the visual source of truth.
1. Read instructions.md before changing the interface.
2. Map tokens.json into the project's existing theme or CSS variables.
3. Integrate either tailwind.css or styles.css exactly once.
4. Match the screenshots, component anatomy, spacing, typography, and states.
5. Reuse the assigned collection components before creating new patterns.Assigned collection
Approved components in intentional order
01
Buttons & actions
02
Forms & inputs
03
Cards & feedback
04 · Keep the loop
Reuse the collection before creating a new pattern.
Keep the AI Kit in your project instructions and point new UI work back to its assigned collection. When the interface changes, compare it with the kit again before shipping.
Try the workflow
