Penpot MCP vs Figma McP The Real Estate Card Test

Penpot MCP vs Figma McP: The Real Estate Card Test ![rw-book-cover](https://i.ytimg.com/vi/_yNzqE0zktQ/sddefault.jpg) 🔗 **Source:** [Penpot MCP vs Figma McP: The Real Estate Card Test](https://www.youtube.com/watch?v=_yNzqE0zktQ) > [!note]+ Document Notes > tags: [penpot, figma, mcp, design-to-code, ai-design] > author: [MISSING] > source: Penpot (YouTube) > reference: https://www.youtube.com/watch?v=_yNzqE0zktQ > date created: 2026-06-30 09:00 > > # 🏷️ Title: Penpot MCP vs Figma MCP: The Real Estate Card Test >  ## 🧭 Table of Contents - [📝 Summary](#-summary) - [📖 Main Content](#-main-content) - [🗒️ Notes](#️-notes) - [📚 References](#-references) - [🗣️ Paraphrase](#️-paraphrase) - [📰 Newsletter](#-newsletter) - [✅ Action Items](#-action-items) - [🧪 Hypotheses](#-hypotheses) - [📊 Methodology](#-methodology) - [❓ Questions](#-questions) - [🔮 Future Research](#-future-research) - [💡 Implications](#-implications) - [🧠 Learning Styles Assessment](#-learning-styles-assessment) - [📊 Accessibility Assessment](#-accessibility-assessment) - [🌍 DEIB Assessment](#-deib-assessment) - [✅ Logical Validity](#-logical-validity) - [🛡️ DARVO Analysis](#-darvo-analysis) - [🎯 Conclusion](#-conclusion) ### 🔗 References - [Penpot MCP vs Figma MCP (YouTube)](https://www.youtube.com/watch?v=_yNzqE0zktQ) - [Penpot](https://penpot.app/) ## 📝 Summary - What happened: A 44-second Penpot promo runs a "real estate card test" — same complex prompt and requirements handed to Penpot's MCP, Figma's MCP, and other competitors. - Why it matters: It frames MCP servers as the bridge giving AI agents context to read/write design files, with "design as code" as the differentiator for build-ready output. - Stakeholders: Penpot (narrator), Figma and unnamed competitors, AI-agent tooling users, design-to-code teams. - Risks/tradeoffs: vendor benchmark, single test case, no shown artifacts or methodology — comparative claims are unverified. - Bottom line: Penpot claims its MCP yields structured, reusable, build-ready output where rivals break, crediting its design-as-code model. ## 📖 Main Content - Core argument: AI-generated design quality depends on the context a tool's MCP server exposes; Penpot credits its design-as-code foundation for giving agents enough context to emit flexible layouts and reusable components. - Claim chain: same prompt + requirements → Figma/competitors yield broken, non-reusable output → Penpot yields a clean, structured, reusable design. - Terms: MCP (Model Context Protocol) = open protocol letting agents read/write external tools, here design files; design as code = structured, machine-parsable files vs opaque canvas data; reusable components/flexible layouts = design-system primitives that survive round-tripping into build-ready code. - Uncertainty: "broken," "can't reuse," "clean, structured" are stated, not shown — no artifacts, rubric, prompt text, or repeat trials. Single-source, single-trial, vendor-authored. ### 🗒️ Notes #### ⏱️ [00:00](https://www.youtube.com/watch?v=_yNzqE0zktQ?t=0) The test setup - Penpot's MCP compared against Figma's and "others" via a single exercise: designing a real estate property card. - Controlled inputs asserted: "Same requirements, same complex prompt." #### ⏱️ [00:15](https://www.youtube.com/watch?v=_yNzqE0zktQ?t=15) The claimed result - Figma and competitors: "broken layouts and elements you can't reuse." - Penpot: "a clean, structured design built on top of flexible layouts and reusable components." #### ⏱️ [00:30](https://www.youtube.com/watch?v=_yNzqE0zktQ?t=30) The thesis and CTA - Attributed to Penpot's "design as code approach." - Mechanism claim: "AI agents get the rich context they need to read and write design files you can actually build on." - Call to action: "Penpot's MCP, try it now." ## 📚 References - [Penpot — official site](https://penpot.app/) - [Model Context Protocol](https://modelcontextprotocol.io/) - [Figma](https://www.figma.com/) ## 🗣️ Paraphrase - Penpot ran one comparison — a real estate card built from an identical prompt and brief — across its own MCP server, Figma's, and other tools. - It reports that the competitors produced broken, non-reusable results while Penpot produced a structured, reusable, build-ready design, crediting its design-as-code model and inviting viewers to try the MCP. ## 📰 Newsletter - For the WordPress and design-systems crowd: MCP servers are quietly becoming the seam between AI agents and your real source files. Penpot's new 44-second demo pits its MCP against Figma's on a single "real estate card" prompt and (unsurprisingly, since Penpot made it) declares its own design-as-code output the only build-ready one. - Why care: open-source Penpot's pitch — structured files agents can read AND write — maps neatly onto block-theme and design-token workflows where you want components, not pixel soup. Worth a hands-on test before believing the marketing. - Try it: [Penpot](https://penpot.app/) · [MCP spec](https://modelcontextprotocol.io/) ## ✅ Action Items #### DevRel - Developer experience: stand up Penpot's and Figma's MCP side by side, run the card prompt, and capture the actual artifacts for an honest comparison. - Education: draft a short "what is a design-tool MCP server" explainer. - Developer marketing: treat design-as-code as a positioning pattern; don't repeat unverified head-to-head claims. #### WordPress - Design: test whether Penpot's reusable-component output round-trips into block patterns and theme.json tokens. - Core AI: log as a data point on agent-readable design formats for the design-to-code eval set. - Documentation: if useful, write an examples-first Penpot MCP quickstart. #### OSPO - Not applicable to this source — 44-second vendor demo raises no governance, license, security, SBOM, or upstream-funding action. #### Community - Not applicable to this source — no maintainer, contributor, or sponsor coordination implicated. #### The WPCC - Not applicable to this source — no funding or fellowship dimension. #### FAIR - Not applicable to this source — no metadata-provenance or anti-capture dimension. ## 🧪 Hypotheses - H1: Given an identical prompt, Penpot's MCP yields a higher rate of reusable component instances than Figma's MCP. - H2: Penpot's MCP output requires fewer manual fixes to become build-ready (measurable as edit distance to a passing build). - H3: "Design as code" file structure correlates with lower layout-breakage rates across varied prompts, not just the card case. - H4: The advantage shrinks as prompt complexity drops (simple cards converge; complex multi-state components diverge). ## 📊 Methodology - To test H1–H4: run a repeated, blinded trial — N prompts (varying complexity) × multiple MCP servers (Penpot, Figma, others) × multiple runs each, randomized order. - Data sources: generated design files, exported code, and a fixed rubric scoring reusable-component count, layout validity, and edits-to-build. - Analyses: paired comparison per prompt; report effect sizes and variance, not single-trial anecdotes; have blind raters score artifacts. ### ❓ Questions - What exact prompt and requirements were used, and were runs repeated or cherry-picked? - How is "broken" vs "clean" operationalized — by a rubric, a build pass, or visual judgment? - Which competitor versions/MCP releases were tested, and on what date? - Does the advantage hold for non-card components (forms, dashboards, navigation)? ### 🔮 Future Research - An independent, reproducible benchmark suite for design-tool MCP servers with open prompts and scoring. - Round-trip fidelity study: design → code → re-import, measuring component/token preservation. - Longitudinal tracking as Figma's and Penpot's MCP servers evolve. ### 💡 Implications - Practice: teams choosing AI-design tooling should weigh file-structure/agent-readability, not just canvas UX. - Policy/standards: pressure toward structured, machine-writable design formats as agents enter the loop. - Education: new literacy needed around MCP and design-to-code pipelines. - Funding/open source: an open-source contender (Penpot) leaning on openness as a competitive wedge against proprietary incumbents. ### 🧠 Learning Styles Assessment - Reading level estimate: transcript is conversational marketing copy; Flesch-Kincaid Grade ~8–9 (short clauses, common vocabulary, a few domain terms like MCP). #### 👀 Visual learners - On-screen motion present; improve with side-by-side before/after screenshots and labeled layer trees. #### 🔊 Aural learners - Narration over music present; improve with a clean narration track and short audio summary. #### 🗣️ Verbal learners - "Design as code" framing present; improve by defining MCP and "reusable components" inline. #### 🧩 Kinesthetic learners - Implicit "try it now" CTA; improve with a sandbox or step-by-step repro. #### 🧠 Logical learners - Compare-and-contrast structure present; improve with a results table of rubric scores. #### 🧑‍🤝‍🧑 Social learners - None evident; improve with a community challenge to reproduce the test. #### 🧘‍♀️ Solitary learners - Self-serve CTA present; improve with a self-paced tutorial. #### 🌿 Naturalistic learners - Not applicable to this source — 44-second demo, no ecosystem dimension. ### 📊 Accessibility Assessment #### Screen reader semantics - Not assessable from transcript; ensure the hosting page has headings and a descriptive video title. #### Keyboard navigation - Not applicable to this source — player a11y depends on the YouTube/embed context. #### Contrast and readability - On-screen text contrast not capturable; verify any captions/labels meet 4.5:1. #### Text resizing and reflow - Not applicable to this source — video media, no reflowable text. #### Media and captions - Auto-transcript exists with "[music]" cues; improve with human-verified captions, a downloadable transcript, and audio description of the card. #### Forms and interactions - Not applicable to this source — no forms in a promo clip. #### Standards reference - WCAG 2.2 AA gaps: 1.2.2 Captions, 1.2.5 Audio Description, 1.4.3 Contrast (on-screen text), 1.4.2 Audio Control (music bed). ### 🌍 DEIB Assessment #### Cultural breadth - Not applicable to this source — single generic example, no cultural specificity. #### Inclusive language - Neutral wording present; improve by defining jargon (MCP) for global audiences. #### Neurodiversity support - Short, chunked structure present; improve by reducing the music bed. #### Representation - Not applicable to this source — no people depicted. #### Psychological safety - Critique is product-level not personal; improve by substantiating comparative claims. ### ✅ Logical Validity #### Strong reasoning - Inductive/causal core (~[00:15]–[00:30]): holding prompt and requirements constant while varying the MCP is a sound controlled-comparison instinct — if the inputs truly were identical, output differences plausibly trace to the tools. Clarify by publishing the prompt, runs, and artifacts. #### Fallacies - Hasty generalization: one card, one (apparent) trial → broad claim about Penpot's superiority. Fix: multiple prompts and repeated runs. - Vendor bias / appeal to self-interest: Penpot authors a benchmark that Penpot wins ("That's the real power of Penpot's design as code approach"). Fix: independent replication. - Unfalsifiable assertion: "broken layouts" / "clean, structured" lack a stated rubric. Fix: define and show the scoring. #### Tone of voice - Confident, promotional, and persuasive — e.g., "That's the real power of Penpot's design as code approach" and the closing "try it now." Comparative and slightly dismissive of competitors ("broken layouts and elements you can't reuse"). ### 🛡️ DARVO Analysis - Not applicable to this source — a promotional product comparison with no accusation, denial, or victim/offender dynamic to analyze. ## 🎯 Conclusion - Bottom line: Penpot's clip asserts that, on one identical "real estate card" prompt, its MCP produces structured, reusable, build-ready output while Figma's and others' break — credit given to its design-as-code model. - Next steps for readers: treat it as a positioning claim, not evidence. Reproduce the test yourself across several prompts and tools, score the artifacts against a fixed rubric, and judge whether the design-as-code advantage holds before adopting. ## 🔄 Refactor Appendix — Penpot MCP vs Figma MCP: The Real Estate Card Test > Density: 2–5 Literature atoms (H3), 0–3 Permanent candidates (H4). > Defaults: 3 Literature, 1 Permanent. ### 📚 Literature Atoms (H3) #### [H1] Identical-prompt test pits MCP servers on a card > [!quote] ID:rw_clip01 > Same requirements, same [music] complex prompt. Figma and the other competitors produced broken layouts and elements you can't reuse. **Context & use**: - ~[00:10]–[00:18] of the clip. - Captures the controlled-comparison setup and the asserted competitor failure mode; the basis for any reproduction attempt. **Tags**: #xref **Highlight**: [view source](https://www.youtube.com/watch?v=_yNzqE0zktQ?t=10)  #### [H2] Design-as-code gives agents build-ready context > [!quote] ID:rw_clip02 > That's the real power of Penpot's [music] design as code approach. AI agents get the rich context they need to read [music] and write design files you can actually build on. **Context & use**: - ~[00:30]–[00:42], the thesis line. - States the mechanism Penpot credits for reusable, build-ready output — the claim worth independently testing. **Tags**: #xref #articleseed **Highlight**: [view source](https://www.youtube.com/watch?v=_yNzqE0zktQ?t=30)  ### 🧠 Permanent Candidates (H4) #### [P1] Agent-readable design files beat opaque canvases for AI output **Claim** (one sentence, Courtney's voice): The structure a design tool exposes to an agent sets the ceiling on how reusable and build-ready AI-generated design output can be. **Evidence pointer**: [[#H2]] **Scope & conditions**: Holds when the agent both reads and writes the file format; weakens for simple single-state components where any tool converges. Vendor-sourced, so treat as hypothesis until independently reproduced. **Links**: - [[Design systems as data, not pixels]] — because extends - [[Model Context Protocol]] — because applies-in agent tooling - [[Vendor benchmark skepticism]] — because contrasts on evidence quality  ### ✏️ Fleeting Queue - [F1] Reproduce the real-estate-card prompt across Penpot MCP, Figma MCP, and one more tool; capture artifacts. — https://www.youtube.com/watch?v=_yNzqE0zktQ #fleeting #inbox - [F2] Open question: what rubric distinguishes "broken" from "clean, structured" layouts here? #fleeting #inbox ### → Things 3 (max 2 actions) - [ ] Run a blind 3-tool MCP card-generation comparison and log results — design tooling eval #things  📄 **Full text:** [[Full Document Contents/Articles/Penpot MCP vs Figma McP The Real Estate Card Test.md|Penpot MCP vs Figma McP: The Real Estate Card Test by youtube.com]] ## Highlights - We compared Penpot MCP against Figma's and others through a simple excercise Designing a real estate property card. Same requirements, same complex prompt. Figma and the other competitors produced broken layouts and elements you can't reuse Penpot MCP delivered a clean, structured design, built on top of flexible layouts and reusable components. That's thereal power of Penpot's Design as Code approach AI agents get ([View Highlight](https://read.readwise.io/read/01kwc9eshf4heg6j7efxf1pr22)) - Note: The demo claim: same prompt, Figma MCP produced broken non-reusable layouts while Penpot's "design as code" MCP gave clean structured components — open API gives AI agents richer context. - Tags: penpot, mcp, atom/literature/h1