AIネイティブなプロダクト開発におけるデザインシステムの再設計

AIネイティブなプロダクト開発におけるデザインシステムの再設計

Qiitaでは、企画から設計・デザイン・開発・リリースまで、プロダクト開発の全フローをAIが自律的に動かす「AIネイティブなプロダクト開発」を目指しています。

しかし、そこに向かう中でデザインだけがフローに乗り切れていませんでした。コードもタスクもGitHubで管理されているのに、Figmaのデザインデータだけがその外側にある。複数の改善が同時に走ると、マスターファイルの管理は人の手では追いつきません。さらに、Claude CodeからFigmaを操作するにはPluginコードという中間生成物が必要で、エラーが起きやすくトークンの消費も大きい。AI主導で回すには、これは無視できない制約でした。

そこで、デザインツールをFigmaからPencil（pen.dev）へ移行しました。デザインデータが .pen というファイルとして存在するため、コードと同じリポジトリでGit管理でき、AIがCLIから直接参照できます。あわせて、必要最小限のデザイントークンとコンポーネントから始め、コードを基準に必要になったタイミングで育てていく方針でデザインシステムを再設計しました。

このLTでは、移行の判断に至った経緯と、現在のディレクトリ構成・運用方針をお話しします。まだ移行の途中ですが、「今はこれを信頼して進んでいる」というリアルな現在地を共有します。