Communitygithub.com

Playful-Design/liquid-glass-skill

从一个命令或一张图片生成任意玻璃GLSL着色器的唯一入口。自动识别形状(动画液体玻璃背景、3D玻璃文字、玻璃卡片等)和玻璃类型(普通液体、碎片、棱镜、水晶),始终输出GLSL代码。

liquid-glass-skill 是什么?

该技能为开发者提供了一个统一的入口,用于生成各种玻璃效果的GLSL着色器。用户只需输入一段文字、一张图片或一个简短的命令(如 `/liquid-glass-skill`),技能就会自动判断所需的形状和玻璃类型。形状包括动画液体玻璃背景(`glsl-liquid-glass`)、3D玻璃文字(`glsl-sdf-typography`,支持任意字体和风格,字母的点和重音可替换为心形、星星等形状),以及玻璃卡片/按钮/面板(`glsl-glassmorphism`)。玻璃类型则从普通液体玻璃、碎片/碎玻璃、棱镜到水晶/宝石,均能根据用户描述或参考图片自动识别。最终输出一个完整的、兼容Shadertoy的GLSL着色器文件(`.glsl`),并可选附带HTML预览。技能支持高度定制化的短语法,如 `'happy birthday' letter i shape heart background purple glass crystal`,以精确控制文字、排版、颜色和材质。该技能适用于Claude Code、Cursor等AI编程助手,可显著提升3D图形开发中玻璃效果生成的效率。

兼容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/Playful-Design/liquid-glass-skill/tree/HEAD/liquid-glass-skill

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

/liquid-glass-skill:一个命令,任意的玻璃效果

每个着色器都由两个选择决定:形状(第1节)和玻璃(第1b节)。结果始终是GLSL代码:一个完整的Shadertoy兼容的 mainImage,放在 .glsl 文件中,无论用户提供什么(文字、图片或着色器)。一个 .html 预览是额外提供的,绝不替代。

1. 选择形状(模式)

请求包含……模式遵循
没有要写的文字,也没有卡片:/liquid-glass-skill 单独执行,“制作一个液体玻璃着色器”,“一个液体玻璃背景”,一个玻璃物体背景完全按照 glsl-liquid-glass 技能编写
要写的文字:引用的文本、/liquid-glass-skill 后面的词语,或“写……”文字遵循 glsl-sdf-typography 技能(以及 glsl-sdf-shapes 用于任何形状)
card、按钮、面板、玻璃拟态、UI玻璃卡片遵循 glsl-glassmorphism 技能;background COLOR 重绘其流动背景颜色

1b. 选择玻璃(材质)

用户无需命名:从文字或图片中识别。输入 glass TYPE 强制指定。

玻璃指向它的词语参考图片中看到的规则
碎片破碎的、粉碎的、开裂的、打碎的、碎片、裂片、碎屑一薄板,有锯齿边缘;平坦的面;厚度可见为细亮的边缘materials/shard.md
棱镜棱镜、三角形或金字塔状玻璃、透过玻璃的彩虹、光分割、光谱一个规则的几何体;周围有彩虹光线materials/prism.md
水晶水晶、宝石、钻石、珠宝、石英、切割玻璃、刻面、枝形吊灯许多刻面,白色闪光materials/crystal.md
无(普通液体玻璃)其他所有情况光滑、流动、有机的形态无需读取
  • 当两者都符合时:破碎 + 任何 → 碎片;彩虹光线是主题 → 棱镜;刻面和闪光点是主题 → 水晶。如果仍不确定,选择一个并在一行中说明。
  • 有图片时: 编码前,用一句话描述它(“看起来像玻璃碎片:平坦的面、锯齿边缘、细亮的边缘。”),然后命名玻璃类型。
  • 只读取你需要的那个 materials/ 文件(与此文件相邻)。用模式对应的技能编写着色器,然后在交付前应用材质的规则。如果它们在物理效果上不一致,材质优先;形状、灯光、背景和管线始终来自模式技能或用户的图片。
  • 在背景模式下使用材质时,使用 glsl-liquid-glass 的 natural 模式,再加上其 prism 或 broken 选项来处理形状。
  • 材质改变数值,从不改变内容。 它们只设置折射率、色散、菲涅耳、吸收和薄膜干涉。它们可以调暗或关闭参考图片中没有的现有灯光或反射;它们从不添加或移动灯光、条纹、线条、轮廓、发光或物体。如果需要更多效果,请告知用户。
  • 通过渲染至少两个时刻来检查,并与参考图片(如果有)进行比较。
  • 告知用户你检测到的玻璃类型及原因(一行),以及一个简短表格 设置 | 之前 | 之后 | 原因。

