← 回中文 AI Skills 库

原创 Skill 的真实渲染结果

这一页的每张图都是 headless Chrome 实跑生成的,不是示意图、不是设计稿。 你可以自己打开源文件复现。

为什么这一页有图,而 12 种画风那一页没有?
因为这两个 skill 的产出是代码——CSS 和 GLSL shader,同样的代码在任何浏览器里跑出的结果一致, 所以截图能代表真实效果。而画风类 skill 的产出是提示词,实际出图取决于你用哪个模型, 我们没法用一张图替你保证结果,就不放。

chinese-web-themes · 8 套中式网页主题

八张样张的 HTML 内容完全相同,只切换 <html data-theme="…">, 所以看到的每一处差别都来自主题本身。点图看大图。

chinese-web-themes 的水墨主题渲染截图
水墨 data-theme="ink"
墨色为骨,宣纸为底
chinese-web-themes 的青绿主题渲染截图
青绿 data-theme="azurite"
石青石绿,金线勾勒
chinese-web-themes 的宋韵主题渲染截图
宋韵 data-theme="song"
素雅克制,文人气
chinese-web-themes 的敦煌主题渲染截图
敦煌 data-theme="dunhuang"
土红石青,斑驳壁色
chinese-web-themes 的朱砂主题渲染截图
朱砂 data-theme="vermilion"
正红偏橙,硬朗有力
chinese-web-themes 的新中式主题渲染截图
新中式 data-theme="neo"
低饱和,木与青瓷
chinese-web-themes 的竹韵主题渲染截图
竹韵 data-theme="bamboo"
竹青素白,清爽
chinese-web-themes 的夜宴主题渲染截图
夜宴 data-theme="night"
深色底,暖金点缀

guofeng-threejs · 水墨 shader

Three.js 自定义 GLSL:墨分五色(色阶量化)+ 边缘积墨 + 笔触扰动。 下面是 WebGL 的真实渲染输出。

guofeng-threejs 水墨 shader 渲染结果
水墨渲染 demo skills/guofeng-threejs/demo.html
色阶量化把连续光照压成五档墨色,边缘处加深模拟积墨 · 打开可交互版本 →
guofeng-threejs 开场水墨扩散效果
开场水墨扩散 skills/guofeng-threejs/intro-demo.html
网页首次打开时的入场效果 · 打开可交互版本 →