Penpot

Definition

An open-source, self-hosted design tool — a Figma alternative that stores layout as real CSS. Its official MCP server lets an agent query frames and get CSS-native values back (flex, gap, border-radius), which suits teams that want design-to-code without proprietary formats or hosted dependencies.

More from Design with MCP

• Code Connect

  A Figma feature that maps design components to their real implementations in your codebase. When an agent generates code from a frame, Code Connect tells it to reuse your actual components and props instead of writing fresh markup, so the output matches what you already ship.

• Design Token

  A named value for a design decision — a color, a spacing step, a font size — stored once and referenced everywhere. Tokens keep design and code in sync: change the token and every place that uses it updates. Pulling tokens rather than hardcoding hex and pixels is what keeps generated code on-system.

• Design-to-Code

  The workflow of turning a visual design — a Figma frame, a Stitch screen — directly into working front-end code, usually by giving an AI agent structured access to the design through an MCP server. The agent reads the design's layout, tokens, and components instead of you re-typing them by hand.

• DESIGN.md

  A natural-language file format from Stitch that captures a design's intent — layout, components, styling notes — as portable text. Because it's plain language, it can be extracted from an existing URL and carried across projects or tools, giving an agent a readable brief instead of an opaque design file.

• Figma Dev Mode

  A mode in Figma built for handing design off to code. It surfaces measurements, tokens, and the structure of a selection, and it hosts the Figma MCP server so an AI assistant can read the frame you've selected and generate matching code.

• Frame & Node

  The basic units of a design file. A node is any element — a rectangle, text, a group; a frame is a container node that holds a layout, often a whole screen or component. When you scope an AI request, you're pointing it at a specific node (usually a frame) by selecting it or pasting a link to it.