本文作者:droidHZ(@hezhiyan7)。版权归作者所有,未经授权禁止转载。


早上好,朋友们! 昨天群友有问怎么提升网站的审美,我看推上很多人推荐了impeccable.style ,主要是解决大家不知道怎么说设计提示词的朋友,我也实操了一下,今天分享给大家。

impeccable.style 设计提示词工具的官网页面

首先我一句话让codex (最近cc 封号多,暂时没用),生成了一个测试页面。 我的提示词比较简单,使用next.js 生成一个 AI 视频生成器的 Landing Page。生成了如下的效果。

codex 生成的 AI 视频生成器落地页初始效果

然后使用官方文档给的命令安装上impeccable,他会有21的skill 让你选择,AI给我解释这些skill 的功能,大家可以到官方文档看具体的说明和演示效果来选择安装 https://impeccable.style/cheatsheet npx skills add pbakaus/impeccable

安装 impeccable 时展示的 21 个 skill 功能列表

接着就是安装skills 的步骤: 选择skills 的路径,基于你常用的大模型进行选择。 选择skills 是全局还是项目基本 我选择了Symlink 的方式进行安装

接着我就用这里面具体的skill 去进行测试优化网页了。

首先让ai 使用/distill 去简化网页结构,现在网页上东西太多了

使用 /distill 精简网页结构后的页面效果

使用typeset skill 让网页排版更舒服

使用 typeset skill 优化网页排版后的效果

使用colorize skill 让配色更高级

使用 colorize skill 让网页配色更高级的效果

使用polish skill 让提升项目质感

使用 polish skill 提升网页质感后的效果

使用optimize skill 全面优化项目

使用 optimize skill 全面优化后的网页成品

不过我对网页的审美也比较差,感觉我这个demo 我也评估不了效果好不好,使用方式比较简单,大家可以用自己的项目试试优化效果,也许会更明显一些吧。