Intro to AI workflows Penpot Hands-On Demo

Intro to AI workflows | Penpot Hands-On Demo 🔗 **Source:** [Intro to AI workflows | Penpot Hands-On Demo](https://www.youtube.com/watch?v=F_T5IX3907Q) > [!note]+ Document Notes > tags: #ai-workflows #design-tools #MCP #penpot #design-systems > author: Penpot > source: YouTube > reference: https://www.youtube.com/watch?v=F_T5IX3907Q > date created: 2025-01-11 12:00 > > # 🏷️ Title: Intro to AI workflows | Penpot Hands-On Demo >  ## 🧰 Action Inbox - [H1] Set up Penpot MCP with OpenRouter and Open Code client — complete workflow demo #ai-workflows - [H2] Create design tokens from existing designs using AI agents — automated token generation #design-systems - [H3] Generate responsive HTML/CSS from Penpot designs — design-to-code transformation #web-development ## 🧭 Table of Contents - [[#📝 Summary]] - [[#📖 Main Content]] - [[#🗒️ Notes]] - [[#📚 References]] - [[#🗣️ Paraphrase]] - [[#📰 Newsletter]] - [[#✅ Action Items]] - [[#🧪 Hypotheses]] - [[#📊 Methodology]] - [[#❓ Questions]] - [[#🔮 Future Research]] - [[#💡 Implications]] - [[#🧠 Learning Styles Assessment]] - [[#📊 Accessibility Assessment]] - [[#🌍 DEIB Assessment]] - [[#✅ Logical Validity]] - [[#🛡️ DARVO Analysis]] - [[#🎯 Conclusion]] ### 🔗 References - [Penpot User Guide](https://help.penpot.app/) - [OpenRouter](https://openrouter.ai/) - [Open Code](https://github.com/codeiumdev/open-code) ## 📝 Summary - Live demonstration of Penpot's Model Context Protocol (MCP) integration for AI-powered design workflows - Juan from Penpot team shows how to connect AI agents to read and modify Penpot files directly - Covers setup process, practical use cases, best practices, and common pitfalls - Emphasizes treating AI as a collaborator rather than magic, requiring structured prompts and iteration - Bottom line: MCP enables professional designers to automate repetitive tasks while maintaining design quality and consistency ## 📖 Main Content Model Context Protocol (MCP) allows AI agents to directly interact with Penpot design files, reading elements, assets, and tokens while creating new design artifacts. Unlike experimental AI design tools, Penpot MCP maintains professional design standards by leveraging structured design systems and semantic markup. The integration works with any MCP-compatible client and LLM, providing flexibility for different workflows and budgets. Success requires well-organized design files, clear prompts, and iterative refinement rather than expecting perfect one-shot results. ## 🗒️ Notes #### ⏱️ [00:00](https://youtu.be/F_T5IX3907Q?t=0) — [H1] Introduction and Live Demo Setup - Key idea: Live hands-on session demonstrating AI workflows in Penpot - Evidence: "These are live sessions where we get practical with Penpot, the open source design platform" #### ⏱️ [02:45](https://youtu.be/F_T5IX3907Q?t=165) — [H2] What Are AI Workflows? - Key idea: AI workflows connect LLM agents to design tools for automated tasks - Evidence: "AI workflows are essentially structured processes we can use in our work that use AI" #### ⏱️ [05:30](https://youtu.be/F_T5IX3907Q?t=330) — [H1] Color Token Update Demo - Key idea: Agent successfully updates design tokens based on hex code prompt - Evidence: Live demonstration showing token panel updates and theme changes #### ⏱️ [08:15](https://youtu.be/F_T5IX3907Q?t=495) — [H2] Understanding LLMs and Tokens - Key idea: Tokens represent computational work and correlate to cost and energy usage - Evidence: "A token is a unit of work that's done by an LLM and it roughly represents about a character of text" #### ⏱️ [11:20](https://youtu.be/F_T5IX3907Q?t=680) — [H1] Problems AI Workflows Solve - Key idea: Automate repetitive tasks and bridge designer-developer translation gap - Evidence: "Designers work visually and developers work in code. And a lot of time is spent translating between of worlds" #### ⏱️ [15:45](https://youtu.be/F_T5IX3907Q?t=945) — [H1] MCP Setup Process - Key idea: Complete workflow from API keys to working agent connection - Evidence: Step-by-step demo showing OpenRouter API, Open Code client, and config file setup #### ⏱️ [22:10](https://youtu.be/F_T5IX3907Q?t=1330) — [H2] Model Selection Recommendations - Key idea: Stronger models perform better for complex multi-step reasoning tasks - Evidence: "Model quality does matter more than people sometimes expect" #### ⏱️ [25:30](https://youtu.be/F_T5IX3907Q?t=1530) — [H1] Design Token Creation Demo - Key idea: Agent automatically creates semantic design tokens from existing design - Evidence: Live demo showing token generation with proper naming conventions #### ⏱️ [32:15](https://youtu.be/F_T5IX3907Q?t=1935) — [H1] Dark Mode Generation - Key idea: Agent creates cohesive dark theme based on design system patterns - Evidence: Demo showing Chakra UI-inspired dark palette generation #### ⏱️ [35:45](https://youtu.be/F_T5IX3907Q?t=2145) — [H1] Design to Code Transformation - Key idea: Agent generates pixel-perfect responsive HTML/CSS from Penpot designs - Evidence: "Completely navigable, clickable and it respects the design like pixel perfect" #### ⏱️ [38:20](https://youtu.be/F_T5IX3907Q?t=2300) — [H2] Prompting Best Practices - Key idea: Treat AI as collaborator, not tool - reduce ambiguity and iterate - Evidence: "Good prompting is you are not giving instructions to a tool. You are briefing a collaborator" #### ⏱️ [41:50](https://youtu.be/F_T5IX3907Q?t=2510) — [H2] Token-Aware Prompting - Key idea: Shorter, structured prompts perform better and cost less - Evidence: "Tokens are like the new Bitcoin... shorter and more structured prompts tend to perform better" #### ⏱️ [45:30](https://youtu.be/F_T5IX3907Q?t=2730) — [H2] Common Pitfalls - Key idea: Expecting magic instead of understanding tool constraints leads to poor results - Evidence: "Not understanding what MCP actually expose. People like magic instead of a tool interface" #### ⏱️ [50:15](https://youtu.be/F_T5IX3907Q?t=3015) — [H3] File Organization Importance - Key idea: Well-structured Penpot files with clear hierarchy enable better AI outputs - Evidence: "Use clear hierarchy. Consistent naming and reusable components so the AI can understand relationships" ## 📚 References - [Penpot User Guide](https://help.penpot.app/) - [OpenRouter API](https://openrouter.ai/) - [Open Code Client](https://github.com/codeiumdev/open-code) - [Penpot MCP Documentation](https://help.penpot.app/technical-guide/developer/mcp/) ## 🗣️ Paraphrase - Penpot's MCP integration allows AI agents to directly read and modify design files, enabling automation of repetitive design tasks while maintaining professional standards - Setting up MCP requires API keys from model providers, an MCP-compatible client, and proper configuration files - but involves minimal actual coding - Success depends on treating AI as a collaborative partner rather than magic, using structured prompts, iterating on results, and maintaining well-organized design files ## 📰 Newsletter 🎨 **AI Meets Professional Design: Penpot's MCP Integration** Transform your design workflow with Penpot's Model Context Protocol integration! This powerful feature connects AI agents directly to your design files, automating token creation, generating responsive code, and maintaining design system consistency. **Key Benefits:** - Automate repetitive design token work - Generate pixel-perfect HTML/CSS from designs - Bridge the designer-developer gap seamlessly - Works with any LLM and MCP-compatible client **Getting Started:** Set up takes just minutes with OpenRouter and Open Code. The secret? Treat AI as a collaborator, not magic - structured files and clear prompts yield professional results. **Resources:** [Penpot User Guide](https://help.penpot.app/), [MCP Documentation](https://help.penpot.app/technical-guide/developer/mcp/), [Community Forum](https://community.penpot.app/) ## ✅ Action Items #### DevRel - Developer education: Create MCP setup workshops with live coding sessions - Documentation: Expand best practices guides for prompting and file organization - Community demos: Regular hands-on sessions showcasing AI workflow patterns #### WordPress - Design: Explore MCP integration patterns for WordPress theme development workflows - Documentation: Create guides connecting Penpot MCP to WordPress development processes #### Community - Contributors: Develop example prompts and skills repository for common design tasks - Maintainers: Create governance templates for AI workflow adoption in design teams ## 🧪 Hypotheses - Teams using structured design systems will achieve 3x better results with MCP than ad-hoc design approaches - Token-aware prompting techniques reduce AI costs by 40-60% while improving output quality - Iterative AI workflows produce more professional results than single-shot generation attempts - Well-organized Penpot files enable more accurate design-to-code transformations ### 📊 Methodology - A/B test structured vs unstructured design files with identical AI prompts measuring output quality - Cost analysis comparing verbose vs concise prompting strategies across different LLMs - User studies tracking iteration patterns and satisfaction with AI-generated design artifacts ### ❓ Questions - How do different LLM architectures perform with Penpot's semantic design data? - What file organization patterns produce the most reliable AI workflow outcomes? - How can teams measure ROI of AI workflow adoption in design processes? ### 🔮 Future Research - Integration patterns with other design tools through MCP standard - Advanced prompt engineering techniques specific to design workflows - Governance frameworks for AI-augmented design team collaboration ### 💡 Implications - Practice: Designers must invest in file organization and prompt crafting skills alongside traditional design abilities - Education: Design curricula should include AI collaboration techniques and structured design thinking - Security: Teams need governance around AI model selection and data handling for design assets - Funding: AI workflow adoption requires budget allocation for tokens, training, and tool integration ### 🧠 Learning Styles Assessment Reading level estimate: 10-12 (Technical content with design industry terminology) #### 👀 Visual learners - Present: Multiple screen recordings showing step-by-step MCP setup and AI interactions - Improve: Architecture diagrams showing data flow between Penpot, MCP, and LLMs #### 🔊 Aural learners - Present: Live demonstration with verbal explanation of each step - Improve: Audio-only version highlighting key concepts and best practices #### 🗣️ Verbal learners - Present: Clear definitions of technical terms (MCP, LLM, tokens), analogies comparing AI to collaborators - Improve: Glossary of AI workflow terminology with pronunciation guides #### 🧩 Kinesthetic learners - Present: Complete hands-on setup tutorial with downloadable config files - Improve: Interactive checklist for setup verification and troubleshooting steps #### 🧠 Logical learners - Present: Structured best practices frameworks and decision trees for model selection - Improve: Cost calculation formulas and performance benchmarking rubrics #### 🧑‍🤝‍🧑 Social learners - Present: Live Q&A session with community interaction and team member responses - Improve: Collaborative skill-sharing repository and peer mentoring programs #### 🧘‍♀️ Solitary learners - Present: Self-paced tutorial with pause points for experimentation - Improve: Reflection prompts on workflow customization and individual use cases #### 🌿 Naturalistic learners - Present: Discussion of energy costs and computational sustainability - Improve: Environmental impact comparisons between different AI workflow approaches ### 📊 Accessibility Assessment #### Screen reader semantics - Present: Proper heading structure and descriptive content for video demonstrations - Improve: Detailed alt text for visual elements and code examples #### Keyboard navigation - Present: Focus management in demonstration interfaces - Improve: Keyboard-only workflow documentation for setup processes #### Contrast and readability - Present: High contrast in demonstration interfaces and slides - Improve: Dark mode alternatives for all documentation #### Text resizing and reflow - Present: Responsive design in documentation - Improve: Ensure code blocks remain readable at 200% zoom #### Media and captions - Present: Live captions during demonstration - Improve: Professional post-production captions with technical term verification #### Forms and interactions - Present: Clear labeling in configuration examples - Improve: Error handling examples for common setup failures ### 🌍 DEIB Assessment #### Cultural breadth - Present: Global accessibility through multiple platform streaming - Improve: Multi-language setup documentation and localized examples #### Inclusive language - Present: Gender-neutral technical explanations and professional tone - Improve: Plain language summaries alongside technical details #### Neurodiversity support - Present: Structured presentation with clear section breaks - Improve: Content warnings for rapidly changing screen content #### Representation - Present: Diverse team voices in Q&A responses - Improve: Multiple workflow examples reflecting different use cases and team structures #### Psychological safety - Present: Encouraging tone acknowledging learning curve - Improve: Explicit statements about experimentation and iteration being normal ### ✅ Logical Validity #### Strong reasoning - Deductive strength: Clear logical progression from MCP capabilities to workflow benefits - Inductive strength: Multiple examples supporting claims about AI workflow effectiveness - Causal reasoning: Direct demonstration of cause-effect relationships in token generation - Analogical strength: Effective comparison of AI to human collaborators #### Fallacies - Appeal to novelty: Some emphasis on AI being cutting-edge without full context of limitations - Hasty generalization: Limited examples used to support broad workflow adoption claims #### Tone of voice - Overall tone: Professional yet accessible, emphasizing practical application over hype ### 🛡️ DARVO Analysis - Deny: No problematic denial patterns observed - Attack: No attacks on critics or alternative approaches - Reverse victim/offender: No victim/offender reversals present - Emotional cues: Appropriate enthusiasm for technology balanced with realistic expectations ## 🎯 Conclusion Penpot's MCP integration represents a mature approach to AI-augmented design workflows, emphasizing professional standards and tool understanding over magical thinking. Success requires investment in structured design practices, prompt crafting skills, and iterative workflows. The technology bridges designer-developer gaps while maintaining the design quality standards expected in professional environments. Teams adopting these workflows should focus on file organization, clear communication patterns with AI agents, and understanding the constraints and capabilities of the underlying tools. ## 🧱 Refactor Appendix ### 📚 Literature Split Pad ### [H1] MCP enables direct AI agent interaction with design files > [!quote] [Intro to AI workflows | Penpot Hands-On Demo](https://www.youtube.com/watch?v=F_T5IX3907Q) by Penpot via YouTube. Published 2024. Accessed 2025-01-11. > "MCP server is a tool that exposes your Penpot file to your agent" Demonstrates technical architecture enabling AI workflow automation in professional design tools. [view highlight](https://youtu.be/F_T5IX3907Q?t=495#H1) #xref #articleseed ID:rw_mcp_architecture ### [H2] Token consumption correlates to computational cost and energy usage > [!quote] [Intro to AI workflows | Penpot Hands-On Demo](https://www.youtube.com/watch?v=F_T5IX3907Q) > "Tokens are like the new Bitcoin... very expensive token heavy generations, they're going to also be very energy intensive" --- ## Full Transcript [00:55] [music] [01:00] [music] [01:08] >> Hello my friends and welcome to another [01:11] hands-on session. These are live [01:14] sessions where we get practical with [01:16] Penpot, the open source design platform. [01:20] And before I forget, you can keep up [01:21] with all of our live streams and new [01:23] videos by following us wherever you are [01:26] watching this. And feel free to give me [01:29] a little thumbs up of encouragement. [01:31] Little like as well. [01:33] As we are live, we will be taking [01:35] questions throughout. Ask them in the [01:37] chat, wherever you're watching this. The [01:39] team are also in the chat and Juan and I [01:42] will try to answer your questions live [01:44] too. So, let's see who's in the chat [01:47] already. [01:49] Hi, I I'm going to try and read these [01:51] names now. [01:52] >> [laughter] [01:52] >> Hi Sandeep. [01:54] Hi Manuel. [01:55] Oh, hi Pablo. Hi Maro. Hi Hi Elena. [02:00] And of course, you can see him here [02:02] already. We have another special guest [02:04] this time and you know him from so many [02:08] fabulous Penpot videos. He's product [02:11] designer at Penpot and he is the MCPMVP. [02:16] Please welcome Juan. [02:18] And it's our first time recording [02:20] together, so I can't wait to tap your [02:22] brain. This is going to be really fun. [02:24] And I don't know, maybe before we jump [02:26] into it, I should ask you, what made you [02:29] into such an AI workflow pioneer in the [02:32] first place? [02:34] Well, I wouldn't frame it as a pioneer. [02:37] >> [laughter] [02:38] >> Well, you've really been leading the way [02:40] at Penpot. That's for sure. [02:41] >> Yeah, it was more about, you know, [02:44] solving practical problems. So, at [02:47] Penpot, we've been researching the best [02:49] way to [02:51] integrate AI into the design workflow [02:54] for a long time and we have explored [02:58] many options, really. So, and we [03:01] generally conclude that the best [03:02] approach is to provide [03:04] AI agents with the best possible visual [03:07] and design, very important, context for [03:11] from Penpot. So, yeah. [03:13] That's our That's why I decided to jump [03:16] in. You've been working out all the [03:18] secret sauce. [03:20] Well, I think maybe that's a good time [03:22] for us to jump in and start talking [03:25] about what actually are [03:28] AI workflows? [03:39] So, I'm going to walk you through a [03:40] little example I made earlier. [03:43] That is the secret of this hands-on is [03:46] that I did have to pre-record [03:48] some of the demos because, well, if [03:50] you've ever done any work with AI, you [03:53] know that things can happen in the [03:54] middle that you don't want them to. And [03:56] so, I just wanted to make sure that we [03:58] ran to time and we sped up the very slow [04:00] thinking bits. [04:02] So, let's have a look at this Penpot [04:03] design I have. It might look familiar to [04:05] some of you already. [04:07] And I don't really like the primary [04:10] accent color in this design. [04:12] So, here are the tokens that we've [04:14] already got for the palette. [04:17] And I'm going to write a prompt for the [04:20] agent. So, my prompt is basically saying [04:24] giving it a role and saying, "Can you [04:25] update the color tokens to match this [04:28] hex code that's a kind of teeny bluey [04:30] greeny color?" So, let's do this thing. [04:34] Let's go. [04:34] >> So, first what it's going to do is it's [04:36] going to review the file to understand [04:38] it. [04:40] And then it proposes its solution. [04:44] Makes a sort of a whole bunch of updates [04:46] it reckons. This is what I'm going to do [04:47] for each of the design tokens and how [04:49] I'm going to update it. And then it asks [04:51] me, "Should I proceed?" So, I say, [04:54] "Yes." I type very slowly, "Proceed." [04:57] And it gets going. [04:59] And it updates the tokens just like [05:01] that. You can see them over here in the [05:04] primary design tokens panel section that [05:07] they've updated. [05:09] The funny thing is it hasn't quite [05:10] updated the whole design yet and I just [05:12] need to change the theme. [05:16] So, that's what it [05:17] updated. Oh, it's gone back and it's [05:19] going to bubble through. [05:23] Oh, it's gone back to the [05:25] This is the downside of using the videos [05:27] is that it didn't [05:28] but it's uh [05:30] reset to the first one. Okay, well, what [05:32] it did is it [05:34] All then I needed to do was just reset [05:35] the theme to make sure the changes [05:37] bubble through all of the tokens. And I [05:39] had that tail update. [05:42] So, what actually are AI workflows? What [05:45] is the AI we're talking about here? [05:48] Mostly in the tech industry lately, [05:51] we've been using AI, artificial [05:53] intelligence, as kind of a short hand [05:56] for LLMs, which are large language [05:59] models. An LLM is a type of intelligence [06:03] that's trained on huge amounts of data. [06:06] That's the large part. Including much of [06:09] the web, a lot of unlicensed material as [06:12] well and incidentally my book. So, yes, [06:15] it was under copyright and no, they did [06:16] not ask for permission, but it got [06:19] sucked up anyway. [06:20] And the LLM's aim is to understand and [06:24] generate human language. So, that makes [06:27] it more able to perform tasks, [06:29] particularly tasks based on pattern [06:32] matching. [06:33] So, then we feed it prompts. So, what's [06:36] a prompt? It's the input that we give to [06:40] the AI, like the task we set the AI. So, [06:43] you've probably noticed search engines [06:45] like this using your search queries as [06:47] really basic prompts, possibly even [06:50] though you didn't necessarily ask for [06:52] it. [06:53] And an agent acts on behalf of an LLM. [06:57] So, it doesn't just respond to prompts [07:00] like a chatbot kind of situation. It can [07:02] also plan and analyze and execute tasks. [07:06] And so, when we're talking about AI [07:08] workflows, we're talking about [07:09] connecting an agent to Penpot. It can [07:13] read the new elements, assets and tokens [07:16] in the Penpot file and it can create new [07:18] elements and assets and tokens in your [07:20] Penpot file. [07:23] Like that. [07:25] And it can work out the context for your [07:28] design using its training data from [07:31] around the web or any specific [07:33] references you provide. And so, AI [07:35] workflows are essentially structured [07:37] processes we can use in our work that [07:40] use AI. [07:42] Then there's a thing called tokens, [07:44] which is kind of important because it [07:46] often equates to a lot of money. A token [07:49] is a unit of work that's done by an LLM [07:53] and it roughly represents about a [07:54] character of text. So, that's a lot of [07:58] text going in and out of [08:01] in part of your dialogue with the LLM. [08:03] And most LLMs will charge by that token [08:07] and a token is also quite a reasonable [08:09] indicator of computational effort, which [08:13] it also correlates to some degree to its [08:16] energy use as well. So, if you think [08:19] very expensive token heavy generations, [08:23] they're going to also be very energy [08:25] intensive as well. [08:27] And what is an MCP? Well, it stands for [08:30] model context protocol. So, it's a [08:33] protocol or a standard format for [08:36] providing context to the model, as in [08:39] the large language model. [08:42] And the MCP server is a tool that [08:44] exposes your Penpot file to your agent. [08:48] So, [08:50] after all of that, [08:53] >> [laughter] [08:53] >> Juan, And yeah. [08:54] >> what problems do AI workflows actually [08:57] solve for designers and developers? [09:01] Yeah, first of all, don't be aware about [09:03] all this stuff. It can sounds like a bit [09:05] complex, but it is and okay. So, the [09:08] first thing that [09:11] and the main thing that [09:13] they solve is that you can automate [09:17] repetitive task. Of course, you can [09:19] generate designs, but the main thing is, [09:22] you know, designers work visually and [09:24] developers work in code. [09:26] And a lot of time is spent translating [09:29] between of worlds. So, AI workflows help [09:32] to reduce that gap, right? So, as I [09:34] said, [09:36] they are really useful for automating [09:39] repetitive task. [09:41] Also, when, you know, design task are [09:43] also transform design to code, code to [09:45] design. [09:47] You can do multiple direction using MCP [09:50] in Penpot and also extracting structure [09:53] and meaning from design files, which is [09:55] really important and is key [09:57] uh because Penpot allow you to [10:01] uh go very deep in the in the data the [10:04] the same data that the the Penpot file [10:07] uh has and also generating code or [10:09] documentation from design data. So, but [10:13] in my opinion [10:14] the key shift is like instead of [10:17] manually navigating tools, you can [10:19] interact with your design system through [10:22] language and workflows, which is [10:25] amazing. [10:28] Yeah, you're already creating so much [10:29] context for your design work using [10:31] design systems that it's really like it [10:34] makes sense that you can pass that on to [10:36] another platform as well. [10:38] Absolutely. [10:40] Great. [10:41] So, [10:42] how Penpot MCP works is I'm going to [10:46] show you. [10:48] So, uh [10:49] let's [10:50] jump into this bit. [10:53] So, I'm going to show you exactly start [10:56] to finish how I set it up on my machine [10:59] and this is using remote [11:02] Penpots, which you can use today from [11:05] design.penpots.app [11:07] and I'm using an AI client that is um [11:10] it's running locally on my machine and [11:13] the LLM is elsewhere and I'll explain [11:15] that in a moment. So, [11:18] first of all, what you need is an MCP [11:21] key. So, first of all, we're checking [11:24] the MCP server is disabled and then I go [11:28] to my account [11:30] and I'm going to go to integrations [11:33] and I'm going to turn on the MCP server. [11:35] And this will give me the option to [11:37] generate [11:38] an MCP key [11:41] and oh [11:43] Oh, come on, video. [11:46] I'm having an absolute mare with these [11:48] today. Okay. [11:49] And uh it I've set it for uh [11:53] unlimited duration and then you can copy [11:55] and paste that key and it also gives you [11:58] the option to [12:00] then you get this MCP server. Then I'm [12:02] going to go to open router, which we're [12:04] going to use to provide our models and [12:06] I'm going to create an API key with [12:08] them. Now, it's very easy to sign up [12:12] with OpenRouter and you get a free [12:14] account with them and you get your API [12:17] key. That's the they give you the option [12:20] to set that up as soon as you start up [12:23] and you can create a key. [12:25] And [12:26] then what you will probably want to do [12:29] is go and get some credits. So, there's [12:32] the option here and you can add credits. [12:35] I'm not going to show you how my credit [12:37] card process works. But many of the LLMs [12:41] the models are not free and so you want [12:43] to kind of set some sort of uh limit for [12:46] how much money you want to spend. Don't [12:48] do auto top up. That will get expensive [12:50] really quickly. And you can just add [12:53] maybe $10 or something to start with to [12:55] start yourself off. [12:57] The next thing we want is a client. So, [13:00] this is what we're going to use to [13:02] connect uh Penpots and the LLMs through [13:06] OpenRouter. And so for this I've picked [13:09] Open Code. I've tried to go with mostly [13:12] open source free and open tools as much [13:14] as possible. [13:16] And Open Code is quite straightforward [13:18] to use and I just downloaded the desktop [13:20] version that they've got. And even [13:22] though it's called code, you don't need [13:24] to be intimidated if you're not feeling [13:26] very technically minded. There's not [13:28] very much code involved in this process. [13:30] And the first thing I'm going to do is [13:32] I'm going to go into their menu [13:34] and I'm going to [13:36] uh not open a project yet. I'm going to [13:38] go into settings and providers and going [13:42] to scroll down [13:44] and find that [13:47] OpenRouter provider and connect. And all [13:50] I need to paste in there is the API key [13:52] that I got from OpenRouter. I have [13:54] deleted these API keys, so don't any of [13:56] you try to use them in case you didn't [13:58] see them. [13:59] Um they're already not available. And so [14:02] now that's connected to Open Code. [14:06] So, now I'm going to open an empty [14:08] project that I've got on my machine, [14:09] just an empty folder on my machine in [14:12] Open Code. [14:15] And so that's just an empty folder [14:17] called MCP demo. You see it's all eager [14:20] and ready to go. [14:23] Next, I'm going to go back to Penpots [14:26] and I'm going to get that MCP code [14:31] and I'm going to add it to a config [14:34] file. [14:36] So, I'm going to go just into a text [14:38] editor code editor and create a file [14:40] called open code.jsonc. [14:44] That is a config file in a format that [14:47] Open Code likes [14:48] and I'm going to paste in my MCP code [14:52] just like that and wrap it [14:55] so that we can [14:56] all read the key that I have already [14:58] deleted. [15:01] And [15:02] then uh once we've done that, we want to [15:05] actually add a few more specifics to the [15:07] file. This is quite handy information if [15:09] you want to get started with Open Code. [15:12] And that is just that it wants a little [15:15] bit more config information. [15:18] So, we're going to add in a schema [15:21] uh we add in type remote and enabled [15:24] true inside the Penpot section. [15:27] And once we have got that, [15:30] I'm just going to format the file. So, [15:33] that's just making sure all the [15:34] indentation is okay for a JSON file. Uh [15:37] so, every nested bracket every time [15:39] something's nested, it's indented uh [15:42] because it will make a fuss if that [15:44] isn't right like that as well. [15:48] And then I'm going to reload Open Code. [15:51] It often likes a reload or a restart. If [15:54] I go to the status, I can see the Penpot [15:56] MCP is connected and that's a little [15:59] green status icon alongside it. [16:02] So, once I have that, I can go back into [16:06] Penpots [16:08] and I can close the integration section. [16:11] I need to actually open up a file. So, [16:13] I'm going to go into my design mocks [16:15] file [16:16] and I'm going to go into the menu [16:20] and [16:22] I'm going to come on, video. [16:27] Go into the menu [16:29] and go to MCP server and check that it [16:33] is enabled. So, it's enabled. [16:35] Then I can go into the Open Code and I [16:39] can in planning mode, so I don't want it [16:40] to do anything just yet. I want to check [16:43] it's enabled in the file. [16:46] So, the way that I'm going to do that is [16:49] just by [16:51] choosing I can choose a any model I want [16:53] as well. So, that's all the OpenRouter [16:56] options, loads and loads of different [16:57] LLMs to choose from. Just going to go [17:00] Claude cuz it's obvious and easy. [17:04] And then I can type in my prompt, which [17:06] I'm just going to ask and I found this [17:07] is quite a good way to get started. What [17:09] is the name of my current open Penpot [17:12] file? So, I'm just checking that [17:13] everything's working as expected. [17:16] And this is actually as it happened in [17:17] real time. I didn't speed it up or [17:19] anything. [17:20] Your current open Penpot file name is [17:23] design mocks. And so that is how we get [17:25] from [17:26] starting up with just an MCP key [17:29] and there is very little code involved. [17:32] It's really just a bit of copy pasting [17:34] and formatting. [17:36] Um and that is our result. [17:39] Yeah, that's the hello world test. [17:43] It it it it very much is that. Um I [17:45] wanted to um [17:47] jump back to some questions that I had [17:49] for you um [17:51] Juan, about the LLMs cuz I was talking [17:53] about using OpenRouter [17:56] for um because the benefit of that I [17:58] think actually you recommended [18:00] OpenRouter to me. Um is that it can [18:03] automatically choose between different [18:05] models for you [18:07] or you can choose the model that you [18:09] want to use. So, which LLMs have you [18:12] found most successful with Penpot MCP in [18:15] your experience? [18:17] Uh yeah, OpenRouter is a a really good [18:19] provider. [18:20] Um first of all, as we can saw, MCP [18:23] works with uh [18:25] any [18:27] MCP compatible client. This is key [18:29] because uh you can plug in different [18:32] models depending on your needs. [18:34] Uh that said, model quality does matter [18:38] more than people sometimes expect. [18:41] Uh for best result, you should use a [18:43] strong model with high quality inference [18:46] setup, which means that the more [18:49] This is yeah, this is a bit complex to [18:51] explain, but let's say that the more [18:54] complex the task, especially uh anything [18:57] involving I don't know, [18:58] multi-step uh reasoning or design to [19:02] code transformation, for example, the [19:04] more the model will directly impact the [19:07] quality of the output. And also, if your [19:10] workflow involves like visual [19:11] understanding [19:13] using a vision language model, now [19:16] it's not like a proper model because all [19:19] the frontier models are multi [19:21] multi-model. [19:23] So, one of these skills of the model [19:26] uh needs to be a vision language [19:29] understanding, a VLM, is essential since [19:32] it allows the AI to interpret design [19:35] elements directly. So, [19:38] in practice, a strong frontier models [19:40] perform significantly better for complex [19:43] workflow and simpler models can still [19:47] work for repetitive or well-defined [19:49] task. What matter most is how well the [19:52] models follows instruction which [19:56] really good providing it providing [19:58] instructions and how effectively it [20:00] interacts with the NCP tools. [20:02] That's the key. [20:03] >> And that's one of the things that's [20:04] worth emphasizing is that Penpot NCP is [20:08] totally agnostic of whatever model and [20:12] whatever client you want to use. I just [20:15] used open router, open code, Claude in [20:19] this instance, but you could use [20:21] anything you want. You could run it with [20:23] a local model on your device if you [20:25] wanted. You [20:27] like it's all possible and Penpot NCP [20:30] does not penalize you for choosing one [20:32] way or the other. [20:34] Exactly. Um yeah, [20:37] as you are saying the the [20:40] the difference between local version of [20:43] the NCP and the remote version. [20:45] You just anticipated my question. Yeah, [20:48] it is because yeah, [20:50] >> that yeah, [20:52] Sorry, but yeah, the local NCP server [20:56] runs on your machine and connects [20:58] directly to the SAS version of Penpot or [21:01] but also with your with your local [21:02] Penpot instance as you said. [21:04] Is [21:05] reading your file system. This is the [21:08] the key benefit and the remote NCP [21:10] server not but is hosted on Penpot [21:12] servers elsewhere [21:14] and connects to Penpot over the network. [21:19] Great. [21:20] So, I think this is a really good time [21:23] to say to people, [21:24] if you want to ask questions throughout [21:26] the stream, you have any niggling [21:28] questions or anything that hasn't [21:30] already been answered [21:32] >> [laughter] [21:32] >> in the stream by Pablo, then [21:35] jump in to whatever platform that you [21:37] are watching this on and ask us away. We [21:41] are here live right now and if we don't [21:44] get to your question live, we will also [21:46] try to answer it later on down the line. [21:49] Uh great. Here's a good question um from [21:52] Mana Marketing. [21:54] Can you use skills or markdown files to [21:57] prepare the LLM for its Penpot work? [22:01] That's a good question for you, Juan. I [22:02] know you've been diving into skills. [22:05] Yes. [22:06] Um [22:08] Yeah, of course you can because again, [22:11] it depends on your ticket stack. So, for [22:14] the vast majority of task, Penpot [22:17] provides enough context to the model to [22:20] successfully complete the task. So, [22:23] yeah, you need to perform. But of [22:25] course, you can create your own skills [22:27] and apply them to your workflows if that [22:29] gives you [22:31] more advantages. [22:32] So, yeah, I I did. I create myself. I [22:36] have a repo with my own skills. I can [22:38] share with you you want. [22:40] But they are really easy to create [22:42] because yeah, created them is very [22:45] simple thanks to the to the Penpot [22:48] plugin API documentation. You can give [22:50] it to the to the LLM and ask to generate [22:53] a new skill based on it. [22:55] Yeah, and in in most situations a skill [22:58] is [22:59] essentially just a markdown file that's [23:01] got a bit of [23:02] YAML or something at the top of it to [23:06] speak so that it gets picked up at the [23:07] right time. It's [23:09] often nothing more advanced than that. [23:10] It can be really simple. But I think one [23:12] of the techniques that you recommended [23:14] to me is just keeping a long sort of [23:17] copy paste document of all of your [23:18] successful prompts and relying on going [23:21] back to that and picking out the things [23:22] from the what works. [23:24] Yeah, absolutely. Yeah. [23:26] That's why well, [23:28] and the thing is that now is skills are [23:32] like the trend and is the best way to [23:35] approach this, but I'm sure that in a [23:37] close future we have a new [23:40] methodologies to do that. I'm sure. [23:43] >> Yeah, it's I guess it's always where [23:46] there's resource to be provided, there [23:48] are people doing it for the right [23:50] reasons and the wrong reasons. [23:51] >> [laughter] [23:53] >> Okay, well, how about we dive into some [23:56] practical use cases for AI workplace? [24:00] Let's go. [24:04] >> [music] [24:09] >> So, I'm going to return into this file. [24:12] I don't know if you remember this. This [24:13] I made very long time ago, probably one [24:16] of the earliest hands-on. I created this [24:18] demo file. [24:19] And I'm going to show you a little [24:21] example of what you can do from design [24:23] to design as we would call it. So, this [24:26] is basically working up a design inside [24:29] of Penpot and using the client. So, I'm [24:32] going to start off just with this file. [24:35] It has no design tokens in it and I'm [24:38] going to do a little prompt for it and [24:41] I'm basically saying, can you create me [24:43] some design tokens for the colors [24:48] in this file. I've just got with one [24:50] parameter to make it a bit more [24:51] straightforward. [24:53] I want you to use a particular naming [24:56] structure for the design tokens. Make [24:59] sure you apply them and organize them [25:01] into a token set and do not create any [25:04] themes because it will be tempting if [25:07] there's light and dark mode involved. [25:10] And so then [25:12] the [25:14] agent starts thinking [25:16] and it starts outlining. Oh, yes, this [25:18] is what I'm going to do. I've come up [25:19] with a bunch of hex codes and I've [25:21] worked it out. And it actually asked me [25:23] some questions to get some feedback on [25:26] what's going on. So, do I want to use [25:29] the UI Chrome or do I want and do I want [25:31] to include the avatars? And it also asks [25:33] me, should I use a naming structure with [25:35] light in the name? And so I say, yes, [25:39] I'll go for that and it continues on [25:42] from there. It continues with thinking [25:45] and it starts a little to-do list. It [25:47] starts executing it and you can see the [25:49] design tokens magically appearing. Um [25:52] and as random items get selected on the [25:55] canvas, this is not by me. This is the [25:57] agent at work and it is as it's going [26:01] through checking and applying all of the [26:04] design tokens to the relevant parts of [26:07] the design. [26:08] And then it gives me a little summary of [26:12] what it's done and it gives me some of [26:14] the design decisions worth flagging, [26:16] some of its naming conventions that it's [26:18] used and I can go in and I can see, [26:20] look, if I select that, [26:22] the design tokens have been applied and [26:24] they've got nice semantic names based on [26:27] the naming structure that I provided to [26:29] them as well. [26:31] So, I thought, okay, I'll [26:33] keep going with this and I'm going to [26:36] now give it a prompt where I ask it to [26:38] create a dark mode as well. [26:42] And it asks me [26:43] which inspiration should the dark [26:45] palette follow? And one of the [26:48] suggestions it made was Chakra Chakra [26:51] UI's way of doing dark mode or I could [26:54] go with neutral dark grays or a true [26:56] black with deep accents. [26:59] And so I think I would just go for the [27:02] Chakra UI option [27:04] because it's the easiest one to go for. [27:09] And so I say, go for it. And then it [27:12] says, oh, how should I do treat these [27:14] particular tinted color cards? Should I [27:16] make them a deep version of the color? I [27:18] say, yes. [27:19] And it then goes and it creates me a [27:23] dark mode. [27:24] So, it is following the Chakra UI [27:27] dark mode kind of that tinted purpley [27:29] blue styling which works quite well with [27:31] my light mode. [27:32] And then it summarizes [27:35] what it's said doing for me. [27:38] It's saying, oh, I've done it and you [27:41] need to think about these bits of the [27:42] design. Um I can see a potential issue. [27:45] This is everything that I've done, [27:47] everything that I've applied it to and I [27:48] can look in the dark token section and [27:51] the light token section and see all of [27:53] those new tokens have been created for [27:56] me and they're semantic and they're [27:57] actually useful and they're actually [27:59] following the naming structure that I [28:02] wanted. Which I think is incredibly [28:05] >> [laughter] [28:06] >> useful to be able to do that kind of [28:08] really repetitive [28:10] work, isn't it? [28:12] Yeah, what a good example. [28:16] Well, we thought that [28:18] maybe we could show you some other [28:21] examples as well in the future. We've [28:24] got some um [28:27] we've got this demo that Juan made [28:29] earlier because nobody does [28:32] the design to code better. So, [28:35] here it is showing. Juan, do you want to [28:36] talk us through what's going on there? [28:39] Yeah, so we [28:41] we created the design of this music [28:43] album in the writing Penpot without the [28:45] UI. We are in the focus mode and no [28:48] distraction mode and we asked the cursor [28:52] in this case [28:54] to recreate the design into HTML and [28:57] CSS. [28:59] And as you can see, [29:01] we are now opening the this the HTML [29:05] and you can see in the right now is [29:07] Firefox and it is completely [29:11] navigable, clickable and it respects the [29:15] the design like pixel perfect and you [29:18] can see all the code that it [29:20] generate and we have also the rest of [29:23] the of the screen done in HTML and CSS. [29:29] And but the most important thing here is [29:32] the [29:34] the the simplicity and also the the the [29:38] way that the agent [29:41] represents [29:43] the design like perfect. [29:46] Which is yeah, with a single prompt in [29:48] this case. [29:51] Have you done very much making [29:54] responsive designs with this? Have you [29:57] Do you have any advice if anyone wants [30:00] to try like working with things like [30:03] breakpoints? [30:05] Well, um in that case, [30:08] um [30:09] my recommendation is to design the the [30:13] breakpoints in Penpot, like the media [30:15] queries if you want to to name it. [30:18] Um because [30:20] uh all the context you can give to the [30:21] LLM, I mean the visual context, [30:24] uh [30:25] it makes the difference. So, [30:27] uh it will represent all the, you know, [30:30] all the adapted and fluid design much [30:33] better if you create every media query [30:35] you need to [30:37] to, yeah, to do in in code. So, it's [30:40] like when when we in the past as [30:42] designers get all these uh handoff [30:45] documentation. [30:47] So, [30:48] that's matter a lot. Yeah. [30:51] Would you So, would you have a separate [30:52] board for each breakpoint or something [30:55] like that? Yeah. [30:57] Yeah. Mhm. [30:58] >> Yeah. So, a practical way of doing it. [31:00] Do we have any questions when it comes [31:03] to the use cases for AI workflows? [31:11] Okay. [31:12] >> [laughter] [31:12] >> Well, I think the questions are all [31:14] getting answered for us all on behalf, [31:16] so we don't need to [31:18] respond to any. [31:20] Um [31:21] Okay. Well, I don't know. Why don't we [31:23] dive into some of the nerdier details [31:26] when it comes to AI workflows best [31:29] practices and risks? [31:32] Yes, let's go. [31:41] So, let's talk a bit about one thing [31:44] that [31:45] uh most people missed, but it's really [31:47] important. [31:49] Because uh good prompting is, you know, [31:53] a good way to think about prompting is [31:55] you are not giving instructions to a [31:57] tool. [31:58] You are uh briefing a collaborator in [32:01] some [32:02] in some way. So, the biggest mistake [32:04] people make is being too vague or [32:07] expecting perfect results in one shot. [32:10] So, the practices uh we listed here in [32:13] this cheat sheet, as you can see, uh [32:16] well, of course we are going to share [32:18] all these stuff with you. Um all the [32:21] practices we listed here uh [32:24] all come down to one idea, which is [32:28] reduce ambiguity and guide the process. [32:31] We can [32:35] Laura did that she starts all the [32:38] prompts like act as a [32:40] uh senior developer or act as a [32:44] um uh product designer. [32:46] Start, you know, defining a role give [32:49] context, but not just this like [32:53] structuring prompts gives clarity and [32:56] asking for a reason [32:58] uh gives you control. And maybe the most [33:01] important one is [33:03] uh treat it as a iterative projects. [33:06] Iterative, the, you know, to iterate to [33:08] iterate. [33:09] >> Yeah. Going over and over again. Yeah. [33:11] >> Yeah, exactly. Not one shotting it [33:13] because the first output is almost never [33:16] the final one. And it's part of the [33:20] workflow. So, yeah. [33:23] Uh this is my my [33:27] uh yeah, advice for you, but also [33:30] I can talk a bit about token aware if [33:33] you want, Laura. [33:34] Yeah, yeah. Please do, yeah. [33:37] So, yeah. [33:39] Here we have the yeah, another cheat [33:43] sheet, another reference uh guide for [33:46] you. [33:47] In this case, uh we're talking about [33:50] token aware because nowadays tokens are [33:52] like the new Bitcoin, right? [33:55] Yeah. [33:57] >> [laughter] [33:57] >> Token aware prompting is about reducing [34:00] the waste and increasing clarity, as you [34:03] can imagine. So, every unnecessary word, [34:07] repetition, or bad instructions consume [34:10] tokens without improving the result. So, [34:14] uh even sometimes make it worse. [34:17] The goal here is is simple. [34:20] Less noise and more structure. And [34:23] again, Penpot here helps a lot because [34:26] of its uh [34:28] structure in the in the file, the file [34:31] structure. So, most prompts [34:33] uh become inefficient because of [34:37] uh I don't know, overly verbose [34:40] instructions, unnecessary formatting, or [34:44] explanations. Long repetitive list, uh [34:48] duplicated or conflicting [34:50] rules. I don't know. You know what I [34:52] mean. Uh in practice, shorter and more [34:55] structured prompts tend to perform [34:58] better, more consistently, and be easier [35:01] to debug. So, yeah. Um You wouldn't [35:04] think it either. It's funny, you'd think [35:06] when you first started learning it, [35:08] you'd think, "Well, surely the more [35:09] information I give it, the better." [35:11] Exactly. No, no, no, no. [35:13] The I mean, for example, most people [35:16] start like [35:18] telling [35:19] uh their lives to the chat, which [35:21] [laughter] I mean, [35:22] it's good like, "I'm having some [35:24] troubles because I think that probably I [35:26] need to approach this in this way not in [35:28] this other way." But doesn't matter to [35:31] the LLM. So, please make a list and give [35:34] it the proper structure, quite and [35:36] concise, and uh [35:39] yeah, in in the end, you are going to to [35:42] reduce the the token consumption. [35:45] Yeah, which in turn makes it more [35:47] affordable, [35:48] which in turn also reduces the [35:50] computational and energy expense of your [35:53] prompts. I [35:56] I was telling you all earlier that I was [35:58] trying to um [35:59] get build a system using a prompt, and I [36:03] ended up burning through about $10 of [36:05] tokens. Um it was [36:08] unbelievable. [36:09] And well, I guess we know that I used [36:12] too many words [36:13] >> [laughter] [36:13] >> when few would do. [36:15] That's the trend in everything I do. [36:18] And of course, tokens are becoming more [36:21] expensive Yes. every day, but uh you can [36:25] start reducing that that token [36:27] consumption uh by doing [36:30] proper uh [36:31] prompting. [36:33] Yeah. Yeah. And and learning a lot from [36:36] that. And I guess that [36:38] brings me to a next question, [36:41] which I think is an important discussion [36:42] to have. It's like, what are some of the [36:44] pitfalls that you've come across in AI [36:48] workflows? Like, what can't it do? [36:52] Well, [36:54] um there are a few recurring issues. [36:59] Uh first, [37:00] not understanding what MCP actually [37:02] expose. People like magic instead of a [37:06] tool interface. So, first thing's first. [37:10] Uh Penpot MCP [37:12] uh [37:13] is developed on top of the plugins API [37:16] of Penpot, so learn how it works, which [37:19] is really easy. [37:21] And really straightforward. And the the [37:24] second advice probably [37:26] would be like, yeah, again, writing [37:29] prompts that don't align with the [37:33] available actions or data is is a [37:36] pitfall. [37:37] And [37:40] um expecting the AI to infer structure [37:43] that isn't clearly defined in the [37:45] design. Yeah. [37:46] >> start from your design, structure it [37:49] properly, and then this is [37:51] the best context you can give to the LLM [37:54] in order to get a good output. [37:57] Uh if anyone has been taking the UI [37:59] design with Penpot course with me, you [38:02] know that I have been banging on the [38:04] drum of organizing your Penpot files, [38:07] organizing your layers. Uh it doesn't [38:09] just help when you get to the layout [38:11] stage, but it helps provide all of these [38:13] little bits of information [38:15] to the agent to understand what's going [38:17] on inside your file and what your [38:19] intention actually is with that file. [38:23] Um I think one of the problems is [38:25] there's a huge amount of marketing out [38:27] there when it comes to AI workflows, and [38:30] most of it is [38:32] you see a prompt that is a few words [38:34] long, and it says, "Make me a magical [38:37] app." Yeah. And poof, it makes a magical [38:40] app. [38:41] And [38:43] that's not really [38:45] it's not really something that we want [38:46] to do [38:47] with Penpot MCP, is it? And it's not [38:49] really something that the majority [38:51] designs and developers would be looking [38:53] to do, is it? [38:54] That is not the objective of the MCP in [38:56] Penpot. Penpot is a professional um tool [38:59] for design and developers also, but [39:02] mainly for design and design systems. [39:04] So, if you wanted to work properly, [39:08] start doing a professional work. I mean, [39:10] >> [laughter] [39:11] >> what you generate is you want to [39:12] generate something, probably you need to [39:15] use other experimental tools out there. [39:18] But [39:19] uh the in Penpot, of course, you can [39:21] generate designs, for sure, but uh [39:25] you need to structure your design [39:27] properly because it's a good practice. [39:30] Yeah. [39:31] >> It's better for you. For your future. [39:33] I think that is one of the real [39:35] limitations of these workflows and of [39:38] using LLMs [39:40] is it is basing its understanding on [39:42] what is already out there. What already [39:44] exists. And so if you are asking it to [39:47] generate something with providing very [39:49] little context or useful information on [39:52] your side from your penpot file, then [39:55] what it will do is it will make it up [39:57] based on what is already out there. [39:59] Based on a sum of averages, based on [40:02] what is most popular, what is most [40:04] generic, to some degree out of date as [40:06] well depending when the training data [40:08] came in. [40:09] And so there's a reason why a lot of [40:12] these AI outputs look a lot like [40:14] Tailwind or Shadcn [40:17] and or something like that because [40:19] there's a huge amount of apps and sites [40:22] out there using these things. And that's [40:25] great if you want to produce something [40:28] that looks like everything else. [40:30] Um but I guess as professional designers [40:34] we're usually trying to solve a specific [40:36] problem that isn't solved with a generic [40:39] answer. [40:40] >> [laughter] [40:41] >> Yeah, absolutely. Even if you like look [40:44] in the the result that other people are [40:46] getting from other other tools, you can [40:49] feel the flavor, right? You can see that [40:51] this is made by the cloud or this is an [40:53] open AI thing because you can feel the [40:55] flavor in the UI. It's always the same. [40:58] So this is not professional design. This [41:00] is uh of course this is [41:03] I'm not saying that don't to use it but [41:05] it's not for professional use. [41:08] Yeah. I think one of the great [41:10] interesting areas of research I've heard [41:12] out of the design systems community is [41:15] the idea around providing additional [41:19] very data-based structures about your [41:23] design system, explaining things like um [41:26] the guidance on how things should be [41:28] used, when and where should components [41:31] should be used, how patterns should be [41:33] made up of multiple components, uh when [41:36] which variant should be used. I mean [41:38] able to provide all of this information [41:41] in an easily like something that's [41:43] easily readable [41:45] as a data format [41:47] to agents to get the real benefits out [41:49] of your design system. And I think [41:51] that's a really interesting approach to [41:53] design work in general. It's like [41:56] semantics plus plus [41:58] really. [42:00] We are currently in Penpot. [42:02] in Penpot. Oh, yeah. [42:03] >> Yeah. That's cool. [42:05] Yeah, yeah. [42:06] >> examples? [42:08] Yeah, yeah, yeah. We are giving you [42:10] know, it's only for international use [42:11] where we are we are currently developing [42:14] new features in Penpot and we also [42:17] create this markdown files for for the [42:21] agents to to follow the instructions. [42:23] But again, it's not [42:26] just to follow trends which is cool to [42:29] know about them. [42:31] Uh but it's better to have your you [42:35] know, your own proper workflow with [42:38] governance, with proper naming [42:40] convention, with proper use of [42:42] components and variants and yeah, that's [42:45] a scalable. The other way is just [42:47] playing. [42:49] Yeah. And it's kind of a reminder that [42:52] the design process isn't just you think [42:55] of an idea and a magic product appears [42:59] at the end. Like the design process is [43:00] all of those little design decisions [43:03] along the way. It's the communication [43:05] that you're having with other people on [43:07] your team. It's learning from other [43:09] people's like experience and skills and [43:14] understanding. And so if you can bring [43:17] all of that with you [43:19] to using the MCP, then you could be on [43:23] fire. [43:24] >> [laughter] [43:24] >> in a good way. [43:29] >> [sighs] [43:30] >> Okay, great. Okay, well how about we [43:33] jump into the Q&A section? [43:38] The big one. [43:49] And as the live banner said, anything we [43:52] do not cover live will be covered in the [43:54] community. [43:56] Okay, great. We have a question and oh, [44:00] this is good. It's one that is always [44:03] worth re-emphasizing. [44:05] Do I need to use Penpot MCP with a [44:08] specific client or LLM one? [44:13] No. Penpot MCP is client agnostic as you [44:18] said and so you can use any MCP [44:21] compatible client. Just make sure you [44:25] are using a compatible model especially [44:28] for more complex workflows but you can [44:31] use whatever you want. [44:34] Great. So that's good to know that you [44:35] can just get started. And you can get [44:37] started today as well. [44:39] And how should teams structure their [44:43] design files in Penpot to get better [44:46] results from AI workflows? So we kind of [44:48] mentioned [44:50] labeling your layers. Is there any other [44:52] tips that you would give with regards to [44:54] you maybe pages and boards and those [44:56] kind of structures? [44:58] I think in general [45:00] use clear hierarchy. [45:02] Consistent naming and reusable [45:05] components [45:07] so the AI can understand relationships. [45:10] Uh [45:11] messy or ambiguous files will lead to [45:14] unreliable outputs. [45:17] Right. And so obviously we showed that [45:20] it works very well with design tokens [45:22] earlier. Um and so it works equally well [45:26] with components and libraries. Um if [45:29] you're using multiple libraries [45:30] connected to your files, do you need to [45:32] do anything different for that or is it [45:34] just the same as you would for [45:36] communicating with another human? [45:38] This is No, this is really important [45:40] because you mentioned set of libraries. [45:42] The MCP also [45:45] learn and use from the set of libraries. [45:47] The MCP [45:48] the Penpot MCP has the capacity to go [45:51] throughout all the files in your team. [45:53] So if you connect uh two or three set [45:56] libraries, let's see the two parts of [45:58] other design system or an icon set or [46:00] whatever, you can use it through the [46:03] through the MCP asking the LLM. So it's [46:06] really important to to clarify this [46:08] structure. [46:10] Actually in many ways it could be a way [46:12] for you to find out more about your file [46:14] as well. If you just opened up a file [46:16] shared with someone like someone else on [46:18] your team shared a file with you, you [46:21] could ask it lots of questions about the [46:23] structure and the setup of the file [46:25] >> [laughter] [46:25] >> and the MCP could tell you exactly [46:27] what's going on without you having to [46:28] hunt around for it. So Yeah. As we [46:31] providing it's been organized well. [46:33] >> [laughter] [46:33] >> Yeah, it's like coding. You can ask the [46:36] what piece of this piece of code what is [46:39] meant for. So you can do it the same [46:41] with a with the components or with a [46:44] screen or I don't know. [46:46] I have a question This is just a [46:47] question that's come out of my head [46:49] just now. And so I'm wondering about [46:51] things like using flex layouts and grid [46:54] layouts in your design. Like a lot of [46:57] the examples I've seen other people [46:59] create with LLMs and other design tools, [47:02] they're producing quite static files. [47:05] Things where items are like positioned [47:08] absolutely or statically on a canvas. [47:10] And there's not really much that can be [47:14] made responsive out of it. Does Penpot [47:17] MCP help you do that? [47:19] Yeah, yeah. By default [47:21] if you ask Penpot [47:24] through the MCP MCP to generate a new [47:27] layout, it will follow [47:30] mainly flex and grid layout depends on [47:33] what is better to to implement. So yeah. [47:37] Also if you ask it to uh [47:41] position absolute an element, you can [47:45] see that the MCP probably inferred that [47:50] you are you want to use flex layout. If [47:53] you I mean talking into UI design. You [47:56] can of course generate like no no poster [47:59] designs or uh [48:01] you know, graphic designs not only [48:05] interface design but if you are asking [48:07] the LLM [48:09] to create or generate or reuse [48:11] components for a you new UI screen, [48:14] probably it leads you to use [48:17] uh [48:17] flex layout and grid layout. Yeah, it [48:20] encourages you to use best practices. I [48:22] actually noticed that when I was trying [48:24] to create the design where I was getting [48:26] it to generate uh light tokens and dark [48:29] tokens inside of the same token set and [48:32] using naming to separate them. And it [48:35] actually when I was looking through what [48:37] the LLM had thought, it said [48:39] uh maybe you don't want to do this [48:42] because the recommended way of creating [48:45] color modes in Penpot is to use separate [48:48] token sets for each color mode and to [48:51] use themes to switch between them which [48:53] of course is what I tell everyone to do [48:55] in the other hands-on sessions and the [48:57] videos. Um and the agent called me out [49:00] on that. [49:01] That that's probably the [49:05] the [49:06] way that I use MCP for [49:10] the the most of the time. Every day. [49:12] Every day I used MCP to to token [49:14] relation. I mean [49:16] to generate new token sets, new brand [49:19] sets, apply new tokens, infer tokens [49:23] every day because it's really you know, [49:24] it's really helpful for that. [49:27] Yeah, it's a lot of work and while it's [49:29] important that we make the decisions [49:32] design decisions around it ourselves and [49:34] we understand like the implications of [49:36] what we're doing and [49:38] the sort of hierarchy design and [49:40] information design is a big part of [49:43] design. [49:44] But, it's the repetitive creating of [49:47] individual tokens. I think we as pattern [49:50] matching machines as humans struggle for [49:52] consistency. Me trying to create a [49:55] design tokens set from scratch, I cannot [49:57] tell you how many times I remap those [49:59] tokens because I've renamed them a [50:01] million times over. So, if I could at [50:03] least get a sort of a clear naming [50:05] structure in my head and out there, then [50:07] I can let it do the rest for me. [50:10] Yeah, I know it's amazing to see how it [50:13] generates also. For me, for example, [50:15] it's a pain is because it's a repetitive [50:17] task to generate new variants for a from [50:20] a component. [50:21] And I ask uh the LLM to follow the the [50:25] styles in my in my Penpot file. And it's [50:30] really good to see that with a simple [50:32] prompt it applies all the styles with [50:35] the tokens. [50:36] Um [50:37] yeah, it fits perfect. So, [50:40] yeah. Yeah, I suppose if you provide it [50:42] with say a variant example of sort of [50:45] all of the extremes of the variants, [50:48] then it can work out how to cross [50:50] combine the like if you've got multiple [50:53] variants options inside of one [50:56] component. Mhm. [50:57] >> That's so cool. I have to try that out. [51:00] Yeah. [51:00] >> Um so, do we have folks any more [51:02] questions before we start wrapping up [51:06] up? [51:07] What's the biggest mistake people make [51:09] when they start using MCP with AI [51:12] agents? Well, we've gone over very long [51:16] uh long-winded prompts and talking to it [51:18] like it's uh another human being. Can [51:21] you think of anything else you've seen, [51:22] Juan? Yeah, it's [51:25] we already comment a lot in it. Um [51:29] the the bigger mistake probably is that [51:31] they treat it like magic instead of a [51:35] tool with constraints and expect like [51:39] perfect results in one step. [51:41] That probably [51:43] Mhm. [51:44] Yeah, it's it's a mistake. The right [51:46] approach is to break uh problems into [51:49] smaller workflows and iterate. [51:51] Mhm. [51:52] That actually makes me think I think we [51:54] might have a video [51:57] that perfectly illustrates the idea of [52:02] understanding using the right tool for [52:04] the job. [52:05] >> [laughter] [52:06] >> Yeah. Uh do we have a We have that video [52:08] um left over, folks. [52:16] >> [music] [52:24] [music] [52:29] [music] [52:48] [music] [53:01] [music] [53:25] [music] [53:30] [music] [53:39] >> That was fabulous. I hadn't actually [53:41] seen that video yet, and it really [53:44] illustrates a lot of the points you're [53:45] making about the syntax and things like [53:48] that. [53:48] Yeah, this is a an example that we did [53:52] like a few days ago. [53:54] And it shows like Penpot uh [53:57] as we were talking, Penpot uh stands out [54:00] in agentic AI because [54:03] is LLM agnostic and uses strong semantic [54:06] design as code as a model. [54:08] And here in the samples we can see that [54:12] Penpot lets the the agents to operate [54:14] freely. Uh [54:16] and the resulting is a powerful [54:19] workflow [54:20] that show us that it is interpreting the [54:24] the the prompt [54:26] not only semantically, but [54:29] without errors. Um yeah, [54:32] it's it's amazing to see how other [54:35] experimental design tools that I want to [54:37] call [54:38] like yeah, Stitcher, we can see a [54:40] Stitcher Cloud Design, etc. [54:43] start like [54:45] messing ups the the messing up the [54:47] layout, etc. and Penpot stay doing uh [54:51] great and proper layout. So, it's it's [54:54] really good to see that. [54:56] Absolutely. [54:58] Well, my friends, there you can find [55:00] loads more on uh Penpot and AI workflows [55:05] in the Penpot user guide. There's so [55:06] much great documentation in there. I've [55:08] relied on it a lot. I'm sure you'll find [55:10] it useful as well. On the Penpot blog, [55:13] including posts written by Juan himself. [55:17] And the MCP video playlist will have all [55:20] of the links produced in here as well. [55:24] And that's pretty much all the time we [55:26] have for today. Well done. [55:29] Before I forget, [55:30] if you want to get certified in Penpot, [55:34] you should check out the Penpot [55:36] certification by our friends at CGGE. [55:40] You can get some very cool badges. [55:43] The first module, I think you call a [55:45] module or exam, is available now to take [55:48] for free. See if you can beat me. [55:52] >> [laughter] [55:52] >> It runs alongside the [55:55] UI design with Penpot course. So, um [55:59] the exams will correlate to what you're [56:01] being doing in the course. And I got 99% [56:05] on the first exam. Now, I will leave [56:08] that up to you whether you decide that [56:09] is good or bad, but you should try to [56:11] beat me. [56:13] Thank you so much, Juan, for joining us. [56:16] I hope you'll come back soon. [56:18] And friends in the chat, thank you so [56:21] much for joining us live. Thank you, [56:23] team, for joining and answering so many [56:25] questions. Uh next time leave some for [56:28] the rest of us. [56:29] >> [laughter] [56:30] >> Um you know that you being here live is [56:33] what makes doing these live hands-on [56:36] demos worthwhile. [56:38] And we do appreciate having the team [56:40] here actually answering questions better [56:42] than I possibly could, absolutely. [56:44] So, make sure that you are following us [56:47] or subscribe to us so you can be the [56:49] first to find out when we are next doing [56:52] a live hands-on session, and catch you [56:55] in the Penpot community. Thanks so much, [56:58] folks. Goodbye. [57:00] Bye-bye.