使用AI生成的页面总是被一眼认出来怎么办?1分钟给你解决

前言

不知道你有没有这样的痛点,使用AI生成的页面总是能够被一眼认出来,典型的紫色渐变色

那么有没有解决方案呢?

有!欧阳1分钟教会你。

加入欧阳的AI交流群

步骤1:截图和生成json样式文件

找到你喜欢(参考、抄袭)的网站进行截图。

如果你只想参考目标网站的部分UI,那么就使用微信或者电脑的截图软件只截取参考UI部分。

如果想参考整个网站的UI,就需要截网站全图了,方法如下:

  • F12打开谷歌浏览器的控制台,按下 Ctrl + Shift + P(Windows) 或 Cmd + Shift + P(Mac)

  • 打开命令面板输入screenshot,选择Capture full size screenshot进行截图,如图:

然后将截图丢给任何AI或者AI工具都可以,比如GPT、Cursor、Claude等,加上这样的提示词:

复制代码
创建一个能体现该布局风格的设计.json 文件。包含结构、间距、字体和颜色等要素,以便我将其作为应用程序的设计系统使用。目标是帮助 AI 精准复现这种视觉效果。

我这里是使用的codex,如图:

经过这一步我们就已经有了参考网站的design.json样式文件。

步骤2:根据样式json文件生成页面

和平时让AI生成页面的提示词一样,只是需要加一个限制:

复制代码
要求使用design.json 进行样式设计

比如我想做一个nano banana模型生成图片的落地页,我给AI的提示词就是这样的:

这个是最终生成的效果对比图,左边是我使用这一句提示词生成的网页,右边是参考的网页:

总结

使用样式json文件约束AI应该是目前最简单直接的方案了,除此之外还有一些其他的方案,比如:不让AI一次性生成整个页面,而是拆分成多个步骤,首先生成页面的UI框架,然后再一个个模块的填充内容。

相关推荐
IT_陈寒4 小时前
7个鲜为人知的JavaScript性能优化技巧,让你的应用提速50%!
前端·人工智能·后端
lang201509284 小时前
Spring Boot与K8s集成的核心机制
spring boot·后端·kubernetes
superlls4 小时前
(场景题)Java 导出 Excel 的两种方式
java·开发语言·后端·excel
绝无仅有4 小时前
某银行大厂面试技术问题深度解析(一)
后端·面试·github
艾小码4 小时前
前端别再乱存数据了!这3种存储方案让你的应用快如闪电
前端·javascript
黄毛火烧雪下4 小时前
HTML 的底层原理
前端·html
程序新视界4 小时前
一张图解析MySQL中InnoDB的逻辑存储结构
数据库·后端·mysql
Victor3564 小时前
Redis(88)Redis缓存的大小如何合理配置?
后端
Victor3564 小时前
Redis(89)Redis的安全机制有哪些?
后端