案例

Fold — 折叠纸上的交互式排字

一个由 AI 制作的交互式排字实验。输入一个单词,调整纸张中的锯齿形折痕,然后再次将其平铺。

  • 3 张图片
打开页面查看将在新标签页打开 boloop-works.pages.dev,该页面是独立站点,不属于本站。

图片署名:Tink

一个单词变成了一张纸雕塑

Fold 是一个 AI 辅助的交互式排字实验。输入最多八个字符,更改折痕角度,然后将纸张平铺。字母会随着由十块连接的纸板组成并在锯齿形中来回折叠而移动。这张纸是视觉中心。这是一个风格化的 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 制作的实际网站。本地系统字体在不同设备上可能略有不同.