案例
Fold — 折疊紙上的互動字體
一個由 AI 製作的互動字體實驗。輸入一個字,調整紙張上的 Z 字形折疊,然後將其再次平整。
開啟頁面查看將在新分頁開啟 boloop-works.pages.dev,該頁面為獨立站點,不屬於本站。
圖片署名:Tink
一個字變成紙雕
Fold 是一個 AI 輔助的互動字體實驗。輸入最多八個字元,調整折疊角度,然後將紙張再次平整。字母會跟隨十個連接的紙面板在 Z 字形折疊。這是一個風格化的 SVG 投影,並不是紙塊物理模擬。
前往實時遊樂場更改字詞。已檢查桌面和行動裝置控制、鍵盤輸入、重設和字面文字處理。沒有自動動畫、登入或上傳的個人資料。
實際建立提示
Using the discovered Anthropic frontend-design skill, make Fold: an independent interactive paper typography playground for people who enjoy AI-assisted web design. Use a cool glacier-blue workspace, cobalt condensed lettering on a warm-white sheet, and one yellow circle printed behind the word. The sheet is the visual centerpiece. Let the visitor enter up to eight characters and change a crease angle from zero to 68 degrees. At zero the word is flat; as the angle rises, the actual text-bearing sheet compresses into alternating accordion facets with appropriate shading. Provide Lay it flat and Reset actions. Keep the heading and controls quiet, avoid cards, fabricated statistics and marketing promises. Use SVG with real geometry updates, local system fonts and a small standalone script. Make mobile controls comfortable, label every field, preserve keyboard focus, render input as text, and avoid automatic motion. Actually open the page on desktop and mobile, change the text and angle, verify reset and inspect the resulting screenshots before writing a post. This is a new AI-assisted experiment inspired by the folded-plane mechanism seen in Anemolo's Codrops FoldingDOM demo; do not copy its source, typography assets or demo content.來源與改編
發現的技能是 frontend-design by Anthropic,授權 Apache-2.0。其主題導向的規劃、克制的視覺方向和截圖評論促進了這個建構。上面的提示是為這項工作使用的任務特定簡報,並不是聲稱由 Anthropic 撰寫的提示。
摺疊平面參考是 Anemolo’s FoldingDOM demo for Codrops。該參考已開啟並檢查;其程式碼、字型、演示內容和圖片並未複製。此版本用可編輯的字詞和摺疊控制取代捲動牆,並使用新實現的 SVG 幾何。
截圖顯示由 Tink 用 AI 製作的實際網站。區域系統字型在不同裝置上可能略有不同.