Getting started
The Design System
Carry the same token architecture and production components into a new project. Choose what the product needs, then generate an installation prompt and a persistent SKILL.md for future AI sessions.
Choose how ownership worksPermalink to this section
Both options preserve the design system. The difference is where future changes are owned.
| Method | Best for | Trade-off |
|---|---|---|
| Vendor selected source | Independent products that need freedom to evolve | Updates from the source system are merged manually |
| Workspace package | Several products that should receive coordinated updates | Requires package versioning, exports and release discipline |
Recommended starting point
Start with vendoring for a new standalone project. Extract a package when two or more active products genuinely need synchronized updates.
Build the AI installation promptPermalink to this section
Foundation tokens and transitive dependencies are always included. Your selection controls the public UI surface installed in the new product.
Transfer setup
The AI must be able to read this path from the target project.
Light, dark and system mode remain part of every generated plan.
Always included
The visual contract travels as one foundation.
Primitive tokens
Palette, spacing, radius, type, elevation and motion
Semantic modes
Intent-driven light and dark aliases
Component contracts
Stable CSS variables for every selected module
Preset engine
Every named preset, page-wide or scoped to a subtree
Theme runtime
Generated CSS, hydration-safe mode and persistence
Accessibility
Focus, keyboard and reduced-motion contracts
Select components
16 of 36 selected
Optional patterns
Compositions automatically bring their primitive dependencies.
16 components, 0 patterns, and the full token foundation.
Generated terminal promptPermalink to this section
Copy the whole payload and paste it into a coding agent launched from the root of your new project. It installs the selected system and the generated project skill together.
No prompt generated yet
Complete the selection above, then generate a prompt containing the exact source files, architecture rules, ordered TODO list, and definition of done.
Generated project SKILL.mdPermalink to this section
Keep this beside the installed design system so future AI sessions know which Lawndry components and patterns are approved, how to choose between them, and when to extend the system.
No project skill generated yet
The skill is generated from the same preset, Component, and Pattern selection as the installation prompt.
Use it in a new projectPermalink to this section
The generated prompt assumes the coding agent starts inside the target repository and can read this design-system source. It also installs persistent guidance for future UI work.
- 1
Create the target
Start the new Next.js or React project and commit its clean baseline.
- 2
Open the agent there
Run your coding agent from the target repository root, not from this docs repository.
- 3
Paste the prompt
Give it the complete generated payload so it installs both the selected UI system and project skill.
- 4
Review the smoke test
Check the preset, dark mode, interactions, skill location and installed dependency report.