趁着X上gpt4o带起了一阵吉卜力风,我在探索有什么办法能给网站也上个色。
于是尝试了脚本注入CSS等方法,但是可想而知,由于技术栈、代码风格、设计样式本身差异很大,即便拿到所有div也要分清楚每一区域的定位和功能,难度远远超过把图片丢给gpt自由发挥。
于是,缩小范围,我们针对 TailwindCSS 的项目去写,因为TailwindCSS 的项目很多颜色都依赖 :root
变量或者统一的 theme
系统,也就是使用 CSS 自定义变量(var(--xxx)
)没有大量硬编码的颜色。
主题颜色可以把电影截图丢给GPT提取几种风格。
借助shadcn/ui的组件展示生成的效果,因为v0.dev,我能躺着完成这部分。
几种典型的应用场景,比如注册、登陆、看板也做了demo。
项目已经开源,因为我还不能完美复刻吉卜力的精髓,如果有好的样式想法,请大胆提PR。
后面会进一步探索,如何给已有网站实现换肤。