最近全栈 AI Coding 做开发,有些心得(特别是在捣鼓 AI 直出前端视觉上)
基于 Apple 液态玻璃,总结了一套「流光玻璃」风格的 AI Coding 的视觉参考规范
做 APP 的时候,能直接让 AI 直出符合预期的视觉效果
我后面的产品就能直接沿用这个风格了,开心~\(≥▽≤)/~
分享其中我觉得效果特别棒的几个控件 ⬇️
在做的时候,一开始找了不少 Github 的 Liquid Glass 开源项目
不过我试下来,实际上效果都不太好,不建议走这条路线
Apple 直接在官网给了他们的 Figma 设计文件
figma.com比较推荐用这个作为参考的起点,具体的纯手动做法:
① Open in figma → Make a copy of this file ,将设计样式副本打开在 figma 里
② 找到 Material 页,圈出来的部分就是一些你可能会喜欢的玻璃材料
③ 选择目标材料,copy as code - css(all layer)
④ 粘贴给 Coding Agent,「这是 Apple 的液态玻璃组件的 CSS……,请参考 CSS 给我制作玻璃效果的按钮/悬浮菜单/托盘」
当然也可以一整页框起来复制为 CSS,要求其参考各类材质,直接编排整个页面。
如果感兴趣的人多,要不要干脆直接打包成一个前端规范 Skill?有感兴趣的么。