How can I make Penpot-to-code workflows faster?

The generated CSS is best thought of as a measuring tool, not finished application code. The biggest workflow improvement usually comes from creating shared components and design tokens first, then reusing them instead of copying individual values into the project one by one.

The Inspect tab is useful for getting measurements and basic CSS, but I usually treat the output as a starting point rather than production-ready code. I copy the relevant values into the editor and clean up or restructure the CSS myself.

Set up a consistent spacing scale before you start designing—something like a 4px or 8px grid. Otherwise, Inspect may give you odd values such as 13px or 27px, and it becomes difficult to tell whether they were intentional. Design tokens are also worth learning: you can define colors, spacing, and typography once, export them as JSON in Style Dictionary format, and generate CSS variables or a Tailwind configuration instead of manually copying values.

Give your layers and frames meaningful names before exporting. Those names can become class names in the generated code, so replacing defaults like “Rectangle 14” with descriptive names saves a lot of cleanup later.