Quick Start Guide - Instruct UI

Reading Time: 5 minutes Goal: Generate your first Blazor UI and download the code

What is Instruct UI?

Instruct UI generates production-ready ASP.NET Core Blazor UI code from text descriptions or screenshots.

Key capabilities:

  • Generate complete Blazor components (Razor, C#, and CSS)
  • Support for MudBlazor, Tailwind CSS, and Bootstrap
  • Live preview with instant code compilation
  • Download ready-to-integrate code

In the next 5 minutes, you'll sign up, generate your first UI, preview it live, and download the code.

Sign Up & Generate Your First UI

Step 1: Create Your Free Account

  1. Visit the Instruct UI home page
  2. Click "Try Instruct UI Free" or "Get Started"
  3. Sign up using your preferred authentication method (Google, GitHub, or email)
  4. Complete the brief onboarding (name, company, industry)

You'll receive 15 free credits automatically - no credit card required!

Step 2: Choose Your First Prompt

You have two options to get started:

Option A: Use an Example Prompt (Recommended)

Click any built-in example to see how Instruct UI works:

  • "Create user registration form" - Simple form with validation
  • "Design a site admin dashboard" - Complex layout with navigation
  • "Build a flight booking page" - Multi-step form with data display

Option B: Write Your Own Prompt

Describe the UI you want to build:

Create a user profile page with a circular avatar at the top,
full name as a heading, email and phone number fields,
and an edit button at the bottom.

Tip: Be specific! Instead of "create a dashboard," say "create a dashboard with 3 metric cards at the top showing total users, revenue, and orders, and a data table below."

See also: Effective Prompting Techniques for more detailed guidance.

Step 3: Select Your Framework (Optional)

Before generating, you can choose your preferred component library:

  • MudBlazor (Recommended for beginners) - Material Design components, great for admin panels
  • Tailwind CSS - Utility-first CSS for custom designs
  • Bootstrap - Classic web framework for familiar projects

Don't worry if you're not sure - MudBlazor is selected by default and works great for most use cases. You can always generate again with a different framework.

See also: Framework Selection Guide for detailed comparison and use cases.

Step 4: Generate Your UI

  1. Click the "Generate" button
  2. Watch as the AI creates your Blazor code in real-time
  3. You'll see the code appear in the editor on the left
  4. The live preview appears on the right

This takes 10-30 seconds. You'll see:

  • ✅ Code files being created (.razor, .cs, .css)
  • ✅ Compilation happening automatically
  • ✅ Live preview rendering your UI

If you see compilation errors, don't worry! The AI automatically tries to fix them. You can also click "Fix with AI" if errors persist.

Step 5: Preview Your UI

The right panel shows your generated UI running live. You can:

  • Interact with it - Click buttons, fill forms, test navigation
  • Test responsiveness - Drag the resize handle to see mobile/tablet/desktop views
  • Switch views - Toggle between "Preview" and "Source Code"
  • Navigate routes - If you generated multiple pages, use the address bar to test routing

Look for these success indicators:

  • ✅ Preview shows your UI without errors
  • ✅ Interactive elements work (buttons, forms, etc.)
  • ✅ Layout matches your description

Step 6: Download Your Code

Ready to use your code in a real project?

  1. Click the "Download" button in the top toolbar
  2. Your code downloads as a ZIP file
  3. Extract the ZIP to see your Blazor components

What's included:

  • .razor files - Your Blazor components
  • .cs files - C# code-behind (if needed)
  • .css files - Styling
  • Complete folder structure ready for integration

Code Ownership: You fully own all generated code. Use it in commercial projects, modify it, distribute it - no restrictions!

See also: Download & Integration Best Practices

Next Steps

Congratulations! You've generated your first UI with Instruct UI. Here's what to do next:

Try Refining Your UI

Instead of starting a new generation, try asking the AI to modify what you just created:

  • "Add a search bar at the top"
  • "Change the primary color to blue"
  • "Make the form validation more detailed"
  • "Add a loading spinner when submitting"

This is where Instruct UI really shines - you can iterate and refine through conversation!

Explore Community Examples

Visit the Community or Explore page to see what others have built:

  • Learn effective prompting patterns
  • Get inspiration for your projects
  • Clone any community example to customize it

Learn Effective Prompting

Ready to master Instruct UI? Read the Core User Guide to learn:

  • How to write prompts that generate better code on the first try
  • Using screenshots to generate UIs from designs
  • Iteration strategies (retry, version history, code diff)
  • Organizing and downloading your projects

Understand Credits & Pricing

You started with 15 free credits. Each generation costs 1 credit.

  • Free Trial: Limited to 15 credits (no renewals)
  • Pro Plans: Monthly credits that roll over (up to 3x)
  • Team Plans: Shared credit pool for your team

When you're ready to upgrade, visit Settings → Subscription or see the Complete Reference for pricing details.

What You Learned

✅ How to sign up for a free trial ✅ How to generate your first UI from a text prompt ✅ How to preview and interact with generated code ✅ How to download code for your projects

You're ready to start building with Instruct UI!

Need Help?

Running into issues? See the Troubleshooting Guide for solutions to common problems.

Resources:

Ready to Level Up?

Read the Core User Guide to master:

  • Effective prompting techniques for better results
  • Using screenshots and images to generate UIs
  • Iteration workflows (version history, retry, code diff)
  • Exporting and integrating code into real projects
  • Credit management and optimization

Happy building! 🚀