​
1. For New Users

If you’re new to Shaper, follow these steps to get started:

​
Signing Up & Creating a Project

  • Sign up using your email or a social account (Google, GitHub, etc.).
  • After logging in, you can create a new project from scratch or use a pre-built template to jumpstart your design.
  • Name your project and get started.

​
Exploring the Dashboard

  • Once inside, you’ll land on the dashboard, where you can manage your projects.
  • You can search for existing projects, start a new one, or use AI-powered design generation to build UI layouts instantly.
  • The dashboard provides pre-built prompt templates, allowing you to generate a design with minimal input.

​
2. For Existing Users

If you’ve previously worked on a project, simply log in and continue from where you left off.

​
Accessing Existing Projects

  • Your dashboard will display a list of all your projects.
  • Click on any project to resume editing its design, code, or AI-generated elements.
  • You can create new projects or delete projects from here.

​
Refining Work with AI

  • If you want to enhance an existing design, use AI-powered quick edits inside the editor.
  • AI can adjust layouts, optimize colors, refine typography, and more.

​
3. Design Editing

Shaper’s design editor provides an intuitive way to create and customize modern, responsive user interfaces.

​
Building UI with Drag & Drop

  • The right panel allows you to change properties of all your design elements inside the artboard.
  • You can add UI components to your canvas from the bottom toolbar.
  • The left panel provides a layer view, letting you manage element hierarchy efficiently.

​
Customizing Styles & Layouts

  • Modify fonts, colors, and typography directly from the design panel.
  • Adjust padding, spacing, and alignment to achieve pixel-perfect designs.
  • Easily switch between light and dark mode, and configure states such as hover, active, and pressed.

​
4. Code Editing

Shaper integrates seamlessly with VS Code, allowing developers to write and modify code alongside design elements.

​
Real-Time Code Synchronization

  • Any design changes are instantly reflected in the code editor.
  • Modify UI components using the built-in Shadcn component library for consistency.

​
VS Code Features

  • The built-in code editor supports:
    • Syntax highlighting for multiple programming languages.
    • Linting and formatting for clean, readable code.
    • Multi-cursor editing to boost productivity.
    • Integrated Git support for seamless version control.
    • Live Share for real-time collaboration with your team.

​
5. AI-Powered Design Generation

Shaper’s AI engine can generate complete UI designs from simple text-based prompts.

​
Generating UI with AI Prompts

  • Users can enter a custom prompt or choose from pre-existing templates on the Landing Page or Dashboard.
  • The selected prompt is automatically loaded into the text area, where users can modify it before generating a design.
  • Click Send, and AI will generate a fully interactive design based on the given instructions.

​
Fine-Tuning AI-Generated Designs

  • After generation, users can modify individual elements using inline AI-powered quick edits.
  • Use the AI chat box for large-scale modifications, such as changing the layout, adding new sections, or adjusting colors.