原创 Skill 的真实渲染结果
这一页的每张图都是 headless Chrome 实跑生成的，不是示意图、不是设计稿。 你可以自己打开源文件复现。
✅ 为什么这一页有图，而 12 种画风那一页没有？
因为这两个 skill 的产出是代码——CSS 和 GLSL shader，同样的代码在任何浏览器里跑出的结果一致， 所以截图能代表真实效果。而画风类 skill 的产出是提示词，实际出图取决于你用哪个模型， 我们没法用一张图替你保证结果，就不放。
因为这两个 skill 的产出是代码——CSS 和 GLSL shader，同样的代码在任何浏览器里跑出的结果一致， 所以截图能代表真实效果。而画风类 skill 的产出是提示词，实际出图取决于你用哪个模型， 我们没法用一张图替你保证结果，就不放。
chinese-web-themes · 8 套中式网页主题
八张样张的 HTML 内容完全相同，只切换 <html data-theme="…">，
所以看到的每一处差别都来自主题本身。点图看大图。
data-theme="ink"墨色为骨，宣纸为底
data-theme="azurite"石青石绿，金线勾勒
data-theme="song"素雅克制，文人气
data-theme="dunhuang"土红石青，斑驳壁色
data-theme="vermilion"正红偏橙，硬朗有力
data-theme="neo"低饱和，木与青瓷
data-theme="bamboo"竹青素白，清爽
data-theme="night"深色底，暖金点缀
guofeng-threejs · 水墨 shader
Three.js 自定义 GLSL：墨分五色（色阶量化）+ 边缘积墨 + 笔触扰动。 下面是 WebGL 的真实渲染输出。
skills/guofeng-threejs/demo.html色阶量化把连续光照压成五档墨色，边缘处加深模拟积墨 · 打开可交互版本 →
skills/guofeng-threejs/intro-demo.html网页首次打开时的入场效果 · 打开可交互版本 →
guofeng-threejs · 另外四种中式风格
同一套思路换技法：剪纸把水墨的边缘压深反过来做成背光透射；工笔靠反向外壳勒线； 敦煌让噪声从配角变主角；青绿只把线色换成暖金。四张都是 WebGL 真实渲染输出。
skills/guofeng-threejs/papercut-demo.html关掉光照做纯剪影，rim 不压深、改为背光透射的暖光——和水墨正好相反 · 打开可交互版本 →
skills/guofeng-threejs/gongbi-demo.html9 阶量化 + 矿物色 + 反向外壳墨线。界面上实时显示 draw call 与三角面，描边的代价看得见 · 打开可交互版本 →
skills/guofeng-threejs/dunhuang-demo.html多倍频噪声做剥落、龟裂与铅丹变黑。切到「初绘」档把做旧关掉，敦煌感立刻消失 · 打开可交互版本 →
skills/guofeng-threejs/qinglv-demo.html石青石绿按海拔映射，描边换成暖金。切到「墨线对照」档只换线色，金碧的贵气就没了 · 打开可交互版本 →