Advanced Features Guide - Instruct UI

Reading Time: 15-20 minutes Audience: Power users, team admins, agencies, committed users Goal: Unlock advanced capabilities for teams and high-volume users

Team Collaboration

Custom Instructions (Team-Wide)

For: Team admins standardizing output across the organization

Custom instructions are persistent rules applied automatically to all generations. For teams, these enforce consistency across all team members' work.

Design System Enforcement

Example: Brand Colors & Fonts

Follow our design system:
- Primary color: #FF6B35
- Secondary color: #2196F3
- Background: #F5F5F5
- Font family: Roboto for all text
- Headings: Roboto Bold
- Body: Roboto Regular

Example: Spacing & Layout

Use our 8px spacing grid system:
- All margins/padding must be multiples of 8px (8, 16, 24, 32, etc.)
- Minimum touch target size: 44px × 44px (mobile accessibility)
- Maximum content width: 1200px
- Standard border radius: 8px

Coding Standards

Example: Naming Conventions

Follow these naming conventions:
- All services end with 'Service' (UserService, AuthService)
- All components end with 'Component' for custom components
- Use PascalCase for public members
- Use camelCase for private fields
- Prefix interfaces with 'I' (IUserService)

Example: Code Patterns

Always follow these patterns:
- Include loading states for all async operations
- Add error boundaries with try-catch in OnInitializedAsync
- Use FluentValidation for all form validation
- Implement IDisposable for components with subscriptions
- Add XML documentation comments for public methods

Accessibility Requirements

Example: WCAG Compliance

Ensure WCAG 2.1 AA compliance:
- Include proper ARIA labels on all interactive elements
- Use semantic HTML5 elements (nav, main, footer, article)
- Ensure color contrast ratio ≥ 4.5:1 for text
- All forms must have associated labels (not just placeholders)
- Provide keyboard navigation for all interactive elements
- Include skip-to-content links for screen readers

Best Practices for Team Instructions

Keep It Concise:

• Character limit: 3000 characters maximum
• Focus on persistent rules that apply to ALL generations
• Don't include one-time requirements (put those in individual prompts)

Don't Over-Constrain:

• Leave room for AI to make reasonable decisions
• Focus on must-haves, not nice-to-haves
• Avoid specifying every UI detail (defeats purpose of AI generation)

Test and Iterate:

1. Start with 5-10 core rules
2. Generate test UIs to verify instructions are followed
3. Refine if AI misinterprets
4. Add more rules gradually

Document Your Instructions: Keep a team wiki explaining WHY each rule exists. This helps team members understand the rationale and suggest improvements.

See also: Custom Instructions Feature Reference

Personal vs. Team Custom Instructions

How they combine:

1. Team instructions applied first (company standards)
2. Personal instructions applied second (individual preferences)
3. Per-prompt instructions applied last (specific request)

Example:

• Team: "Use MudBlazor components"
• Personal: "Always add XML comments to public methods"
• Prompt: "Create user login form with email/password"
• Result: MudBlazor login form with XML comments on public methods

License Management

For: Team admins managing multi-user Team plan subscriptions

Adding Team Members

When to add licenses:

• Onboarding new developer
• Contractor starting project
• Team expansion

How to add:

1. Go to Settings → Subscription
2. Click "Manage Licenses" or "Add Team Member"
3. Enter email address
4. Send invitation
5. Team member accepts and joins

Pricing:

• Per-user/month pricing
• Prorated billing for mid-cycle additions
• Example: Add member on day 15 of 30-day cycle → charged for 15 days

Removing Team Members

When to remove:

• Employee leaves company
• Contractor project completed
• Team downsizing

How to remove:

1. Go to Settings → Subscription → Manage Licenses
2. Find team member in list
3. Click "Remove" or "Revoke Access"
4. Confirm removal

Cost savings:

• Prorated refund/adjustment for remainder of billing period
• Remove immediately upon offboarding to save costs
• Credits remain with team pool (not removed with user)

See also: License Management Reference

Contractor Workflows

Scenario: Hire contractor for 2-month project

Best Practice:

1. Month 1, Day 1: Add license for contractor
2. Month 1-2: Contractor generates UIs using team credit pool
3. Month 2, End of project: Remove license immediately
4. Result: Only paid for 2 months instead of full year

Cost Comparison:

• Bad: Keep license active all year: $X × 12 = $12X
• Good: Add/remove as needed: $X × 2 = $2X
• Savings: $10X per contractor

Team Credit Pool Management

For: Team admins optimizing credit allocation

How Team Credits Work

