Analysieren Sie Screenshots des UI-Designs und generieren Sie React-Komponenten mit TypeScript und Tailwind CSS. Verwenden Sie diese Fähigkeit, wenn der Benutzer UI-Modelle, Design-Screenshots oder Figma-Exporte bereitstellt und eine Implementierung anfordert. Bietet detaillierte Layoutanalyse, Komponentenaufschlüsselung, Design-Token-Extraktion und produktionsbereite Codegenerierung gemäß Best Practices.
Installieren Sie den KI-Skill ui-analyzer schnell in Ihrer Entwicklungsumgebung über die Kommandozeile
Quelle: smallnest/langgraphgo.
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.
Analysieren Sie Screenshots des UI-Designs und generieren Sie React-Komponenten mit TypeScript und Tailwind CSS. Verwenden Sie diese Fähigkeit, wenn der Benutzer UI-Modelle, Design-Screenshots oder Figma-Exporte bereitstellt und eine Implementierung anfordert. Bietet detaillierte Layoutanalyse, Komponentenaufschlüsselung, Design-Token-Extraktion und produktionsbereite Codegenerierung gemäß Best Practices. Quelle: smallnest/langgraphgo.
Stabile Felder und Befehle für KI/Such-Zitate.
npx skills add https://github.com/smallnest/langgraphgo --skill ui-analyzerAnalysieren Sie Screenshots des UI-Designs und generieren Sie React-Komponenten mit TypeScript und Tailwind CSS. Verwenden Sie diese Fähigkeit, wenn der Benutzer UI-Modelle, Design-Screenshots oder Figma-Exporte bereitstellt und eine Implementierung anfordert. Bietet detaillierte Layoutanalyse, Komponentenaufschlüsselung, Design-Token-Extraktion und produktionsbereite Codegenerierung gemäß Best Practices. Quelle: smallnest/langgraphgo.
Öffnen Sie Ihr Terminal oder Kommandozeilen-Tool (Terminal, iTerm, Windows Terminal, etc.) Kopieren Sie diesen Befehl und führen Sie ihn aus: npx skills add https://github.com/smallnest/langgraphgo --skill ui-analyzer Nach der Installation wird der Skill automatisch in Ihrer KI-Programmierumgebung konfiguriert und ist bereit zur Verwendung in Claude Code, Cursor oder OpenClaw
https://github.com/smallnest/langgraphgo