What problem does it solve? Designers working in Penpot often lack consistent standards for token systems, component structure, and developer handoff, leading to inconsistent screens and painful implementation. This Skill provides a structured set of professional guidelines for building production-ready UI/UX designs in Penpot. ## Core Features & Use Cases - Design Token Systems: Establishes a tiered token architecture (Primitives → Semantic → Component) with Light and Dark theme support via token overrides. - Component Library Standards: Applies Atomic Design principles with complete variant matrices covering sizes and states (Default, Hover, Pressed, Disabled). - Screen Building & Prototyping: Guides wireframing, high-fidelity screen design, and interactive prototype linking for user testing. - Developer Handoff: Aligns Penpot tokens with Tailwind CSS configuration and defines asset export standards (SVG, PNG at 1x/2x). - Use Case: A product designer starting a new app project uses this Skill to set up a token-based design system in Penpot, build a reusable component library, and hand off developer-ready screens synced with the team's Tailwind config. ## Quick Start Ask the AI to help you set up a tiered design token system with light and dark themes for your Penpot project.
