三个方法让Cursor构建网站更加精美:Browser MCP 克隆 + 提示技巧 + 组件修改!(Bolt、Lovable)

Browser MCP “克隆”网站

三个方法,构建精美网站

在这篇文章中介绍过FireCrawl MCP可以用于网站复刻。Cursor + MCP:效率狂飙!一键克隆网站、自动调试错误,社区:每个人都在谈论MCP!

今天看个新的,用Browser MCP “克隆”网站结构,再套上自己的设计。

如果你只是喜欢一个网站的骨架,但想给它换身皮呢?

这个方法特别适合你想抄一个现有网站的结构,然后换上你自己的设计。

不用从零开始,直接利用别人已经验证过的布局。

你需要一个叫 Browser MCP 的工具,免费的,链接在后面。

我们来让他复刻一个网站试试。

原网站:

复刻成果:

还是挺不错的,有模有样,具体的图片填充都给你留着了。

它会像人一样去浏览网站,而不是简单地爬HTML。

它有个”浏览器截图”工具,能帮它理解代码,也能理解真实的视觉结构和布局。

可以在Prompt里让它彻底探索网站,分析架构、导航模式和样式。

如果你想只关注结构,就把Prompt里关于样式的那部分删掉。

中间过程:

Browser MCP 详细解读

AI自动化浏览器控制

Browser MCP:用AI自动化你的浏览器。

这是个MCP服务器,再加个Chrome扩展能让你用VS Code、Claude、Cursor、Windsurf这些AI应用来自动化你的浏览器。

快 (Fast)

自动化是在你自己的电脑上跑,本地执行,没啥网络延迟,性能更好。

私密 (Private)

既然是本地跑,你的浏览器活动就都留在你自己的设备上,不会发到什么远程服务器去。

保持登录 (Logged In)

用的是你现有的浏览器配置文件,所以你所有网站都还是登录状态。

隐身 (Stealth)

因为它用的是你真实的浏览器指纹,所以能躲开那些基本的机器人检测和验证码。

技术背景:Browser MCP是从微软官方Playwright MCP服务器改过来的。改动的目的,是为了能自动化用户自己的浏览器,而不是每次都新建一个浏览器实例。

这样就能用上用户现有的浏览器配置文件,保持登录状态,还能躲开那些经常阻止自动化浏览器的机器人检测机制。

Browser MCP 感觉也是借鉴了:比Playwright更高效!BrowserTools MCP 让Cursor直接控制当前浏览器,AI调试+SEO审计效率狂飙!

Browser MCP这个项目现在在GitHub上有2500多个star,挺受欢迎的。

如何安装和使用?

浏览器扩展+MCP服务器配置

这玩意儿分两部分安装,但很简单:先装个浏览器扩展,再在Cursor里配好MCP服务器。

第一步:Browser MCP 浏览器扩展

扩展下载地址:

Chrome 网上应用店链接:https://chrome.google.com/webstore/detail/bjfgambnhccakkhmkepdoekmckoijdlc

装完点连接:

第二步:MCP服务配置

配置文档:

官方文档:https://docs.browsermcp.io/setup-server#cursor

GitHub开源:https://github.com/BrowserMCP/mcp

Mac、Linux配置:

{   "mcpServers": {     "browsermcp": {       "command": "npx",       "args": ["@browsermcp/mcp@latest"]     }   } }

Windows用户注意:

如果选择Windows安装,请参考:Windows下MCP报错的救星来了,1分钟教你完美解决Cursor配置问题

windows这样安装:

安装完的配置文件和这个mcp的工具如下:

第二个方法:结构化 Prompt 模板

一个Prompt通过截图生产json文件,以此作为上下文让AI助手复刻网站:

提示词获取:

后台回复:json

以前我也写过一些结构化提示词,实践的文章:

  • 从0到1用AI做了个AI服务网站, 全程没写一行代码

  • Bolt、Lovable使用10大技巧 | 一行提示词构建沉浸式故事型个人站点

  • 字节豆包 1.6 + Trae + 火山 MCP + FaaS:AI云原生 Agent 开发部署全流程体验

Lovable 设计功力 10 倍提升技巧

1. 从意图出发,别只说功能

❌ 错误示范:

“给我建个登陆页。”

✅ 正确示范:

“做一个有电影感的登陆页,通过讲故事的方式介绍一个高端健康品牌,设计风格要高级。”

2. 用带情绪的关键词

→ 有触感的 (Tactile)

→ 有编辑感的 (Editorial)

→ 自信的 (Confident)

→ 快乐的 (Joyful)

3. 提供上下文

❌ 别说:

“加个带按钮的卡片”

✅ 要说:

“加一个定价卡片,感觉要高端大气,让人放心。把最受欢迎的那个套餐用柔和的光晕和丝带高亮出来。”

4. 借鉴优秀设计

→ “风格学苹果的定价表格。”

→ “导航栏布局跟Notion一样。”

5. 先搞定系统,再管具体页面

→ 字体

→ 颜色

→ 布局逻辑

Pro Tip:写提示词,就像给你们团队最有天赋的设计实习生布置任务一样。要精准,要深思熟虑。但同时,也要留点空间,让他们发挥创意。


大家普遍认为,提示词工程现在对开发者来说太重要了,写好提示词对做出真正“可爱”的产品影响巨大。

总的来说,这些提示词技巧,核心就是:让 AI 理解你的意图和感受,而不是只执行指令。 给它足够的信息和参考,但也要给它发挥的空间。


让AI网站瞬间高大上的小技巧

博主Prajwal Tomar觉得,现在大多数AI生成的网站,看起来还是挺”平庸”的(mid)。他分享了几招,告诉你怎么让它们真正好看:

