Getting started
Open a codebase, attach a running Page, and review your first agent-created draft in Specra desktop.
1. Open your codebase
Install Specra desktop from the Specra website, then choose Open codebase and select your local repository.
Review the included and excluded paths before working. This scope controls which files Specra indexes and makes available as project context; exclusions take priority. Choose an installed coding agent and optional model defaults for the codebase.
2. Review the Design System
Project analysis discovers frameworks, reusable components, tokens, and design-source files inside your selected scope.
Use the Design System on the board to inspect that context. A project component placed on the board is a reference example of existing code. Its preview helps the agent understand the current props, states, behavior, and visual language.
3. Attach a running Page
Start your application yourself using the repository's normal development command. Opening a codebase does not launch its app.
Attach the application's reachable local URL as a Page on the board. You can attach more than one Page for different routes or views. Check that each preview shows the intended page before asking the agent to change it.
4. Give the agent visual context
Add screenshots, URLs, design links, or wireframes as references. Ask your selected agent in chat to analyze a reference when that would help the task.
For a specific live element, focus the Page and choose Target UI. The submitted message keeps the selected element's context even after the active selection clears.
Be concrete about the result:
Create an isolated draft of this settings panel. Preserve the current spacing and typography, and make the notification controls easier to scan.
Use project chat for work across the board, or the owning Page or component conversation for a focused task.
5. Review the draft
Changes to project-reference components belong in isolated drafts. Inspect the exact draft preview, changed files, and available before-and-after evidence. Check meaningful states such as empty content, loading, keyboard focus, and narrow layouts.
Continue edits in the same draft. Ask for a variant when you want a separate direction while preserving the existing one.
6. Apply approved work
Use Apply to project or Add to project when the reviewed draft is ready. This is the explicit step that promotes it into your codebase.
If you also want the new component inserted into an application screen, request that separately. Review the resulting changes and run the checks appropriate to your repository.