• Shared pool: All team members draw from same credit balance
• Recurring credits: Monthly allowance distributed across team
• On-demand credits: Purchased by admin, shared by all

Example:

• Plan: 500 credits/month for 5-person team
• Member A uses 200 credits
• Member B uses 150 credits
• Member C uses 100 credits
• Remaining: 50 credits available for Members D, E

Monitoring Team Usage

Track who's using credits:

1. Go to Settings → Credits → Usage
2. Filter by team member
3. View usage by:
   • User
   • Date range
   • Conversation
   • Credits consumed

Red flags to watch for:

• One member consuming 60%+ of team credits
• Unusual spikes in usage (investigate cause)
• Consistent over-usage (may need plan upgrade)

Credit Allocation Strategies

Strategy 1: First-Come, First-Served

• No formal allocation
• Team members use as needed
• Works for small teams with similar workloads

Strategy 2: Per-Member Soft Limits

• Informal guidance: "Each member should use ~100 credits/month"
• Review monthly, adjust if needed
• Works for medium teams

Strategy 3: Project-Based Allocation

• Allocate credits per project
• High-priority projects get more credits
• Works for larger teams with clear project priorities

Note: Instruct UI doesn't enforce per-member limits technically, but admins can monitor and discuss usage with team.

Advanced Workflows

Multi-Page Application Generation

For: Users building full applications, not just single components

Generating Related Pages in One Conversation

Best Practice: Keep related pages in the same conversation for seamless navigation.

Example Workflow - E-commerce Site:

Prompt 1:

Create a product listing page with grid of product cards.
Each card shows image, name, price, "Add to Cart" button.
Route: /products

Prompt 2:

Create a product detail page for individual products.
Show large image, full description, price, quantity selector,
"Add to Cart" and "Back to Products" buttons.
Route: /products/{id}

Prompt 3:

Create a shopping cart page showing added items.
Display item name, quantity, price, subtotal.
Include "Continue Shopping" and "Checkout" buttons.
Route: /cart

Prompt 4:

Create a checkout page with shipping info form
and order summary. Route: /checkout

Result: Complete flow with navigation between pages working automatically in preview.

Testing Multi-Page Flows

Use the preview address bar:

1. Generate all pages in same conversation
2. Navigate to /products in preview
3. Click product card → Should navigate to /products/1
4. Click "Add to Cart" → Should navigate to /cart
5. Test back/forward buttons
6. Verify route parameters work (/products/1 vs /products/2)

Common Issues:

• Navigation not working: Ensure all pages in same conversation
• Route parameters empty: Check AI used correct binding (@page "/products/{Id}")
• State not persisting: Use scoped services or pass data via parameters

Template Creation for Agencies

For: Agencies and freelancers delivering similar projects repeatedly

Building Reusable Templates

Scenario: You build 5-10 admin dashboards per year for different clients

Step 1: Create Master Template

Conversation: "Agency Template - Admin Dashboard"
Generate generic admin dashboard with:
- Sidebar navigation (Dashboard, Users, Settings)
- Top bar with user profile and logout
- Main content area with metric cards
- Data table for users
- Modal for add/edit user

Step 2: Clone Per Client

Clone → "Client A - Admin Dashboard"
Customize:
- Colors: Client A brand palette
- Logo: Client A logo
- Metrics: Client A specific KPIs
- Features: Client A requirements

Step 3: Reuse and Save Credits

• Template creation: 5-10 credits (one-time investment)
• Each client customization: 2-3 credits (vs. 10+ from scratch)
• Savings: 60-70% credit reduction per client

Template Categories to Build

For SaaS Products:

• User management dashboard
• Analytics/reporting dashboard
• Settings/configuration pages
• Onboarding wizard
• Subscription/billing pages

For Marketing Sites:

• Landing page variants
• Pricing page layouts
• Feature comparison pages
• Contact/lead capture forms
• Blog/article layouts

For Internal Tools:

• CRUD data management
• Form-heavy workflows
• Approval/review interfaces
• Reporting dashboards

Version Branching Strategies

For: Power users exploring multiple design directions

Clone-Based Branching

Scenario: You have a working dashboard (Version 5) and want to try 2 different themes without losing the original.

Approach:

1. Main conversation: "Dashboard - Light Theme" (Version 5)
2. Clone 1: "Dashboard - Dark Theme Experiment"
   • Modify colors for dark mode
   • Test with stakeholders
3. Clone 2: "Dashboard - High Contrast Theme"
   • Implement high-contrast accessibility theme
   • Test with visually impaired users

Result: 3 versions to compare, present to stakeholders, and choose best option.

When to Branch vs. Iterate

Credit Optimization

Usage Analysis and Patterns