1. 别再让AI”造轮子”了

→ 找一个你喜欢的网站,截个图

→ 丢进ChatGPT

→ 生成design.json文件

2. 用3D让你的首屏活起来

Unicorn Studio有很多漂亮的3D模板,找一个跟你网站调性搭的。改改文字、颜色、灯光,搞定。

3. 想要独特风格?试试Tweak CN

→ 进到”code”标签页

→ 复制CSS代码

→ 告诉Cursor当做基础样式

4. 用更好的组件

• ReactBits

• 21stdev

• Magic UI

5. 动画 = 质感

• 平滑的鼠标悬停效果

• 微妙的倾斜

• 滚动时的渐入效果

6. 让背景图也”动”起来

用Midjourney生成超赞的背景图,然后把图丢进Runway的图转视频工具。


7. 字体和布局也超重要

→ 选一个简洁的 Google Font。
→ 告诉 Cursor 用在哪个地方 (比如“只用在首屏标题”)。
→ 强调响应式细节:“让这个 bento grid 在手机上变成 1 列。”
不要说什么“让它响应式”这种模糊的指令。

他说自己每周给客户做MVP,都用这套工作流。如果你也想用AI做出干净、能上线的产品UI,可以收藏起来。

过来人血泪史:10个让你的Lovable设计功力10倍提升的技巧(我后悔没早知道)

血泪史

搞了100多个项目,踩了无数坑,也赢了不少次。Felix Haas总结了一份终极秘籍,帮你用Lovable做出更好的产品。

💡 1. 用”时髦词”(Buzzwords)

这些词能瞬间提升你的设计感,效果惊人。Felix专门列了个清单,可以找他要。

“极简风、玻璃质感、悬浮元素”
“活泼、大胆、亮色、圆角”
“奢华、杂志风、有触感、电影感”

🔄 2. 第一个提示词感觉不对,立刻重来

别浪费时间修一个烂底子。第一版感觉怪怪的?直接扔了。重写你的想法,换个角度提问,再跑一遍。Felix说,他很多最好的结果,都是在第二轮才出来的。

📸 3. Lovable喜欢看图说话,用截图快速改Bug

遇到问题,截个图,把想改的地方标出来,加一句简短的提示:”这里间距不对,麻烦调紧凑一点,看着干净点。”Lovable理解图像比纯文本更强。

⚡ 4. 学会用这个布局升级提示词

“内容不变,只优化间距、视觉层级,让它看起来更高端。”这一句话,就能解决80%的设计问题。

🎨 5. 像设计师一样迭代

回退功能是你的好朋友。大胆尝试各种变化。别去修烂底子,快速回退,重新搭一个。

🧩 6. 用真实组件库

AI生成的东西有时会显得普通,别硬凹。直接从这些地方找更好的积木块:

21st.dev • Aceternity UI • HyperUI
复制提示词,粘贴到你的Lovable项目里。

✨ 7. 加点微动效,感觉瞬间高大上

提示词可以这么写:

“平滑的悬停过渡、滚动渐入、柔和的进入动画”
或者:”这个Logo鼠标放上去时加个动画。”
动效 = 感觉上的品质提升。

🎯 8. 用可视化编辑省时间

不是所有东西都得靠提示词。Felix最大的技巧是,直接用可视化工具选中某个元素,然后只对这个元素提需求。

📱 9. 一句话搞定手机适配

提示词:”让这个页面响应式,并为手机优化。”Lovable能做到80%的适配,发布前记得看两边效果。

🚀 10. 发布前的最后检查

上线前,别忘了:

• 加标题+描述(为了SEO)
• 上传网站图标(favicon)+分享图片(OG/social image)
• 绑定域名
这些都搞定了,再点发布。

有人觉得第一点,”不对就立刻回退重来”救了他很多时间。

有人已经试过了第九点,表示确实有用。

总的来说,这些技巧都是Lovable玩家的实战经验总结,核心就是:用好AI的强项(快速生成),避开它的弱点(理解微妙意图),并结合手动微调和好的设计资源,像真实设计师一样去迭代。

第三个方法:浏览器更改,UI组件更改

相关文章:

Cursor + StageWise + 主动提示词 = 惊喜!实测:AI 把我的定价卡片改得花里胡哨!

🌐

三种方法,构建精美网站

Browser MCP克隆结构,到结构化Prompt设计

再到浏览器实时调整,每一种方法都有其独特的优势。

选择最适合你项目需求的方法,开始你的创作之旅。

One More Thing

本次复刻网站参考点来自于知识星球:

搞定最初的100个用户

有人在Reddit上总结了20家现在牛逼哄哄的公司,看看他们当初是怎么干的。有些干的是脏活累活,一点也不高大上。

地推发传单

• Uber: 地推团队上街发推荐码

• DoorDash: 印传单贴满斯坦福

• Lyft: 给创业公司送免费礼品

钻空子颠覆

• Airbnb: “黑”进Craigslist挖房东

• TikTok: 应用商店用超长名字

• Pinterest: 苹果店展示机换成Pinterest

靠朋友圈

• Snapchat: 商场里找人演示产品

• LinkedIn: 利用人脉注入种子用户

• Facebook: 从大学宿舍邮件列表开始

社区火爆

• Robinhood: Hacker News候补名单

• Loom: Product Hunt发布

• Dropbox: 产品演示发到HN

总结:做那些无法规模化的事。发挥创意,别按套路出牌。利用好你现有的关系网。没什么黑魔法,全是些笨功夫和真心。


(文:AI进修生)

发表评论