デザイン・UI
UIデザイン・デザインシステム・フロントエンドの実装に役立つ情報
-
DESIGN.md とは──AIにブランドを守らせるデザイン仕様ファイル（Google Labs）の役割と作り方
AIにUIを生成させる際、自社の配色・タイポ・余白を毎回守らせる仕様ファイルDESIGN.md（Google Labs製・OSS）。YAML+Markdownの構造、CLIでの自己検証、作り方を詳しく解説。
-
AIだけで作る“奥行きのある3Dスクロールサイト”の作り方
AIで作った数秒の動画をコマ分解し、スクロールに同期して表示する3Dサイトの作り方。ChatGPT・Claude・Seedanceを使う手順を、仕組みと注意点つきでまとめました。
-
gsap-scrolltriggerスキルで作るスクロール演出：導入と使い方
GSAPのScrollTriggerをClaudeに正しく書かせるgsap-scrolltriggerスキル。導入・使い方・主なパターン・自前雛形との使い分けをまとめました。
-
MotionSites入門：プロンプトでアニメLPを作るAIテンプレ集
AIでアニメ付きLPを作るMotionSites。コピーしたプロンプトの使い方、Bolt.newでの生成の流れ、料金と注意点をまとめました。
-
React SpectrumをAIに正しく使わせる：MCPサーバーとスキルの接続手順
Cursor・Claude・VS Code等にReact Spectrumの公式MCPサーバーとAgent Skillを接続し、AIに正確なUIコードを書かせる手順をまとめました。
-
React Spectrum入門：Adobeのアクセシブルなデザインシステムを使う
Adobe製のReact向けデザインシステムReact Spectrum。3つのレイヤー・主な特徴・最小構成の使い方を、はじめての人向けにまとめました。