AIUIaiui/docs

Creating Projects

Projects are the foundation of your work in AIUI. Each project contains a canvas where you design and iterate on UI screens. This guide covers everything from creating your first project to managing project settings.

The Dashboard

When you open AIUI, you land on the dashboard at /app. This is your home base where all your projects are displayed in a grid layout. Each project card shows:

  • A thumbnail preview of your most recent work
  • The project name
  • The project type indicator (web or app)
  • Last modified timestamp

Creating a New Project

To create a new project:

  1. Click the New Project button in the dashboard header
  2. Enter a name for your project
  3. Select the project type

Project Types

AIUI supports two project types that affect how your designs are previewed:

Web Projects

  • Displays designs with browser chrome (address bar, navigation buttons)
  • Ideal for websites, web applications, and dashboards
  • Previews render in a desktop browser frame

App Projects

  • Displays designs with a mobile notification bar (time, battery, signal)
  • Ideal for mobile applications and responsive designs
  • Previews render in a mobile device frame

The project type only affects the preview wrapper—your actual code output remains the same HTML and Tailwind CSS regardless of type.

Starter Wizard (Optional)

After naming your project, you can optionally complete the starter wizard to help guide AI generation. This wizard collects context about your project:

Audience

Describe who will use this product. Examples:

  • "Small business owners managing inventory"
  • "Teenagers looking for social connections"
  • "Enterprise teams collaborating on documents"

Goals

Define what the project should accomplish:

  • "Convert visitors into paying subscribers"
  • "Help users track their fitness progress"
  • "Streamline the checkout experience"

Design Styles

Select visual styles that match your vision:

  • Minimalist
  • Bold and colorful
  • Corporate and professional
  • Playful and friendly
  • Dark and moody

Color Palette

Choose a primary color palette or specify custom hex values. The AI will incorporate these colors into generated designs.

Inspirations

Add URLs or names of websites and apps that inspire you. The AI uses these as reference points for style and layout decisions.

Screens

List the screens you plan to create:

  • Landing page
  • Sign up / Login
  • Dashboard
  • Settings
  • User profile

You can skip any or all wizard steps—they're entirely optional but help produce more targeted results.

Magic Starter AI

The Magic Starter AI is a multi-step guided wizard that helps you bootstrap a project with high-quality context and initial screens. Instead of a blank canvas, you start with a fully-defined project identity.

The 5-Step Magic Flow

  1. Intent: Describe your project in natural language. The AI will suggest a target audience and clear goals based on your description.
  2. Style: Select design preferences. The AI analyzes your brand identity to recommend visual styles (e.g., Minimal, Glassmorphism, Editorial) that match your audience.
  3. Colors: Choose from AI-generated color palettes that follow color theory and accessibility standards, or define your own custom colors.
  4. Screens: The AI suggests a set of core screens (e.g., Dashboard, Profile, Settings) relevant to your project type. You can toggle which ones you want to generate initially.
  5. Launch: Review your configuration and launch. AIUI will create the project, set the context, and automatically begin generating your initial screens on the infinite canvas.

URL & Image Inspirations

In the Style step, you can provide visual inspiration to guide the AI:

  • URL Screenshots: Enter a URL of a website you admire. AIUI will capture a screenshot and use it as a visual reference for layout and style.
  • Image Uploads: Upload your own mockups, sketches, or mood board images.
  • Visual Context: The AI "sees" these inspirations and incorporates their design patterns into your project guidelines.

When to Use Magic Starter AI

  • Bootstrapping: When you want to jump straight from idea to multiple screens.
  • Design Systems: To establish a consistent color palette and style from day one.
  • Prototyping: Quickly generate a full user flow for a new feature or app concept.

Project Settings

Access project settings by clicking the gear icon on any project card or from within the canvas view. The settings modal contains several tabs:

General Tab

  • Project Name: Rename your project at any time
  • Project Type: Switch between web and app
  • Description: Add notes about the project

Design Tab

  • Default Style Preset: Set a default style for all generations
  • Color Palette: Update the project color scheme
  • Typography: Configure font preferences

Export Tab

  • Export Format: Choose output format preferences
  • Asset Settings: Configure how images and assets are handled

Danger Zone Tab

  • Delete Project: Permanently remove the project and all its nodes

Managing Projects

Renaming Projects

Click on the project name in the dashboard or open settings to rename.

Duplicating Projects

Right-click a project card and select "Duplicate" to create a copy with all nodes preserved.

Archiving Projects

Move projects to archive to declutter your dashboard without permanent deletion.

Deleting Projects

To delete a project:

  1. Open the project settings modal
  2. Navigate to the "Danger Zone" tab
  3. Click "Delete Project"
  4. Confirm the deletion by typing the project name

Deletion is permanent. All nodes, annotations, and history within the project will be removed and cannot be recovered.

Next Steps

Once you've created a project, you're ready to start designing. Learn about: