claude生成html如何打开

大家好，我是手软猫咪。今天这期视频，包括你现在看到的每一页画面，都不是用剪映、 pr 或者任何传统剪辑软件做的，它是 ai 写的一堆网页代码，然后直接渲染成了 mp 四，没有时间轴，没有关键帧，没有拖拽素材。 整个过程我只做了三件事，写文案、录音频，把东西丢给 ai。 可能你会问，这有什么意义？ ppt 谁不会做？意义在于这套流程一旦跑通 以后，出同类视频的编辑成本几乎为零，换个文案，换个音频，同样的风格，同样的质量，几分钟就能再出一条。接下来我把整个流程完整拆给你看。先说整体思路，就四步。 第一步，写文案，就是你现在听到的这些话，先把要讲的内容写出来。第二步，生成音频，你可以自己录，也可以用 ai 配音，录完之后用剪映之类的工具把气口和停顿剪干净。现在这句话就是我用阿里的 cosy voice 训练的自己的声音， 听起来我觉得还是挺不错的。导出一个干净的音频文件。第三步，生成字幕，把音频丢进剪映或者其他语音识别工具，导出 s r t 字幕文件， s r t 里面会标记每句话的起止时间，精确到毫秒，这个时间信息是后面的关键。 第四步， ai 生成画面，把 s r t。 字幕文件丢给 ai 编程工具，比如 color code 的 或者 open code 的 这些模型用什么都行。 这期就是用 deepsea 生成的，效果一样好，告诉他按照这些时间戳每句话，生成对应的 html 页面。最后用 hyperframes 这个开源工具把 html 渲染成 mp 四的视频， 核心逻辑就是 s r t。 字幕充当了画面和声音之间的桥梁。如果你不需要这么精确的音画对应关系，比如你只想快速出一版概念视频或者内部演示，那 s r t。 的 不用直接把文案大纲丢给 ai 就 可以 让它自己安排节奏。这里单独说一下 hyperframes 这个工具，因为它是让整套方案成立的关键一环。 hyperemax 是 high end 开源的一个项目，完全免费商用，也没有任何限制。他做的事情是你给他一个 html 文件，他用无头浏览器逐帧截图，然后拼成视频。你可能会说，我自己用录屏工具录 html 页面不也一样吗？ 不一样，录屏的问题是时间不好把控，你手动翻页，手动触发动画节奏很难精准。而 hyperremax 是 精准到毫秒的， 每一帧在什么时间显示什么内容，完全用代码决定，不需要人工介入。这意味着效率提升了一个量级。理论上，你一晚上可以批量产出一百期同等质量、同等美术水准的视频。 所以所有你能在网页上实现的效果， c s s 动画 g s a p 动效 three g s 三 d 场景都可以变成视频。而且因为是逐帧渲染，同样的代码永远产出一模一样的结果。 对于我们这个场景来说，最重要的一点就是它天然适配 ai， 因为代元模型最擅长写的就是 html， 你 让 ai 去操作视频剪辑软件的时间轴，它做不到，或者说很难实现。但让它写 html， 这是它训练数据里最多的东西之一。 至于 hyperframes 具体怎么安装，怎么调用，这些你完全不需要知道，你只需要知道它是干什么的，能做到什么程度就够了。把 hyperframes 的 项目仓库地址丢给 air 编程工具，告诉他用这个工具来渲染， 剩下的它自己搞定。我全程没有手动超过任何一条 hyperframes 的 命令，现在一步步看实际怎么操作。文案这一步没什么特别的，你可以自己写，也可以让 ai 帮你列大纲，然后自己调整，重点是确定好每个段落要呈现什么内容。文案就是你整个视频的骨架，音频部分 录音用任何你顺手的工具都行，录完后用剪映把气口和长停顿剪掉，让语音听起来连贯。不想自己录的话， ai 语音合成现在的质量也完全够用了。最终你需要的是一个干净的音频文件。 s r t 字幕。我自己是用剪映 把音频导入剪，应用语音识别功能自动生成字幕，然后导出为 s r t 格式。每一条字幕都有编号时间戳和对应的文字，这个文件就是你丢给 ai 的 核心输入。 最后是 ai 生成 stml， 打开你的 ai 编程工具，把 stml 文件丢进去，然后告诉他你想要什么样的视觉风格。 ai 会生成一整个 stml 文件， 里面的每句话都对应一段内容，时间轴全部绑定好了，预览一下效果，不满意就让 ai 继续调，满意之后让它渲染成 mp 四，再和你之前的音频合到一起，视频就完成了。 到这里你可能会想， ai 每次生成的风格都不一样怎么办？今天是赛博朋克，明天变成了水彩风，没法形成系列感，这确实是个问题，但解决方法很直接。先打磨一套模板，你先花时间跟 ai 反复调一版你满意的 html 模板 配色、字体、动画、节奏、布局方式都调到你满意为止。这个过程可能会来回好几轮，这是一次性的投入。 调好之后，你把这个模板文件保存下来，下次做新视频的时候，开一个新的 ai 对 话窗口，把两样东西丢给他，你的模板文件和新的 s r t 字幕或文案大纲，告诉他参照这个模板的风格和结构来生成新的内容。 这里要说一下为什么是给参照物，而不是写一份详细的设计规范文档，也就是所谓的 skill， 让 ai 去遵守。 原因很简单， skill 是 文字描述，每次生成都会受大模型随机性的影响，同样的规范文档，跑十次可能出十个稍有差异的结果，很难做到完全一致。但如果你给的是一个实际的 html 文件， ai 是 在看着具体的代码去仿照， 颜色值、间距、数值、动画参数全都是确定的，付现的精度高得多，所以这个用模板做参照物的步骤不可替代。最后聊一个观点， 在做这种 ai 生成的 ppt 或者视频画面的时候，瓶颈不再。模型能力在美术参考现在不管是 deepsea cloud 还是 gpt， 写 html 和 css 等能力都够用了。能不能做出好看的东西，差别在于你给他看了什么。 你跟 ai 说帮我做一个好看的 ppt， 他 只能给你一个泛泛的、不好不坏的结果。但你如果给他一张苹果发布会的截图，说按照这个风格来， 或者给他一个现成的设计稿，说参照这个配色和布局，结果就完全不一样。所以我的建议是，平时看到好看的画面就截图存下来，不管是网页、 app 界面、别人的视频截图、海报，甚至游戏 ui， 这些都是你的弹药库。 但要注意，截图只是参考，它的作用是帮你明确自己想要什么方向，真正落地的时候，还是至少用 ai 做出一个 demo， 调到满意为止。这个 demo 就是 我前面说的模板， 它既是你的美术标准，也是后续批量生产时的一致性锚点。总结一下今天的流程，文案、音频、 s r t 字幕、 ai 生成， html、 hyperframes 渲染成视频。整个方案的核心价值是可复制性。第一次跑通这个流程可能需要几个小时去摸索，但一旦有了满意的模板，后面每一条视频的制作成本就非常低了。 hyperture 是 完全开源免费 ai 编程工具，现在也有了很多免费或低成本的选项，感兴趣的话可以自己动手试一下。我是手仁猫咪，我们下期再见。