/shard、/prism 和 /crystal 快捷方式将一个材质应用于用户已有的着色器,并保存为 <名称>.<玻璃>.glsl 文件,放在原始文件旁边(原始文件保持不变)。

在文字模式下,文本是从一个连续的液体玻璃表面切出的(深色背景上是原始深色虹彩颜色,浅色背景上是柔和的粉彩玻璃):液体作为一个材质在所有字母上流动,周围的背景是一种纯色(除非用户选择其他颜色,否则是黑色)或一张图片。如果用户要求液体也围绕在字母周围,请解释这会无法阅读字母,并保持纯色背景。

2. 短语法

/liquid-glass-skill 'TEXT' [letter X [in WORD] [OCCURRENCE] shape SHAPE [whole] [small|big|bigger] [COLOR] [melted]]... [vibe NAME | font NAME [bold|italic|weight N]] [background COLOR | image PATH [clear|liquid]] [tint COLOR] [rainbow] [3d] [lines N] [glass TYPE] [FINISH]
/liquid-glass-skill card [background COLOR] [glass TYPE] [FINISH]
/liquid-glass-skill [glass TYPE] [FINISH]
部分含义默认值
'TEXT' 或 "TEXT"要写的文本,完全按输入(大小写、重音、标点)。没有引号:/liquid-glass-skill 之后到第一个关键词之前的每个单词。文本中的 / 强制换行。必需
letter X其点或重音被替换的字符(参见 glsl-sdf-typography 中的标记表)无
in WORD只替换该单词中的 X 的出现每个单词
OCCURRENCEfirst、second、third、last、all 或数字所有出现
shape SHAPEglsl-sdf-shapes 目录中的形状:圆形、心形、星形、闪光、菱形、月亮、满月、花朵、加号、蝴蝶、蝴蝶、云、皇冠、黑桃(黑桃A)、梅花(三叶草)。法文名称也可用letter 后必需
whole(形状之后)形状替换整个字母,而不仅仅是其点(“用满月代替 o”):任何字母都适用。脚本 --replace "o=fullmoon"仅替换点或重音
small / big / bigger(形状之后)形状大小:×0.7 / ×1.5 / ×2(脚本 --mark "i=heart*2")。放大的形状会远离其字母以保持间距。精细书法字体(vibe romantic)有很小的点:推荐默认使用 bigger原始点的大小,稍大一点
COLOR(形状之后)仅用于该形状的彩色玻璃(例如 shape heart red)与字母相同的玻璃
melted形状融合到字母中,而不是浮在其上方漂浮
font NAME任何 Google Fonts 字体系列(font Pacifico、font 'Playfair Display' weight 800)、字体文件路径,或 font tubes 用于手绘霓虹管DM Serif Display
vibe NAME一种选择字体及其设置的情绪:adventure(粗体)、cloud(蓬松、柔和)、medieval、romantic(情人节)、cartoon(经典设计)、dripping(湿颜料)。完整列表及别名见 glsl-sdf-typography无
background COLOR纯色背景:颜色名称(下表)、light/dark + 名称,或十六进制代码 #RRGGBB黑色 #000000,或情绪的默认颜色
image PATH文本位于该图片之上,玻璃会弯曲它。同时生成一个 .html 文件,可在浏览器中实时播放。clear = 显示图片的透明玻璃,liquid = 仅液体文字liquid,带少量图片
tint COLOR浅色玻璃的色调(tint pink、tint white 为近乎透明的玻璃)背景色的柔和色调
rainbow / pastelrainbow:原始深色、虹彩液体玻璃颜色。pastel:柔和的珍珠玻璃深色背景为 rainbow,浅色背景或图片上为 pastel
3d每个字母作为独立的蓬松3D玻璃物体(较老的外观),而不是一个被文本切割的玻璃表面一个表面
lines N行数自动
glass TYPEshard、prism 或 crystal(第1b节)。可选:自动从文字或图片识别普通液体玻璃
FINISHfrost、polished、denser、lighter、transparent、translucent:生成后应用,使用该技能无
  • 多个 letter … shape … 组可以依次跟随。
  • 关键词在文本之后可以任何顺序出现,法文也适用:lettre、dans、forme、fond、lignes、police(font)、gras(bold)、italique、ambiance / style(vibe)、image / photo。
  • 句子中提到的情绪(“童话风格”、“有点浪漫”)意味着 vibe。消息中附带的图片意味着 image:首先将其保存到工作目录中的文件。
  • 简单句子意味着同样的事情:“写 happy birthday Chloe,将 birthday 中 i 的点替换为星星,紫色背景”。
  • 如果某些内容无法不通过猜测来读取(两个可能的文本,未知的关键词),请简短地提问。

