关于AIGC人工智能、思维方式、知识拓展，能力提升等。投稿/合作： @inside1024_bot
AIGC 领域的最新工具、开源项目以及行业大事件
AIGC 领域的最新工具、开源项目以及行业大事件
刚刚在上海举行的waic盛况空前，其中最受瞩目的就是机器人大乱斗。
这期内容内含：我和智元的人形机器人搭档主持+智元的工业机器人进厂打工实录～（文字版和视频版今天晚些上线）
团队的工程师数量，已经从创业之初的1个，增长到了现在的7个。
为什么在 AI Coding 如此之强的时候，还要招这么多的工程师呢？
因为 AI 可以帮助工程师提效，但并不能取代懂 AI 的工程师。
当每个工程师都在用 AI 提效，工程师越多，整体研发效率就越高。
AI 永远无法取代的，是善用 AI 的工程师。
比超级个体更强的是一个超级组织。
为什么在 AI Coding 如此之强的时候，还要招这么多的工程师呢？
因为 AI 可以帮助工程师提效，但并不能取代懂 AI 的工程师。
当每个工程师都在用 AI 提效，工程师越多，整体研发效率就越高。
AI 永远无法取代的，是善用 AI 的工程师。
比超级个体更强的是一个超级组织。
教程来咯！手把手教你做出同款公众号排版工具٩(˃̶͈̀௰˂̶͈́)و
再也不用给那些乱七八糟服务商掏钱了！
懒得搓可以直接用我已经发布的：https://nutllwhy.github.io/wechat-style-tool/
已开源，也可以把我代码下载下来给你的AI参考：https://github.com/nutllwhy/wechat-style-tool
团队的工程师数量，已经从创业之初的1个，增长到了现在的7个。
为什么在 AI Coding 如此之强的时候，还要招这么多的工程师呢？
因为 AI 可以帮助工程师提效，但并不能取代懂 AI 的工程师。
当每个工程师都在用 AI 提效，工程师越多，整体研发效率就越高。
AI 永远无法取代的，是善用 AI 的工程师。
为什么在 AI Coding 如此之强的时候，还要招这么多的工程师呢？
因为 AI 可以帮助工程师提效，但并不能取代懂 AI 的工程师。
当每个工程师都在用 AI 提效，工程师越多，整体研发效率就越高。
AI 永远无法取代的，是善用 AI 的工程师。
今年7月29日，100名非公有制经济领域的优秀代表在北京获得“优秀中国特色社会主义事业建设者”称号，其中现年32岁的彭志辉与35岁的王兴兴也双双受到表彰。
基本能力搞定以后，我优化了一堆首页的设计细节，比如更改卡片圆角、整体配色、增加顶部导航以及为网页增加移动端适配等等，基本用的都是之前说的 Edit 模式加上修改设计变量的方式。
除了排版字体之外的更改外，主要是三个地方的更改。
首先是在社交媒体展示这里，让他从原来中规中矩的图标加链接，变成了 hover 上去以后会倾斜和出现弥散投影的卡片。
我就只跟 Trickle AI 说 hover 会倾斜，并且加投影，没想到他的倾斜角度和投影样式搞得这么好，还加上了缓动效果。
然后感觉这个白色背景有点单调，于是就让 Trickle AI 给北京加上了浅紫色的点阵效果，重新把整个页面内容变为一张卡片，只需要跟他说点阵的圆点大小和颜色就行。
最后重点的来了，在作者这里我想要用一个炫酷的方式展示我的所在地，直接选了一个叫 COBE 的 3D 地球组件。
我们只需要跟他说用 CDN 引用组件，然后说一下组件放到哪里就行，带上组件文档的示例代码就搞定了，你可以在这里查看（网页链接）示例代码。
到这里我们的整个网站就搞定了，这个教程里面除了基本的创建，我主要在教你如何修改以及如何增加常见的网页能力，希望你看完的时候能有所收获。
Trickle AI 通过 Magic Canvas 以及样式修改跟左侧输入框的联动以及优秀的上下文工程和设计系统跟 AI 的结合，除了大幅提高了 Agent 的能力以外还大幅降低了现在开发 Agent 最大的成本问题。
而且设计系统跟组件库以后还会有更大的发展和更多的能力，带来更大的网络效应。
除了排版字体之外的更改外，主要是三个地方的更改。
首先是在社交媒体展示这里，让他从原来中规中矩的图标加链接，变成了 hover 上去以后会倾斜和出现弥散投影的卡片。
我就只跟 Trickle AI 说 hover 会倾斜，并且加投影，没想到他的倾斜角度和投影样式搞得这么好，还加上了缓动效果。
然后感觉这个白色背景有点单调，于是就让 Trickle AI 给北京加上了浅紫色的点阵效果，重新把整个页面内容变为一张卡片，只需要跟他说点阵的圆点大小和颜色就行。
最后重点的来了，在作者这里我想要用一个炫酷的方式展示我的所在地，直接选了一个叫 COBE 的 3D 地球组件。
我们只需要跟他说用 CDN 引用组件，然后说一下组件放到哪里就行，带上组件文档的示例代码就搞定了，你可以在这里查看（网页链接）示例代码。
到这里我们的整个网站就搞定了，这个教程里面除了基本的创建，我主要在教你如何修改以及如何增加常见的网页能力，希望你看完的时候能有所收获。
Trickle AI 通过 Magic Canvas 以及样式修改跟左侧输入框的联动以及优秀的上下文工程和设计系统跟 AI 的结合，除了大幅提高了 Agent 的能力以外还大幅降低了现在开发 Agent 最大的成本问题。
而且设计系统跟组件库以后还会有更大的发展和更多的能力，带来更大的网络效应。
即使 Agent 的上下文超了，这部分信息也会一直存在，完成了卡帕西说的永久上下文。
如何又快又省的用 Edit 模式对项目进行修改
首先是一些基本样式的修改，你可以点击画布下面这个鼠标的图标，开启Edit 模式，就可以选中页面上的元素。
选中之后聊天窗口就会出现一个 CSS 属性的编辑组件，就可以直接编辑对应的文本、颜色对其方式等内容，编辑完点保存就行。
解决用文字描述不知道该怎么说的问题，由于直接把内容传入了 AI，所以可以精准的找到位置大幅节省 Token 消耗。
另外你会发现，选中的元素不止有上面的可视化修改区域，在输入框上面也回填了，如果上面的元素没有你想要修改的部分也可以打字描述。
然后 Edit 模式还不止可以选择网页元素，你还可以选择 Assets 部分的元素。
比如我这里可以选中网页标题，再选中 Assets 中我上传的猫猫头像，两个部分就都回填到了输入框里面，这时候你就可以将图片快速添加到指定位置了，我还让他给图片加上了圆形遮罩。
这样是不是比你吭哧瘪肚描述要好多了。
最后一个技巧，我们需要介绍一个概念“设计变量”，你是不是以为网页中所有元素的颜色、大小甚至描边粗细都是单独写的样式。
其实很多时候为了一致性和协作在正常写前端程序的时候都会将这些样式多封装一层，类似下面图片。比如描边颜色一般会指向这个变量名称而不是具体的颜色色值。
这样我们修改整个系统所有页面的描边颜色的时候就不需要一个一个改了，直接把映射表里的色值改掉，整个系统都会生效。
但是大部分编码 Agent 就是单独写的样式，所以随着你越该越多，模型丢三落四的现象就会越来越严重，需要传入的上下文也越来越长，直接导致上下文管理失败或者丢失需要改的部分。
Trickle AI 内置设计变量，我们在修改样式的时候直接让他改变量的值就可以了，不需要查询这个多个页面的样式文件，就能修改多个页面的元素样式。
了解了这个以后你用这种提问方式就可以频繁修改网页样式而不用担心过多的 Token 消耗和上下文占用。
你也可以让他拆分和新建设计变量，我这里原来导航的分割线和卡片描边共享一个变量，但是我不想他们是一个颜色，所以这个时候就可以要求他将分割线颜色和卡片描边颜色的变量分开分别设置。
这期间只涉及到设计变量的文件，所以消耗的 Token 非常少，这也是为什么我改了六十多个版本只花了几百积分的原因。
来让页面更美观吧
如何又快又省的用 Edit 模式对项目进行修改
首先是一些基本样式的修改，你可以点击画布下面这个鼠标的图标，开启Edit 模式，就可以选中页面上的元素。
选中之后聊天窗口就会出现一个 CSS 属性的编辑组件，就可以直接编辑对应的文本、颜色对其方式等内容，编辑完点保存就行。
解决用文字描述不知道该怎么说的问题，由于直接把内容传入了 AI，所以可以精准的找到位置大幅节省 Token 消耗。
另外你会发现，选中的元素不止有上面的可视化修改区域，在输入框上面也回填了，如果上面的元素没有你想要修改的部分也可以打字描述。
然后 Edit 模式还不止可以选择网页元素，你还可以选择 Assets 部分的元素。
比如我这里可以选中网页标题，再选中 Assets 中我上传的猫猫头像，两个部分就都回填到了输入框里面，这时候你就可以将图片快速添加到指定位置了，我还让他给图片加上了圆形遮罩。
这样是不是比你吭哧瘪肚描述要好多了。
最后一个技巧，我们需要介绍一个概念“设计变量”，你是不是以为网页中所有元素的颜色、大小甚至描边粗细都是单独写的样式。
其实很多时候为了一致性和协作在正常写前端程序的时候都会将这些样式多封装一层，类似下面图片。比如描边颜色一般会指向这个变量名称而不是具体的颜色色值。
这样我们修改整个系统所有页面的描边颜色的时候就不需要一个一个改了，直接把映射表里的色值改掉，整个系统都会生效。
但是大部分编码 Agent 就是单独写的样式，所以随着你越该越多，模型丢三落四的现象就会越来越严重，需要传入的上下文也越来越长，直接导致上下文管理失败或者丢失需要改的部分。
Trickle AI 内置设计变量，我们在修改样式的时候直接让他改变量的值就可以了，不需要查询这个多个页面的样式文件，就能修改多个页面的元素样式。
了解了这个以后你用这种提问方式就可以频繁修改网页样式而不用担心过多的 Token 消耗和上下文占用。
你也可以让他拆分和新建设计变量，我这里原来导航的分割线和卡片描边共享一个变量，但是我不想他们是一个颜色，所以这个时候就可以要求他将分割线颜色和卡片描边颜色的变量分开分别设置。
这期间只涉及到设计变量的文件，所以消耗的 Token 非常少，这也是为什么我改了六十多个版本只花了几百积分的原因。
来让页面更美观吧