这个名为 open design 开源项目，号称能替代 cloud design， 它能帮你设计 ppt、 商业海报、 app 原型等。关键这一切只需要借助 cloud code 的 就能完成。那它到底是怎么用？设计效果又如何？我们来实际体验一下。 以制作 ppt 为例，首先我只需要告诉他我要什么样的内容，他便会借助 cloud code 自动生成一个菜单栏供我选择。我选择完成之后，只需要静静等待他执行，最终他会给我生成一份 atml 格式的演示文稿。我们先来看看效果 是不是非常不错，要知道我的 cloud code 用的是 dipsic v 四模型，就能得到这样的效果。看到这，是不是觉得 cloud code 不 仅仅是一个 ai 编程助手，它也是一个通用的智能体。

家人们刚刚看到 cloud 支持了一个新的功能，在对话里面可以支持交互式的 ui， 让我们看看到底是什么功能，以及它是怎么实现的吧。 在对话框中输入你的问题，它可以根据你的问题生成对应的 ui， 帮助你快速地理解你问题中的概念，甚至还能够生成一些按钮，帮助你继续去追问问题。 我非常好奇他们这个 u i 是 怎么做到的，于是我问了他这个问题，原来他们是新增了一个 soviet 工具，本质上就是生成了一段 html 代码，再把这个代码通过工具发送给前端，前端 再通过 ipham 炫长出这个 html 代码。接着我继续追问 soviet 这个工具，可以看到这个工具总共有四个参数，一个是 是否已经阅读了工具的使用说明书，第二个就是说这个前端 ui 的 这个标题名，第三个就是渲染期间的加载文案。最后的就是这个前端 ui 的 代码。 比较有意思的是这个阅读说明书的工具，它能够保证 ai 在 画不同的图的时候能够遵循它们的 ui 规范，比如颜色、布局、字体等等。最后我们可以简单看一下这个查看说明书的工具， 其实很简单，无非是对不同的以外主见，分门别类的写了一个说明书，让 ai 在 画的时候能够去参考。今天的分享就到这里，我个人认为在 ai 时代，友好的人际交互非常重要，希望今天的分享能够给你带来一点启发。

