1Download the source
SLAB isn't an npm package — it's a source tree (tokens/, components/, styles.css) that's the single source of truth. Clone or copy it as a sibling folder to your new project, not inside it:
my-workspace/
slab/ ← the design system source
my-new-app/ ← your new project
2Give the AI context first
Copy slab/SKILL.md into my-new-app/CLAUDE.md (or .cursorrules / your tool's equivalent). This hands the agent the neo-brutalist rules — borders, hard shadows, type, motion — so you don't have to restate them every prompt.
3Prompt the AI to bootstrap the project
One prompt is enough — the agent can read SKILL.md, styles.css, and components/ itself:
# Prompt
Set up this Next.js project to use the SLAB design system located
at ../slab. Add a @slab/* path alias pointing there, import
slab/styles.css once in the root layout, and confirm you can render
the Button and Card components from slab/components. Follow the
rules in CLAUDE.md for anything new you build — thick ink borders,
hard offset shadows, no gradients or blur.
4Check what the AI actually did
- Added
"@slab/*": ["../slab/*"]totsconfig.jsonpaths - Imported
@slab/styles.cssexactly once, in the root layout/entry file - Imports components as
import { Button } from "@slab/components/core/Button" - Left
slab/itself untouched — no edits to tokens or components
5Steer it toward the visual language
Tell it to skim slab/guidelines/components.html and a relevant slab/ui_kits/ example before generating new screens. Left alone, AI tools default to soft shadows and rounded minimalism that fights the SLAB aesthetic.
CLAUDE.md before codePaste the SKILL.md rules before the agent generates a single component.
One global importOnly
styles.css needs importing — never re-import individual token files.Don't let it edit slab/Treat the source folder as read-only from the new project's side.
Don't skip the reviewDiff the path alias and global import — duplicated token imports are the most common AI slip.