codex如何完成前端设计和落地

最近一篇来自 capsei 的 l l m knowledge base 的 一篇文章非常的火，它是这么说的，我们要把原始资料当做原代码，把 l l m 也就是大模型当做一个编辑器，把这个编辑器编辑出来的知识库 wiki 当做一个可以持续更新的知识产品， 这个知识产品可以赋能于我们的内容输出以及项目的跟进。这让我意识到，我们缺的并不是输入， 也不是更多的资料，而是一个能够把资料变成认知，再把认知变成输出的系统。这个系统解决了我们资料太散，附用太难的问题。这期不是单纯的软件教程，我不想只讲 obsidian code 是 怎么用的， 我想讲的是一个普通学生怎么用 codex 和 obsidian。 把每天看到的文章、笔记、网页、书籍以及簿刻变成可以附用的知识库，让它参与到我们的日常决策之中。 如果你之前看过我的内容，会发现我一开始并不是专门讲工具的。我之前更像讲认知、商业分析、 ai 时代方向的长视频，比如马斯克基点时代，还有泡泡玛特为什么爆。 但是在做完这些内容之后，我发现一个问题，我不是没有学习，也不是没有思考，而是这些思考很容易散掉。 昨天看的一个观点很有启发，今天的这个案例很有奇发，明天看处理的这段话也很有启发。 但是真正要写脚本做选择题的时候知识很少，想法也很少，每次都要整理这些观点，想用的时候找不到，过几天就忘了。这些问题经常存在。 这时候我再一看 capacity 的 l l m knowledge basic， 突然觉得它刚好能解决我做内容时遇到的问题， 所以我开始用 obsidian 和 quadas 来搭这一个系统。 obsidian 是 我的长期记忆，它负责沉淀我的原资料、方法、模型以及概念等等等等。 而 codec 作为我的外脑和协作者，他帮我把我的输入整理、拆解、提炼、整合我的想法以及补充可以输出的方向。 所以这期表面上是在讲 codec 和 obsidian， 本质上是在讲我怎么把学习、思考、自媒体、个人网站和长期项目放进同一个工作流。 现在我的核心工作流是输入 content、 整理、 obsidian 沉淀内容输出和项目推进。如果用 capacity 的 说法，它可以拆分为三个动作，第一是 english， 第二是 crease， 第三是 ling ing。 就是 我们要把原始资料摄入出来，把它结构化变成可以解锁、可以链接的输入。 而 cv 的 话就是当我要做选择题，做脚本判断项目的时候，我们可以基于我们自己的数据库来进行一个输出。这和随便问 ai 是 不一样的，因为它可以调用自己的资料，自己的判断以及自己的项目记录。 比如说这就是我的一个 queries， 我 想让 query 来帮我给一个下一步的计划，它就可以调用我自己的一个数据库来进行一个问答。 第三是 link， 它会定期检查我们的知识库有没有更新，有没有重复锻炼、混乱以及过时的内容。 以前我认为知识库只是一个高级的笔记软件，但是后来我发现如果单单的存储 opc 点，最后也会成为另一个收藏家。所以我给我自己的原则是，整理的目标不是让目录变得漂亮，而是让笔记更加容易附用链接和推进项目。 现在我的 o c 点知识库大体分为四块，第一块是原资料，第二块是概念，第三块是方法与模型，第四块是项目 原资料、放书、视频、文章、博客这些输入概念。回答它是什么？比如情绪价值、复利该几点方法与模型。回答怎么做？ 比如内容制作流程、项目管理、反制期检查项目，就是回答下一步做什么，比如自媒体、个人网站以及本月的计划视频。 这四块连起来后，我就不只有一堆笔记，我有的是一个从输入到输出的系统， 比如说马斯克经典预言这一本书。以前我可能只会记几个观点， 比如说算力、基点、人员数据编辑效应，但是我现在会让它进入流程 code 会帮我生成这本书的简陋概括、核心观点、具体观点的整理，还有重要概念、专业名词， 比如说 ai 基点、算力、提问能力、第一性原理、化学科学习。然后它会结合我的 obsidian 知识库，给出一个可转化的输出， 然后保存我们的原始资料，最后链接到我们的项目当中。 这样一条资料就不仅仅是一条资料，而是一个可以反反复复调用的一个知识节点。泡泡玛特也是一样，从表面上来看，它是潮玩盲盒以及 ip 的 运营。 能拆开来看，它链接的是情绪价值、精神消费、用户的自我投射，以及品牌的叙式。 如果我要做内容，他可以变成为什么年轻人愿意为情绪价值而买单。 如果我要反思自媒体，他也会提示我，内容不只是信息，更要提供某种情绪价值。这就是知识库真正有用的地方。他不是把东西存起来，而是将一个内容在不同的情景中被重复使用。 那么 code 具体帮我干什么呢？第一是降低整理的成本， 判断资料的类型、命名、分类、规范，根据主笔记的结构来整理，拆概念、补双链、 归党校验，最后更新这个 skill。 这里面每一步都不难，但是加起来就非常的耗精力，我把规则告诉 codas， 它就能按照我的结构来帮我处理。 第二是反问我自己，当我向他寻求建议的时候，他不会无脑的说加油，而是先看我的目标，再看这个事情的需求，再看变现，看资源，看沉淀，最后给出最小的下一步。 当我落实到今天本周就可以做的内容，让我可以把我的时间放在真正高质量的输入之中。 以前我是项目驱动，看到什么就学什么。现在我更像是项目驱动，先有了长期目标，再让输入服务于这个方向。 所以说这个知识库最后不是为了记笔记，它会链接到我的自媒体、 个人网站以及 ai 工具，还有未来的一些长期的项目。比如说我做完一个视频，不是发完就结束，它可以进入 o c 点，变成项目的复盘，选择题，来源、脚本结构、发布效果、评论反馈以及下一次的改。 如果这个选择题还值得做，他就可以变成长视频、短视频、文章，甚至个人网站上的案例，这样内容就不再是一次性的消耗品，他会慢慢沉淀为我的资产。 所以总结一下，对于我来说， copy 加 excel 主要解决五个问题，第一是让输入不再闪掉。第二让思考可以被反复调用。第三让项目有明确的下一步。第四，让我的内容生产不再完全依靠灵感。 第五让学习表达、自媒体、网站以及未来慢慢连成一张网。 当然，这个系统很早期他不完美，但是已经改变了我的行动方式。以前的我总是想，最近有什么热点我可以追。 现在的我，先看知识库里面真正的问题，我最近关心什么？哪些材料已经积累到可以输出？哪些观点是我反复思考过，而不是临时看热点追热点听出来的？ 这会让内容更像是我的系统里面长出来的，而不是临时拼出来的。 如果你也有这种感觉，收藏了很多东西，但是真正要用的时候找不到，看过很多内容，最后只剩一个模糊印象。每次想做输出，但写脚本都像从零开始。 那么你可能缺的不是更多的资料，而是一套自己的知识流转系统。如果你也想搭个人知识库，我们先问四个问题， 你真正关心的主题是什么？你的资料最后要服务于什么？你可不可以把每条输入拆成概念、方法或者案例？第四，你到底可不可以每周产出一个东西？ 因为知识库最重要的不是他存了多少，而是他让你更清醒，更能行动，更能输出。 对于我来说，我不是在搭一个笔记软件，我是在搭一个长期能让我复利的一个系统。不要只收藏，只感动，只计划， 要把知识变成行动，把行动变成作品，把作品沉淀到长期的资产。我也还在不断探索着 obsidian products 和 ai 工作流的用法。 如果你也对个人知识库爱，关注实践内容的输出，以及怎么样 ai 提升自己学习和赚钱的能力感兴趣，欢迎私聊我，进我的微信群，让我们一起讨论，一起进步。 在群里我会持续分享时间、过程、工具用法、踩坑记录、选择题思考以及项目的复盘。我们不再是聊概念，和自己一起把爱用起来，把想法变成作品，让他真正赋能于我们的实际生活之中。 感谢你对这期视频的观看，如果呼声高，我下期将会逐步逐步带大家用 obsidian 和 quadas 来搭建属于你的个人知识库。感谢你的观看，我们下期再见！

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

