optim-shimizu https://blog.hatena.ne.jp/optim-shimizu/ OPTiM TECH BLOG https://tech-blog.optim.co.jp/ Design UI / UX デザインシステム AI 本記事では、オプティムのUIデザインチームが推進する「AIを前提としたUIデザインプロセス構築」の取り組みを紹介しています。生成AIの普及により誰でも簡易なUIを作れるようになる一方、デザインシステムと整合しないアウトプットが生まれる課題も増えています。これを解消するため、オプティムでは v0 のデザインシステム設定、Figma MCPによるコード生成の精度向上、nucleusガイドラインのMarkdown化といった“AIが正しく利用できる環境整備”を進めています。 v0にnucleusのカラーパレットやコンポーネントルールを組み込むことで、非デザイナーでもnucleusらしいUIラフの生成が可能に。Figma MCPの導入では、FigmaデータをAIが構造的に理解してコード化できるため、画面設計書作成や新規実装が大幅に効率化されました。さらに、nucleusをMarkdownで構造化することで、AIが正しく参照できるデザインルール基盤も整備されています。 これらの取り組みを通じ、初期デザイン作成の高速化、手戻り削減、実装との連携強化が進み、最終的には“AIと人が共創するデザインプロセス”の実現を目指しています。 190 <iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Ftech-blog.optim.co.jp%2Fentry%2F2026%2F03%2F18%2F100000" title="✨非デザイナーでも“オプティムっぽい”UIデザインは、作れる！✨ - OPTiM TECH BLOG" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"></iframe> https://cdn-ak.f.st-hatena.com/images/fotolife/o/optim-tech/20260311/20260311165553.png Hatena Blog https://hatena.blog 2026-03-18 10:00:00 rich https://tech-blog.optim.co.jp/entry/2026/03/18/100000 1.0 100%