Pixello — Design brain for your coding agent

Note: Pixello is currently in closed beta. We're actively working on improvements and would love to hear your feedback.

Creating polished frontend with just prompts is cumbersome. Pixello sits between your coding agent and your UI to add design judgment, enable precise visual edits, and keep every new feature consistent with your design system.

✨ Features

• 🎨 Agentic Ideation - Turn your coding agent into a design-aware agent using Pixello MCP. Explore structured UI variants instead of settling for a single output.

• 🖼️ Lightweight Visual Canvas - Make pixel-accurate changes visually — resize, align, and adjust layout without re-prompting or leaving your IDE.

• 🔄 Two-Way Sync - Canvas ↔ code stay perfectly in sync. Edit either side and see the other update instantly — no broken mappings.

🚀 Setup Instructions

Step 1: Create an account on Pixello

Create an account on https://www.pixello.tech to get access to your API key.

Step 2: Install the Extension

Install the Pixello extension from the VS Code marketplace.

Step 3: 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",
      "headers": {
        "Authorization": "Bearer YOUR_API_KEY_HERE"
      }
    }
  }
}

Step 4: Reload Cursor

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

Step 5: 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 Publish to update code.

🔗 Links

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

📄 License

MIT © Pixello