颜色名称

名称十六进制名称十六进制
black#000000white#FFFFFF
cream#F2EEE6light grey#D9D9DE
dark grey#1E1E22navy#0B1430
blue#2747A8light blue#BFD9F2
purple#6B40A1lilac / lavender#C9B6E8
pink#F2A7C3hot pink#E0408A
red#B3202Aorange#E8772E
yellow#F2D04Agreen#2E8B57
mint#BDECD6teal#1F7A7A

任何其他名称:选择一个合理的十六进制值并说明。light X / dark X:将 X 与白色或黑色以50%混合。

示例

命令解读
/liquid-glass-skill背景模式
/liquid-glass-skill 'Mia'“Mia”,黑色背景
/liquid-glass-skill 'happy birthday' letter i in birthday shape heart background purplebirthday 中的 i → 心形,紫色 #6B40A1
/liquid-glass-skill 'pixel jam' letter i shape star letter j shape diamond background creami → 星形,j → 菱形,淡黄色
/liquid-glass-skill 'Bonjour / Chloé' lettre é forme lune fond #FDE2E42行,é 的重音 → 月亮,淡粉色
/liquid-glass-skill 'Mia' letter i shape heart red frost红玻璃心形,然后应用 /frost
/liquid-glass-skill 'I love / Playful Design!' letter i in Design shape star letter ! shape heart font Pacifico background light purple手写字体 Pacifico,Design 中的 i → 星形,! → 心形,#B5A0D0
/liquid-glass-skill 'Be mine' letter i shape heart vibe valentineLavishly Yours 字体,i → 心形,#F6D5DC
/liquid-glass-skill 'Summer!' letter ! shape heart vibe cloud image ~/Pictures/beach.jpg图片上的 Rubik Bubbles 字体,同时生成 summer.html 用于实时观看
/liquid-glass-skill 'Mia' glass crystal“Mia” 用水晶切割玻璃效果,黑色背景
/liquid-glass-skill card background lavender glass shard薰衣草色背景上的玻璃拟态卡片,破碎窗户玻璃
“一个抛出彩虹的玻璃棱镜”背景模式,棱镜(已检测到)

3. 编码前

打印出解读以便用户检查:

模式文本行数标记编辑字体背景玻璃
文字happy birthday1i in birthday → 心形(漂浮)DM Serif Display紫色 #6B40A1无
文字Summer!1! → 心形Rubik Bubbles (vibe cloud)图片 beach.jpg无
卡片————薰衣草 #C9B6E8碎片

然后遵循模式的技能,接着是材质。文件命名为文本(happy-birthday.glsl),卡片模式下为 glass-card.glsl,背景模式下为 liquid-glass.glsl。绝不覆盖现有文件:在名称后添加 -2、-3……。.glsl 文件始终提供;.html 预览仅在其旁边提供。

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

相关技能