比特技术产品经理，这是我只花了半天时间在规定出来的家庭小物管家 app， 这款产品可以用来上传并记录我们家庭当中一些不常用的小物件，它的图片、详细信息以及存储在家里的具体位置，并且可以通过搜索的方式知道这些小物件分别存储在家里的卧室、客厅还是厨房的具体位置， 避免我们有些时候忽然想用到某个物件，但是找不到，导致重复购买某一个物件的情况。那这款产品整体从产品规划、批量输出到产品原型图以及最终的 ios 前端交互，都是 ai 帮我完成的。那你可以看到它已经不单单是一个产品的想法，而是一个可以点击交互，并且可以继续开发落地的产品。那这条视频主要想分享一下零代码基础，怎么把自己的想法变成产品， 拥有自己的一个完整的产品项目。其实很多人不是没有想法，而是卡在不会调研，不会写 prd， 不 会输出原型图以及开发，所以想法一直停留在脑子里。这次我会用默叨 ai 超级智能体跑一遍产品经理的整体工作流，大家演示一下如何把一个想法通过产品策划、调研、精密分析以及 prd 和最终的原型输出和开发一条龙，完整做出一个可交互的产品代码。 那首先我们要确定第一步不是直接告诉 ai 帮我开发某个产品，而是要明确好我们的诉求。我们可以打开默叨 ai 超级智能体，我们发现有一个产品规划反馈， 那在这个板块里面还可以很好的帮我们进行产品前置的方案梳理，那我在这个输入框里面告诉他我的基本诉求，在这里面输入我有经常找不到小物件的这样一个困境，并且想做出来一款产品，帮忙收纳这些小物件。先让他分析一下我们这款产品面向的用户是谁，然后以及这款产品核心功能分别是什么。那 这一步的价值其实是把一个模糊的想法拆解成一个产品的判断。好，那可以看到我们发送的提示词之后，这人体开始自动进行网页当中进行的收集， 所访问的网站都是一些跟产品和设计直接相关的专业性的网站，他直接从里面获取他想知道的内容。那可以看到过了几分钟，智能体就帮我们生成了一份比较完整的产品策划方案，这里面包括了我们的用户到底是谁，他们的痛点是什么，甚至我们这款产品 mvp 版本里面需要包含的技能，他也帮我们考虑进去了， 要不如我们还想知道市面上类似的产品他做了什么样的功能。我们还可以在超级智能体的竞品分析的模块，让他帮我们分析市面上类似的竞品功能。我在输入框里面让默叨 ai 帮我分析类似的 app 分 别有哪些，以及这些产品他们的功能、优点和劣势分别是什么。 看到跟前面一样，他开始搜集各个产品的网站，开始帮我们分析类似的产品分别有哪些，以及这些产品的核心功能是什么。输出了一份非常完整的精品调研报告，那到这里我们前期的调研基本上就完成了。 第三步，我们基于前面的产品策划以及精品调研，进一步把这些内容给到模到 ai， 让他帮我们生成一个更加完整的产品 pr。 那 至此这样一个想法已经落地成一个比较完整的产品方案了。 可以看到这样的一个产品文档，里面定义了我们整个产品的产品定位、目标用户，解决了痛点以及我们整个产品 mvp 版本的核心功能，同时连具体的开发商的节奏误导， ai 都帮我们整理好了。 同时这份文档里面还包含了一些结构比较清晰的流程图和思维导图，都是智能体直接帮我们生成的，结果非常的清晰。那第四步，我们让 ai 帮我们基于整个 prd 生成一份符合 prd 的 高保值的原型图。 以前不会 ui 的 同学其实最容易卡在这一步，具体的功能排版应该怎么设计，按钮怎么摆放，以及整个的交互链路是什么样子的，可能很难通过我们非专业的人士完成， 但现在我们可以直接用磨刀 ai 的 原型设计能力，让他直接帮我们产出一套产品原型，那重点是它生成出来的绝不是一张死图，而是一个可以进行再次编辑，并且进行拖拉拽微调，以及可以进一步画的产品原型图。 那可以看到这一整个产品原图它很快就帮我们生成了。那我对它出版生成的整个功能的布局不是特别满意，又选中了局部的区域，让他帮我进行调整，那很快他又输出了第二版、第三版的产品原型图， 那整体看下来，无论是样式布局还是整体的功能，我都比较满意，但是还存在一些细节可以做进一步的调整。于是我把它生成的原型图导入到了磨刀，在磨刀的界面里面，我进一步通过人工的方式对一些元素进行拖拉拽的微调，调整一些 logo 和图片的布局。那整体调整完之后，我们就有了一份高保真的原型图， 下一步其实可以推进后续的开发了。那在这里木刀不仅给我们提供了原型，还给我们提供了整套的前端代码。那在这里我们可以直接导出这个产品的 html 文件。 导出之后，我把木刀给我们生成的 p、 r、 d 以及 html 文件直接发给了 codex， 然后告诉 codex 我 们想要生成这个产品的诉求。点击完发送提示词，可以看到 codex 就 开始帮我们进行后续的开发工作。他直接下载了一些他需要的工具，并且引导我们去下载可以用来渲染 swift 代码的 ios 工具级。那这里可以看一下最终它生成的效果， 可以看到无论是整体的这个产品的功能布局样式，还是整体的交互链路，运行起来都是非常丝滑的。那到这里你会发现，整体到我们手里的已经不是一个单纯的产品想法，而是一个真的可以运行的产品。 对于不会代码的产品经理，他真的可以帮你把想法进行落地，而对于没有实习和产品项目的同学来说，他也可以让你拥有第一段自己的产品项目。所以 ai 真正有价值的地方不是帮你偷懒，而是让普通人也能按照专业的流程把自己的想法进行落地。那以上就是这期视频想要分享的内容，这里是梦奇的 ai 频道，我会持续分享一些有用的 ai 内容。

让库德斯呢控制我的电脑，全程呢？让他自己给我做设计，我们看看效果会怎么样？这里话呢，我是先让库德斯干嘛呢？就是参考我这个产品， 这里话丢了一个，那个就是手机， vivo 手机产品，然后呢给了他两组参考，对吧？每个文件夹里面呢生成五张图，对应五张图啊，一共十张图，我给他什么参考呢？哎。一个什么呢？一个是呃，这种什么雪地啊？嗯，之类的。这种雪地啊，一个参考。 那另外一个怎么参考呢？另外一个是花卉的参考，就是完全让他按照着参考来。按参考来干嘛呢？就是让他是根据这个参考呢去提供那个就相当于给大家群群版，然后呢给大家个产品卖点，试一下创意呢？他自己想，然后呢？吭哧吭哧吭哧，然后自己想了，对吧？ 然后自己控制我电脑，再然后呢？哎，他就能去开始打开我的这个串起屁。那第一个的话呢？什么呢？他是丢了两张这个参考图，那跟这个产品呢？哎，申请一个是雪地的吧，对吧？不要放其他 logo 什么的，但是，哎，这第一张雪地的效果还可以啊。 第二个呢就是这个，呃，延时的。第三个呢是在冰块里面的。第四个的话呢就是应该是他模仿的脚印，你看变成手机印了，印在里面，我们这样看， 还有是这衣服呢，这个是我没想到的衣服，这个都不知道他怎么跟这个长相结合在一起啊？饱满可以，对吧？ 那好，再后面的话呢，就是那个啊，就是花卉的，就是因为我给两组嘛，另外组花卉的，他就是跟花期结合的，一个两个，对吧？这两个很重复嘛？这个人家说不要太重复了，因为这个是像是万里生长一样的， 这个应该跟那个时间去好像有点关系啊，然后这些花卉的 啊，还有这个，这个对吧？那我又让他干什么事呢？又让他那个挂这里，自己去打开我的编辑室，然后自己的话呢？就参考那个，呃，创意图啊，吭哧吭哧，再生成个海报 题词是他自己写的，然后自己那个我让他不要重复哈，创意不要重复，对吧？啊？这一张的话每张都是他自己写的题词，然后自己那个生成海报，生成完了再接着下一张，对，就就这样挂了，挂了一个晚上哈， 没有好创业的时候呢，你就可以让它扩展自己呢去做，对吧？那这前提干嘛呢？就是你在要在设置里面哈，打开什么？打开你的电脑控制电脑控制这个打开来，然后呢把这个安装一下就可以了，点个授权他可以控制电脑了。

就要具体的来带大家去通过 type strip 来实现一下，把这个效果给大家来实现，告诉大家在这个调用层这一块我们可以做哪些处理，那我们来先看一下这边实现的这个效果，我们直接 yes， 现在应该把，马上帮我生成出来了， 好，现在还没有生成，待会儿它最后一步会帮我们输出，我们等它输出之后再来看啊，等到最后一步输出之后我们再来看， 应该还在，还在执行，还差一点点。好，已经生成了啊，直接，呃，他现在想完成这个使用，我们看点一下，点到这边来，接下来他会帮我们生成出来，直接输出到我当前 输出到当前这个内容里面，当然我我会把它叫它把它移过来啊，生成到我当前的这个项目下面，生成到当前项目下面， 需要稍等一下啊，这个执行的过程的话，有时候相对耗时间一些，当然我这里可以提前把问题提给他啊，完成后将 skill 呃移动到当前项目，然后呢这个 codex 中啊，就直接， 然后等它完成之后我们再来看。好。那这个具体的 skill 调呢？是力呢？主要是想通过这种类似于 codex 或者 open code 给大家先演示一下，待会它创建完之后再来看。但我们假设现在自己要去实现一个这种类似于 codex， 比如说或者叫妙码 open codex， 这种效果我们怎么来做啊？因为刚才呢，其实给大家去给大家演示了一下，不知道还记不记得，我这里重新给大家演示一下。 好在这呢，我直接执行它，就这个执行的过程，从输入到模型的加载，到技能的文件加载到整个工作区的印刷，这就是我们所说的沙箱啊，然后呢到 de patient 的 整个出场，完成流逝执行，然后呢到输入 就是事件啊，接收到这个事件，事件呢是用户搜索 nonchain， 然后接下来就去搜索，搜索完之后呢，它会识别到，你看需要调用工具这里呢，它会识别， 需要调用什么工具呢？调用搜索工具，那这搜索工具叫 internet search 搜索工具，那接下来它就会去搜索这个网站，链接是它，然后呢摘要是什么会搜索到，搜索到以后呢？把结果最终输出，加上完整的执行链度，这个中间一共经过了哪些环节呢？第一个是智能体的加载， 智能体加载或者要抽象啊，然后呢模型抽象， 模型出场之后，其实到这一步就完成了，到模型啊，然后呢接下来再就是 skill 加载， skill 加载完，接下来呢再就考虑到要去做规划了，当然在规划之前呢，这里还有一点就是当前 workspace 的 映射， workspace 映射，这映射是为了什么呢？其实就是为了我们整个沙乡的 抽象，就插纱箱机制啊，抽象好，接下来后面就用户输入，这其实就是提示词层面的，提示词层面的处理，比如用户的输入，然后呢把这个输入交给大模型教，大模型接下来就去读取，读完之后他发现，哎，要调用工具， 叫识别吧，叫工具识别啊，识别一般我们可能会识别出来，要么就要去调用 tool， 要么调用 m c p， 要么调用 skill 啊，这是工具识别。识别完之后，接下来我们发现它要去掉 internet search 这个工具，这个工具呢，其实我们通过 skill 来实现的啊， 接下来就去读取，这时候呢读取那肯定要用搜索引擎吧，搜索引擎呢，我们可以选择有很多种选择，我们比如说这里可以选择 tablie 来做啊，那接下来呢，就搜索把结果拿到，拿到获取，要获取， 获取所有的结果，然后呢，接下来再进一步的将结果使用大模型加工，最后，哎，就来到这一步了，为什么要做沙箱触手画，就是为了将文件操作存储到本地的文件系统， 那这就是完整的啊，一个过程，当然这个里面可能还会有很多点，我们没有办法在这么短的时间给大家全部具，那个每一步都具体的来说明，我们只是做一个整体的梳理，从智能体加载、模型抽象、 skill 加载，再到 workspace 印刷、沙箱抽象，题旨词呢，就开始工作了，要去识别要用哪些工具，要用哪些 m c p， 要用哪些。 skill 定好之后，将来我们识别到要用搜索引擎，它就会通过 tab 搜索引擎去搜索，搜索获得结果之后通过大模型来加工，最后输出到本地文件系统，那输出了什么呢？就这一堆，这是它搜索的结果，帮我们改写写出来的内容啊，已写入 hell 点五 md 就 完成了， 这是它整个执行的过程啊，那如果落到代码上面，我们要去实现的话，怎么来做呢？我们来重点去看啊，当然在看之前呢，我们可以看一下在这个里面 skill， 我 把我把这个 skill 呢移到里面去啊， 好，同学们可以看到我那个笑话， skill 其实是已经定义出来了，我们来看一下，将中国唐诗宋词改成现代中文笑话啊，干嘛干嘛。最后呢？写写东西，马克汤，包括诗丽都有， 比如说我输入月落乌啼霜满天什么什么的啊。当然这个笑话其实也不好笑，因为我们没有去改造它 写完之后的这个创作的效果，它其实就是通过这一个 skill 来实现的。当然这种 skill 呢，它不只是文字的加工，还能够去做图片生成，还能够做视频剪辑，所有的工作，只要是以前能够脚本化的工作，现在都可以基于 skill 来做，为什么呢？因为在 skill 这一部分，我们其实可以创建一个 script， 对 吧？ script 在 script 中间，你可以定义很多的逻辑来保证你当前这个 skill 功能完整。那你还有，比如说有一些额外的依赖的一些其他东西，在 reference， references， reference 里面啊，可以放在 references 里面，比如有些 data 有 一些额外的描述文件数据都在这个里面，那这就是一个比较完整的 skill 的 一个结构，唐宋 poetry， 什么 joe， joker， generator 叫这个名字啊？这个 skill 就 这个名字， skill 的 名称， 它的描述什么时候要用这个 skill 给它定义好，那么接下来其实就是去调用它了，那我们来试一下案例，比如说我在当前这个内容里面啊，输入了，比如说，嗯，床前明月光， 好，我就说这样一句话，看他接下来会干什么，直接通过我这一套 skill， 那 他会先去思考，对吧？你输入的内容，那直接帮我输出来，这很简单啊，因为这个工作比较简单。白话。然后呢？笑话， 我半夜差点拿拖把去擦霜，走近一看，原来是月亮把地板打高光，还有点押韵啊。 这个其实就是 skill 的 一个简单用法。那我们现在来看了，我们怎么样自己去调用这个 skill， 就 比如说我现在 skill 呢？一样不变，对吧？我假设也是写这样一套 skill， 我 现在可以把这个 skill 呢移到我的 open codex 里面来。那接下来我就直接用这个 skill 来调用它，看能不能生成结果，这就最重要的好。

