# 網站生成

1. **Lovable - 最漂亮的網站介面生成 AI**

<figure><img src="https://4056190563-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiIXXKQqYdNazUgMgSJnr%2Fuploads%2FWN2FCWO7oaYbxWYioaCk%2Fimage.png?alt=media&#x26;token=1f078a50-9baf-4db7-b73f-fd5e1c988da7" alt=""><figcaption></figcaption></figure>

{% embed url="<https://lovable.dev/>" %}

<details>

<summary>Lovable 使用心得</summary>

只需要輸入你想要開發什麼網站的 Prompt

Lovable 就會自動幫你生成好網站的排版

生成出來的介面是其他 AI 裡面最好看的

但是只適合生成排版, 如果要有完整的功能

可能需要後續再使用 Cursor 進行二次開發

</details>

2. **v0 - Next Js 網站生成的最好選項**

<figure><img src="https://4056190563-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiIXXKQqYdNazUgMgSJnr%2Fuploads%2F3ULIbcNCf2H3XGgTfIYI%2Fimage.png?alt=media&#x26;token=ccbfcf5e-0f35-4dc7-959b-94741e8d72b4" alt=""><figcaption></figcaption></figure>

<a href="https://v0.dev/" class="button primary">v0 Dev 官方網站</a>

<details>

<summary>v0 Dev 使用心得</summary>

跟 Lovable 一樣可以使用 Prompt 生成網站

但是默認生成的網站框架是 NextJs&#x20;

由於是 NextJs 官方推出來的 AI 工具

所以在整合發佈到 Vercel 上的時候非常方便

</details>

3. **Bolt.New - 用Prompt生成網站的AI**

<figure><img src="https://4056190563-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiIXXKQqYdNazUgMgSJnr%2Fuploads%2FXQAkzUyz34khnmJpUn5E%2Fimage.png?alt=media&#x26;token=6b7eec06-99fb-4ce6-8062-7d195ec9de03" alt=""><figcaption></figcaption></figure>

<a href="https://bolt.new/" class="button primary">Bolt 官方網站</a>

<details>

<summary>Bolt 使用心得</summary>

你可以隨便把你的需求打上去

就會自動生成完整的代碼環境和網站

還可以直接 Deploy 發佈，修改Bug

</details>

***

4. **Framer - 設計師的網站製作用具**

<figure><img src="https://4056190563-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiIXXKQqYdNazUgMgSJnr%2Fuploads%2FR1wrSOaWE35UzwuVsnGt%2Fimage.png?alt=media&#x26;token=89159118-47d5-477b-8d36-bd07de086bd2" alt=""><figcaption></figcaption></figure>

<a href="https://www.framer.com/" class="button primary">Framer 官方網站</a>

<details>

<summary>Framer 使用心得</summary>

上面的工具都是輸入 Prompt 一鍵生成整個網站的代碼

但如果你比較想要自己設計排版

可以使用 Framer , 除了有AI輔助生成排版之外

你可以像設計師一樣, 自己的排版自己的網站

使用起來就像 Figma 那樣簡單

</details>

5. **Dora Run - 3D 網站製作神器**

<figure><img src="https://4056190563-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiIXXKQqYdNazUgMgSJnr%2Fuploads%2Fs6oV3eItlT7kDFkrFcNs%2Fimage.png?alt=media&#x26;token=e6edb95b-7bd2-4fa3-b1fa-5f49180dfad2" alt=""><figcaption></figcaption></figure>

{% embed url="<https://www.dora.run/>" %}

<details>

<summary>Dora  使用心得</summary>

如果想要在網站上加上帥帥的 3D 模型動畫

可以使用 Dora

先用 AI 生成第一個版本的網站

然後使用內建的動畫功能, 調整帥氣的 3D 效果

</details>