做了一个 ai 生成 shadcn/ui 的主题

一句话介绍:只需要输入关键词,就可以通过 AI 生成 shadcn/ui 主题。

功能特点

  • 支持 dark/light 模式
  • 支持 单主题模式,配色会更加大胆
  • 针对可读性,主题的统一性进行了优化,即使是绿色背景这种难度很大的颜色,可读性也是很好的。(可以看下面的主题展示)
  • 实时预览生成的主题
  • 速度快,单主题通常 3-6s,dark/light 通常 6-12s

截图

179shots_so.png

主题展示

正常的

40.png

131.png

大胆的

这类的配色是大部分设计师,都达不到的水准。

统一性/可读性/完整度上面都算比较合理。

44.png

93.png

139.png

即使是绿色的这种难度很大的颜色,可读性也是很好的。

Youtube demo

https://youtu.be/TBNbLyCZSmE?si=jVNjUK3KZwfkgOov

免费体验

恕我冒昧,这种配色……也不好看啊,对比度是很高,但背景色过于艳丽,看着很刺眼,看久了会不舒服的。

只是提供了更多的可能性,生成配色的前提是用户输入的关键词。

用户输入“绿色”,ai 生成绿色的主题,并且保证了可读性良好。对于工具本身而言没毛病。

是的,不过鄙人还是建议您可以对程序作一些调整,对背景色进行一些限定。

一般而言,UI 的背景色用黑、白、银色会比较和谐,而需要风格化的一般来说是强调色。或者,像 MS Office 2016 那样,修改标题栏(或顶栏、侧栏)的背景为主题色,其他部分的背景最好还是以黑、白、银色为主。

从工作情况上看,您的产品确实没问题。那么接下来,您需要考虑的,可能就是怎样保证出品更加完美。

恕我直言,您的应用是设计类工具,保证可读性、充分理解用户需求,只是基本的要求。但更重要的,还是要让产品更有美感。这个可能是值得您进一步考虑的地方。

谢谢你的建议。

这个工具的定位不是一个设计工具,他只是一个配色工具。用户群体也不是专业的设计师。

工具里面是有包含这部分内容的,可以体验一下试试。

至于红色,绿色这种比较夸张的配色,其实也是工具的一个选项,你可以选择勾选。(虽然企业项目用的比较少,但是个人项目很多的。并且也是可以作为宣传点,毕竟不是所有设计师都能设计出来这么大胆的东西,虽然他很刺眼,不能长时间阅读,但是能让人眼前一亮。)

谢谢您的解答。不过我想,正因为用户都不是专业的设计师,才需要软件提供更有美感的设计。

1 个赞

有趣,支持

1 个赞

要是有shadcn solid版本就好了

这个好像可以有,只是复制粘贴代码的时候,把 tailwindcss 配置转为 solid 就可以了。等我研究研究。