如果你想更好地使用 codex， 第一步不是多写指令，而是把它当做一个会读代码、会动手，也需要上下文的协助。工程师给 codex 的 任务最好包含四件事，目标、成功、标准、约束以及你希望他不要碰的边界。 不要只说修一下，而是说修复登录后跳转错误，通过现有测试，不重构健全模块。第二步，给足上下文， 指出相关文件、附件步骤、报错信息、设计稿、接口文档，或者你已经试过但失败的方法。上下文越清楚， codex 越少猜。第三步，让他先侦查 复杂任务，可以要求他先阅读代码，列出计划、标出风险，再开始改，这样你能在真正写代码之前就纠正方向。 第四步，小步快跑，把大需求拆成可验证的小任务，先修一个 bug， 再补测试，再优化界面。每一步都让 codex 解释改动并看一眼 diff。 第五步，建立验证闭环， 让 codex 运行测试 linked 类型检查前端任务，还要打开页面或截图检查，没有验证的完成，通常只是代码写完了。 第六步，管理安全边界，不要把密钥、私人数据或生产凭证直接贴近提示， 涉及删除文件、改数据库发布。提交代码时，让 codex 先说明影响再执行。 更高阶的用法是把 codex 当做持续协作者，维护 agents、 md 记录项目、命令风格、测试方式和禁区。把 issue、 日制和期望结果写清楚，让他在每次结束时留下可附用的下一步。一句话总结好提示，不是命令更长， 而是上下文更准，边界更清、反馈更快。你给 codex 一个清晰的工作现场，它就能交付更可靠的工程结果。

哈喽，大家好，今天给大家讲解一个可以落地的一个小项目，呃，就是一个世界杯点球的一个挑战。我们先来看一下整体的效果， 点击这个球网点到哪里，这个球就到哪里。这个是一个很简单的一个小游戏，我们来看一下用克里斯然后加一 pop 程序如何去，我们先把首页，我们来看一下效果，这是我已经打好的，就是每一张图片都可以用呃吉梦去生成，看这是我生成的几个图， 然后我们来预览一下，然后有一些动画还有排行榜，然后我们再到嗯，游戏的核心页面，核心页面的话有个 html， 我 们要的就是这个东西，就是有一个 html 的 一个主键，然后这个主键里面就放了一些代码，我们来看一下这个代码 这一块的核心代码完全就是由 codex 复制过来的，该怎么去开发？呃，我们要的比如说我刚才设立的这个核心代码。首先来看一下，呃，其实很简单，只需要告诉呃他的，我们只需要和 a 告诉我们的需求就可以了， 他就会自己去生成代码，比如说这些代码你都不需要懂，然后我们只需要就是去调试，比如说举个例子啊，就是这里我在和他调试的过程中会遇到很多的问题啊，对吧？比如说这个，呃求和人他不在同一水平线上，可能就是因为不同的机型，他的尺寸不一样，对吧？这些你都要去了解，去知道，然后才能更好的和 ai 去解决问题。 然后最后的话，呃，你看就是他可能有很多次没办法解决，可能会遇到问题，这个时候你要去查看一下具体的问题是什么，你看他这里就给出了，可能就是那个宽度被不同的进行给拉伸了，对吧？ 然后你要告诉他这些信息，他就会能够把游戏的东西改了之后，这些问题就修完之后，就直接把这个代码直接拷贝过去就可以了， 然后复制过来粘贴上就可以了。然后我们把这些变量都和 epop 三六零去进行绑定。比如说举个例子啊，这个是球员的一个待机图片，这个在哪里呢？我们只要把它的 id 给它替换掉，替换成那个页面的 id， 比如我们找到这里是我刚才已经传上来的，比如是这个 id， 对 吧？这个 id 它的 id 就 可以直接拿过来，然后放到这个代码里面， 这样的话他就能够拿到这张图片，就可以实现和这个编辑器去进行联动啊。然后呢？啊其他的东西我们都可以在这里去进行，嗯，编辑，因为它是格式化的嘛，比如说这个进球数，这个时间怎么去控制， 对吧？这些都是可以联动的，我们只需要要这个核心的，呃，这个就是射门的这个核心代码，其他的一些辅助的信息我们都可以通过 epop 三六零去进行完成，呃，这个比较麻烦，呃，后面我会和大家再详细的去讲一下这个每个东西是怎么做的，这样的话就能够做出来一个落地的一个营销小游戏， 不再局限他是一个。嗯，本地自己玩啊，大家做完之后可以，呃，直接发布，直接发布就可以让我们的朋友或者是让我们的客户直接去扫码就可以玩了，这个是特别强大的。好，我就给大家讲这些。

这个开源项目是一款覆盖软件开发全流程的通用智能体框架， github 发布以来已经获得了四万的 star。 这期视频会使用 bimed method 结合 codex 做一个完整的项目，测试一下它的流程，然后看看能不能给 codex 的 前端能力带来一些提升。首先进行 bimed method 安装确认。电脑安装好 node 和 python 后，在项目文件夹中执行这个命令，然后进入引导， 输入 y， 确认安装文件夹，直接回车确认，选择 yes 安装的组建，这里全部选中。 接下来两个选项是 modules 和 get 相关，选择 no， 然后选择使用的开发工具 agents 对 你的称呼，这里直接回车。对话语言和文档语言这里都输入 chinese 文档保存的文件夹，这里直接默认即可。最后回车确认安装，然后等待安装完成， 完成后会看到这个界面，接下来就可以启动 codex 开始使用了。关于 bm 的 method 如何使用，这里只推荐。记住一个 bm 的 help 命令即可， 当你不知道该做什么的时候就使用这个命令，它会结合当前项目的状态，给你推荐最适合下一步进行的任务。比如这里我告诉他我想做一个网站，用来展示 ai 创作的小说，让他来协助我完成项目，告诉我下一步该做什么， 然后他给出了下一步推荐做的事，并且给了建议路线，最后给了我一个可以直接使用的提示词，把这个提示词复制给他，然后会进入项目前期的产品引导流程， 这个过程中需要一直和 codex 互动，回答问题，一步一步把产品想法理清楚，经过几轮对话之后， be my method 引导我完成了产品名称和一些重要设定，并且给出了下一步建议。 这里我选择直接进入下一步生成 prd。 生成 prd 的 过程中会多次遇到这三个选项问题。 选择 a advanced illustration 是 指高级启发，适合在对当前方案不满意，需要优化和补充时使用。选择 p 派对模式，这个选项可以让 ai 开启左右脑互搏，多视角讨论当前方案是否合理。选择 c 则是采用当前方案继续下一步， 这里我选择 c 继续下一步。闭麦的 method 每执行一步，都会把对话内容和当前进度进行保存，并生成对应的文档。如果要查看文档，可以进入到闭麦的 method 的 工作目录，找到对应的文档进行查看。文档中记录的就是当前项目的总结和成果，如果对内容不满意， 直接进行修改即可。如果在开发过程中忘记了项目进行到哪一步，可以使用闭麦的 help 命令直接询问 codex 当前项目进度，并让其给出下一步建议。这里他推荐我下一步打开一个新的上下文窗口，继续进行创建 prd 流程。 接下来就是按照他的建议把创建 prd 的 流程走完。 prd 创建流程完成后，我就得到了这样一份完整的 prd 文档，然后是 ux 设计，这个阶段逼麦的 method 围绕用户使用感受与我进行沟通。经过几轮问答之后，我得到了这样一个网站的原型设计。 这个前端设计并不是特别好看，只能说刚有点网站的样子。另外网站上还有一些描述性的多余文字，这个是 gpt 的 老毛病了，优点是整体的风格还算统一，并且全面地提供了榜单、广场、精选发现、移动端、 ui、 阅读页、作者收件箱等多个页面。 ux 设计完成后， bmed 同样生成了一份 ux 设计文档，这次的文档比较长。 ux 设计和 p i d 设计是整个项目开发中最重要的环节之一， 尤其是全程使用 ai 开发的情况下。这两个流程产生的文档可以详细阅读一下，可以有效避免后续开发完成后产品和想象的不一样。 接下来按照 bimhelp 给出的建议，进入 apex 创建环节。这个环节主要是生成开发计划，整个过程也是不断的交互，可以选择高级启发派对模式继续这三个选项。完成后，按照他给出的后续建议，检查并修复生成的 apex 文档后，就可以创建故事并开始开发了。 开发阶段相对来说会省心很多。一般情况，使用闭麦的 help 这个命令就可以完成开发，遇到需要解决的风险就让 codex 告知解决方案，解决后让 ai 继续开发。 如果想让开发的步骤更稳健，可以每隔几个 story 就 使用闭麦的 help 命令询问一下 codex 当前项目开发有没有堵塞和风险点，有的话给 codex 解决，然后继续开发即可。比如这里，他告诉我需要 supbase 数据库，我就去 supbase 官网申请了一个，然后把配置告诉他，让他自行配置并继续开发。 整个项目开发完成一共用了两天时间，目前闭麦的 help 告诉我主线已经完成，还剩下审批处理、回复申请没有闭环。这部分先不让他做，直接打开项目看一下效果。页面的 ui 一 眼看上去普普通通，仔细看就有点丑了。 榜单详情页这里还是 gpt 一 如既往的废话风格，内容页的还原度和最初的 ui 设计稿相比非常低，而且底部的元素堆叠看起来不太合理。这里如果要给 codex 的 前端能力做个评价的话，我的评价是不及格。 关于功能的完成程度，看起来没什么问题，可以评价发表作品，也可以查看自己的作品列表并进行管理。 最后我检查了一下 codex 中提到的未闭环的审核功能，发现确实有问题，不过问题不大，这个可以交给 codex， 让它完成闭环。总结一下，就整体使用感受而言，闭麦的 message 这个 agents 框架还是值得一试的。但是并不推荐全程使用 codex 完成开发， 因为 codex 的 前端能力确实会拖后腿，更推荐使用 opus 或其他模型完成前端部分。

