Communitygithub.com

Playful-Design/liquid-glass-skill

單一入口點,用文字或圖片生成任何 GLSL 玻璃著色器:液體玻璃背景、3D 玻璃文字、玻璃卡片或按鈕,自動辨識玻璃類型(液體、碎片、稜鏡、水晶)。

liquid-glass-skill 是什麼?

這是一個為 AI 代理(如 Claude Code, Cursor, Codex)設計的技能,提供統一的 /liquid-glass-skill 命令,從文字描述或參考圖片自動生成完整、可直接在 Shadertoy 中使用的 GLSL 著色器程式碼。它整合了多個子技能:glsl-liquid-glass 用於動畫液體玻璃背景,glsl-sdf-typography 用於 3D 玻璃文字(支援任意 Google Fonts 及風格),glsl-sdf-shapes 用於將字母中的點或重音符號替換為愛心、星星等形狀,以及 glsl-glassmorphism 用於玻璃卡片、按鈕或面板。技能能智慧地從使用者的詞語或上傳的圖片中自動辨識玻璃材質(普通液體、碎片/破玻璃、稜鏡、水晶/寶石),無需使用者明確指定。支援簡潔語法如 /liquid-glass-skill 'happy birthday' letter i in birthday shape heart background purple glass crystal,也能理解自然語言句子。最終輸出為 .glsl 檔案,並可選擇生成 .html 預覽。此技能在需要快速建立玻璃風格視覺效果、UI 元素或文字藝術時特別有用。

相容平台~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 預覽是額外的,永遠不會取代 GLSL 程式碼。

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 則強制指定。

玻璃指向它的詞語參考圖片中看到的特徵規則
碎片broken, shattered, cracked, smashed, shard, fragment, splinter(破碎、粉碎、裂開、打碎、碎片、片段、碎片)帶有鋸齒狀邊緣的薄板;平坦的表面;可見的細亮邊緣厚度materials/shard.md
稜鏡prism, triangular or pyramid glass, rainbow through glass, light splitting, spectrum(稜鏡、三角形或金字塔形玻璃、穿過玻璃的彩虹、光線分離、光譜)規則的幾何實體;周圍散射的彩虹光線materials/prism.md
水晶crystal, gem, diamond, jewel, quartz, cut glass, faceted, chandelier(水晶、寶石、鑽石、珠寶、石英、切割玻璃、多面、吊燈)多個切面,白色閃光materials/crystal.md
無(普通液體玻璃)其他所有情況平滑、流動、有機的形態無需讀取
  • 當兩者都符合時:破碎 + 任何內容 → 碎片;彩虹光線是主體 → 稜鏡;切面和閃光是主體 → 水晶。如果仍然不清楚,選一個並用一句話說明。
  • 搭配圖片時: 在編寫程式碼之前,用一句話描述它(「看起來像一塊玻璃碎片:平坦的表面、鋸齒狀邊緣、細亮的邊界。」),然後命名玻璃類型。
  • 僅讀取你需要的 materials/ 檔案(與此檔案相鄰)。使用該模式的技能編寫著色器,然後在交付前套用該材質的規則。當兩者在物理上不一致時,材質規則優先;形狀、光線、背景和管線始終來自該模式的技能或使用者的圖片。
  • 在背景模式並搭配材質時,使用 glsl-liquid-glass 的 natural 模式,再加上其 prism 或 broken 選項來處理形狀。
  • 材質只改變數值,不改變內容。 它們只設定折射率、色散、菲涅耳效應、吸收和薄膜干涉。它們可能會調暗或關閉參考圖片中未顯示的現有光線或反射;它們絕不會添加或移動光線、條紋、線條、輪廓、發光或物體。如果需要更多效果才能達到預期外觀,請告知使用者。
  • 透過至少渲染兩個時間點來檢查,並在有參考圖片時與其進行比較。
  • 告訴使用者你偵測到的玻璃類型及原因(一句話),並提供一個簡短的表格 設定 | 之前 | 之後 | 原因。

/shard、/prism 和 /crystal 快捷鍵將一個材質套用到使用者已有的著色器上,並將其儲存為 <name>.<glass>.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 目錄中的形狀:circle, heart, star, sparkle, diamond, moon, full moon, flower, plus, butterfly, butterflies, cloud, crown, spade (ace of spades), club (trèfle)。也支援法文名稱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,或該 mood 的顏色
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 的點替換為星星,紫色背景」。
  • 如果某些內容無法在不猜測的情況下讀取(兩個可能的文字、未知的關鍵字),問一個簡短的問題。

顏色名稱

名稱Hex名稱Hex
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

任何其他名稱:選擇一個合理的 hex 值並說明。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.jpgRubik Bubbles 字體在照片上,加上 summer.html 以便即時觀看
/liquid-glass-skill 'Mia' glass crystal「Mia」以切割水晶玻璃呈現,黑色背景
/liquid-glass-skill card background lavender glass shard薰衣草色背景上的玻璃擬態卡片,破碎窗玻璃效果
「一個會投射彩虹的玻璃稜鏡」背景模式,稜鏡(自動偵測)

3. 在程式碼之前

印出解讀結果,讓使用者可以檢查:

模式文字行數標記編輯字體背景玻璃
文字happy birthday1i 在 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.

相關技能