Introduction
Guided setup helps you connect everything necessary to make you prototype with your code libraries and design system. Everything happens in a singe Supernova CLI flow that will walk you through:
- Codebase scan
- The scanner reads your repository to find your design system components and how they're used.
- Container setup
- A code container is a sandbox holding your design system code, packaged so Supernova can use it during prototyping. The CLI clones a framework-specific template into a folder of your choice.
- Creating your first prototype to test the setup
Framework support
|
|
Codebase scan |
Package detection |
AI instructions |
|---|---|---|---|
|
React |
Supported |
Automatic from scan |
Generated from scan |
|
Angular |
Not supported |
You provide names |
You write manually or with your AI agent |
|
Vue |
Not supported |
You provide names |
You write manually or with your AI agent |
The CLI flow is the same for all three — Angular and Vue simply skip the scan step and ask you to provide what React detects automatically.
Prerequisites
- Node.js ==20.19.0 or >=22.12.0
- Run the command from your repository root
- Docker installed and running
- A successful npm install in your repo before starting
- An npm token if your design system packages are behind a private registry
- Contributor seat or higher in the target Supernova workspace
- Supernova CLI installed
npm i -g @supernovaio/cli
Run the command
From your repository root:
supernova prototyping setup
The CLI will ask you to pick your framework, then walk you through the steps below. Each step shows what you'll see and what to do.
Step 1 — Codebase scan (React only)
Angular and Vue skip this step. Continue to Step 2.
The scanner reads your repository to find your design system components and how they're used. The output is uploaded to Supernova and used to generate accurate AI instructions in Step 5.
What you'll see
The CLI scans for packages and asks you to pick which ones contain your component libraries:
? Which packages contain your component libraries?
❯ ◯ @yourcompany/components
◯ @yourcompany/icons
◯ @yourcompany/utils
◯ @yourcompany/sdk
Select component and icon libraries only. Skip config packages, SDKs, and utility packages — they add noise without improving prototype quality.
Reading the results
Each scanned package will be marked as one of:
- ✓ X components found — the package is a component library and was analyzed successfully
- ✓ X usages found — the package consumes design system components, and usage patterns were captured
- Skipped — no design system usage found — the package doesn't reference your selected libraries; safe to ignore
Reviewing before upload
After the scan, you'll be asked what to do:
- Upload scan results and continue — recommended for first-time setup
- Explore results — opens local snapshot paths so you can inspect what was captured before uploading
If you want to run the scanner outside of guided setup — for CI pipelines or independent re-scans — see Code analyze.
Step 2 — Code container setup
A code container is a sandbox holding your design system code, packaged so Supernova can use it during prototyping. The CLI clones a framework-specific template into a folder of your choice.
What you'll see
? Where should we create the container? (supernova-container-react)
Press Enter to accept the default, or type a custom path. The folder will be created relative to your current directory.
What gets created
The CLI clones one of these templates based on the framework you selected:
- React → component-container-template | Github
- Angular → component-container-template-angular | Github
- Vue → component-container-template-vue | Github
The container has this structure:
├── src/ # Sandbox where AI generates prototype code
├── supernova/
│ ├── usage.md # AI instructions — entry point for Supernova AI
│ ├── components.md # Documentation about your component library
│ └── icons.md # Documentation about your icon library
└── package.json # Dependencies and container version
Step 3 — Design system dependencies
The CLI needs to know which packages contain your design system components.
- For React: packages are pre-filled from the scan. Confirm the list or adjust it.
Discovered packages: @yourcompany/components, @yourcompany/icons
? Which design system packages should we add? (@yourcompany/components, @yourcompany/icons)
- For Angular and Vue: type the package names yourself.
? Enter your design system package names (e.g. @company/ui, @company/icons):
Use the exact names from your package.json — these are what Supernova will install inside the container.
Step 4 — Package access
The CLI needs to know whether your packages are public or private.
? Are your packages private or public?
❯ Packages are private requiring a registry access token
Packages are public
If your packages are public
No further configuration needed. The CLI will run npm install to verify access and continue.
If your packages are private
You'll need to provide a registry token directly in the CLI.
Step 5 — AI instructions
The supernova/usage.md file tells Supernova AI how to use your components when generating prototypes. Skipping or leaving this empty produces low-quality prototypes.
- For React: AI instructions are generated automatically from scan results. The CLI populates usage.md for you. You can review and edit later.
- For Angular and Vue: you must write (or prompt your agent to write) usage.md yourself before continuing.
Recommended workflow (for Angular and Vue):
- Open the container in your editor
- In your IDE's coding agent (Cursor, Copilot, Claude Code, etc.), run the prompt from AI instruction templates to generate a starter usage.md for your stack
- Review and adjust the generated file
- Return to the CLI and choose usage.md is ready - continue
Step 6 — Upload container
? Ready to upload the container? (Y/n)
When you confirm, the CLI:
- Builds a Docker image of the container
- Uploads the image to Supernova
- Creates a template entry in your workspace
🔨 Building docker image... done
⬆️ Uploading docker image to Supernova... done
📦 Creating template with the image... done
✅ Template has been successfully uploaded
If you see Error: Docker is not available, please start docker daemon and try again, start Docker Desktop and retry.
The upload includes the container source and built image. It does not include your .npmrc or any tokens.
Step 7 — Prototyping context
A prototyping context bundles your design system, code container, and AI instructions into one shared configuration. Everyone on your team starts prototypes from the same foundation.
? Context name: (Dark Matter)
- Context name — visible in the Supernova UI. You can rename it later.
? Starter prompt:
❯ Component gallery
Custom prompt
- Starter prompt — what your first prototype will be:
- Component gallery — generates a page showcasing all your components, useful as a sanity check
- Custom prompt — type your own first prompt (e.g. "Build a login page")
For more on what a prototyping context is and how teammates use it, see Code container & prototyping context in the Learn docs.
Ready for prototyping!
Your prototyping context is ready to be used, share that information with your team and invite them to prototype in Portal using actual design system components.
Read more about prototyping in our Learn documentation:
Next steps:
- Iterate on prototypes — open the URL from the CLI and start prompting
- Improve prototype quality — see AI guidelines for tuning usage.md
- Add templates to your container - see Templates to set up starting screens
- Update when your design system changes — see Updating and versioning
- Run scans in CI — see Code analyze to keep AI instructions current automatically
Related
- Manual setup — clone the template and configure it yourself
- Code analyze — run scanning independently or in CI
- Updating and versioning — keep your container in sync with your design system
- AI guidelines — write better AI instructions