hello， 大家好，我是七帅。前段时间我们前端设计要求我出一份 design system 的 变量 jason， 之前我做这件事情，通过各种插件，然后在 figma 里面才能导出一份 jason 格式的 design token。 这次我尝试用 ai 来帮我做这件事情，顺带的分享一下我这次用 codex 创建 design system 的 思考。做过 design system 的 设计师，百分之九十就掉到了一个致命的陷阱，就是你以为你坐在系统，其实你只是在对变量。 从 brown 一 到 brown 十，从 grey 一 到 grey 十，我们创建了上百个变量，最后呢，团队利用率却不是很高，如果说我们一旦改这个品牌色，全局的样式也就直接爆炸了。 前端追着我们要 token jason 文件呢？如果说我们还像我之前一样用各种插件去包语义词，这个可能需要花费很长的时间， 最后可能还会落到一句说，你的规范根本落不了地。前段时间我刚带着我们的设计团队，把一套只是停留在原子级色值的零散的规范呢，硬生生的做成了一套可维护、可迁移、可落地的完整的设计系统。 今天我也不讲怎么渐变量，怎么画组件，我只是讲这一路下来最值钱的六个的核心判断，这些东西相对来讲是我的一些核心思考。第一个判断普通设计师和资深设计师的分水岭，你到底是在给颜色编号，还是给颜色分配角色？ 很多人做设计系统，一上来就是做十级色板，给每个颜色的边上色号，就觉得完成了设计的系统， 就觉得完成了颜色系统。但我告诉你，这根本不叫系统，这只是一个调色盘，因为没有人知道这个颜色在什么，这个颜色在什么场景下该怎么用。我这次做的颜色的规则呢？核心简单到极 致，却能让全团队零歧的使用。六级是一准色，比如说我的 brought 六，就是我们的品牌主色。 同色系呢，要做正纹，那就用更深的七级色。如果说用浅色背景呢，就用一级色，用做描边用呢，就用三级或者四级，高强调用八级、九级。你看，这根本不是命名的规则， 这是在给每一个颜色分明的，这是在给每一个颜色分配明确的产品角色。这一步一旦立住了我们的颜色，系统就从死的色值变成了一个活的角色规则，这才是系统的起点。第二个判断，也是我这次最敢做的取舍。 设计系统的成熟度，从来不是说看你加了多少层，而是看你敢删掉多少没必要的层。 一开始我也是借鉴 on design 的 结构，里面出现了像 seed， map， 还有 content， 一 层一层看起来特别专业，也特别完整。 但是做了就会发现，很多中间层除了让结构看起来好看，其实没有任何实际价值，反而给我们的团队增加了几倍的理解成本、迁移成本和维护成本。 最后呢，我就直接做判断，把一些勇于的这些 map 层，还有一些其他的 base 层全部给删掉，只保留最核心的三层架构。第一层就是原子层， 我只放的颜色、字号、圆角、间距等这些最底层不绑定业务的基础的数值稳如磐石，绝对不会轻易改动。第二层是与一层，这个是整个系统的灵魂，只定义这个值在产品里的用途，比方说主文， 主文本容器的背景还是默认的边框，原子层改一个值与一层的全链路同步，彻底告别一个个改组建的噩梦。 第三层是组建层，我直接把羽翼的 token 绑定到按钮，输入框，弹框这些具体的组建里面，定死组建的使用，定死组建的默认使用规则，新人来了直接用根本不会出错。 我一直说好的系统从来不是说靠增加选项变强的，而是靠着减少歧义变强的。知道什么该加是最基本的功夫，知道怎么什么， 知道什么该删才是真正的懂系统。第三个判断也是百分之九十的团队都会踩坑。设计系统能不能落地，往往不取决于颜色做的有多么细，而是取决于有没有把最容易忽略的字体系统的真正的做进系统里面。 太多团队做设计系统颜色扣的很多字体，但是时可能只在规范里面就写了一句使用平方就结束了。 这次我也是专门把字体系统拿出来重新做了一遍，不仅定死了黑字白字两套完整的文字色的体系，更是立了一条铁规矩，就正常场景下全部用我们用黑色的字系，只有深色背景下才能切换白色的字系。 这个更重要的什么，就是我把字体家族自重，字号行高全部所做进了 tokyo 里面， 做成了真正可附用的文本的样式。这也不是文档里面一句说明，你要记住是规则只存在于文档里面就等于没有规则，只有规则存在于系统里面，才是真正的规范。 第四个判断直接决定了你的东西到底是一份好看的文档，还是一份真正的设计系统。 token 只有绑定到正式的组建资产里面，才算是真正完成的闭环。 太多人的设计系统只停留在变量表和规范的里面。但是我告诉你，如果是 token 不 进，组建本质上还是一份死文的。只有当你的每个 token 都对应到组建里的每一个样式属性里面，当你改一个底层的变量，全量组建都能同步更新的时候， 它才能真正成为一套被团队长期使用的系统。这次我不仅做了 token， 还是还把全链核心的组建全部宠够了，给每个组建补全了可编辑、可配置的属性，让组建不只是只能复制的静态样式，而是一套真正可维护、可赋用的设计资产。 接下来我想说一说这一路踩过的最值钱的几个坑，这些坑可能比最后的结果更重要。比如说，我发现设计工具的分享链接不等于结构化能力可用， 因为我们公司当前用的是 mastergo， mastergo 的 协助链接呢，没有具体的图层 id， 根本解析不出。比如说像 figma 变量里面重复的 model， 它会给整个系统制造出大量无意义的噪音， 你以为 model 是 灵活的，其实呢，是在给团队埋坑。如比如说我们想学习大厂的拓客的结构，但是最后你会发现，其实成熟的系统从来不是像大厂，而是更适合自己的团队。 这些坑让我明白了，设计系统的难点从来不只是设计规则的本身，还有工具的能力、边界、 团队的写作成本和落地的真实场景。最后，我也想给所有正在做设计系统的设计师说一句真心话，很多人觉得 设计系统就是一份完美的规范文档，是密密麻麻的变量，表示复杂的层级结构，但其实不是的。一套真正能落地、能长期生长的设计系统，核心从来不是把设计元素给收集起来，而是把你的设计决策 整理成一套全团队都能理解、能执行、能维护的秩序。不要只做变量的堆积着，要做设计秩序的建立者，不要只做看起来好看的规范，而要做真正能解决问题的系统。