hello， 大家好，我是杰口那五月九号 astropica 的 一个工程师 terry， 他 发了一个 twitter， 掀起了一个 h t m l。 的 一个风潮，那今天给大家解读一下， 那在他发之前呢？大潮内部从养虾潮开始，其实已经逐步的把过去的 dog 和 ppt 的 形式切成了 h t m l， 只不过大家用的更多的可能是一些静态的 h t m l， 但是现在随着一些数据源更加稳定，包括工程化的能力更 更加强大之后，也逐步把 html 变成一个可以永久保存的，真的可以互动的这么一个网址。那过去我们可能交付给客户的是一个 ppt， 是 一个 doc， 但是未来我们可能直接交付了一个现成的 html， 它不光在视觉上会更好看，交互性更强，可读性更强，并且最重要的是它后段的数据是可以实时更新，持续更新的， 并且这个网址是不会变的。那基于这个情况，我们是不是可以去思考一下，如果我交付给客户的是一个永久不会变的网址的话，那么是不是相当于我交付给了一套过去传统的 sas 公司交付的一个 dashboard 或者一个看板？ 过去可能对一个企业一年可能要收费个二三十万，甚至我知道有一些品牌每年交付给这样的外部下属公司一年一百万的看板费用的。那么如果我们有了这个 h t m l。 的 形式，可以去做维护了之后后端的数据，并且能够持续更新，而且我们在上面会有更多的玩法出来。 那么是不是过去的这些做 dashboard 的， 或者做这种纯萨斯服务交付看板这样的公司，它的业务模式就已经落伍了，当然这些公司现在肯定也在大面积的去交付新的 html。 总之我们在商业化的里面， 其实我们交付给品牌广告主客户的这个产品已经变了，从过去的 doc 和 ppt 变成了现在的 html。 好 了，那这篇文章其实就是说这个事儿的，我们来简单看一下， 那我不会带大家去过为什么要做 h t m l 而不是 ppt， 因为我觉得这个就没啥好说的，暂且不看它的信息密度，比如说啊， 同时有表格，有各种数据，还有代码，各种这个组建都可以去用。我是想说，当我们有一个更丰富的，我理解为是一种内容形式的交付的话，我们为什么不呢？我们必 并没有什么成本。难道过去是因为我们不知道有 html 吗？我们当然知道，我们只是觉得这样去做一个这样的交付实在是太重了，没有必要。但现在它的门槛几乎为零了，我们为什么不做呢？对吧？ 下面就是它对于 html 的 一些优势的解释，但我觉得不用太 care， 因为就是无脑去跟就好了，就跟现在做 agent 的 产品没有人会不做 memory 一 样，因为你不做 memory 就是 我们默认为现在所有的 ai agent 的 产品其实都在解 memory 的 问题。 如果不做 memory 的 产品，就是没啥没啥好说的。那就像如果我们未来交付的还是一个 dashboard 的 静态看板的话，或者说一些 b i 链接的话，也没啥好说的了，你连 h t m l 都没有，对 吧？虽然都交付的是一个网址，但是这个 h t m l 的 话，它核心还是我们通过代言模型让它把任意的文本变成一个 h t m l 的 逻辑，而不是过去我通过各种前端的设计变成一个 h t m l 的 逻辑，而然后一年收个一百万的费用 么？这里面我特别想讲的是这个互动的这么一个环节，我们可以去做一些，比如说这边我们可以去设置一些参数，然后并且在上面跟它完成一个互 动。然后这个的话我目前看到的是有一些做广告里面的，他们会把这两个进度条变成平台或者达人的这么一个选型，我把这个地方选为不同的达人类型，比如说这个是 a 类达人，我曝光到一百万， b 类达人到十万的时候，那我产出的这个广告效果是什么样子的？ 我可以去用这个去做一个组合和交付，相当于一个筛选器，但是它的这个样式会做得比较漂亮。那刚刚 sropik 的 工程师的话，把这个东西做成了一个叫做 playground 的 一个东西，我们今天来看一下这个 c l y。 那首先呢，我们直接跟克老师说帮我安装这个插件，他就自己会去找啦。然后我用这个插件直接做了一个 html 的 安装插件的教程，我们可以看一下，首先我没有特别复杂的自然语言的交互，我就跟他说帮我做成一个 html 就 没有了，那我们来看一下，我觉得还是比较有意思的。 首先我们安装这个插件的时候有两种安装方式，然后他帮我安装好了，然后这个地方是可以有一个交互的，里面会有四个模板可以去用，每个模板大概是什么意思？比如说我现在最开始我先用了这个 design playground， 去帮我做一些美化的视觉的设计，然后去做我的数据库， 然后这个其实有一点点，比如说我们要做一个非常复杂的领域，他先去有一些 research 的 功能，最后还有一个平审的一个工作流。那 那这样下来是不是这个产品是干啥的，我们就非常清楚了。但是过去如果我们要学习一个产品的话，我首先要把这些所有的文字，包括里面的链接一个一个点进去看，当我不想读的时候，它可以帮我 把这些很繁琐的文字变成可读性特别强的，而且可以互动的 h t m l， 我 就觉得很清晰。而且它的这个一级标题， 包括下面的一些交互行为，我都觉得非常的好，而且我们一眼下来是非常清楚的。这个我是觉得我们在学习一些新的产品特别复杂，不想看的时候用这个形式也挺好的。那这个是我们日常的使用场景，那在工作场景上的话，其实也是一样的，我们只需要把我们的长段的文字发给，让他去帮我们生成 html 就 好了。 那我们来尝试再用一下，我给他发一些公开的数据，让他帮我生成一个 html， 因为字数太多我不想去读，那我们来期待一下 好啦，这个已经做好了，因为我给他喂的是一些健身相关的数据。那我们可以看一下健身业务下垂类的热度，比如说上涨，比较好的可能是健身房和器械使用的，我们点了的话它会自动跳转，然后里面会涉及到超级星星啊乐客，然后包括还有电天鹅颈相关的这样的一些热度的话题， 比如说最热的可能是肩颈拉伸，因为现在年轻人都是伏案工作嘛，包括练天鹅颈、直角肩、美肩，然后还有健身穿搭服饰上涨的比较好， 因为换季了，所以冬天的下降，我觉得这些都很不错，而且它的视觉也非常漂亮。这个地方分了好几类，我们可以随意的去点击互动，然后包括我们可以直接看上涨，然后直接看下降，它都有分好类，包括这个新增的词也都会有， 觉得还挺不错的，也可以直接折叠去看一个整体的。那这地方也可以直接去搜索相关的 query， 就 能够直接匹配到下面的内容，都做得非常的漂亮，而且这个视觉也还可以吧，那整个这个做下来我也只花了几分钟， 然后我自己实际的时间可能就是把这个内容粘贴过去了，剩下的时间就是 cloud 的 官方的文章，大家都可以去看一下它里面详细介绍的 html 到底有什么样的优势，比 如说它的视觉设计有哪些方向啊？包括它 coding 的 几种办法，然后包括它的一些解决方案，然后下面还会有一些它的使用场景，比如说这个 p r 的 公关文章，包括一些带注视的拉取 request， 然后它也可以去帮我们做一些设计，比如说这个 living design system， 还有一些组建的设计，以及我刚刚说过了，它可以做一些沙盒演练，我觉得非常好玩，叫做 playground， 刚刚我已经展示过了，包括它可以有一些可以点击的部件，我们可以一层一层地去设计得比较深。然后还会有一些刚刚虽然没有涉及到，但是它可以有一些流程图，应用的内容里面没有，所以它就没 有被触达到，以及它可以去写一些 ppt 的 deck， 那 它的功能相当的全面，所以我建议大家只要涉及到特别长的文本，需要去做理解透彻和视觉表达的时候，都可以优先 h t m l 的 形式，而不是过去的设计一个 设计稿或者 ppt 或者一个 doc 的 形式去完成，而是可以卷到 html 了，那这个大厂其实已经卷了两个多月了，所以我感觉未来的话，应该会有更多的人能够把自己过去的这个交付的工作形态变成 html。 好 啦，今天的分享就是这些，关注即可，一起用 ai 试仿生产力！

