是网页!更是极致的 PPT 替身:这款 Skill 正在重塑我的录屏演示炫酷场景!
- 2026-05-17 14:25:07
👆点击钱来有道>点击右上角“···”>设为星标⭐
今天要发布的 PPT 展示类的 Skill 其实我一直在用，以前发布的文章里，已经有它的身影。
因为太有个性，所以一直都是自用。
最近看了太多千篇一率的 AI 味儿网页设计，觉的这个 Skill 可以发挥更多的功效。
它可以为你带来几个使用场景：
1，作为长/短视频录屏时的内容背景展示。
2，PPT内容演讲！
3，可横竖屏演示，也可以手机端 9:16比例录屏，满足不同平台内容制作要求。
4，作品集展示、课程展示、工具发布、Skill演示等
操作很简单，把 Skill 文件放到全局目录里，随时调用就可以。
当你说"做成PPT"、"做成幻灯片"、"做成网页展示"、"做成视频背景"、"做成演示页面"，或要求将任意内容（课程、工具、Skill、项目、作品集）做成网页，立即调用此Skill。
内置十个经过精心调试的世界级设计风格，每次根据内容气质自动推荐最匹配的三个，支持横版/竖版方向选择、署名「冰河出品」、内容提炼确认、风格卡预览、迭代修改等完整工作流。
注：这里有冰河出品的署名，你们在使用时，可以先让他改成你要的名字，或者直接去掉署名，因为我本人非常自恋，当时就加了这么一个，录视频的时候方便留水印。哈哈哈哈！
嗯，就这么简单！
功能方面，我会边操作边介绍！
这款 Skill 的风格预设了 10 个版本，每个风格都是我在网络收集和自己审美的集成！
如果你不喜欢我的风格，别急，下次我还会把 Claude design的功能制作成适合大众多场景的 Skill 敬请期待！
第一步，解压Skill 文件，放到 .claude 全局目录下的 Skill 文件夹中（当然你也可以放到外面的某个项目目录中）
然后打开 Claude code ，调用 Skill
如：使用ppt-web-designer skill 帮我把某某某内容做成网页！（这里你可以提供内容）
或直接像上面说的，把某某内容做成 PPT ，做成网页展示，他会自己调用这个 Skill !
注：如果你安装过其它类似 Skill 最好就直接指定，别调用时混乱！这点要注意！⚠️
我随便让 AI 帮我写篇文章，然后让它调用 Skill 实操如下：
这个 Skill 在开始时先确认一下幻灯片的方向：两种方向都支持全部十款风格，视觉设计不变。
你是要竖版（纵向翻页）还是横版（左右翻页）
回复方向后，再进入第二步。方向选定后在整个后续对话中保持该方向，除非你特别要求切换！
接下来就是提炼内容结构，计划张数和主题布局。
确认后，就开始网页设计了！
我们一共有 10 个风格，你可以按需选择。这其中，如果你想用的是手机 9:16的尺寸来产出网页，在制作前告诉他就可以。
可以根据我提供可选风格（共十款）：
V1 深色科技极简 ·
https://ppt.flowlab.im/ppt-web-designer-intro-V1 （演示）
这一版的视觉要点：
深海蓝底 #0a0f1e 铺满 + 青色霓虹 #22d3ee 作点缀色，背景是细青色双层网格线（40px + 200px），封面印章带青色发光边框与内外阴影，左下角有一颗呼吸脉冲的「LIVE」状态点，顶部进度条是青色渐变发光条。
字体使用 Noto Serif SC 900 + Noto Sans SC 300 + DM Mono + Space Mono，数字全部用 Space Mono 的等宽排版，透出浓浓 Linear / Vercel / Raycast 产品官网调性。
V2 深夜印刷局 ·
https://ppt.flowlab.im/ppt-web-designer-intro-V2（演示）
这一版的视觉核心：
墨黑底 #0c0c0c + 脏橙 #e8632a + 奶油白 #f5ede0,全场零发光、零阴影——这是 V2 的灵魂。
左侧永久一条 3px 橙色竖条做页面边框,乳白色的竖进度条从顶端沿着这条橙条向下流,进度一目了然。
每一页的右侧藏着一个巨大的 Playfair Display 斜体英文单词作装饰背景
杂志编辑腔贯穿全场：
所有大数字（01 / 02 / 03...）不用等宽字体,改用 Playfair Display 斜体加粗 900,那种印刷时代页码的味道立刻出来了。
入场动画换了方向：
从 V1 的「淡入 + 上移」改成「淡入 + 右移 」——对应 V2 规范里「从左进入」的编辑书页翻开感。
V3 霓虹录像带 ·
https://ppt.flowlab.im/ppt-web-designer-intro-V3 （演示）
这一版的视觉核心：
极深暖黑底 #100a0e 配三色霓虹——品红 #f0147c、黄绿电光 #b8f013、琥珀橙 #f0a014。
所有内容框顶端挂一条 2px 的霓虹色条,每张幻灯片颜色轮换,翻页时色彩节奏起伏,有录像带色带跳动感。
右上角「▶ HH:MM:SS」时间码,JavaScript 每秒真实更新;左下角「● REC · SP · LP」指示器,红点以 1.2s 周期闪烁,停顿节奏模拟真实录像机。
整屏叠了一层 CRT 扫描线（3px 间距,控制了强度避免摩尔纹）和暗角径向渐变,远看像一台九十年代的 CRT 显示器。每张幻灯片顶端还有一条彩色磁带磁道条（粉黄橙循环脉冲）。
鼠标变成一颗品红光点 + 跟随的霓虹环,让光点在任何背景都发光。
V4 深夜书房 ·
https://ppt.flowlab.im/ppt-web-designer-intro-V4 （演示）
视觉核心 —— 彻底东方气质:
暖褐黑 #100e0b + 朱砂红 #c8382a + 金箔黄 #c9963a + 米白 #f2ead8,全场零发光、零阴影。
每一页四周一圈古籍双层红线边框+ 内层内缩更淡的红线,四角各一个 7x7px 朱砂小方块做注册点,整体就是一本线装书的内页气场。
文字全部改成中文/文言
这版突出的是中国文化。
V5 极夜水墨解构 ·
https://ppt.flowlab.im/ppt-web-designer-intro-V5 （演示）
视觉核心 —— 99% 黑白灰 + 唯一一点朱红:
极黑 #080808 铺底,正文与标题都是米白 #f0f0f0,朱红 #c0392b 只在极少数关键位置出现
一整场看下来朱红可能只占 0.8% 的面积,但每一次出现都被当成视觉锚点。
V6 极光冰川北欧 ·
https://ppt.flowlab.im/ppt-web-designer-intro-V6 （演示）
这款是唯一的浅底,整体呼吸节奏与前五款完全相反。
冰川白 #f8f9fa 铺底,深炭黑 #212529 做文字,极光渐变 #667eea → #64d8cb → #a8e6cf只在关键词出现，封面副标题、版本号、封面印章边框。
信息密度比其他版本减半。没有一个边框、没有一个阴影、没有一个圆角。这是 Kinfolk 杂志和 Snøhetta 建筑图册那种风格！
V7 烫金深夜奢品 ·
https://ppt.flowlab.im/ppt-web-designer-intro-V7 （演示）
字极大、信息极少、远距离清晰。
视觉核心 —— Bottega / Loewe 目录气质:
无底洞黑 #050505 铺底,三层金色系统层层铺开，亮金做标题关键词、古铜金做图标与 mono 标签、深铜金 做最外层装饰线与极小角标。
三种金的明度梯度给页面带来呼吸感,不是扁平的土豪金而是电影打光下的哑光纹理。
整个界面的线条粗细都压到最低,是奢品网站那种"不吵不闹"的精致感。
V8 活字印刷动态 ·
https://ppt.flowlab.im/ppt-web-designer-intro-V8 （演示）
核心就一个字:动！一台正在运转的活字印刷机:
活字聚合动画 + Bebas Neue 翻牌数字从下方弹出 + 印刷网格底纹 + S6 白底反转"灯突然亮了"。这一版的动效会是全场最多最精密的。
看演示吧，非常高级！
V9 胶片暗房琥珀 · https://ppt.flowlab.im/ （也是演示的首页）
没错，这是我最喜欢，也是经常拿来做教程用的 V9风格！胶片齿孔 + 换页快门闪白 + Kodachrome 琥珀 + 电影感！
每切换一页的时候，会闪一下，就像是给你拍一张照片一样，而且两个边框像相片的底片空格。
很有 B格哦！希望你们喜欢！
V10 建筑蓝图包豪斯 ·
https://ppt.flowlab.im/ppt-web-designer-intro-V10 （演示）
它就像一张工程图纸！整屏铺满双层工程网格，光标十字准星——鼠标走到哪儿,都像一支绘图笔落在图纸上。
核心规范:普鲁士蓝 #0a1628 + Unbounded 900 超粗数字 + 工程蓝图双层网格(40px + 200px)+ 四角十字测量标记 + 封面图纸标题栏 + 十字准星光标 + 换页快门闪白 60ms + S6 变现页唯一工程警告红！
全部风格介绍完毕，你可以输入 ~风格卡 可查看全部十款的详细配色与气质说明。
因为咱们这是做教程，其实用习惯了，你可以直接说：我要做成 PPT网页，用 V9风格，竖版就行了！
不需要走全流程！
如果 V1--10 这10版某处要微调（比如哪一张的信息密度、配色强度），直接说~迭代 [要求] 即可。
使用非常简单，但每个页面都是我与 Claude 的多轮对话精选的风格，量不在多，精华即可！
技能文档下载：ppt-web-designer.zip
链接: https://pan.baidu.com/s/1rNy-BrOwDbpMkIKTZ9d44g?pwd=stpd
好了，赶快去试试吧！感谢大家的支持！
