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.

Choose the right kit

Review its screenshots, visual direction, and component collection before you commit to the system.

Read the guidance

Start with the implementation instructions and use the tokens as the shared language for every screen.

Wire up the code

Bring in the Tailwind or CSS layer once, then adapt it to the framework and structure already in your project.

Build from the collection

Reuse the kit's approved elements and compare the result with the desktop and mobile screenshots 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 desktop and mobile screenshots nearby

ai-kit.zipComplete pack

instructions.mdAgent guidance

tokens.jsonPortable design values

tailwind.cssTailwind-ready layer

styles.cssFramework-agnostic CSS

screenshots/Visual references

Compare every meaningful state

Use the gallery to compare composition, detail, responsive behavior, and the intended page rhythm.

02 · Observe

Let the references define the target.

Before editing code, review the screenshot gallery. Note the page rhythm, density, type scale, and component states 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

Buttons & actions

Forms & inputs

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

Pick an AI Kit and start building

Browse all

Postman-inspired API Orbit

An unofficial, original Postman-inspired interface study with 14 focused specimens supported by the live product and content experience.

v0-inspired Prompt Workshop

An unofficial, original v0-inspired Prompt Workshop system grounded in 17 retained, evidence-backed interface patterns.

Borderless Ledger — Wise-inspired AI Kit

13 focused, original elements for Borderless Ledger; categories are retained only when supported by the live reference. Published flags remain disabled.