Design
What it is
Section titled “What it is”The Design feature provides a pipeline for managing design assets, extracting design tokens, and defining interaction specifications. Upload screenshots, style guides, prototypes, and animation snippets — then let AI analyze them and cascade design context into task execution.
Why it matters
Section titled “Why it matters”AI agents produce better code when they understand the design intent. The design context pipeline ensures that token values, interaction patterns, and visual references are available to agents during sandbox execution, reducing back-and-forth between design and implementation.
Key concepts
Section titled “Key concepts”- Asset types:
screenshot,tokens,styleGuide,prototype,interactionSpec,animationSnippet - Asset status:
uploaded,analyzing,analyzed,error - Upload zone:
DesignUploadZonehandles drag-and-drop upload of design assets - Upload queue:
useDesignUploadQueuemanages concurrent uploads with progress tracking - Gallery and hierarchy views: Switch between gallery (visual grid) and hierarchy (structured tree) views
- AI analysis panel:
DesignAnalysisPanelshows AI-generated analysis of design assets with extracted tokens and patterns - Token editor:
DesignTokenEditorprovides a visual editor for design token values (colors, spacing, typography) - Interaction spec table:
InteractionSpecTabledefines interaction patterns with trigger, behavior, and duration - Workstream and requirement scoping: Design assets can be filtered by workstream and linked to specific requirements
- Token cascading: Design tokens flow from program-level defaults through workstream overrides to task-specific values
How to use it
Section titled “How to use it”- Navigate to [Program] > Design.
- Upload design assets by dragging files into the upload zone.
- AI analysis runs automatically — results appear in the analysis panel.
- Switch between gallery and hierarchy views to browse assets.
- Open the Token Editor to review and adjust extracted token values.
- Define interaction specs in the Interaction Spec Table.
- Scope assets to workstreams or requirements for targeted injection into sandboxes.
Data model
Section titled “Data model”This feature uses the following tables:
designAssets— Uploaded design files with type, status, and program scopedesignAnalyses— AI analysis results per assetdesignTokenSets— Extracted and edited token valuesdesignInteractions— Interaction specification recordsdesignFidelityChecks— Fidelity validation resultstaskDesignSnapshots— Snapshots of design context injected into tasks