Pixy: The Visual Layer Between You and Your Coding Agent

Pixy is a tool designed to bridge the gap between human designers and coding agents. It treats the live, running web page as the primary canvas for design and iteration. Unlike traditional design tools that re-draw a product on an abstract canvas and export a lossy representation, Pixy operates directly on the real DOM. This ensures that every change reflects the actual state of the application.

Benefits

Pixy offers several key advantages over traditional design methods. First, it requires no installation or account setup. Users simply add a single script tag to their website, making it compatible with any tech stack and environment, including localhost, staging, and production. Second, it enables real-time editing. Users can toggle design mode to move elements, restyling colors and fonts, or rewrite content directly on the live page. Third, it preserves application state. Dropdowns remain open, and logged-in states stay alive during editing because the tool interacts with the actual running application rather than a static copy. Finally, all edits are stored locally within the user's browser and disappear upon reloading, ensuring no unintended changes persist to the server.

Use Cases

Pixy is ideal for developers and designers who want to iterate quickly on live websites. It works across any technology stack, making it useful for teams using various frameworks. Designers can work on elements that are generated on the fly, such as server responses, popups, and logged-in states, which are impossible to replicate in static mockups. The workflow is streamlined into three simple steps. First, install the personal Pixy script tag into the site. Second, toggle design mode and tweak the real, running page. The tool captures every interaction, maintaining the integrity of the live environment. Third, instruct the coding agent to pull data from Pixy. The agent receives a clean record of every change, including selectors, properties, and the transition from the original state to the new state, which it then uses to generate code.

Pricing

Pixy is free to use and does not require a credit card. It is designed to be accessible in various environments, from local development to live production sites.

Vibes

The tool is positioned as a solution to the inefficiencies of traditional design workflows. By eliminating the iterative back-and-forth of making small adjustments, it allows users to demonstrate changes directly. This enables the coding agent to ship the code immediately. The approach treats the codebase as the source of truth while the page itself serves as the workspace, ensuring that dynamic content and complex states are handled with precision.

Additional Information

Pixy is developed by Surfy Ltd, a company registered in England and Wales. The registered office is located at 14-2e Docklands Business Centre, 10-16 Tiller Road, London E14 8PX, United Kingdom. The company number is 15026168.