Take a full guided tour of Penpot's design-to-code workflow with Laura Kalbag, Educator at Penpot, built around one idea: design as code. Because Penpot expresses every layer as declarative, semantic structure, Inspect mode isn't just a spec sheet — it's real, code-readable structure you can build from.
You'll see how Inspect mode lets you copy CSS, HTML, SVG, and Tailwind-compatible code straight from any component, with exact spacing, typography, color, and dimension values included. Flex and Grid layouts, plus native design tokens, enforce correct code structures whatever your target platform — so instead of translating a design by eye, you're pulling from a machine-readable foundation.
We'll also cover accessibility and semantic-tagging plugins, components and libraries, team roles and prototyping.
Whether you're a developer, a designer, or part of a product team, this walkthrough shows how Penpot bridges the gap between design and code — without leaving your browser.
👉 Dev Tools docs: https://help.penpot.app/user-guide/dev-tools/
👉 Penpot AI Workflows https://penpot.app/ai/ai-workflows
👉 Penpot MCP Server https://penpot.app/ai/mcp-server
00:00 Intro
00:22 Breakpoints: making the most of modern design features — responsive layouts and design tokens
00:40 Inspect Code: copy and paste HTML and CSS from Inspect mode into the browser (CodePen) to see responsive rendering
01:16 Plugins: generate the exact code you need and create accessible HTML — plugins for semantic tagging and Tailwind HTML
01:48 Integrate AI into your design workflows with Penpot MCP
01:55 Inspect Panel: explore button component details, including design tokens and flex properties
02:35 Flex Layouts: work with CSS Flex layouts using a shared language between designers and developers
03:31 Grid Layout: use CSS Grid with web-friendly fr units
04:23 Design Tokens: native support using the Design Tokens Working Group format — import/export in JSON for easy syncing with development
05:00 Light & Dark Mode: use design tokens to manage themes, brands, and UI states
05:20 Components: switch variants and manage reusable components across multiple libraries
06:21 Project Overview: library files and shared assets across teams
06:46 Custom Fonts: share uploaded fonts to ensure consistency
07:00 Teams: manage invitations and roles
07:15 Design System Documentation: library files with accessibility and system guidelines
07:35 Plugins in Penpot Hub: extend your workflow with plugins, create your own using the Plugins API — accessibility tools like checklists and contrast checkers
08:33 Prototyping: build clickable prototypes for landing pages, tablet view for better visibility, overlay menus and prototyping preview
09:40 Flexible Use Cases: from simple layouts to complex design systems
09:47 Libraries & Templates
10:13 Whiteboard Template: start from a whiteboard directly in the project view
Penpot Community: https://community.penpot.app
App: https://design.penpot.app
Help: https://help.penpot.app
Contribute: https://github.com/penpot
Penpot Fest: https://penpotfest.org
Penpot: Full Stack Design
