moguzbulbul/blueprint-animation

何を解決するか

静的なUXデザインを連続的で段階的なブループリントアニメーションに変換します。これにより、UX意思決定の根拠を説明したり、"前"の状態から"後"の状態へのリデザインを示したり、1つの画面のモジュールを分解してその構築理由を説明することが可能になります。

動作方法

このプロジェクトは、Claude Design用のスキルであり、Figmaファイルから値、フォント、アイコンを直接読み取ることで、デザインを1:1で再現します。主に2つのモードで動作します：

• リデザインモード："前"のUIから"後"のUIへの遷移をアニメーション化します。インターフェースがシアンのブループリントに変わり、変更される部分が再構築され、新しいUIが明らかになります。
• 説明モード：デザインは静止したまま、個々のモジュールを順次ブループリントに変換して、ガイドライン、寸法、ラベルなどを表示し、デザインの根拠を説明します。

両モードとも、構造化された5ステップのアニメーションプロセスに従います：モジュールに焦点を当てる、ブループリントスキャンラインを適用する、要素を構築または注釈する、最終的なUIを表示する、説明テキストを保持する。

対象ユーザー

UXデザイナーやプロダクトデザイナーで、UXケーススタディ、リデザインのウォークスルー、デザイン根拠のプレゼンテーション、ソーシャルメディア投稿を作成したい人。

特徴

• Figma統合：実際のフォントとエクスポートされたアイコンを使用して、デザインを1:1で再現。
• 2つのアニメーションモード：リデザインの遷移と詳細なモジュール説明の両方をサポート。
• 連続的でカットのないアニメーションシーケンス。
• 内蔵された品質ルール：段階的なアニメーションで、移動中の部分にテキストオーバーレイが表示されないよう確保。
• Claude Designスキル：Claude.ai環境内で使用可能なZIPファイルとして簡単にインストール可能。