Can I customize the design feedback criteria?

Yes, the 'update-context' command allows you to modify reviewPrompts in your config file to tailor the feedback logic to your specific design system.

Does this skill help with testing?

Yes, it generates manual QA checklists based on your screen maps and includes subcommands for running linting, formatting, and type checks.

What is a screen map?

A screen map is a Markdown document that tracks the implementation status, spec gaps, and technical details of individual screens in your application.

How does the Figma scaffolding work?

The scaffold command takes a Figma design URL and automatically generates a screen map skeleton in Markdown, helping you map out your implementation structure instantly.

UI Implementation Toolkit

Name: UI Implementation Toolkit
Author: masseater

bymasseater

•

디자인 도구

Streamlines the UI development lifecycle by bridging Figma designs with implementation through automated scaffolding, design feedback, and QA checklists.

The UI Implementation Toolkit is a comprehensive suite of utility commands designed to synchronize design intent with technical execution. It allows developers to scaffold project screen maps directly from Figma URLs, generate structured feedback for design teams when implementation gaps are found, and produce detailed manual QA checklists. By automating the boilerplate of UI documentation and communication, this skill ensures that frontend development remains consistent with design specifications while providing clear tracking for screen-level progress and code quality.

주요 기능

01Figma-to-Code scaffolding for rapid screen map generation

02Dynamic QA checklist creation for manual verification workflows

031 GitHub stars

04Automated design feedback generation to bridge the designer-developer gap

05Built-in utility commands for UI linting, formatting, and type checking

06Screen map management with integrated change logging

사용 사례

01Generating professional design review documents when technical constraints conflict with UI specs

02Bootstrapping a new project structure by importing screen hierarchies from Figma designs

03Creating exhaustive manual testing checklists for specific UI components or full application screens

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add masseater/claude-code-plugin dev-command

For use in Claude.ai and ChatGPT

Download Skill