For: High-volume users, teams, budget-conscious organizations

Monthly Credit Review

Do this first week of every month:

1. Go to Settings → Credits → Usage
2. Filter by previous month
3. Export or screenshot the data
4. Analyze:
   • Total credits consumed
   • Credits per conversation
   • Retry rate (retries/total generations)
   • Fix rate (fixes/total generations)

Key Metrics:

1. Credits per Successful Generation

• Formula: Total credits ÷ Number of successful UIs
• Good: 1.0-1.5 (minimal iterations)
• Needs improvement: >2.0 (too many iterations/fixes)

2. Retry Rate

• Formula: Retry credits ÷ Total credits
• Good: <10% (effective prompting)
• Needs improvement: >20% (vague prompts)

3. Fix Rate

• Formula: Fix credits ÷ Total credits
• Good: <15% (clean generations)
• Needs improvement: >30% (systematic issues)

Optimization Strategies

If High Retry Rate (>20%):

• Problem: Prompts too vague or creative direction unclear
• Solution: Be more specific in initial prompts (see Core User Guide - Effective Prompting)
• Expected improvement: Reduce retry rate to <10%, save 10-15% credits

If High Fix Rate (>30%):

• Problem: Systematic code quality issues
• Solution: Add coding standards to custom instructions
• Expected improvement: Reduce fix rate to <15%, save 15-20% credits

If High Credits per Generation (>2.0):

• Problem: Too many iterations to reach acceptable result
• Solution: Use screenshot-to-UI for visual specs, be more specific in text prompts
• Expected improvement: Reduce to 1.2-1.5 credits per generation, save 25-30% credits

See also: Effective Prompting Best Practices | Credit Management Basics

On-Demand Credit Purchasing Strategy

When to buy on-demand credits:

Scenario 1: Predictable Large Project

• Have big project next month requiring 200 extra credits
• Buy 200 on-demand credits upfront
• Use over project duration
• Expires in 12 months (plenty of time)

Scenario 2: End-of-Month Spike

• Ran out of monthly credits on day 25
• Need 20 more credits before renewal (day 30)
• Buy 100 on-demand (minimum practical purchase)
• Use 20 now, save 80 for future spikes

Scenario 3: Quarterly Planning

• Team has unpredictable workload
• Buy 300 on-demand credits quarterly
• Use as safety buffer for busy months
• More flexible than upgrading plan

When NOT to buy on-demand:

Anti-Pattern: Monthly On-Demand Purchases

• Consistently buying 100 credits/month on-demand
• Cost: $15/month extra
• Better: Upgrade to higher plan tier
• Benefit: Credits roll over, better value

Break-Even Analysis:

Current plan: 100 credits/month at $25/month
Monthly overage: 100 credits via on-demand = $15
Total: $40/month

Alternative: Upgrade to 200 credits/month at $40/month
Benefit: Credits roll over (accumulate up to 600)

Plan Selection Optimization

Monthly vs. Yearly Economics:

Pro Monthly: $X/month Pro Yearly: $X × 10 (2 months free) = ~17% discount

When to choose Monthly:

• First 3 months (trial period for paid plans)
• Variable income (freelancers with inconsistent work)
• Unsure about long-term commitment
• Testing platform fit with your workflow

When to choose Yearly:

• Used successfully for 3+ months
• Predictable, stable workload
• Want cost savings (~17% off)
• Confident in platform value

Break-even: After 10 months of yearly plan, you've paid for 12 months of access.

Figma Integration

For: Teams and designers using Figma for design handoff

OAuth Setup

Team admin only can configure Figma integration.

Steps:

1. Go to Settings → Integrations
2. Click "Connect Figma"
3. Authorize Instruct UI to access your Figma account (OAuth)
4. Grant permissions to read Figma files
5. Confirmation: "Figma connected successfully"

Permissions Required:

• Read-only access to Figma files
• No edit permissions required
• Can revoke access anytime from Figma settings

Using Figma Files in Generations

• Visit Home Page and Click the + button open attachment menu.
• Select Import from Figma and paste your Figma frame URL in modal.
• Write Your Prompt in the text box describing what you want. Ex., Generate this dashboard design
• Click Generate to create Blazor code matching your Figma design.

How It Works

• Figma to Image: Pasted frame URL fetched and converted to a high-res image.
• Image to AI: Converted image sent to AI for UI code generation.
• Generate Blazor Code: AI generates Blazor code matching the design.

Limitations

• Import Figma components as reusable Blazor components (generates new code)
• Maintain live sync (one-time generation only)
• Import Figma plugins or custom code
• Handle complex animations (generates static UI)