大家好，屏幕上是 open slide 自动生成的自我介绍换灯片，那 open slide 到底是什么呢？简单说就是你用自然语言告诉 ai 你 要做什么。换灯片， ai 帮你写 react 代码， open slide 负责把它渲染成可以演示的换灯片，整个过程你不需要打开 powerpoint， 不 需要拖拽排版，甚至不需要自己写代码。它有三个核心概念，第一，每一页换灯片就是一个 react 组建，不是什么模板引擎， 不是 markdown 转换，就是真正的 react， 你 想怎么写就怎么写。第二，固定画布，所有页面都渲染在一个一千九百二十乘一千零八十的画布上，框架会自动帮你缩放，适配不同屏幕，你写的时候就当屏幕就是一千九百二十乘一千零八十，用像素值就行。 第三，它是专门为 ai agent 设计的项目，初使化的时候就自动带了一套 skills 文件， agent 读了就知道该怎么写。换灯片来看一下它的架构，其实非常简单，整个项目就三层，左边是脚手架，就是你跑 npxinet 的 时候用的。 它帮你生成项目模板和那些 skills 文件，中间是核心，运行时包括一个 vita 插件、换灯片查看器、检查器和演示模式。右边就是你的内容，也就是 slides 目录下的文件，你只需要关心这里就行了。 那 vt 插件具体干了什么呢？就四个勾子， ctrl 设置开发环境 resource id 声明虚拟模块 logo， 生成换灯片的加载逻辑， ctrl server 监听文件变化处发热重载。然后它生成三个虚拟模块，分别管理换灯片列表、配置和文件夹结构。 接下来看怎么用。左边是工作流，四步循环。第一步， innit 一 行命令生成项目。第二步，在 aint 里输入斜杠 create slide， 告诉它你要自动帮你生成。 第三步，打开浏览器看效果，哪里不满意就点击那个元素，留一条评论。第四步，回到 agent 里跑 apply comments， 它就会自动把你的修改应用上去，然后重复这个循环，直到你满意为止。右边是一些配置信息。 openside 的 配置文件很简单，基本上就是设置一下端口、目录、路径这些，大部分情况你不需要改配置，默认就能用。下面是四个内置的 c 口命令。 create gunk slide 创建换灯片 slide outring 是 技术参考手册 apply gunk comments 应用检查器的修改 create theme 创建可附用的主题。 最下面是文件约定，每套换灯片就是一个 index 点 t s x 文件导出一个配置数组，每个元素就是一页，非常直观。 兼容性方面，基本上任何能编辑 react 代码的 agent 都可以用。 cloud code code， ex cursor， wind surf， gemini， c l i 这些都支持。 生成的焕灯片就是一个静态网站，你可以部署到 versal， cloud， flair， pages， netify 这些平台，也可以直接导出成 html 文件或者 pdf。 最后怎么开始呢？就三行命令，分别对应着创建项目 cd 进去，然后打开你的 agent， 开始用自然语言描述你想要的换灯片就行了。最后我来演示下如何使用。先在终端中一次运行三个启动命令， 确保前置面板可以打开。最后在生成的文件目录下打开终端，然后运行 clod code， 现在就可以在 clod code 中让大模型使用 open slide， 既能创建换灯片了。这里我选择它推荐的这种情况一般一路回车就好。 现在已经完成了幻灯片的制作，下面让它自己打开运行一下。本期视频到此结束，我们下期再见。

这段视频主要不是做教程，而是测试 cloud opus 四点七的前端生成能力。我给他的任务很直接，生成一个单文件的 html 天气动画页面，只用 html， css 和 javascript， 不 依赖后端。 这个需求本身有一定强度，因为不只是把页面搭出来，还要求支持多种天气和昼夜切换，而且每种状态都要有明显动效。 页面中间还要有一张玻璃拟态天气卡片，展示城市温度、湿度和风速这些信息。所以这次测试的重点就是看它能不能同时处理视觉设计、动画表现和代码落地。 可以看到，当我把要求描述清楚之后， opus 四点七很快就进入生成状态，而且不只是输出代码，还会顺手整理实现思路和关键细节。生成完成之后，他直接给出可运行的 weather demo 点 html， 并打开预览，让我马上检查结果。 接下来我切换几个天气场景，你可以重点看背景光影、云层、玻璃卡片，还有场景切换时的整体氛围变化。如果你平时也在做活动业、创意业，或者需要快速出一个高质量前端 demo， 那 opus 四点七的这类能力还是很值得参考的。

哈喽，下班了，今天阿斯罗匹克公司发了一篇文章，说的是 html 会没有理由的高效率啊，因为之前像克拉克的好像全是 cpt， 他 们的输出都是 markdown 模式啊， markdown 的 一个文件， 他这篇文章指出呢， html 文件呢，比 markdown 文件更高效。他举了几个例子，首先对于 啊 ai 来说，本身以前 ai 的 能力没有足够那么强，他的输出文档呢，以麦克当的模式呢，去输出呢，更高效，而且信息也比较齐全的。但是随着 ai 的 能力的增强，麦克当的展现的形式呢，已经跟不上 ai 的 一个能力了 啊，而且里面的展示呢，可能更加的具象化，然后也就更能表现出 ai 的 想表达的一个意思。对于人类来说啊麦克当的一些文档呢， 只要你超过一百行，你根本都不想去看的。嗯，对于 h t m 来说呢，他有更强的表达能力啊，表达的一个展现形式，也有了更多的一些编辑和反馈。所以说他认为 h t m 呢， 他可能是接下来啊 ai 和人类之间的一个沟通的这样的一个桥梁的更高效的一个形式。最后他也说出了一个最核心的观点，就是说为什么要选用 h t m， 因为 h t m 它可以使得 啊人与 ai 之间的一个长期的一个交互啊，因为当 magenta 出来的时候，你是不想去看的， 不想去研究的，你永远在点下一步，下一步或者是修改的时候也让 ar 去修改，用自然语言用 ar 修改，它的效率本身就会 啊，不是很高。那么 hdmi 的 形式呢，展现形式更友好，人类可以去啊，第一时间去 get 到它的信息，进行一个修改，但是它也提出了 hdmi。 相对于 md 来说啊，它的缺点，首先 hcl 的 一个输出对于托克来说消耗是更大的，然后啊，输出的速度呢，也是慢二到四倍，但是他觉得是值得的，因为贵这件事从来不是因为量，而是因为效率啊， 即使花了更多的投款和时间，但是本身这件事情执行的效率，人机交互的效率更高了，他觉得是值得。这件事情我想到了前段时间啊，前很长一段时间大家都在做系统改造，就为了做一件事情，让 ai 去读懂系统，不论是面对接口的一些 m c p 的 改造， 还是说啊一些 m c p 转换为 c i 的 一个命令的一个改造，当时都是为了让机器更懂，怎么去让机器去读， 现在又回到一个本质啊，然后怎么让人类去懂啊。所以说，不管 ar 最终的怎么变更，它的产品怎么变更，最终的它的用户永远都是人 啊。现在慢慢发现呢，不仅让 ar 区能够读懂，而让人读懂更重要。所以 apple 选择了 hmi， 然后要即将放去 md 输出格式，这也是在 ar 的 这个变更当中不断的变的一个结果啊，唯一不变的就是变。

