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

Try its delivered previews and check verified stack, theme support and access before choosing it.

Read the guidance

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

Wire up the code

Use the full package when available. Follow its README and keep untested framework conversions marked unverified.

Build from the collection

Reuse the kit's original specimens and verify your result against the delivered demo at desktop and mobile sizes.

01 · Download

Keep the installation files together.

Starter and Super members can obtain protected guidance and styles. Where a versioned package is available, follow its README and verified installation path. Keep shared component styles, fonts and other dependencies together.

Read the full design guidance and package README
Use tokens.json as the shared vocabulary
Use a verified stylesheet and installation path
Compare with the delivered demo at desktop and mobile sizes

Versioned pilot ZIPWhere available

DESIGN.mdFull design guidance

tokens.jsonPortable design values

tailwind.cssTailwind v4 token mapping

styles.cssFramework-agnostic CSS

elements/Original HTML / CSS / JavaScript

demo/Runnable local demonstration

fonts/Fonts and their licenses

README.mdVerified setup and troubleshooting

dependencies.jsonCompatibility status

LICENSE.txtMIT source license

Compare every meaningful state

Use the delivered demo to check composition, responsive behavior, theme modes and actual interactions.

02 · Observe

Inspect the delivered implementation.

Before editing code, try the original demo and component previews. Reference screenshots are inspiration; their site source is not included. Verify the states your project needs.

03 · Integrate

Give your coding agent a precise starting prompt.

Read the supplied files before using this starting prompt. Named assistant outputs and framework conversions remain unverified until tested. Copying files does not establish successful setup.

Integration prompt

Use this AI Kit as the visual source of truth.

1. Read DESIGN.md and README.md before changing the interface.
2. Map tokens.json into the project's existing theme or CSS variables.
3. Follow a verified installation path. Keep full styles and all shared component dependencies.
4. Match the delivered demo and component specimens, spacing, typography, and states. Reference website screenshots are inspiration only.
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 16 retained, evidence-backed interface patterns.

Borderless Ledger — Wise-inspired AI Kit

13 focused, original elements for Borderless Ledger.