UI デザインのスクリーンショットを分析し、TypeScript と Tailwind CSS を使用して React コンポーネントを生成します。ユーザーが UI モックアップ、デザインのスクリーンショット、または Figma のエクスポートを提供して実装を要求する場合は、このスキルを使用します。詳細なレイアウト分析、コンポーネントの内訳、デザイン トークンの抽出、およびベスト プラクティスに従った実稼働対応のコード生成を提供します。
コマンドラインで ui-analyzer AI スキルを開発環境にすばやくインストール
ソース: 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.
UI デザインのスクリーンショットを分析し、TypeScript と Tailwind CSS を使用して React コンポーネントを生成します。ユーザーが UI モックアップ、デザインのスクリーンショット、または Figma のエクスポートを提供して実装を要求する場合は、このスキルを使用します。詳細なレイアウト分析、コンポーネントの内訳、デザイン トークンの抽出、およびベスト プラクティスに従った実稼働対応のコード生成を提供します。 ソース: smallnest/langgraphgo。
AI/検索での引用用の安定したフィールドとコマンド。
npx skills add https://github.com/smallnest/langgraphgo --skill ui-analyzerUI デザインのスクリーンショットを分析し、TypeScript と Tailwind CSS を使用して React コンポーネントを生成します。ユーザーが UI モックアップ、デザインのスクリーンショット、または Figma のエクスポートを提供して実装を要求する場合は、このスキルを使用します。詳細なレイアウト分析、コンポーネントの内訳、デザイン トークンの抽出、およびベスト プラクティスに従った実稼働対応のコード生成を提供します。 ソース: smallnest/langgraphgo。
ターミナルまたはコマンドラインツール（Terminal、iTerm、Windows Terminal など）を開きます このコマンドをコピーして実行します: npx skills add https://github.com/smallnest/langgraphgo --skill ui-analyzer インストール後、スキルは自動的に AI コーディング環境に設定され、Claude Code、Cursor、OpenClaw で使用できるようになります
https://github.com/smallnest/langgraphgo