Pixello — The Design Tool for the Agentic Coding Era

Achieve pixel-perfect design with a visual canvas that works with your favorite coding agent. Seamlessly collaborate with designers to ship faster with zero handoffs.

✨ Features

• 🎨 AI Design Generation - Describe your UI in plain English, get professional designs instantly
• 🖼️ Visual Design Canvas - Design interfaces with a familiar drag-and-drop canvas. Resize, align, and arrange with pixel-level control — all without leaving your IDE
• 📐 Layers Panel - Navigate your design hierarchy with ease
• ⚛️ Code Export - Generate production-ready Next.js/React components
• 🔄 Two-Way Sync - Edit in the visual canvas and see it reflected in code. Edit the code and watch the canvas update. Two-way sync that never breaks
• 🤖 MCP Integration - Works with Cursor, Claude Desktop, and other AI coding tools
• 👥 Real-Time Collaboration - Collaborate across disciplines in real-time. Designers sketch, PMs annotate, engineers implement — all in the same workspace, all in sync

🚀 Setup Instructions

Step 1: Install the Extension

Install the Pixello extension from the VS Code marketplace.

Step 2: Configure MCP Server

Click the deeplink below to automatically configure the MCP server in Cursor. This will open your ~/.cursor/mcp.json file with the correct configuration:

Configure MCP Server for Cursor

Alternatively, manually create or edit ~/.cursor/mcp.json and add:

{
  "mcpServers": {
    "pixello": {
      "url": "https://mcp.pixello.tech/sse"
    }
  }
}

Step 3: Reload Cursor

After configuring the MCP server, reload Cursor to apply the changes.

Step 4: Start Using Pixello

1. Open the Pixello sidebar (paintbrush icon in activity bar)
2. Type a design prompt in the chat: "Create a landing page for a fintech startup"
3. Watch your design appear in the canvas
4. Click Generate Next.js App to export code

📝 Example Prompts

• "A modern login page with email, password, and social login buttons"
• "Dashboard with sidebar navigation, stats cards, and a data table"
• "E-commerce product page with image gallery, reviews, and add to cart"
• "SaaS pricing page with three tiers and feature comparison"

⚙️ Configuration

🔗 Links

• Website: https://pixello.tech
• Documentation: docs.pixello.tech
• Support: support@pixello.tech

📄 License

MIT © Pixello