V0做不到、Bolt搞不定，Youware用MCP一键解决网页生成最大难题

经常看我AI网页生成教程或者提示词的朋友应该对Youware（https://www.yourware.so/）不陌生了。

这个产品可以快速将你用AI生成的网页部署到线上，哪怕你是只会复制粘贴的编程小白。

如果你还不了解怎么使用Youware 的部署能力的话可以看我的第一篇介绍《这个产品太强了！教你用Yourware一键创建自己的 AI 编程作品集》。

最近上去发现他们更新了好多内容，尤其是开始支持调用MCP生成网页了，这可能是我看到对MCP适配最好和最准确的产品了。

他们利用MCP解决了现在网页生成最麻烦的问题：如何获取素材？

我们这篇内容就介绍一下Youware最近更新的一些功能，特别是MCP，顺便教大家怎么用。

来看一下主要更新内容：

• 深度适配主流 MCP 服务，使用门槛极低，效果非常好（目前免费）
• 上线积分系统，你的网站浏览量可以换钱了
• 首页新增更加详细的作品分类筛选，方便找到你喜欢的社区网站
• 作品页增加随机按钮，直达社区优秀的其他作品，玩的停不下来

先来看一个案例

我们先来看个案例，看一下 Youware 的MCP优化的有多好，然后再用一个案例教大家如何用这几个MCP创建网页。

那天发现以后Youware上线MCP之后我发现支持的这几个MCP非常适合向网页填充内容，所以就整了一个非常极限的提示想看一下他能力的上限。

说实话这个提示词如如果可以正常完成已经很厉害了，我都没指望他可以生成的多好。

里面涉及到从Figma读取设计稿数据，之后还需要从hugeicons拉取需要的图标，最后还需要让FLUX生成对应的图片。

提示词：

通过 figma Mcp 查看这个页面信息，并生成前端网页:https://www.figma.com/design/u2YEtmFuVuTUOyD66zMxcV/-FREE--Online-Food-Delivery-Dashboard--Community-?node-id=0-27&t=TvFFyhKJzXwZAbG3-4

其中涉及到图片的部分使用FLUXMCP 生成，涉及到图标的部分从hugeiconsMCP 引用

结果看到结果的时候我都惊了朋友们。

这个设计稿里面的布局非常复杂，Youware 不止搞定了页面的布局，而且带上了响应式的适配。

FLUX MCP 准确的给每个部分都生成了跟原来对应的素材图片，包括各种汉堡、意面以及人物宣传图。

还从 hugeicons MCP 里面找到了对应风格一致的图标填充到了网页上。

这还是一次生成的结果，再稍微调整一下这都能直接上线用了。

以前的其他Vibe Coding产品要是想向网页里面整点图片和营销素材可是费了老鼻子劲了，现在一句话就能搞定。

有人可能观察到布局跟设计稿有些区别，这是因为Figma的API拿到的设计稿信息不全的问题，跟模型无关。

教一下如何用Youware创建网页

上次介绍了Youware网页部署的能力，但经过这一段时间的迭代，Youware的网页创建能力已经很强了，尤其有MCP加持之后更是离谱。

这次就用一个案例介绍一下我是如何用Youware的网页创建能力和MCP的。

首先我们需要添加一下自己需要使用的MCP，在Create的tab下面找到MCP的图标，点击那个加号，我们就能看到支持的全部MCP了。

只需要点击【+】号就可以添加，这里面除了Figma和Notion这种需要连接你自己的数据的这种MCP需要API以外，其他的点击就用，，没有任何配置成本。

比如这里我们就需要Figma、Unsplash、Hugeicons、Googel Maps这几个MCP，直接添加就行。

Figma 的 MCP 设置只需要你去获取一个API就行，在安全设置里面点两下就能生成，很简单。

我们这次需要生成的是一个旅行内容预定的网页，我已经提前准备好了设计稿，只需要复制一下这个画板链接继就行。

然后我们写提示词，这里我们需要写清楚需要每个MCP做什么，虽然有时候不写也MCP这三个字母也没事，但有时候还是会有问题的。

帮我生成一个旅行网页，设计稿从 Figma MCP 读取：https://www.figma.com/design/7knrtVvJ7NU2GTM0feKHlm/Travelsy---Travel-Agency-Single-page-Template--Community-?node-id=408-22&t=8WJXif84EfqMpkkj-4

其中涉及到需要填充的图片素材的话从Unsplash MCP获取；

需要图标的话从Hugeicons MCP获取，如果没有合适的可以用其他相近意思的图标填充；

涉及到旅游景点的信息从Google Maps获取。

当然Youware这次依然很好的完成了任务，网页大致布局和信息都还原了设计稿，另外图标和图片都从对应的MCP获取并且填充了。

但是如果你有一些审美的话就容易发现，由于Figma API传输信息不完整的问题，导致上面生成的网页很多细节都有问题，比如图片的堆叠问题，还有对齐问题，内容换行问题等。

这时候我发现Youware居然有美化页面这个选项，可以保持原来页面主要内容和布局的前提下优化整个页面的视觉表现。只需要点击「Boost」这个按钮就会自动执行。

另外你还能点击【Select】这个按钮选择网页需要优化的位置指定优化，不需要费劲的打字描述位置了。

比如这里页面美化完成之后头部他选了一个纵向图片，没有铺满很难看，这时候我就选择这个位置让他重新调用FLUX生成了一张横向的图片，非常省事。

到这里我们经过美化和微调之后完全体的网页已经生成了，可以看一下，是不是好了非常多。

Youware保持了原来的网页主要文案和布局，优化了每个地方的样式细节和布局，甚至自己给每个组件加上了动效，以及对应的SVG点缀，图片的清晰度也高了很多，整体的精致度一下就上来了。

这个页面有非常多的图片和图标素材，之前想要让AI自己找到合适的素材，然后还得根据图片的比例和内容在合适的地方填充都非常费劲。

现在像Lovble、V0、Bolt等我想要实现类似的效果都非常费劲，Youware只需要一次调整和一次点击就能有这么好的效果真的很厉害。

而且整体选的MCP都非常有针对性，非常好的解决了网页生成的时候没有素材的问题，整体的体验非常顺畅，完全不需要配置。

其他更新内容

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

比如就上线了积分系统，点击自己的头像就可以看到你拥有的 Kont，这个是根据你部署网页的浏览量来的，后面可以直接兑换为美元。

另外首页最近更新了之后分类更加详细了，可以在这里找到不同分类的 Vibe coding 作品查看。

你在浏览 youware 部署的网页的时候可以看到下方有个随机按钮，点一下就会给你展示其他社区内的优秀网页，点一下以后根本停不下来，可以去玩玩。

好了，这次的介绍和体验基本就这样了，Youware 是我最近看到迭代速度最快，而且每一步都非常准确的产品。

始终围绕为创作 Vibe coding 创作者服务的主线，帮助大家更好的分享和创建自己的作品。

最近Youware还在整一个复古风格的网站生成挑战，会有最高1000美元的奖金，这个可以整一下朋友们，哪怕你不参赛，在社交媒体推荐你喜欢的网页。浏览量高的也有会员可以领，感兴趣的可以冲一下。