Project Context

Project context shapes how the AI generates UI for your project. By configuring system instructions, design guidelines, and leveraging AI memory, you ensure consistent results that match your vision across all generations.

Accessing Context Settings

To configure project context:

Click the Settings icon (gear) in the project toolbar.
The Project Settings modal will open with four tabs:
- Project Type: Switch between Web and App preview frames.
- Context: Configure System Instructions and Design Guidelines.
- Documents: Manage reference documents and requirements.
- AI Memory: Review and edit patterns learned by the AI.

All context settings are saved automatically and apply to future generations in this project.

Project Type

Choose how your designs are previewed:

Web: Displays designs within a browser frame, ideal for websites and web apps.
App: Displays designs with a mobile status bar, ideal for mobile application mockups.

System Instructions

System instructions are directives that guide every AI generation. Use them to establish project-wide rules and preferences.

Writing Effective Instructions

Be specific and actionable:

Use Inter font family for all text
Primary color is blue-500 (#3B82F6)
Buttons should have rounded-lg corners
Maintain 16px minimum padding on containers

Avoid vague instructions:

Make it look nice (too subjective)
Use good colors (not specific enough)

Example System Instructions

SaaS Dashboard:

Use Inter font for body text, Poppins for headings
Primary: indigo-600, Secondary: slate-500
Cards use shadow-sm with rounded-xl
Spacing follows 8px grid
Dark mode should use slate-900 background

E-commerce Site:

Use system fonts for fast loading
Primary: emerald-600 for CTAs
Product cards have subtle hover animations
Prices displayed in bold, red for discounts
Mobile-first responsive design

Mobile App:

Use SF Pro Display aesthetics
Bottom navigation with 5 items max
Pull-to-refresh on list screens
Floating action button for primary actions
Safe area padding for notch devices

Design Guidelines

Design guidelines provide broader context about your project's visual direction. Unlike system instructions, these describe the overall approach rather than specific rules.

What to Include

Visual style description (minimalist, bold, playful)
Target audience characteristics
Brand personality traits
Accessibility requirements
Platform conventions to follow

Example Guidelines

This is a fintech app targeting millennials. The design should feel 
trustworthy yet modern—not stuffy like traditional banks. Use clean 
layouts with generous whitespace. Data visualizations should be 
simple and scannable. Avoid financial jargon in UI copy.

Documents

Attach reference documents to provide additional context for the AI.

Document Types

Guidelines: Formal design system documentation, brand guidelines, or style guides.

Reference: Example designs, competitor screenshots, or inspiration images.

Notes: Informal notes, meeting summaries, or project requirements.

Adding Documents

Click Add Document in the Context tab
Select the document type
Paste or type the content
Give the document a descriptive name

Documents are included in the AI's context when generating UI, helping it understand your broader design requirements.

AI Memory

AIUI automatically learns from your project as you work. The AI memory system extracts and stores patterns from your interactions and designs.

How Memory Works

As you generate UI and make edits, AIUI identifies recurring patterns and saves them as memory items. These memories inform future generations, creating increasingly consistent results over time.

Memory Categories

Pattern: Recurring structural or layout patterns detected in your designs.

"Uses card grid layouts for dashboard widgets"
"Forms have labels above inputs"

Preference: Design choices you consistently make or request.

"Prefers subtle shadows over borders"
"Always includes hover states on buttons"

Component: Common components and their typical configurations.

"Navigation uses horizontal tabs on desktop"
"Modals have X close button in top-right"

Style: Visual styling patterns and aesthetic choices.

"Headings use font-semibold text-slate-900"
"Icons are 20x20 with text-slate-500"

General: Other project-specific context.

"This is an internal tool for warehouse staff"
"Users often work in low-light conditions"

Managing Memory

View and manage AI memory in the Context tab:

Review: See all extracted memories with their categories
Edit: Modify memory items to correct or refine them
Delete: Remove memories that are no longer relevant
Add manually: Create memory items for important context the AI might have missed

Memory Confidence

Each memory item has a confidence level based on how consistently the pattern appears. Higher-confidence items have more influence on generation.

How Context Flows into Generation

When you generate UI, AIUI combines all context sources:

1. System Instructions (highest priority)
   ↓
2. Design Guidelines
   ↓
3. Attached Documents
   ↓
4. AI Memory (extracted patterns)
   ↓
5. Your current prompt
   ↓
= Generated UI

More specific instructions override general ones. System instructions take precedence if there's a conflict between memory and explicit rules.

Starter Context

When creating a new project, the starter wizard helps establish initial context:

Audience: Who uses the product
Goals: What the project should accomplish
Design styles: Visual direction (minimalist, bold, etc.)
Color palette: Primary and accent colors
Inspirations: Reference sites and apps
Screens: Planned screens to create

This starter context populates your initial system instructions and guidelines. You can modify them at any time in the Context tab.

Best Practices

Be specific: Vague instructions produce inconsistent results. Include exact values for colors, spacing, and typography.

Update as you go: Refine your context as the project evolves. Add new rules when you notice inconsistencies.

Review AI memory: Periodically check what patterns the AI has learned. Remove incorrect items and reinforce important ones.

Keep instructions concise: Long, verbose instructions can dilute important rules. Focus on high-impact guidance.

Test with generations: After updating context, generate a few screens to verify the changes produce expected results.