我跟你们说，我之前用 cloud code 简直就是在受刑，每次我让他帮我更新周会表格，我都会像个老妈子一样跟他反复交代， 你还记得吗？上次我跟你说的那个链接，帮我再更新一遍，然后他就开始漫长的回忆，加载，找数据，一通操作下来，每次生成的格式还都不一样，真的超级崩溃，感觉自己像花钱雇了一个每天都在失忆的实习生。但是最近我打通了他的两个隐藏技能，简直是打开了新世界的大门，真的太爽了！ 第一个就是 m d 文档，说白了就是你给 ai 做的一份专属的入职手册，你是谁，你喜欢什么样的风格，你的任务有什么样的规矩，全都写在里面。 ai 每次开工前都会强制的先去翻一翻这个手册，你再也不需要跟他废话去交代背景了。 第二个就是 skill， 这个更牛，相当于你给 ai 定制的一件 s o p。 比如我们经常要搞封面和视频的爆款拆解，以前每次都得先输一大段咒语啊，风格是什么样儿的，用什么字体等等，都需要去跟他交代很多内容。 现在我写了一个 skill， 我 只需要一句话，封面生成，它就全都自动搞定，生成封面了，真的太省心了！给你们看一下我的文件目录，这里就建了几个专门的 md 周会更新封面生成视频分析，我给你们演示一下现在有多夸张。以前我让它更新一个周会表格，我交代加等待的时间可能要十几分钟， 现在我只需要输入杠周会更新，哎，他就开始自动更新了，看分毫不差的更新好了，一句废话都不用多说，你牛不牛？当然，肯定会有人说啊啊，我不会写这种规则文档啊什么的。 别慌，我教你一招，你不用一开始就自己写，你先跟 cloud code 进行正常的一个聊天。呃，你告诉他你平时是怎么干这个活的，你反复的跟他沟通、打磨，等他能生成一个正常的结果，就说明他已经能完全理解你的流程了。这个时候你直接跟他说， 把我们刚才沟通的内容生成一个 skill， 它就会乖乖地自动帮你生成。好了，压根儿不需要你自己写。用魔法打败魔法，真的太绝了！姐妹们，听我的，今天赶紧跟着搞一遍，明天你就会有惊喜哦！

ai agent 时代， html 可能正在取代 markdown， 成为人与 ai 写作的更优输出格式。 markdown 过去很强，因为它简单，可一只好编辑。但现在问题变了，当内容主要由 agent 生成修改总结时， 人类已经不太需要亲手维护 markdown 文件了。超过一百行的 markdown， 很多人其实已经不读了，只是礼貌性打开一下。更麻烦的是，它很难表达复杂信息状态优先级流程图，交互参数对比方案，最后都被压成一长串文字。而 html 的 优势是，它不只是文档， 它可以直接变成界面。你可以让 agent 生成一个可拖拽的任务。看吧，把三十个 linear ticket 分 成 nine， next later， cut， 还可以把代码审查做成代递流程图和内连注视的交互页面。关键是最后加一个按钮，复制为 mark dunson 或者 prompt， 再未回 agent， 这才是重点。 h t m l。 不是 为了更好看，而是为了让人类更快理解更快决策，更快把意图反馈给 ai。 当然，代价也很真实。 h t m l。 生成更慢， token 更多， diff 更难 review 多。 agent 写作变成常态之后，这个取舍开始变得划算。一句话总结， markdown 适合从头读到尾。 h t m l。 适合扫重点，动手改，再回流给 agent。 ai 写作的下一代文档可能根本就不是文档，而是一次性揭面。

还在死磕 markdown 吗？ cloud 的 工程师团队已经宣布全面弃用 markdown， 彻底转向 h t m l。 过去我们爱用 markdown 是 因为它简单好编辑， 但现在绝大多数文档都是由 ai 生成的，人类的角色已经从写变成了看，既然人不写，那一编辑就成了伪需求。而 html 凭借着超强的信息表达力， 成了 ai 的 最佳搭档。用 html， 它能直接生成带滑块和旋钮的动态界面， 你可以实时调节参数看效果，还能一次性把六种 ui 方案排成网格让你对比。 甚至在代码审查时，它能自动附带一个 html 解析器，把复杂的代码改动变成格式化的流程图， 阅读效率直接提升了百分之三百。这标志着我们的工作流正在被重构。以前是现行的学文档，现在是 ai 协助创作， 让 ai 生成一个带交互主件的 html 网络，你只需要在浏览器里点点鼠标，拖拖拽拽，就能完成从发散到收敛的全过程。 虽然 h t m l。 在 版本控制上还有点小麻烦，但 ai 能自动生成变更载药，而且浏览器原声支持分享，彻底消除了格式错乱的烦恼。 当 ai 实时听懂把这个表格改成深色模式的指令时，手动去敲标记语言的价值正在迅速消除。 这种用完机器的交互式 html 文档，你觉得会是未来程序员和 ai 写作的主流方式吗？欢迎在评论区聊聊你的看法。

只需要四步，就能够让你的 cloud code 直接调用 codex， 实现 ai 生态最强的一套组合。这套组合可能是普通人能够把想法变成真实落地项目的最优解。 为什么这么说呢？现在 ai 写代码本质上就很离谱，一个模型自己规划，自己生成，自己修，最后再自己说一句，我写的挺好，这像什么？像一个学生自己出卷，自己答题，最后自己在批卷， 这个事听着就不对。 ai 编程最大的问题从来不是不会写，而是太敢写。很多代码表面看起来没问没毛病，能跑也能翻译，甚至功能也是通的，但一上生产，坑就开始疯狂往外冒。 所以这套组合真正的价值就体现出来了。我从两个维度给大家分解一下。第一个维度， code 负责干。 这是一种非常自然的分工复杂，项目里最贵的部分往往不是把代码敲出来， 而是怎么拆任务，怎么定价购，怎么判断方向，以及怎么选择实现方式。这些事交给可洛的这种强模型非常合理， 但后面的执行 codex 完全可以接过去，这样一来，整个工作流会变得更顺，也更省。说白了就是贵的模型干贵的活，便宜的模型干重体力活。第二个维度， codex 最狠的不是执行，而是审查。 这个点我必须要单独拎出来说。就是 codex 有 一个我特别喜欢的思路，叫 underwear review， 翻译成人话就是别对这段代码太客气，默认他有坑，带着敌意去审。因为大模型写代码最大的幻觉之一就是他很容易对自己太宽容。 一到自查这一步，很多时候他就开始放水，而对抗性审查的意思是，我不信你，我先默认你写答了。 那这套组合到底适合哪些人？第一种，重度使用 cloud code 的 用户。第二种，对成本特别敏感的人。第三种，已经开始做真实项目的人。 以上就是我对 c c 和 callex 的 个人感受，希望这期视频对大家有所帮助，感谢观看，下期见。

