关于AIGC人工智能、思维方式、知识拓展,能力提升等。投稿/合作: @inside1024_bot
AIGC 领域的最新工具、开源项目以及行业大事件
AIGC 领域的最新工具、开源项目以及行业大事件
今年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 非常少,这也是为什么我改了六十多个版本只花了几百积分的原因。
来让页面更美观吧
这两天 Claude 接入 Notion、Canva 和 Linear 等第三方平台,越来越多人意识到这不是工具升级,而是人文与技术融合的里程碑。
以 Notion 为例。对重度用户而言,它早已不是静态知识库,而是承载思维轨迹的「外脑」。当 Claude 通过 MCP 连接这个认知空间时,三重力量开始交汇:
当下的思考 × 基于互联网的 AI 搜索 × 第二大脑
所有信息以你为中心,跨越时空和语言的边界重新编织。AI 不再是外部工具,而是内化为认知本身的放大器。
真正的分水岭正在形成:拥抱开放性和「人机共生」的终身学习者,获得了全新的认知脚手架。而 Claude 正在悄然编织一个开放生态——只有置身其中的创造者,才能感受到这片「看不见的森林」的隐秘力量。
以 Notion 为例。对重度用户而言,它早已不是静态知识库,而是承载思维轨迹的「外脑」。当 Claude 通过 MCP 连接这个认知空间时,三重力量开始交汇:
当下的思考 × 基于互联网的 AI 搜索 × 第二大脑
所有信息以你为中心,跨越时空和语言的边界重新编织。AI 不再是外部工具,而是内化为认知本身的放大器。
真正的分水岭正在形成:拥抱开放性和「人机共生」的终身学习者,获得了全新的认知脚手架。而 Claude 正在悄然编织一个开放生态——只有置身其中的创造者,才能感受到这片「看不见的森林」的隐秘力量。
Agent 会一直使用本地终端,所有命令和历史都会共享
现在 Agent 上下文限制标注更加清晰,鼠标悬停就能查看
提升了 Agent 的编辑速度。搜索和替换的编辑延迟减少了 25%,应用编辑减少了 11%
从 ChatGPT 上线以来,这个数字已经翻倍,这说明 AI 能力越来越强,越来越能进入用户的生活
同时,这个数字也已经超越了 Reddit 社区
人与AI的关系和交流,正在超越人与人