Figma x Replit Agentでホームページ作成

今回は、デザインツール「Figma」とAI開発「Replit Agent」でUIを作成していきたいと思います。手順をそのまま載せるので非エンジニアでも簡単にできるのでチャレンジしてみてください。

ここでのやり方を真似すればこのようなウェブページが作れます👇

全く同じものが作れるわけではないのでご了承ください！

動きの動画👇

Replit Agent.mp4

27.7 MB

ファイルダウンロードについて

ダウンロード

今回使用する生成AI👇

• Figma（ワイヤーフレーム生成）

• Claude（ChatGPTでもいいです）

• Replit Agent

流れ👇

1. Figmaでワイヤーフレームを作成

2. ワイヤーフレームをもとに画面設計書を作成

3. 画面設計書をもとに要件定義書を作成

4. Replit Agentで開発

それでは、今回はウェブサイトを作っていきたいと思います。

要件定義書を作成してから画面設計書を作った方がいい気がしますがやったことがなかったのでやってみます。

ここからは、有料になりますがX（旧Twitter）でポストしているものをリポストするとお得で見ることができるのでやってみてください！