最近真的是用AI编程软件Trae玩页面玩疯了，被吸引到了，没想到用代码还能做出非常好看的页面，PPT直接就不香了

这对于之前我搞设计来讲，完全是颠覆认知的，过往以为的设计是一个个图形，如何选择，如何排列分布，颜色搭配怎么舒服。

现在？代码里面可真的是太容易了，配色都可以转换成一个个的数值，像下面这种：

/* 主色调 */

--primary: #52B6DF;

渐变还是对比色都可以表示，根本不需要懂什么意思。

咋以前没见程序员这么搞前端的，感觉设计就是设计，编程就是编程。

而现在是真的没有边界了。

给了我这种纯小白长见识的机会了。

这不，最近又玩出了一个自律性的app如下：

还有一键模仿生成文章封面的效果，甚至还超越了原参考图，如下：

PPT都不用了，创客贴，稿定设计，canvs都不用了，Trae都给你搞定，还贼好看，弄得好的话。

还可以玩出这种花样：

这种好像叫什么GLSL片段着色器，就这么被我一个小白做出来了，我的天，打开了新世界。

今天就同步共享下我经过不断调整后的提示词，我自己也在学习迭代当中，试用的效果还不错，你用的话也能生成不错的效果。

01简单提示词：

第一种就是比较简单的提示词，只给到了要求范围，没有给具体的结果要求，这种的自由度很大，可能会有意想不到的惊喜。

可以把想法填进去，然后生成就行。

原提示词如下：

请你作为一位资深全栈工程师，帮助我开发一个类似于keep的自律app，请帮我完成完整的UI/UX界面的设计，同时要满足以下要求：

1）自我思考匹配合适的内容策略与组织方案，SEO与内容优化策略

2）自我思考明确的设计风格参考（如Linear App）；

3）自我思考匹配详细的交互体验描述；

4）响应式设计要考虑以及符合相关原则，遵循可访问性设计原则

5）性能优化考虑。

6）自我思考匹配合适的CSS变量参考，HTML结构参考

7）自我思考匹配并符合合适的技术规范，例如使用HTML5、TailwindCSS 3.0+（通过CDN引入）和必要的JavaScript

8）自我思考详细的设计元素，考虑到色彩方案、排版结构、视觉元素、字体选择等

9）符合组件设计规范

把开头你想制作什么样的页面告诉给他就行，后面可以不改，然后输入Trae之后，就开始自己生成了，也啥都不用管。

这里关键的就是第一轮对话交流结束后，大概看下生成效果，然后再让他调整即可。不过大部分情况下我们也就只能提一些好不好看的问题，代码背后的情况 ，我们也不懂。

02 复杂提示词

第二种要求更多，更具体，但是发挥空间肯定就小了。而且最好有参考和对照。比如我用来模仿生成页面就很好用。

先把想要模仿的页面截图截下来，然后先让AI模仿截图中的页面把提示词当中的关键信息修改一下，然后再发给Trae制作，相当于是一比一复制模仿了。

把模仿的那个拆解细致，再仿照生成一个。

然后就变成了made in China了。

原提示词如下，实在太长了，400多行，搞得是有点复杂了，后续再简化试试看。看完文章后台回复网页获取吧。

先把截图和提示词发给AI，输入以下提示词让先修改一套模版出来：

我想设计一个自律打卡类的app，请你根据我的想法从下面提示词中选择合适的方案和模版情况，填写完整的提示词给到我：

通用设计提示词模板

一、设计风格模板

学术/专业风格

。。。。。等等，太长了就不放在这里了

让先修改出一版提示词，再复制这个提示词到Trae。

接下来就还是一直点击全部接受就可以了，如果生成的不满意，可以再微调你想要的效果：

比如说提出一些修改建议：还不够高大上，要有视觉冲击力；丰富内容；提高用户留存率和分享率，以及拆分成几个网页不方便查看。

然后可以看下最终的效果：

虽然不能一次性完全生成好，但是好就好在能够用语言直接让它调整修改，修改几次基本上就能得到满意的结果。

目前字节trae用claude3.7 snnet还是免灰的，抓紧用起来~