Compare Figma designs with implemented components and generate Markdown reports.
npx skills add https://github.com/gihwan-dev/claude-code-gui --skill design-check
Please help me install this Agent Skill. Skill: design-check Source: https://github.com/gihwan-dev/claude-code-gui/tree/main/.claude/skills/design-check Command: npx skills add https://github.com/gihwan-dev/claude-code-gui --skill design-check
Automates the validation of UI design by comparing Figma designs with implemented components and generating a detailed report to speed up design-to-code alignment.
Provide a Figma URL and the component path to start a design check.
High-intent search queries and answers about installing and using this skill.
To automate visual diff checks between Figma and code, provide a Figma URL and component path to generate Markdown reports and visual diffs. The process extracts design context and tokens to validate UI components and measure alignment.
Yes, you can extract design tokens from Figma for UI validation. The Skill uses MCP data gathering to retrieve design context and tokens, ensuring design-system alignment and producing actionable recommendations for consistency.
Yes, design-check works with shared UI component libraries and individual screens. It automates design validation across these components by comparing Figma designs with implemented code to output detailed reports and visual diffs.
To generate visual diffs from Figma, you need the dotenv, pngjs, and pixelmatch dependencies. These libraries handle environment variables, PNG processing, and pixel comparison to produce a storyboard-ready diff metric.
The best way to generate a Markdown report comparing Figma to code is to input a Figma URL and component path. This automatically extracts design context and outputs a storyboard-ready report including diff metrics and optional tokens.
Your Figma to code comparison requires a specific component path to accurately target the implemented component. This ensures the visual diff and Markdown report validate the correct UI element against the extracted Figma design context.
Moliboy5000Generates Tailwind-CSS-based React components from Figma designs and user stories.
bacchus-labsDetect design token drift between Figma and code implementations.
ahmadzakiyTranslate Figma designs into production-ready code using the Figma MCP workflow.
Eva813Compare two screenshots at the pixel level and generate a diff image with JSON statistics.
