經(jīng)常看我AI網(wǎng)頁生成教程或者提示詞的朋友應(yīng)該對Youware（https://www.yourware.so/）不陌生了。

這個產(chǎn)品可以快速將你用AI生成的網(wǎng)頁部署到線上，哪怕你是只會復(fù)制粘貼的編程小白。

如果你還不了解怎么使用Youware 的部署能力的話可以看我的第一篇介紹《這個產(chǎn)品太強(qiáng)了！教你用Yourware一鍵創(chuàng)建自己的 AI 編程作品集》。

最近上去發(fā)現(xiàn)他們更新了好多內(nèi)容，尤其是開始支持調(diào)用MCP生成網(wǎng)頁了，這可能是我看到對MCP適配最好和最準(zhǔn)確的產(chǎn)品了。

他們利用MCP解決了現(xiàn)在網(wǎng)頁生成最麻煩的問題：如何獲取素材？

我們這篇內(nèi)容就介紹一下Youware最近更新的一些功能，特別是MCP，順便教大家怎么用。

來看一下主要更新內(nèi)容：

• 深度適配主流 MCP 服務(wù)，使用門檻極低，效果非常好（目前免費(fèi)）
• 上線積分系統(tǒng)，你的網(wǎng)站瀏覽量可以換錢了
• 首頁新增更加詳細(xì)的作品分類篩選，方便找到你喜歡的社區(qū)網(wǎng)站
• 作品頁增加隨機(jī)按鈕，直達(dá)社區(qū)優(yōu)秀的其他作品，玩的停不下來

先來看一個案例

我們先來看個案例，看一下 Youware 的MCP優(yōu)化的有多好，然后再用一個案例教大家如何用這幾個MCP創(chuàng)建網(wǎng)頁。

那天發(fā)現(xiàn)以后Youware上線MCP之后我發(fā)現(xiàn)支持的這幾個MCP非常適合向網(wǎng)頁填充內(nèi)容，所以就整了一個非常極限的提示想看一下他能力的上限。

說實(shí)話這個提示詞如如果可以正常完成已經(jīng)很厲害了，我都沒指望他可以生成的多好。

里面涉及到從Figma讀取設(shè)計稿數(shù)據(jù)，之后還需要從hugeicons拉取需要的圖標(biāo)，最后還需要讓FLUX生成對應(yīng)的圖片。

提示詞：

通過 figma Mcp 查看這個頁面信息，并生成前端網(wǎng)頁:https://www.figma.com/design/u2YEtmFuVuTUOyD66zMxcV/-FREE--Online-Food-Delivery-Dashboard--Community-?node-id=0-27&t=TvFFyhKJzXwZAbG3-4

其中涉及到圖片的部分使用FLUXMCP 生成，涉及到圖標(biāo)的部分從hugeiconsMCP 引用

結(jié)果看到結(jié)果的時候我都驚了朋友們。

這個設(shè)計稿里面的布局非常復(fù)雜，Youware 不止搞定了頁面的布局，而且?guī)狭隧憫?yīng)式的適配。

FLUX MCP 準(zhǔn)確的給每個部分都生成了跟原來對應(yīng)的素材圖片，包括各種漢堡、意面以及人物宣傳圖。

還從 hugeicons MCP 里面找到了對應(yīng)風(fēng)格一致的圖標(biāo)填充到了網(wǎng)頁上。

這還是一次生成的結(jié)果，再稍微調(diào)整一下這都能直接上線用了。

以前的其他Vibe Coding產(chǎn)品要是想向網(wǎng)頁里面整點(diǎn)圖片和營銷素材可是費(fèi)了老鼻子勁了，現(xiàn)在一句話就能搞定。

有人可能觀察到布局跟設(shè)計稿有些區(qū)別，這是因?yàn)镕igma的API拿到的設(shè)計稿信息不全的問題，跟模型無關(guān)。

教一下如何用Youware創(chuàng)建網(wǎng)頁

上次介紹了Youware網(wǎng)頁部署的能力，但經(jīng)過這一段時間的迭代，Youware的網(wǎng)頁創(chuàng)建能力已經(jīng)很強(qiáng)了，尤其有MCP加持之后更是離譜。

這次就用一個案例介紹一下我是如何用Youware的網(wǎng)頁創(chuàng)建能力和MCP的。

首先我們需要添加一下自己需要使用的MCP，在Create的tab下面找到MCP的圖標(biāo)，點(diǎn)擊那個加號，我們就能看到支持的全部MCP了。

只需要點(diǎn)擊【+】號就可以添加，這里面除了Figma和Notion這種需要連接你自己的數(shù)據(jù)的這種MCP需要API以外，其他的點(diǎn)擊就用，，沒有任何配置成本。

比如這里我們就需要Figma、Unsplash、Hugeicons、Googel Maps這幾個MCP，直接添加就行。

Figma 的 MCP 設(shè)置只需要你去獲取一個API就行，在安全設(shè)置里面點(diǎn)兩下就能生成，很簡單。

