Tarot Pixel: An Agent‑Native Visual Restoration System for AI‑Powered Front‑End Coding

Traditional D2C platforms require extensive manual work—layer selection, slicing, and multi‑state handling—making visual restoration a bottleneck in front‑end automation. Tarot Pixel proposes a fundamentally different approach: instead of generating code directly, it provides a structured visual preview and a REST API that lets a Coding Agent query only the information it needs.

Core Design Principles

Agent‑Native Design : The system assumes the Coding Agent already has full project context (codebase, architecture, dependencies) and delegates visual understanding to a dedicated visual Agent.

On‑Demand Data Access : Design files are exported once into a cleaned, hierarchical representation. Agents retrieve data via overview, d2c‑context, composite, screenshot, node‑map, etc., avoiding full‑payload context overload.

Noise Reduction : The engine automatically translates masks to CSS, recognizes vector shapes (e.g., circles → border‑radius: 50%), tags decorative layers ( [likely‑decorative]), and performs precision rounding, ensuring only essential visual facts reach the Agent.

Workflow

1. Export : The MasterGo plugin parses the design, performs mask translation, vector detection, and resource extraction, producing a one‑to‑one web preview.

2. Query : The Coding Agent calls overview to locate a module, then uses d2c‑context for detailed node data, or node‑map to locate a component via image matching.

3. Implementation : The Agent writes code using its own project knowledge, then compares the rendered page with the design using screenshot and visual diff APIs.

4. Iterative Refinement : If discrepancies remain, the Agent either receives a developer’s brief correction (e.g., “button corner radius is wrong”) or autonomously re‑queries the visual service to adjust layout, composite images, or CSS values.

Comparison with Traditional D2C and MasterGo MCP

Automation vs Manual Prep : D2C and MasterGo MCP rely on developers to select containers, tag states, and feed full JSON payloads. Tarot Pixel automates the entire export and provides layered APIs.

Full‑Push vs Incremental Pull : Conventional pipelines push the whole IR into the model, causing context bloat. Tarot Pixel’s on‑demand queries keep the Agent’s context lightweight.

Tooling Ecosystem : Tarot Pixel offers 20+ APIs, a built‑in visual Chat Agent, node‑map image matching, and composite image generation—capabilities absent in standard D2C solutions.

Benefits and Metrics

The system reduces manual intervention by moving from a "generate‑then‑fix" model to a "query‑plan‑execute‑reflect" loop, making the number of human corrections the true efficiency metric. Early tests show 80‑90% restoration quality in a single pass, with 1‑3 additional dialogue rounds for complex components.

Current Limitations and Future Work

Layer‑location speed in very large designs still needs optimization.

Automatic slicing accuracy for borderline decorative/content layers can require occasional human verification.

Multi‑state component detection is functional but continues to be refined.

Future plans include smarter noise filtering, faster node lookup, and leveraging upcoming model improvements for higher visual understanding.

Conclusion

Tarot Pixel demonstrates that when a Coding Agent already possesses business and code context, the most valuable addition is a clean, queryable visual knowledge base. By treating design files as a continuously accessible reference rather than a one‑time input, the framework enables truly iterative, AI‑assisted front‑end development.