Get started
Design
Use the same tokens and component names in Figma and code so Career Coach and sibling agents stay visually aligned.
Figma
Import color variables and component specs with the Nexus plugin. Step-by-step setup lives in Figma import.
- Run
npm run figma:specafter token or CSS changes. - Prefer semantic tokens (
--surface,--text) over raw palette steps in mocks. - Reference Lucide icon names from the Icons gallery.
Foundations first
Start from Foundations for color, typography, icons, and content before composing new screens.
Handoff checklist
- Link to the component page in this site for each UI pattern you use.
- Call out empty, loading, and error states—not just the happy path.
- Include copy for titles and messages using the Messages patterns where relevant.