CSS Studio. Design by hand, code by agent
Visual CSS editor syncing edits to local AI agents via MCP protocol.

Bidirectional code↔diagram with Claude MCP beats text-only codebase analysis tools.
Backend developers, architects, teams using Claude for code analysis
Cursor · Continue.dev · Sourcegraph Cody
Tesseract is a desktop app today (cloud version coming) with a built-in MCP server. You connect it to Claude Code with one command:
claude mcp add tesseract -s user -t http http://localhost:7440/mcp
I use it for onboarding (understand a codebase without reading code), mapping (point AI at code, get a 3D diagram), exploring (navigate layers and drill into subsystems), debugging (trace data flows with animated color-coded paths), and generating (design in 3D, generate code back).There's also a Claude Code plugin (tesseract-skills) with slash commands: /arch-codemap maps an entire codebase, /arch-flow traces data paths, /arch-detail drills into subsystems.
Works with Claude Code, Cursor, Copilot, Windsurf — any MCP client. Free to use. Sign up to unlock all features for 3 months.
It's early but stable. I've been dogfooding it on real projects for weeks and it's ready for other people to try.
Demo video (1min47): https://youtu.be/YqqtRv17a3M
Docs: https://tesseract.infrastellar.dev/docs
Plugin: https://github.com/infrastellar-dev/tesseract-skills
Discord: https://discord.gg/vWfW7xExUr
Happy to discuss the MCP integration, the design choices, or anything else. Would love feedback.
Visual CSS editor syncing edits to local AI agents via MCP protocol.
Another AI diagram generator when Mermaid AI and Lucidchart already exist.
Sitemap-first design is sensible pedagogy, but it's a niche workflow without retention data.
MCP wrapper around codebase diagramming when Mermaid and PlantUML already exist.
Voice-first coding agent when Cursor and GitHub Copilot already dominate this space.
ESLint for system design: catch architecture violations in CI before code review becomes bottleneck.