> For the complete documentation index, see [llms.txt](https://aitool.yayapipi.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://aitool.yayapipi.com/yapi-ai-gong-ju-ji/wang-zhan-sheng-cheng.md).

# 網站生成

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

<figure><img src="/files/8q7oghhtexKOjBhW4Ogl" 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="/files/c6sS1rSF2tzU9d2gGKSm" 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="/files/f4CTjVXSVNStHDwQ4kUX" 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="/files/HOMCPH7STt05Q9nTmA5U" 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="/files/w8Wyqy0Q2IvGhog15NNO" alt=""><figcaption></figcaption></figure>

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

<details>

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

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

可以使用 Dora

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

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

</details>