はじめに
近年、AIを使用したフロントエンド開発が増えてきています。個人的にそういった開発がまだできていないので、これを機に7日間かけて実際に試していこうと思います。
やりたいこととして、Figmaで作ったデザインをAIに（今回はCursor）実装させてみます。できるだけ人間の手で実装することはしないのが目標です。(Figma Makeを使ったらもっと簡単にできるかもしれませんが、今回は勉強目的のためこの方法を取ります)
7日間のロードマップ
| 日程 | テーマ | 内容 |
|---|---|---|
| Day 1 | 環境構築 | Next.js + TypeScript セットアップ |
| Day 2 | Cursor × Figma MCP 連携設定 | Cursor で Figma デザインを読み込めるようにする |
| Day 3 | デザイン分析・精査 | AI がトークン/コンポーネント提案 → 人間が精査 |
| Day 4 | Tokens Studio登録 | AI の提案をトークンとして登録 |
| Day 5 | シンプルなコンポーネント実装 | Button, Input, Card など基本部品を実装 |
| Day 6 | ダッシュボード完成 | 全コンポーネント統合・完成 |
| Day 7 | 完結・まとめ | 6日間の体験総括 |
本日は作成するアプリの環境構築を行なっていきます。
作成するアプリ
Analytics Pro - SaaS データ分析ダッシュボード
完成系のイメージです。（途中で変えるかもしれません）
機能概要
- KPI カード - 売上、アクティブユーザー、コンバージョン率、MRR を4列で表示
- チャートウィジェット - 売上トレンド、ユーザー増加グラフ（期間フィルタ付き）
- アクティビティテーブル - ユーザー登録、支払い処理、サブスク変更などのイベント履歴
- ナビゲーション - サイドバー + ヘッダー + ダークモード対応
使用する技術
- Next.js（App Router）
- TypeScript
- Tailwind CSS
- pnpm
- Figma
- Cursor
- macOS
セットアップ
Next.jsプロジェクト作成
pnpmを入れていない場合は以下コマンドでインストールしてください。
# Homebrew を使用（macOS）
brew install pnpm
# または npm から
npm install -g pnpm
# バージョン確認
pnpm --version
-> バージョンが表示されればOK
次に、Next.js プロジェクトを作成します。
pnpm create next-app@latest analytics-pro --typescript
コマンド実行後、設定が選べるので適宜選択します。今回は以下のように設定します。
? Which linter would you like to use? > Biome
? Would you like to use React Compiler? › No
? Would you like to use Tailwind CSS? › Yes
? Would you like your code inside a `src/` directory? › Yes
? Would you like to use App Router? (recommended) › Yes
? Would you like to customize the import alias (`@/*` by default)? › No
動作確認
以下コマンドで起動します。
cd analytics-pro
pnpm dev
ブラウザで http://localhost:3000 にアクセスして、デフォルトページが表示されれば成功です。
最後に
次回は Cursor で Figma デザインを読み込めるようにします。