曾经我对 cloud code 的 终端爱不释手，但现在我只能说一句， codex 真香啊，真香！ 大家好，我是布鲁。随着 codex 近期频繁的更新，我自己的工作站也已经全面的切换过来了。今天就来分享一下我自己的完整使用经验，怎么用 codex 打造一套不打断心流的生产力闭环。 本期视频我把它分成了七个章节，每一张都是我自己实际在用的技巧，希望能对你有所帮助。那我们话不多说，直接开始 第一张，先来介绍一下我的工作站是怎么布局的。左上方是 codex 的 对话框，下方是 terminal 终端。 你可能会问，已经有 codex 的， 为什么还要开一个 terminal 跑 c c？ 因为我发现对于一些需要探索、需要设计的任务， c c 的 表现要更出色一些。所以我的习惯是用 c c 来做方案设计，配合 planning with files 这个 skill， 把设计思路直接落成文件， 然后再让 codex 读这份计划，接手后续的具体实施。这样一来， cloud code 负责想， codex 负责做，两者可以各司其职。 右上方这个区域我用来做任务完成后的查看和审阅，比如代码的 review， 文件的浏览，还有浏览器都在这里。虽然现在浏览器还不支持多标签页，但对于日常的任务来说完全够用。这边我就分享一个实际的案例， 我让 c c 参考了最近很火的这篇卡巴西提出的知识库的文章，让他借鉴里面的思路，出一份设计稿和完整的实施计划。目的呢是做一套前端的页面，方便我日常的维护文档使用。 接着 c c 就 会调用 planning with file 这个技能啊，将所有的计划落成文档，然后我就会回到 colex 这边，让 colex 去阅读当前项目内的这份计划文件，然后基于这份计划文件让他进行开发。开发完结果之后，我会在这边 内置的浏览器里面去进行结果的 review， 包括代码的一个审查，整个过程从设计到开发再到 review， 全都在这一个工作站里面完成，不需要切换任何的窗口，这就是我前面所说的，心流不会被打破。 第二章，批注功能。这个功能是我觉得 codex 真正强大的原因之一，也是最能体现沉浸式开发的地方。 以前我们改代码的方式是找到文件定位到哪一行，描述问题，让 ai 修改，整个过程中你的注意力是在代码上的，但现在 codex 的 批注功能让这件事情变了，你可以直接在文件上进行批注，告诉他哪里怎么改，需要怎么改。 更厉害的是，现在这个批注功能不止限于代码文件，你可以直接在前端页面上进行批注，看到哪个按钮位置不对，哪块布局不满意，直接在页面上标出来， codex 就 能理解你的意图，并帮你进行调整。这件事的意义在于，正好对应了 webcodd 的 核心理念， 开发者的重心不在于怎么写，而在于写出来的东西对不对。批注功能把这个理念落地了。 第三章，上下文管理 codex 项目里可以同时开多个县城，每个县城对应一个任务，互相独立，不干扰。对比 cloud code 需要开多个对话窗口， codex 把所有县城都收在了一个项目下，管理起来会清晰很多， 然后是项目的记忆核心就是 a 键的点 md， 这个文件你可以类比为 cloud md， 把项目的背景、开发规范都写进去， ai 每次进来都会读取，不用反复的交代。 还有一点， codex 的 上下文管理非常省心，它会自动帮你压缩上下文，它也没有提供像 cloud code 中 compact 的 那样的命令，这种事情让 ai 自己处理就好了，你专注于任务本身就行。 第四张，自动化这块是我觉得 codex 比其他 agent 做得更好的地方，几个原因，第一，用起来非常的方便，直接在 gui 里面新建自动化任务，还内置了很多模板可以选择， 大到项目管理技术、眼镜，小到个人的生活习惯，都可以交给它来定期的处理。第二，自动化可以调用 codex 自身的能力，比如插件、 skill、 mcp、 浏览器操作、电脑操作等全都能用进来，这就是为什么我说 codex 在 逐步形成自己的生态。 第三，我们可以根据不同的场景来灵活的选择模型和推理强度，简单的任务用轻量模型，复杂的任务上强推理，这样的话头肯可以用的更加的合理。第四，稳定性，我实测下来， codex 相较于其他的 agent， 定时任务的准确性已经能达到生产级别，相当的靠谱。 第五张插件和技能， codex 有 相当丰富的官方插件和 skill 生态。先说说两者的区别， skill 就是 纯文档，本质是给一份 ai 的 说明书，告诉他在特定场景下应该怎么做事。比如说我前面提到的 planning with files， 就是 一个 skill 插件的概念会更大一些，你可以把它理解为 codex 打补丁，里面可以包含 skill， 也可以带上 mcp 配置，甚至集成其他的 app。 一个插件装下去， codex 就 多一套能力。 另外， codex 在 插件和 skill 的 管理体验上面要比 cloud code 的 友好太多了。 cloud codex 需要改配置文件，而在 codex 里直接在界面上点击安装，或者自己创建，整个过程非常的直观。 第六章浏览器和电脑操作 codex 可以 直接操控浏览器，你可以让它自动填表，抓取数据，验证 ui 效果。 比如我需要批量收集一些网页上的信息，直接告诉 codex 去哪个页面拿什么数据，它就能自己打开浏览器去完成操作，整个过程中都不需要你的介入。除了浏览器， codex 还能直接操作你的电脑文件的整理，应用的打开都可以交给它来处理，相当于有一个助手在帮你操作桌面。 不过这里要说明一点，随着 ai 自动化越来越普及，现在已经有不少软件开始加强安全控制，对自动化操作做了限制，所以实际能操作的范围会因软件而异，遇到限制情况也很正常，大家用的时候留意一下。 第七章通用功能这些功能不是 codex 独有的，很多 agent 都支持，但作为一个完整的工作站，这些基础能力 codex 当然也不会缺少。先说 play mode， 在 执行一个比较复杂的任务之前，先让 codex 把完整的计划列出来，你过一遍觉得方向对了再让他动手， 这个习惯能帮你省掉很多返工的时间，大任务尤其推荐开 play mode。 再说 m c p， 也就是模型上下文协议，通过 m c p 可以 把各种外部的工具和服务接进来，让 q d x 能力边界大幅扩展，无论是连接数据库，调用第三方的 api， 还是接入自己家的服务，配置好之后， q d x 就 能可以直接调用。 另外还有一点， q d x 相较于 logot code 的， 有一个非常关键但很容易被忽视的小功能，语音识别。目前我的任务几乎都是语音发起的，连打字都很少了。 ok 以上就是我在使用扣袋子过程中总结的一些技巧，如果对你有帮助的话，希望能得到你的点赞和关注。 最后我想说一句， ai 发展太快了，各家 a 键的功能越来越趋同，但工具再多，适合自己的才是最好的。有时候做做加法，找到真正需要的，做做减法，去掉用不上的，慢慢摸索出一套自己的工作范式才是最重要的。我是布鲁，我们就下一期再见。

