Skip to main content

Your First Design

This guide walks you through creating your first design with Pixello. In about 5 minutes, you'll have a working landing page generated from a simple prompt.

Prerequisites​

  • Pixello extension installed (see Installation)
  • A frontend project (Next.js, React, or similar)
  • Cursor or VS Code open with your project

Step 1: Open Your Project​

Open a frontend project in Cursor or VS Code. Pixello works best with:

  • Next.js projects
  • React applications
  • TypeScript projects (recommended)

If you don't have a project yet, create one:

npx create-next-app@latest my-app
cd my-app

Step 2: Open Pixello Command Palette​

  1. Press ⌘+Shift+P (Mac) or Ctrl+Shift+P (Windows/Linux) to open the Command Palette
  2. Type "Pixello" to see available commands
  3. Select "Pixello: Create Design" or similar command

Step 3: Enter Your Prompt​

When prompted, describe what you want to create. For example:

"Create a landing page with hero, features, and CTA"

Or be more specific:

"Build a modern landing page with a hero section, three feature cards, and a call-to-action button"

Pixello will understand your intent and generate both the design and code.

Step 4: Watch Pixello Work​

Pixello will:

  1. Generate Design JSON: Creates a design file in your project (typically in a designs/ or pixello/ folder)
  2. Open Web Canvas: Opens the visual editor in a webview where you can see and edit your design
  3. Write Files: Generates React components, styles, and any necessary assets into your project

You'll see files being created in your project structure. All files are written locally—nothing is stored in the cloud.

Step 5: Edit Your Design​

Once the canvas opens, you can:

  • Edit visually: Click elements in the canvas to modify them
  • Edit code: Switch back to your editor and modify the generated components
  • Sync changes: Changes in either place stay in sync

The design JSON file acts as the bridge between the visual canvas and your code.

Step 6: Run Your Project​

Your generated code is ready to use. Run your development server:

npm run dev

Navigate to the page and see your design live.

How It Works​

Here's what happened under the hood:

  1. MCP Server: Pixello's MCP server processed your prompt using AI
  2. Design Generation: Created a structured design JSON file
  3. Code Generation: Generated React components based on the design
  4. Canvas Rendering: The web canvas reads the design JSON and renders it visually

All of this happens locally. Your files are in your repository, and Git works normally.

Key Points​

  • All files are local: Everything is written to your project directory
  • No cloud dependency: Pixello works offline after installation
  • Git-friendly: Design JSON files are human-readable and version-controllable
  • No lock-in: You own your designs and can edit them directly

Troubleshooting​

Canvas doesn't open​

  • Check that the extension is installed and enabled
  • Try reloading the window (⌘+R / Ctrl+R)

Files aren't generated​

  • Make sure you're in a valid project directory
  • Check the Output panel for any error messages

Design looks different in browser​

  • The canvas is a preview—your actual code is what runs
  • Make sure you're viewing the correct route/page

Next Steps​

Now that you've created your first design, learn about How Pixello Works to understand the architecture, or check out our Landing Page Guide for more detailed examples.