Ever tried describing a complex UI layout to an AI? You know the struggle:

"Create a UI component with an App Bar containing a Toolbar, which has a Typography component with variant h6 and some text, plus a Button with variant contained and primary color, and below that a Container with max width md containing a Card with Card Content..."

By the time you finish typing, you've forgotten half the details, and the AI misunderstands the hierarchy. There's a better way.

Try the Live Demo - See it in action before reading more!

🎯 The Problem Every Developer Faces

When working with AI assistants to generate UI components, we constantly run into the same issues:

  • Complex hierarchies are impossible to describe clearly in natural language
  • Prop configurations get lost in translation
  • Nested relationships become confusing for both you and the AI
  • Maintaining consistency across similar components is a nightmare

What if you could visually build your component tree and automatically generate the perfect prompt for any AI?

🚀 A Better Approach

This new tool transforms how you work with AI for UI development. Instead of wrestling with text descriptions, you get:

SPUIG Screenshot

🎨 A Complete Component Library at Your Fingertips

  • 100+ Material-UI components organized across 8 categories
  • Smart search and filtering to find exactly what you need
  • Component details showing props, descriptions, and compatibility

🛠️ Visual Tree Builder That Actually Makes Sense

  • Click-to-add simplicity for building component hierarchies
  • Real-time preview of your component structure
  • Automatic validation to prevent incompatible parent-child relationships
  • Undo/redo support because everyone makes mistakes

⚡ Intelligent Property Management

  • Type-safe form inputs tailored to each prop type
  • Required field validation with visual indicators
  • Enum value dropdowns for predefined options
  • Direct text editing for component content

🚀 Perfect Prompt Generation Every Time

  • Structured output with clean, indented syntax
  • AI-optimized format designed for maximum comprehension
  • One-click copying and file export
  • Instant prompt preview as you build

💡 How It Works (It's Ridiculously Simple)

  1. Select components from the comprehensive library
  2. Build your hierarchy with the visual tree interface
  3. Configure properties using intelligent forms
  4. Generate the perfect prompt automatically
  5. Copy and paste to your favorite AI assistant

What You Get: Clean, Structured Prompts

Instead of messy natural language, you get perfectly formatted prompts like this:

Convert the following structure into a component:

Container maxWidth="md"
  AppBar position="static"
    Toolbar
      Typography variant="h6" "My App"
      Button variant="contained" color="primary" "Login"
  Box sx={{padding: 2}}
    Card
      CardContent
        Typography variant="h5" "Welcome"
        Typography variant="body1" "This is a sample layout"
        Button variant="outlined" "Learn More"
Enter fullscreen mode Exit fullscreen mode

Clear hierarchy. Precise props. Zero ambiguity.

🛠️ Built for Real Developers

This isn't just another toy tool. It's built with production-grade technologies:

  • React 19 with TypeScript for reliability
  • Material-UI v7 for comprehensive component support
  • Vite for lightning-fast development
  • Immutable state management for predictable updates

🚀 Ready to Transform Your Workflow?

The tool is open source and ready to use. Here's how to get started:

Quick Start 

git clone https://github.com/alonsarias/structured-prompts-ui.git
cd structured-prompts-ui
npm install
npm run dev
Enter fullscreen mode Exit fullscreen mode

Whether you're prototyping quick layouts, building complex applications, or just tired of explaining component hierarchies in text, this tool will transform your workflow.