Psst… want a better, cost-effective way to integrate design and engineering? Go open source.

Figma is my tool of choice. But their tokens are expensive, and you hit the limit pretty soon the moment you ask it to do complex tasks. And Figma also does not have the complete context of your tech stack. This is not a dig at Figma, that’s the reality of using multiple tools and AI agents with little context between them.

However, I have been running a self-hosted instance of PenPot on a cheap VPS server and getting results that are much closer to production-ready design and corresponding code all generated within the same context window.

Self-host a Penpot instance, enable MCP server, and use your LLM of choice on VS Code (I use Claude) so your AI agent has access to your code context and can design within the constraints of what your tech stack allows. Single context, multiple output.

What’s even better? Try running a local LLM with an M4 Pro Mac mini and use it instead of a cloud LLM. Your results will, of course, depend on how much context window you can afford (and RAM), but that is another way to make your codebase and your designs completely secure and not pay for the exorbitant token cost.

Checkout this diagram that explains how I am using it with a Sveltekit based app