这条视频我想演示一件事，如何用 codex 接管电脑，完成一条小红书内容从准备到发布的完整流程。一开始，我只需要给 codex 一个目标， 比如帮我完成一条小红书发布。 codex 会先理解任务，再把流程拆成几个步骤，选择题、素材、文案、图片、网页发布和最终检查。它不是简单地帮我点几下鼠标，而是会先规划执行路线， 哪些内容要生成，哪些素材要检查、哪些页面要打开，遇到什么情况需要人工确认，都会一步一步处理。在准备阶段， codex 会整理标题、正文标签和发布素材，如果已有素材不合适，它会提醒我重新确认。 如果内容缺失，它会继续补全，让后面的发布流程能顺利进行。准备好之后， codex 会进入 真实的小红书创作服务平台，他会打开浏览器，识别当前页面，找到发布入口，然后继续完成上传和填写。中间如果遇到登录权限确认、浏览器弹窗， codex 不 会盲目操作，他会停下来等我确认，等关键节点处理完成后， 再继续自动执行后面的步骤。 s 零七进入发布页面之后， codex 会把素材上传到创作中心， 同时他会关注右侧的小红书手机预览，确保最终呈现效果可以被检查，而不是只把内容填进去就结束。接下来是发布前的细节检查，比如标题、正文、标签、分类声明、权限设置 以及手机端预览是否正常，这些重复又容易漏的步骤，都可以交给 codex 按流程逐项完成。 这套流程真正有价值的地方，是把一次发布任务变成了一条可附用的自动化链路，我只需要提出目标并在关键节点做确认，剩下的整理、填写、检查和页面操作都可以由 codex 来推进。 最后补充一点，你现在看到的这条视频本身也是在 codex 协助下完成的，从原始录屏粗剪到配图参考动效设计、字幕节奏和视频剪辑， 都是 codex 参与制作的结果。也就是说，这条视频不仅是在展示 codex 如何自动化完成小红书发布，它本身也是一次 codex 自动化创作流程的成品。 i love you。

简单说一下，我最近用 codex 做了一个什么项目哈，就是因为很多新手小白跟我一样，就是一开始用这些 ai 的 编程软件的时候，其实不知道能用它来做什么事，也就是对对话，随便做点什么内容，但 我其实更想用它当成一个可以帮助我变现的工具来使用，所以呢，我就用 codex 帮我做了一个类似于这样子的，嗯，生成拼斗图的一个网站，那这是我的后台，这些内容全部都是由 就是 codex 搭建的，然后包括前端的用户界面，然后用户输入头，输入图片，之后呢？ 嗯，我会让用户选择风格，然后会生成结果，然后最后呢再进到拼斗的图纸编辑页面，这些内容就几乎全都是 codex 来完成的， 包括我也用 codex 去做了一个嗯，小程序，也是帮助用户，嗯，把自己的图片上传上去，然后生成拼斗图纸， 这些内容呢都是用 codex 语言完成的，我简单给大家展示一下，就是类似于上传一张图，然后点击图纸，然后它就会生成下面可以调整宽度，包括颜色，数量，相似，合并比例等等等等这样的东西。 那这个网站呢是放在小红书上去进行售卖的，那小程序呢？更多的就是去赚流量主的一个费用。 ok， 然后呢怎么做的呢？很简单，其实就是我会先用 cloud， 呃去帮我生成一些关于这个项目的产品需求，然后产品需求完成之后呢？呃，当然了，因为 cloud 比较贵，我也都是在闲鱼的地方去买的比较便宜的这种， 呃，所谓的中转站，然后去用的，然后呢就会再放在这个 codex 当中，它就会 帮我去制作，然后过程当中遇到的一系列的问题，比如说呃需要使用服务器，我也是第一次接触到这些内容，然后包括域名， 呃，包括上线部署，包括类似于反正种种各种各样子的问题。大概，嗯，我觉得可能得调整了几十次吧，一直在反复不断的调整，因为我也在不断的惨坑了。 嗯，直到整个项目可以正常地跑通，然后正常地运行，现在几乎不用管。然后，嗯，把阿吉索挂在这里就可以了，然后有人要的话呢就直接发货，所以我觉得 我希望你们也能够把它用起来，当成你们的变现工具。好吧，普代斯牛变。

好，大家好，我是小刘。呃，今天我们一起来看一下怎样生成这种圆形图。那首先我这一次换了一种思路，最近那个，呃，它的 gpt 出了一个最新的升图模型嘛？ gpt image。 二、 这个升图模型的话，我们可以直接用它来去生成一些我们的设计稿，当然我这里是错误示范，正常的话，我们可以一步一步让它生成，让它先规划，然后再生成每一个界面的图片，然后我们再去调用，这里面有一个叫做 figma 的 应用，然后呢，可以直接去嗯，生成甚至你觉得不对的地方，你可以点击编辑，然后去涂抹某一个区域，然后去进行修改，这样的涂抹修改你觉得不太合合适的点，这样我们就可以所见即所得。你不用一遍遍去生成原型图，然后，嗯，调整的话特别麻烦，流程特别长，所以呢，就直接通过这种方法， 然后我一看 qx 好 像也支持这种方式，所以我就直接艾特这个 fig 码，嗯，艾特这个 fig 码的这么一个应用，它直接添加就好了，就选择选择添加你这个 fig 码的一个应用在这里， 那当然还可以使用 canvas， 都都可以哦，就是很多种方式，我就选择 figma， 对 吧？你选择 figma 之后呢？然后你就直接把你的需求，你可以把你的需求，呃，用嗯， codex 让它帮你论色一下，比如像我一样，对吧？生成一个这样的圆形图， 包含的每一个页面什么什么界面，那它就会按照你的需求去生成创建这个 pdf 的 文件，这时候我们就得到一个文件，然后你就可以把文件再转成这个 html 文件，就变成这种格式，那有什么好处呢？那好处就是我们在图片阶段就可以接的所见所见的去修改它。举个例子，比如说，哎，我觉得这个地方不太恰当，那我直接艾特他对不对？我直接就可以跟他描述，我说这边 不太恰当，那直接改，那我们从图片阶段这一步，我们就可以很快的看到所见所见的，再把它转成设计稿，最后再生成我们要代码。 那我们有一套设计稿的好处是什么呢？就是我们可以生成 app、 ios 应用、小程序，包括我们的鸿蒙应用，就是我们一套可以打通多端，而不是仅仅局限于，呃，在一个页面上开发啊，这我觉得是一个比较好的点。那除此之外呢，你可以使用那个这个 canvas， 就 这玩意儿，就这个，这个这个插件我觉得挺好用的，就是 这一个，这个也挺好用的，当然就这两个设计我觉得就足够了。然后呢，如果我们想在我们的原型图阶段就做出像这样的效果， 这样的效果你看是不是每个页面都可以点击，甚至你还可以去有特效，就需要你哦，在不断的去优化交互，这样就实现了整个的流程图的。那啊，这是我给大家分享一个流程，大家可以按照我这种方法去做。那除此之外呢？如果说，哎，你觉得不想自己做，你也可以直接在这个飞格玛公开的这么一个平台，他可以在这边直接去搜索而其他人做出来的一些产品， 然后你直接保存在你自己的空间，比如说像这里搜索一个外卖，然后这里呢就会直接找到所有外卖相关的设计图，然后你在这边你可以选择把它保存在你自己的这个 这个飞马的空间里面去，然后你觉得 ok， 对 吧？然后再进行开发，这样也可以帮助我们节省一些时间。好，那如果是你要开发 app 的 话，你就直接哦在这个 u i load 里面去，那这样的话也是 ok 的。 好吧，没有什么问题。好吧，那这是本期视频的全部用了，我是小刘，我们下期再见。