Code Integration Workflows

Adding Generated Code to Existing Blazor Projects

For: Developers integrating Instruct UI code into production projects

Step 1: Extract and Review

1. Download ZIP from Instruct UI
2. Extract files to temporary folder
3. Review code structure:
   • .razor files → Your Pages/ or Components/ folder
   • .cs files → Corresponding folders
   • .css files → wwwroot/css/ or scoped CSS

Step 2: Namespace Alignment

Generated namespaces are generic:

// Generated:
namespace BlazorApp

// Your project structure:
// ProjectName.Pages.Dashboard

Update to match your project:

// Change to:
namespace YourProjectName.Pages.Dashboard

Use Find & Replace:

• Find: namespace BlazorApp
• Replace: namespace YourProjectName.Pages.Dashboard

Step 3: Service Integration

AI generates mock services. Replace with your real implementations.

Generated mock service:

public class UserService
{
    public List<User> GetUsers()
    {
        return new List<User>
        {
            new User { Id = 1, Name = "John Doe", Email = "john@example.com" },
            new User { Id = 2, Name = "Jane Smith", Email = "jane@example.com" }
        };
    }
}

Your real service:

public class UserService : IUserService
{
    private readonly ApplicationDbContext _context;

    public UserService(ApplicationDbContext context)
    {
        _context = context;
    }

    public async Task<List<User>> GetUsers()
    {
        return await _context.Users.ToListAsync();
    }
}

Update component injections:

@* Generated: *@
@inject UserService UserService

@* Your real service: *@
@inject IUserService UserService

Step 4: Dependency Injection Registration

Add services to Program.cs:

// Generated services (remove mock implementations):
// builder.Services.AddSingleton<UserService>();

// Your real services:
builder.Services.AddScoped<IUserService, UserService>();
builder.Services.AddDbContext<ApplicationDbContext>(options =>
    options.UseSqlServer(configuration.GetConnectionString("DefaultConnection")));

Step 5: Common Integration Errors

Error 1: Type not found

Error: The type 'UserModel' could not be found

Solution: Add using statement for your models namespace

@using YourProjectName.Models

Error 2: Service not registered

Error: Unable to resolve service for type 'IUserService'

Solution: Register service in Program.cs (see Step 4)

Error 3: Route conflict

Error: Multiple routes found for '/dashboard'

Solution: Rename generated route or existing route to avoid conflict

@page "/dashboard-new"  // Temporary, then refactor

Error 4: CSS not applying

Generated styles not visible

Solution:

• Ensure CSS files copied to wwwroot/css/
• Reference in index.html or App.razor:

  <link href="css/generated-styles.css" rel="stylesheet" />
  

Performance Optimization

Prompting for Performance-Sensitive UIs

For: Developers building data-heavy applications

Virtualization for Large Lists

Prompt for virtualization:

Create a user list page with virtualization to handle 10,000+ users.
Use MudBlazor's MudVirtualize component for the user list.
Include search and filter functionality.

What AI generates:

• <MudVirtualize> component instead of simple loop
• Efficient rendering (only visible items loaded)
• Smooth scrolling with large datasets

Performance gain: 100ms → 10ms render time for 10,000 items

Pagination for Data Tables

Prompt for pagination:

Create a product management page with server-side pagination.
Display 20 products per page with navigation controls.
Include page size selector (10, 20, 50, 100 items).

What AI generates:

• Paginated data grid
• Page navigation (first, previous, next, last)
• Page size selector
• Total count display

Performance gain: Loads 20 items instead of 10,000

Lazy Loading Strategies

Prompt for lazy loading:

Create a dashboard with 5 tabs (Overview, Sales, Users, Reports, Settings).
Use lazy loading so each tab content only loads when clicked.

What AI generates:

• Tab navigation
• Lazy-loaded components (not all loaded upfront)
• Loading indicators when switching tabs

Performance gain: Initial page load 3x faster

Summary

You've now unlocked advanced capabilities for teams and power users!

What You Learned:

• Team collaboration via custom instructions and license management
• Advanced workflows: multi-page apps, templates, version branching
• Credit optimization strategies and usage analysis
• Figma integration for design handoff
• Code integration into existing Blazor projects
• Performance optimization techniques

Next Steps:

• Implement team custom instructions for your design system
• Create reusable templates for recurring projects
• Set up monthly credit review process
• Integrate Figma if you use it for designs

Other Resources:

• Quick Start Guide - Get started in 5 minutes
• Core User Guide - Essential workflows
• Complete Reference - Feature lookup and FAQ

Document Version: 1.0 Last Updated: 2026-01-07