挑扣的可以帮大家做什么呢？你只要说一句话，帮我写一篇文章，做一个 ppt， 再整理一份数据，你会发现几秒钟之后，文件就已经在你的电脑里面生成好了，这个就是现在 ai 已经可以做到的事情。 今天呢，这条视频我想用十分钟的时间带大家从零到一去入门 cloud code， 和大家分享怎么把它用起来。首先呢， cloud code 是 什么？一句话讲清楚， cloud code 呢，是一个住在你电脑里面的 ai 助手，它不是聊天工具，而是一个执行工具，你可以把它当成你的助理或者是员工， 它能帮你去读电脑里面的文件，帮你整理文档，分析数据，上网查资料，做 ppt， 写文章，生成图片，这些它都可以做到。而且最关键的点是，它会把结果直接生成在你的电脑上面，而不仅仅只是给对话建议，它是可以做到执行和交付的。 那具体应该怎么去用 cloud code 呢？首先呢，安装方式我们有三种，第一种呢是桌面版本，这是最推荐的方式，操作很简单，大家可以直接打开 cloud code 的 官网，下载 mac 或者是 windows 的 版本，双击安装 cloud code， 登录你的账号，这个呢就像装微信一样， 然后你下载下来之后呢，直接就可以使用。第二种呢是命令行的安装方式，这种方式会进阶一点，如果你稍微懂一点技术呢，那就可以使用这种方式，大家可以先装 node g s， 然后输入一行命令，然后直接去安装下来。 安装之后呢，你可以打开 terminal 或者是 windows 的 power share， 然后输入 call 就 可以使用。如果你是小白，然后直接用第一种方式就可以了。第三种方式是网页版的，这个是最简单的，就是不用安装，打开网页直接就能用， 但是这个缺点就是它不能够直接去操作你的电脑文件，所以它比较适合体验，但不太适合长期的去用。然后安装完了之后呢，接下来我们就可以开始第一次的对话了，打开之后呢，你会看到一个输入框，这个就像微信聊天一样，你可以输入， 比如说哈帮我写一段自我介绍，然后比如说我是做跨境电商五年，那语气要专业一点，帮我生成这个介绍，然后直接点击回车，那几秒钟之后呢，它输出的一篇非常完整和详尽的内容就出来了，而且 关键的来了就是你还可以去跟他讲帮我对比亚马逊 shopify、 tiktok 以及 shop 帮我做成表格，并且保存成文件。 而且这里要特别的注意就是它不仅仅只是帮大家去分析，它会直接去帮你在电脑上面生成文件，你可以直接在你的下载里面直接把它打开，这个就是和普通 ai 最大的区别。 那第一步跑通之后呢，我们可以进阶更多有意思的玩法，如果你只是一问一答，这个其实只是入门，这里会有几种玩法。第一种玩法呢是直接处理文件， 比如说你可以跟他讲读取我桌面的客户反馈的文件夹，整理差评的原因，做成分析报告给到我，那他就会自动去读取你给到他的文文件，然后去进行分析，原来半天需要做的工作，现在只需要几分钟就可以搞定了。第二种玩法就是一句话，多个任务， 你可以同时让他帮你干三件事儿，比如说翻译文案，做实业 ppt， 写一条推广文案，一句话就可以拿到三个工作结果。第三种玩法就是调用技能 skills， 你 可以理解为就是给他安装各种插件，各种功能，比如说做 ppt， 做推文，生成图片， 直接说他就会在你跟他发出指令的时候，自动去加载和调用这些技能包。第四个玩法呢是联网和调研，比如说你跟他讲说帮我整理二零二六年跨境电商的政策变化，那他就会去在线进行搜索，然后做文件的信息的整理，然后最后帮你输出文档， 一条线就直接就帮你把这些事都搞完了。所以非常建议大家直接去装，直接去试，让他帮你现在就完成你生活当中真实的一个场景，解决你实际生活当中的一个案例，然后让他帮你去提升效率，然后我们就可以用这些节省下来的时间去做其他的事情。

装了 open cloud harmony 的 后，才发现 cloud code 才是最响的人的。今天这期视频教你掌握 cloud code 最有用、最高频的十个命令。先说怎么启动它，在任意文件夹里，右键在终端中打开。 第一个命令也是我最常用的命令，全自动模式启动。正常情况下， cloud 的 每次执行危险操作，比如删除文件，运行脚本，都会向你请求权限，导致任务卡住。 加上这个参数之后， cal 将获得最高权限，所有操作直接执行，不再询问你。当你完全信任 cal 的 执行能力，不想被频繁打断时，使用第二个命令，项目触使化在一个新项目里，第一次使用 cal code 时，输入这个命令，它会自动扫描当前代码库，生成 cal 点 md 解。如该项目的核心命令架构，以风格标准工作流指导。 当你想在一个已有的项目基础上新增或修改的时候，这个命令能帮你快速摸清整个项目并写入关键约束。靠的，每次对话都会优先读取这个文件。第三个命令，艾特符号。在对话框里输入艾特符号，可以快速把文件内容塞进对话上下文支持引入单个文件和引入整个目录。第四个命令，恢复历史绘画 card code 会自动保存所有对话记录，你随时可以中断，随时可以继续不丢进度。第五个命令，上下文管理，上下文就是 card。 在 一次对话中，绘画机里有三个相关命令，一般保持上文的容量在百分之五十，效果最好。 第六个命令，自我洞察分析。输入这个命令后， card 会扫描你本地近一个月所有的历史绘画记录，生成一个 html 分 析报告，报告里有什么？分三个部分， 一、数据大盘，你总共开了多少次绘画，消耗多少 token， 提交了多少次 get？ 二、摩擦点分析也是最有价值的部分， 它会告诉你你在哪些地方浪费了时间，比如你总是在重复说同一句话，说明它应该被写进 cloud。 md， 针对找到了问题，它会直接给出可以复制粘贴使用代码片段，帮你优化工作流程。第七个命令更新到最新版本， 建议定期执行。新版本通常有新功能和 bug 修复。八个命令自动同一模式，跟命令一有什么区别？命令一是跳过所有权限检查命令八是可 out， 会另起一个 ai 模型来判断操作是否安全，再决定是否执行。第九个命令，高级内置技能 card code 内置了三个处理复杂任务的专用命令。 print 代码优化，它会同时启动多个代码审查的文件，找出可以附用可以简化的地方，然后自动修复。 batch 批量进行修改。它会把任务拆成多个独立单元，同时并行处理。每个单元用独立的 gitwalk tree 隔离 delete， 排查 cloud 的 自身的 bug， 它会读取当前绘画的调试设置，分析为什么 cloud 的 刚才行为不对或哪里出了问题。第十个命令， skill 技能安装 skill 是 可以扩展靠的能力的插件根据作用范围分三级，项目级只对当前这个项目生效全区作用级和插件作用举对你电脑上所有项目生效。一个项目安装的 skill 最好不要超过二十个。我把所有的命令整理成一个文档，方便大家查看。