比起小龙虾，新手小白更适合用 codex， 我 们只要会说话呢，他就可以把网页做出来。今天视频呢，我们就说一件事情，新手也可以一分钟上手 codex， 并用一句话做一个网页，我先新建一个文件夹，然后我们直接打开它。第一次上手的话呢，这一步不用想太多，任何文件夹其实都可以。 接下来选择权限和模型，新手我建议权限先用默认，这样比较稳，也不容易误操作。那模型我们选择高或者中等就够了，超高档的话呢，反而我觉得用下来思考速度会变慢。 然后我们就开始直接做东西，我想做一个新入股风格的产品的 demo 网站，然后我直接输入一句话，参考新入股的整体像素复古风格，生成一个适合做产品的 demo 网站。等待思考的过程呢，我们可以去看一下其他的按键啊，插件就是理解成 app store， 我 们想要什么拓展功能都可以去这里找 设置就是外观啊，还有其他的功能，但是我觉得新手前期是完全用不到的，有能力呢，我们也可以外接 codex 试一试，我平时也是外接这个一起使用，我觉得用下来整个过程会更清晰，然后还有一些额度设置，也可以看到我们的使用情况。 等网页出来，我们可以看一下整体风格，就是还是挺接近我想要的那个感觉，他的氛围啊和视觉方向我觉得都还不错，也就是说我们刚刚看到的整个过程，其实我就只说了一句话，他就从一句话到一个网页结果。那如果我们想继续往下改也非常简单，我们可以在当前的对话框继续补充我们的需求， 也可以去加图片或者文件，那左侧的文件也就是我们的项目内容，会把我们生成的东西都留在这里，方便我们后续调整。所以我们大家第一次用 codex 只需要记住这三步，第一步，打开文件夹，第二步，选默认权限和合适模型。第三步，输入一句话，我们可以先把东西做出来，我们再慢慢优化就可以了。

哈喽，大家好，今天教大家去做一个动画跟随网页滚动播放的这么一个交互效果。首先在首页的话，它是个循环播放的，然后当我们去滚动起来的话，它就会去播放下面的动画，然后在一个节点的时候它会停一下，然后我们继续去滚动，它就会继续去播放下面的动画， 然后它也可以回推，像这样子你看，然后也可以回推到这个上一个页面，然后继续往下面滑， 然后滑动到尾帧的时候，他会有一个这个循环动画，然后就跟我们手势一样。 ok， 今天教大家怎么样快速实现这么一个效果。 ok， 首先我们在节目中打开这个画布模式，然后我们需要准备一张产品的图片，或者是你的 ip 角色、建筑场景都可以，我这边用这个小马来演示，原理都是一样的。首先我们让他去生成一些不同景别的不同表情，不同动作的一些图片，让他生成很多包括这个不同的动作，不同的景别，然后包括一些近的， 然后我们也可以让他去添加一些道具啊，比如这样子让他生成一些带道具的。 ok， 他 也会生成一些带道具的，包括我们也可以去让他生成一些带场景的 图片。 ok， 完成之后我们去选择出我们比较满意的，比如说我们这些比较满意之后，我们去做一个操作，就是去去掉背景，然后让他抠图， 哦，抠图好之后，我们在这个最好是在 photoshop 里面去把这个背景颜色统一一下，比如说这是我们下载好的抠好图的，然后我们把它放进这个里面去，放到这个封面里面去，然后再把它导出图片， ok， 完成之后的话我们就会得到这样一个比较干净的图片。 ok， 然后我们像这样把它顺着去把它排列下来，比如说我这个想作为这个网站首页， 那我们就把它放在上面，那之后的话我们就需要去生成这个动画，然后在这边的话我们去选择视频生成，然后在最上面的话它是一个循环的动画，所以说我们这边可以去用到这个缩微帧的功能， 然后比例是六比九，包括五秒钟就够了，用它这个循环动画。 ok， 然后的话我们去把它添加到兑换，然后添加两次啊， 他就一个手正一个尾正，到时候他就去是一个循环的动画，然后这边的提示词就比较简单，然后我这边写的是小马眨眼睛，就这么一个简单的， ok 完之后他就会去生成这么一个动画，你看小马眨眼睛微笑。 ok 完之后我们再去生成一个这个第二段， 然后这个时候我们就需要去把这个这个作为首帧，之后这个第二个就作为这个尾帧，然后添加到对话里面去。 ok， 然后这个提示词的话也非常简单，我直接写的是小马起身奔跑，因为我们这个 cds 二点零他这个生成效果已经非常好了，所以我们简单的提示词就可以了，然后他就可以去生成一个比较流畅的动画。 ok， 我 们按照这个方法的话，依次去生成后面的这些，就是把所有的动画都生成下来。 ok， 然后我们去把这些视频全部都下载下来，接下来我们就去到剪映里面去，然后把我们的这个所有的这个 下载好的视频，然后全部放进来。 ok， 放进来之后我们全部去选择，然后一起拖到这个时间线上面，然后按你的这个顺序把它排列好，比如说这是首页的最上面的，然后一二三四五六七，然后排好顺序。 ok， 这个时候我们需要做一件事情，就是我们需要去记一下他的时间节点，比如说你看他这边首页的话是第一到第五秒钟，第五秒钟，然后第二第一个首页，首页是这个第一个节点的话是五秒钟到九秒钟。 ok， 那 么这个时候我们就需要把它这个东西记录下来， 比如说我们首页是到时间段，然后这个第一节点一，然后你有多少个就生成写多少个。 ok， 完了之后，其实我们这边也可以去写一下每个节点和每个页面里面的这个文案，就是你网页的文案，如果没有的话也不用写，也可以直接告诉他你的主题就行了， 或者是让他自己去根据画面来去配相应的文案，然后这边是按钮，如果你有按钮的话就写，如果没有的话就像张空的，比如说我的网页是没有加按钮，我就没有写，而文案的话我是让他自己去配的。 ok， 我 们把这个东西要记录下来，完成之后的话，我们就去把这个视频导出，导出成一个完整的视频。 ok， 那 么接下来的话我们就去到这个 codex 里面去啊，然后在这个之前我们还需要做一件事情，就是我们去需要去选一个网页的参考图， 那么这个参考图的比如说我选的是这一张啊，那么这个参考图的目的的话，就是他让他去让这个 ppt 去参考你这个里面的文字的排版，以及字号间距这些大小等等，然后里面的按钮等这些元素。 ok， 我 们需要一张这个排版的参考，然后我们刚才导出了这个完整的视频，然后最后一个这个拆分的节点的这个图片。 ok， 然后把它放在一个文件夹里面去。 ok， 这个是我们在这个口袋里面打开，然后我们选择这个，刚才我们 放好这个三个文件的一个文件夹。 ok， 我 们打开之后，我们这个时候去把我们的完整的提示石粘贴进去，然后这边的话我给大家去把完整的提示石放在这边，大家可以去截图保存。 ok， 然后这边把这个提示石粘贴进去发送给他，然后他这边就会开始去编辑代码。 ok， 然后的话最后生成了之后，我们去给他微调了一下，也是通过对话的方式就让他微调了一下，比如说这段时间出来慢一点，调整一下之后大小等等，然后他就生成了这么一个网站啊，然后可以滚动播放的。 ok， 大家感兴趣的话可以去试一试。

设计师如何创建自己的题诗词网站？只需要两步，打开 codex 网站，将上面这段话输入对话框，等待一会，一个静态的 web 网站就搭建好了。 打开网址即可访问， 不仅可以复制提示词，也有资源概览，还可以按需搜索。是不是很简单，快快行动起来吧！