Activity

ビジュアルデザイン

Figma/Sketchでカラー・タイポグラフィ・アイコンを適用した高忠実度モックアップを作成し、ブランドアイデンティティを体現するUIを完成させる

デザインdesign-traditional-3

詳細定義

ブランドアイデンティティを反映した高忠実度のビジュアル表現を作成。色彩、タイポグラフィ、画像、アイコンなど視覚要素を統合し、Figma・Sketchなどで美しく使いやすいインターフェースを実現する。

AI進化方向性

AIカラーパレット生成・タイポグラフィ最適化・アイコン自動生成により、ビジュアルデザインの初稿作成が秒単位に。スタイル転写で参考デザインの世界観を即座に適用

10件

プロンプトを入力してスクロールするだけで、無限にUIバリエーションが生成。v0やMagic Patternsの代替として。

世界のデザインシステムを集めたリファレンス。React、Vue、Web Components等の技術スタック別、アクセシビリティ・コード例・使用ガイドライン等の特徴別にフィルタリング可能。

公式frontend-designスキル（約400トークン）。JetBrains Mono等の個性的フォント、支配的カラー＋鋭いアクセント、スタガードアニメーション等でDistributional convergence問題を回避。

Figma変数→CSS変数/Tailwind設定への自動変換、コンポーネントスキャフォールド、CLAUDE.mdによるデザインルール準拠。シングルソース原則でFigmaとコードを1対1対応。

Figma MCPのget_variable_defsでトークン取得→CSS Custom Properties / Tailwind config / Style Dictionary形式に変換。ハードコード値のトークン置換監査も可能。

React向けの宣言的アニメーションライブラリ。ページ遷移、レイアウトアニメーション、ジェスチャー対応。Claude Codeとの組み合わせでインタラクティブUIを自然言語で生成。

SVGコードでロゴ・アイコンセット・フローチャートを生成。SVGMaker MCP、Superdesign MCPとの連携で自動ファイル整理も対応。

Figma MCPでデザインデータを読み込み、プロダクション品質のReactコンポーネントを生成。テキスト抽出3言語2-3時間→5分、レイアウト確認3-5時間→約0、実装1-2時間→15分。

Anthropicグロースマーケティングチーム事例。Claude Codeで開発したFigmaプラグインがヘッドライン×説明文の組み合わせを自動スワップし、最大100パターンを半秒で生成。

デザイナーがFigmaでテンプレートルール定義→非デザイナーが自然言語でバナー生成。制作期間2週間超→約10時間に短縮。デザイナーの新役割はテンプレート設計者・品質レビュワー。