penpot-design-to-code-review
OfficialAutomate design-to-code reviews and ensure parity between Penpot designs and implemented code.
Authorpenpot
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill automates the review process of Penpot designs against their implemented code, ensuring design integrity and parity between design and implementation.
Core Features & Use Cases
- Automated Review: Automatically compare Penpot designs with their corresponding code (React, Vue, etc.) and generate a structured DRIFT report.
- Token Parity Check: If code source is not available, it degrades gracefully to a design-system-token check.
- Use Case: When an engineer needs to confirm that the implemented code matches the Penpot design, use this Skill to automate the comparison process and quickly identify any discrepancies.
Quick Start
Run the 'penpot-design-to-code-review' skill to automatically compare the Penpot design with the implemented code.
Dependency Matrix
Required Modules
penpot-mcp-tool-reference.mdplugin-api-gotchas.mdtokens-schema.jsonnaming-conventions.mdstate-management.mdmodes-and-policies.md
Components
scriptsreferencesassets
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: penpot-design-to-code-review Download link: https://github.com/penpot/penpot-ai-kit/archive/main.zip#penpot-design-to-code-review Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 620,000+ vetted skills library on demand.