我們這次需要生成的是一個旅行內(nèi)容預(yù)定的網(wǎng)頁，我已經(jīng)提前準(zhǔn)備好了設(shè)計稿，只需要復(fù)制一下這個畫板鏈接繼就行。

然后我們寫提示詞，這里我們需要寫清楚需要每個MCP做什么，雖然有時候不寫也MCP這三個字母也沒事，但有時候還是會有問題的。

幫我生成一個旅行網(wǎng)頁，設(shè)計稿從 Figma MCP 讀取：https://www.figma.com/design/7knrtVvJ7NU2GTM0feKHlm/Travelsy---Travel-Agency-Single-page-Template--Community-?node-id=408-22&t=8WJXif84EfqMpkkj-4

其中涉及到需要填充的圖片素材的話從Unsplash MCP獲取；

需要圖標(biāo)的話從Hugeicons MCP獲取，如果沒有合適的可以用其他相近意思的圖標(biāo)填充；

涉及到旅游景點(diǎn)的信息從Google Maps獲取。

當(dāng)然Youware這次依然很好的完成了任務(wù)，網(wǎng)頁大致布局和信息都還原了設(shè)計稿，另外圖標(biāo)和圖片都從對應(yīng)的MCP獲取并且填充了。

但是如果你有一些審美的話就容易發(fā)現(xiàn)，由于Figma API傳輸信息不完整的問題，導(dǎo)致上面生成的網(wǎng)頁很多細(xì)節(jié)都有問題，比如圖片的堆疊問題，還有對齊問題，內(nèi)容換行問題等。

這時候我發(fā)現(xiàn)Youware居然有美化頁面這個選項(xiàng)，可以保持原來頁面主要內(nèi)容和布局的前提下優(yōu)化整個頁面的視覺表現(xiàn)。只需要點(diǎn)擊「Boost」這個按鈕就會自動執(zhí)行。

另外你還能點(diǎn)擊【Select】這個按鈕選擇網(wǎng)頁需要優(yōu)化的位置指定優(yōu)化，不需要費(fèi)勁的打字描述位置了。

比如這里頁面美化完成之后頭部他選了一個縱向圖片，沒有鋪滿很難看，這時候我就選擇這個位置讓他重新調(diào)用FLUX生成了一張橫向的圖片，非常省事。

到這里我們經(jīng)過美化和微調(diào)之后完全體的網(wǎng)頁已經(jīng)生成了，可以看一下，是不是好了非常多。

Youware保持了原來的網(wǎng)頁主要文案和布局，優(yōu)化了每個地方的樣式細(xì)節(jié)和布局，甚至自己給每個組件加上了動效，以及對應(yīng)的SVG點(diǎn)綴，圖片的清晰度也高了很多，整體的精致度一下就上來了。

這個頁面有非常多的圖片和圖標(biāo)素材，之前想要讓AI自己找到合適的素材，然后還得根據(jù)圖片的比例和內(nèi)容在合適的地方填充都非常費(fèi)勁。

現(xiàn)在像Lovble、V0、Bolt等我想要實(shí)現(xiàn)類似的效果都非常費(fèi)勁，Youware只需要一次調(diào)整和一次點(diǎn)擊就能有這么好的效果真的很厲害。

而且整體選的MCP都非常有針對性，非常好的解決了網(wǎng)頁生成的時候沒有素材的問題，整體的體驗(yàn)非常順暢，完全不需要配置。

其他更新內(nèi)容

最近youware上真的有很多非常好的作品，他們也在一直致力于讓好作品被看到。

比如就上線了積分系統(tǒng)，點(diǎn)擊自己的頭像就可以看到你擁有的 Kont，這個是根據(jù)你部署網(wǎng)頁的瀏覽量來的，后面可以直接兌換為美元。

另外首頁最近更新了之后分類更加詳細(xì)了，可以在這里找到不同分類的 Vibe coding 作品查看。

你在瀏覽 youware 部署的網(wǎng)頁的時候可以看到下方有個隨機(jī)按鈕，點(diǎn)一下就會給你展示其他社區(qū)內(nèi)的優(yōu)秀網(wǎng)頁，點(diǎn)一下以后根本停不下來，可以去玩玩。

好了，這次的介紹和體驗(yàn)基本就這樣了，Youware 是我最近看到迭代速度最快，而且每一步都非常準(zhǔn)確的產(chǎn)品。

始終圍繞為創(chuàng)作 Vibe coding 創(chuàng)作者服務(wù)的主線，幫助大家更好的分享和創(chuàng)建自己的作品。

最近Youware還在整一個復(fù)古風(fēng)格的網(wǎng)站生成挑戰(zhàn)，會有最高1000美元的獎金，這個可以整一下朋友們，哪怕你不參賽，在社交媒體推薦你喜歡的網(wǎng)頁。瀏覽量高的也有會員可以領(lǐng)，感興趣的可以沖一下。