デザイン

Claude CodeのLPが量産型になる問題を、スキルとMCPで劇的改善。frontend-design/perfect-ui/21st.dev Magic/Windframe/AIDesigner/Playwrightなどを効果順に整理し、そのまま使えるおすすめスタックを提示。

Splineはブラウザ完結のノーコード3Dデザインツール。リアルタイム共同編集・Web埋め込み・GLTF書き出し、AI機能Ommaも。3D演出の素材づくりに。

Figma純正のprompt-to-appツールFigma Make。デザインやプロンプトから動くプロトタイプを生成し、Point to Editやコード確認も。使い方を解説。

FramerはFigma風エディタにAI生成・CMS・高速ホスティングを統合したデザイン重視のノーコードWebビルダー。AI機能の使い方と料金を解説。

Claude Designのオープンソース代替「Open Design」。Claude Code等の既存エージェントをデザインエンジンにし、BYOK・ローカルファーストでWeb/スライド/プロトタイプを生成。od mcp連携やCritique Theaterを解説。

AIが作るUIが毎回ありがちになる“スロップ”を防ぐ人気スキル集Taste Skill。VARIANCE/MOTION/DENSITYの3ダイヤルで作風を制御。収録スキルと導入、純正frontend-designとの違いを解説。

任意のWebサイトやHTMLコードを編集可能なFigmaデザインに変換するhtml.to.design。プラグイン・Chrome拡張・HTML貼り付けの使い方、ChatGPT/Bolt連携、料金まで解説。

Framer/Webflow/v0/Lovable/Cursor/Claude Code/Figmaを用途・強み・料金で比較。2026年の使い分けを表で整理します。