ui-analyzer

This skill provides a systematic approach to analyzing UI design screenshots and translating them into production-ready React components using TypeScript and Tailwind CSS.

Transform UI design screenshots into well-structured, accessible, and maintainable React components. The skill guides through analyzing layouts, extracting design tokens, identifying components, and generating clean code that matches the design while following best practices.

Read the provided screenshot first using the Read tool if a file path is provided, or if the user has shared an image in the conversation.

分析 UI 设计屏幕截图并使用 TypeScript 和 Tailwind CSS 生成 React 组件。当用户提供 UI 模型、设计屏幕截图或 Figma 导出并请求实现时，请使用此技能。提供详细的布局分析、组件分解、设计令牌提取以及遵循最佳实践的生产就绪代码生成。 来源：smallnest/langgraphgo。