我给组件库写了个吉卜力皮肤

113 阅读1分钟

趁着X上gpt4o带起了一阵吉卜力风,我在探索有什么办法能给网站也上个色。

WechatIMG144.jpg

于是尝试了脚本注入CSS等方法,但是可想而知,由于技术栈、代码风格、设计样式本身差异很大,即便拿到所有div也要分清楚每一区域的定位和功能,难度远远超过把图片丢给gpt自由发挥。

于是,缩小范围,我们针对 TailwindCSS 的项目去写,因为TailwindCSS 的项目很多颜色都依赖 :root 变量或者统一的 theme 系统,也就是使用 CSS 自定义变量(var(--xxx))没有大量硬编码的颜色。

主题颜色可以把电影截图丢给GPT提取几种风格。

借助shadcn/ui的组件展示生成的效果,因为v0.dev,我能躺着完成这部分。

preview-1.png

几种典型的应用场景,比如注册、登陆、看板也做了demo。

preview-2.png

项目已经开源,因为我还不能完美复刻吉卜力的精髓,如果有好的样式想法,请大胆提PR。

后面会进一步探索,如何给已有网站实现换肤。