Communitygithub.com

Signpainterreverberation581/ux-collab

AI駆動のUIコラボレーションを構築し、agent-browser、Figma MCP、Lucidを使用してワイヤーフレームをデザインシステムに適合するコードに変換します。

ux-collab とは?

このスキルは、AIエージェントがブラウザ操作、FigmaのMCP(Model Context Protocol)、Lucidの機能を連携させることで、UIデザインからコード生成までのワークフローを自動化します。ユーザーはワイヤーフレームやデザインファイルを入力として与えると、エージェントが自動的にブラウザ上でUIコンポーネントを分析し、Figmaからデザイントークンやスタイル情報を抽出し、Lucidを使って設計図を視覚化しながら、最終的に指定されたデザインシステムに準拠したコード(React、Vue、HTML/CSSなど)を生成します。このスキルは、Claude CodeやClineなどのAIエージェントプラットフォームで利用でき、デザイナーと開発者のコラボレーションを効率化し、デザインから実装までの一貫性を保証します。agent-browserによる実際のWebページ操作、Figma MCPによるデザインデータの取得、Lucidによるフローチャートやアーキテクチャ図の作成を組み合わせたマルチツール連携が特徴です。

対応~Claude Code~Codex CLI~Cursor
npx skills add Signpainterreverberation581/ux-collab

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

ux-collab は何をしますか?

agent-browser、Figma MCP、Lucidを使用して、AI駆動のUIコラボレーションを構築し、ワイヤーフレームをデザインシステムに適合するコードに変換します。

関連スキル