UI Reverse Engineer (professional)

Transform images, screenshots, mockups, or reference UIs into clean, maintainable, system-based code without blind pixel cloning. This skill provides a structured methodology for converting visual references into production-ready UI with proper layout systems, spacing tokens, typography hierarchy, and component architecture.

Boundary

Owns:

• Image-to-UI reverse engineering methodology
• Layout analysis from visual references
• Spacing scale estimation and standardization
• Typography hierarchy extraction
• Component identification and extraction
• L.A.S.T.C framework (Layout, Alignment, Spacing, Typography, Components)
• 7-step reverse engineering process
• Output quality rubric (7 criteria × 10 points)
• Prompt templates for AI-assisted UI generation