掲載済み (2026-08-22号)
147 171文字 • 1分

Cursorを使ってデザイナーがハンドコーディングでデザインシステムを作ってみた

日本語

掲載情報

概要

エンジニアリソース不足を背景に、デザイナーがAIエディタCursorをメンターとして活用し、ReactとMUIを用いたデザインシステムの実装を自ら完遂した実践的な知見の共有。

詳細内容

PKSHA Technologyのデザイナーによる、AIコードエディタ「Cursor」を活用したデザインシステム実装の事例報告です。エンジニアのリソース不足を解消し、デザイナー自身のフロントエンドスキルを向上させるため、AIにコードを生成させるのではなく、あえて「ハンドコーディング(手書き)」にこだわり、AIを質問や解説のためのメンターとして利用する手法を採りました。このプロセスを通じて、Figmaの数値とブラウザでのレンダリング乖離を即座に修正できる改善サイクルの高速化や、コード側での制約とMarkdownでのガイドラインの境界を理解した「デザインハーネス」の構築など、デザイナーがプロダクションコードを触ることで得られる具体的なメリットが述べられています。結果として3週間で22コンポーネントの実装を完了させ、AIによる人間の能力拡張(AI Powered Worker)の有効性を実証しています。