大家好，我是苏菲，之前的视频跟大家介绍了怎么样安装 cloud code 的， 可以参考我这个视频。那这一期跟大家介绍一下怎么样在 cloud code 的 里面去添加各种技能，从而来提高我们日常办公的效率。 我就以小红书上的著名博主张咋拉的一个 ppt skill 为例，跟大家来介绍一下那 zara 的 这个视频。这个 skill 在 github 上面已经有一点四万多的一个星星了，反响是非常好的。我自己用下来的感受主要有这么几点， 它的 ppt skill 的 整体的风格，它是很有高级感的，设计也很简洁，它的交互和动效非常的酷炫，很丰富。还有一点，它可以做完之后一键部署到 face 或者是 github 上面来生成一个长期的链接去分享给其他人。 另外它生成的它是一个 html 格式的，跟传统的 ppt 格式是有一些区别的，用上去的感受会比较有新鲜感，而且它这个 html 格式也是支持你原来用的是 ppt 格式去转换成它的。这个 html 格式的生成之后，你也可以在这个基础上进行一些修改。 我们也可以看一下我用他这个 skill 做出来的一个效果，这个我已经部署在 excel 上面了，可以这个链接可以分享出去的，可以看到我整体的一个效果，我的鼠标动效点到这个地方，他就会有这些样式，他也可以添加我的图片，当 这个可以实现一些翻页的效果，点开点到这个上面，他会有一些凸显的效果，也可以起用编辑对我里面的这些字体进行修改，都是可以的。 接下来我跟大家分享一下整个的一个制作的过程，如首先如何去下载这个 skill， 然后做这个案例的一个具体的过程，以及最后如何部署上线的。首先我们来到 github 上面，然后 可以把这个链接复制下来， copy 下来发给你的 id 工具。比如说我这边进入到 cloud code， 我 可以直接跟他说把这个链接发给他，你可以告诉他 帮我去下载并安装这个 skill， 这个是最便捷的一种方式，那也可以手动去操作，比如说你可以在 code 里面 去 download 这个 zip， 下载下来之后对它进行解压缩，解压缩完成之后，我们在访达里面打开这个 cloud code， 我们找到这个 skill， 把你刚刚解压缩的这个呃文件拖入到这个 skill 里面，就是这个 fronten 的 s slides 这个文件，那你下载的时候它可能后面是带后缀的， m a i n 的 这样一个后缀，你需要把这个后缀去掉，这样你在那个 vs code 里面，到时候去调用这个指令的时候是一致的，那这样就已经完成了安装了。我们来测试一下 怎么样算安装成功。你可以在这个对话框里输入斜杠，然后把这个 skill 输进去 f o n t front， 这时候它就跳出来了， front and slide 已经有这个说明，就已经安装成功了。那我 制作的一个过程是，我说我想为我的人工智能初创公司制作一份推荐演示文稿，这个也是在它视例里本来就有的， 就调用这个技能，他识别出了这个技能之后，在制作之前会问你一些问题，这个也是他比较好的一个地方，不会一开始就开始制作，而是会问清楚你的需求，那他会问你这个 presentation 他 是做路演使用的，还是要教学，还是有什么作用？你希望他这个 slides 大 概有多少页数？ 你自己是否已经有一些框架了？以及说你做完之后还是希望这个网页端是可以修改的，还是说可以直接去展示的？那你把你的需求告诉他之后，他就会开始制作。制作完了之后他会生成三个独特的风格预览文件给你去挑选你自己 就比较喜欢哪种风格，你可以告诉他我喜欢第几种风格的样式，他就会给你开始制作。这里其实我觉得有点问题，他当时生成了三个样式，我是选择了一个温馨的暖色调，但是他最终给我做的还是一个 蓝紫色的这种科技感的，后面我就让他帮我改成暖色调的，他改来改去我感觉并不好看，后面最后我还是选了蓝紫色的这样一个色调。 这里我是最后还是回到了第一版，我觉得还是蓝紫色的这个稍微好看一些。最后做出之后，你可以在 他这个基础上进行去微调，那比如说你可以直接把这个屏幕截下来，告诉他我需要把这个图标移到这个位置，这个 logo 呢帮我放的大一点，或者就直接告诉他这边有一串乱码，你要帮我修改掉，就直接拖到这个对话框里面，他看到了之后就会自己去调整。 这里面还有一点可以再说一下，我说我想要增加一个鼠标动效，你给我一个 playground， 他 就会去 给你展示这样一个鼠标动效的 playground， 那 你可以看这里面有各种效果，有光标效果，有这种跟随光晕，还有卡片放大旋转，光标轨迹的移动，以及说这种悬停秒边填充，那你可以告诉他 你喜欢第几种风格，我说我喜欢四和六，他就会把这个效果应用到我的演示文稿中，你也可以说我想在里面加上我自己的图片展示，并且这个图片展示可以链接到我的小红书的，他也会帮你加进去， 那你点开点击图标的时候，他就会自动跳转到我的小红书账号那上传你的图片，他会让你把这个图片 放到工作区。怎么放？我们可以找到你的工作区的目录，比如说我就是在 sophie ppt skill 里面，你就把这个文件名改成它能够识别的格式，像我这个 logo 的， 我就叫小红书 logo 就 改成这个格式编辑格式的。这样一个图片放进去之后，它就会自动识别，之后就帮你替换到网页上去了， 做好之后你也可以把它分享到网网站上面去，让它帮你生成长期的网页链接。那这个 sku 里面它也是自带的，可以自动分享发布到 for sale 上面， 那这个时候我的聊天的配额用完了，也是很尴尬。后面我就切到我自己的 office ai 的 这样一个 api 配置里面，它它是要求在终端里面去使用的，我后面就在终端里面告诉他，我要一键部署到 for sale 上面。 alfox ai 它是要搭配 cloud code 的 终端来调用的，就是它在那个插件上使用的话，很多能力会跟不上，所以最好还是在这个终端里面去调用， 它会在 file 上面去帮我部署好，这些都是它自动部署的。部署之后给到我这样一个链接，我点开就进入到我自己做的这样一个项目的页面了。这里推荐大家去安装一个叫 ccomixline 的 状态来插件，装完之后我们在终端的底部我们就会看到它调用的是什么模型，我们这个项目名称目前用了多少 token， 它这边就会有一个显示了。安装也很简单，你直接把这个图片丢进去，或者你就跟他说帮我 下载这样一个状态来插件，然后它就会自动帮你安装了。好啦，以上就是这期视频，那我们再总结一下。呃，这期视频我们在安装好的 cloud 基础上增加了一个 ppt 的 skill， 大家也知道这个 skill 可以 做什么？ 如何去下载？它做出来的案例大概什么样子？最终部署上线是什么样子？以上就是全部内容啦，谢谢大家。

有人把火遍全网的 cloud design 给蒸馏了，还把原码全部公开，做成了一个 skills， 这简直是在降维打击。上周的 cloud design 有 多火我就不多说了。作者花生把品牌、资产、协议、组建、机制、设计哲学全给它结构化了一遍，写成了一个 skill。 它能实现什么？可以做个 ai。 番茄中 ios 原型直接可以用丢给它一个文案，做出一个可以交付的 ppt， 并且是可编辑的。做数据信息图，可以画可导 pdf、 png 等格式，将这段逻辑转化为六十秒动画，并导出 mp 四和 gif 格式。 这些原本繁琐的任务，现在只需五到十分钟就能换回一份可交付的文件。最硬核的一点是，它摒弃了市面上那种一眼 ai 的 视觉平庸感。它内置了一条刚性规则， 严禁视觉最大公约数。在处理具体品牌时，他强制执行一套标准流提问，解锁官方品牌页，下载原始资产，确认精确色值，固化视觉特征，拒绝凭直觉盲猜品牌色。以后只要在终端里打一句话，就能拿到一个能交付的结果。

hello， 大家伙儿， cloud 刚成为了 blender 的 赞助商，并且打通了 blender， 让我们一起来体验一下吧。先叠个甲，我不是 blender 的 深度用户，所以我们此次仅以体验为主。 根据之前使用大模型对接其他工具的经验，我们先尝试让 cloud 直接帮我们配置 m c p， 可以 看到直接让 cloud 自己配置失败了，他说不支持，但是根据新闻资讯，我非常确定 cloud 是 支持写入 blender 的， 所以我们质问他一下， 可能是因为语料更新不及时，这次使用了联网搜索后告诉我们支持了，但是需要我们手动配置，那我们就来一起配置一下吧。点击左侧 customize， 选择 connectors， 然后点击加输入 blender 下载。 下载完成后，我们再来看一下在 blender 中怎么安装 m c p 插件。打开 cloud 给我们的链接，仔细阅读，发现这里只是一个使用教程，并没有插件下载地址，那我们就直接跟 cloud 说，让他给我们插件下载地址和安装方式就好了。 这次 cloud 精准地给到了 blender mcp 插件的下载地址，这个界面和交互跟 gitwalk 一 样，我们直接到 code， 然后下载 zip 压缩包到本地即可。 然后我们打开 blender， 打开编辑偏好设置获取扩展，把我们刚刚下载的插件直接拖进来， 安装完成后，记得去插件里面检查一下 m c p 前面的对勾有没有打上哦，这样我们就全部都配置好了。然后我们回到 cloud 测试一下，先跟 cloud 说让它在 blender 中创建一个石头， cloud 说创建完成后，我们回到 blender 中看一下效果怎么样，可以看到石头已经创建完成了，我们切换到渲染模式，看一下，材质也上好了。恭喜你第一次使用 cloud to blender， 已经跑通了， 我们给 cloud 上一点强度，让它去做一个简单的场景。这里我的描述也很简单，做一个木屋，木屋周围有栅栏，地上是碎石和青草。 soon after 这个简单的场景也搭建出来了，但是我觉得有些太卡通了，让 cloud 把它变得稍微写实一些吧， 效率很高，但质量一般，还没有达到直接可用的标准。我们继续给 cloud 上强度，在网上找了一个小 ip， 我 想让 cloud 给我在 blender 中还原成模型，把图片丢给 cloud， 让 cloud 给我们还原，看看会是什么样吧。 现在已经完成了，我们一起打开 blender 来看一下怎么样吧。说实话，刚看到这个模型的时候，我是没忍住笑出了声的，但也是情理之中。话不多说，截图丢给 cloud， 让它继续修改 moments later 让我万万没想到的是，修改完之后变得更鬼畜了，哈哈哈，那就让它继续改吧。 later 改好了，我们再来看一下，还是丑萌丑萌的，跟原图大概有百分之二十相似度，不过我们体验就到这里就可以了。接下来我们尝试下让 cloud 来做动画，看看怎么样。 顺带一提， cloud to blender 还是挺费 token 的， 我们体验到这里的时候，五小时的额度基本已经消耗光了， 在额度消耗光的时候也是很惊险的。我们的动画做完了，作为非专业三 d 设计师，我就不做过多评价了，总体来说就是现在接流程跑通了，未来一定会越来越成熟，但还是离不开专业的人来做。 今天的视频就到这里了，如果对你有帮助，希望点赞、收藏加关注，这对我很重要。