即刻App年轻人的同好社区
下载
App内打开
上前一小步
413关注29被关注0夸夸
真·伪文艺
手机摄影业余爱好者
Runner
观星族
上前一小步
5月前

歸藏: 来了，朋友们！ 用 Trickle ai 把 Vibe Coding 玩到了新高度，总结了一套帮你生成完整产品又快又好又省钱的方案。 内容有点长，原文 6000 字，收藏后面看也行，即刻只发基础的部分，功能添加部分还是看原文吧。 详细的原文教程：https://mp.weixin.qq.com/s/gCnrmJNcMm0h4a43-Hp0dg 文章具体内容包括： 1. 首次提示词书写方式的改变 2. Trickle AI Magic Canvas 的强大能力，永久上下文 3. 又省钱的用 Edit 模式对项目进行修改 4. 为网页创建数据库和上传数据 5. 利用外部组件增加网页美观度 6. 免费为网页增加搜索功能 7. 网页上线后的设置-SEO 优化、域名绑定、数据分析 开始之前我们先来看一下，我 Vibe Coding 的结果（https://fragments.guizang.ai）。 一个 AIGC 周刊的信息聚合网站，里面会有过去两年我收集到的所有 AI 产品、关键论文和文章、关键的事件记录，支持搜索支持分类检索，还包含一个后台来执行一些数据上传和同步的工作。 我一直想把两年来的AIGC周刊内容做成网页，每篇内容变成卡片，方便检索和回顾AI发展历程。 以前用AI开发这种网站很难，数据库、样式优化、分类搜索、域名、SEO和数据分析都很麻烦。 Trickle AI之前没有一款Vibe Coding产品能解决这些问题，Framer也太复杂。但现在只花一个下午和6美元就能搞定全部需求 首先是第一次提示词 按我原来的原则需要第一次就把提示词写的非常详细和准确，因为大部分的编码 Agent 改几次就很容易超出上下文，损坏项目。 Trickle AI 用上下文工程和优化方案一定程度上解决了问题，样式修改消耗的积分非常少。 只需要在刚开始的时候大致描述清楚最主要的页面和功能就可以了。 当然第一次肯定是不符合你的需求的即使他再漂亮，所以我们接下来就面临修改内容和样式的问题。 以往很多 Vibe Coding Agent 你几乎只能用文字去描述想要修改的部分，但是 Trickle AI 提供了非常丰富的方式让你去修改和保证生成效果。 介绍一下 Trickle AI Magic Canvas 不同于其他 Agent 那种左边聊天右边只有一个预览窗口，他们右边做了一个无限画布。 除了展示你优化的不同历史版本的网页之外，还有各种网页构建所需要的上下文，这部分是永久的。 即使 Agent 的上下文超了，这部分信息也会一直存在，完成了卡帕西说的永久上下文。 如何又快又省的用 Edit 模式对项目进行修改 首先是一些基本样式的修改，你可以点击画布下面这个鼠标的图标，开启Edit 模式，就可以选中页面上的元素。 选中之后聊天窗口就会出现一个 CSS 属性的编辑组件，就可以直接编辑对应的文本、颜色对其方式等内容，编辑完点保存就行。 解决用文字描述不知道该怎么说的问题，由于直接把内容传入了 AI，所以可以精准的找到位置大幅节省 Token 消耗。 另外你会发现，选中的元素不止有上面的可视化修改区域，在输入框上面也回填了，如果上面的元素没有你想要修改的部分也可以打字描述。 然后 Edit 模式还不止可以选择网页元素，你还可以选择 Assets 部分的元素。 比如我这里可以选中网页标题，再选中 Assets 中我上传的猫猫头像，两个部分就都回填到了输入框里面，这时候你就可以将图片快速添加到指定位置了，我还让他给图片加上了圆形遮罩。 这样是不是比你吭哧瘪肚描述要好多了。 最后一个技巧，我们需要介绍一个概念“设计变量”，你是不是以为网页中所有元素的颜色、大小甚至描边粗细都是单独写的样式。 其实很多时候为了一致性和协作在正常写前端程序的时候都会将这些样式多封装一层，类似下面图片。比如描边颜色一般会指向这个变量名称而不是具体的颜色色值。 这样我们修改整个系统所有页面的描边颜色的时候就不需要一个一个改了，直接把映射表里的色值改掉，整个系统都会生效。 但是大部分编码 Agent 就是单独写的样式，所以随着你越该越多，模型丢三落四的现象就会越来越严重，需要传入的上下文也越来越长，直接导致上下文管理失败或者丢失需要改的部分。 Trickle AI 内置设计变量，我们在修改样式的时候直接让他改变量的值就可以了，不需要查询这个多个页面的样式文件，就能修改多个页面的元素样式。 了解了这个以后你用这种提问方式就可以频繁修改网页样式而不用担心过多的 Token 消耗和上下文占用。 你也可以让他拆分和新建设计变量，我这里原来导航的分割线和卡片描边共享一个变量，但是我不想他们是一个颜色，所以这个时候就可以要求他将分割线颜色和卡片描边颜色的变量分开分别设置。 这期间只涉及到设计变量的文件，所以消耗的 Token 非常少，这也是为什么我改了六十多个版本只花了几百积分的原因。 来让页面更美观吧 基本能力搞定以后，我优化了一堆首页的设计细节，比如更改卡片圆角、整体配色、增加顶部导航以及为网页增加移动端适配等等，基本用的都是之前说的 Edit 模式加上修改设计变量的方式。 除了排版字体之外的更改外，主要是三个地方的更改。 首先是在社交媒体展示这里，让他从原来中规中矩的图标加链接，变成了 hover 上去以后会倾斜和出现弥散投影的卡片。 我就只跟 Trickle AI 说 hover 会倾斜，并且加投影，没想到他的倾斜角度和投影样式搞得这么好，还加上了缓动效果。 然后感觉这个白色背景有点单调，于是就让 Trickle AI 给北京加上了浅紫色的点阵效果，重新把整个页面内容变为一张卡片，只需要跟他说点阵的圆点大小和颜色就行。 最后重点的来了，在作者这里我想要用一个炫酷的方式展示我的所在地，直接选了一个叫 COBE 的 3D 地球组件。 我们只需要跟他说用 CDN 引用组件，然后说一下组件放到哪里就行，带上组件文档的示例代码就搞定了，你可以在这里查看（https://cobe.vercel.app/docs）示例代码。 到这里我们的整个网站就搞定了，这个教程里面除了基本的创建，我主要在教你如何修改以及如何增加常见的网页能力，希望你看完的时候能有所收获。 Trickle AI 通过 Magic Canvas 以及样式修改跟左侧输入框的联动以及优秀的上下文工程和设计系统跟 AI 的结合，除了大幅提高了 Agent 的能力以外还大幅降低了现在开发 Agent 最大的成本问题。 而且设计系统跟组件库以后还会有更大的发展和更多的能力，带来更大的网络效应。

00
上前一小步
5月前

出逃旅行的煎饼: 去了趟宜宾后劲好大！小众宝藏城市这样玩 这座城市被称为“ZG酒都”是酒香笼罩 行走在大街小巷，这里是拥有着万里长江第1⃣城 宜宾燃面这样被大家所熟知的美食而了解宜宾 原来宜宾不止有五粮液还有好多好玩的地方 - 它等待着我们走进去开启它的故事 🍃悠闲与安逸原来不止在成都 更在这座有着2千多年历史的川南小城 - 📍3天2夜行程安排 DAY1：成都出发-天主教堂-冠英古街-大观楼-合江门广场-滇南馆-五粮液酒厂-宜宾夏威夷 DAY2：李庄古镇月亮田-翠屏山-雪滩公园 DAY3：蜀南竹海景区-乘坐高铁回成都 - 🛎交通住宿 🚅高铁：从成都东站出发乘坐1h30min高铁抵达宜宾西站开启旅行 🚗推荐自驾去以上的地方都很方便，在市区可以乘坐交通工具和打车，去周边自驾 🏨住在宜宾老城区推荐冠英古街这边，去拍照打卡的地方都在附近 - 🌳在宜宾怎么玩！ 1⃣李庄古镇月亮田景区：属于川南的江南水乡，是李庄白肉这道美食的诞生地，不管是晴天还是其他时候都有不同的美 2⃣蜀南竹海景区：蜀南竹海作为四季皆宜的避暑胜地，也是在成都周边独具特色度假区大家常去的地方 3⃣五粮液酒厂：宜宾人骄傲的五粮液品牌诞生地，拥有悠久酿酒文化去发现不一样的宜宾 4⃣翠屏山：市区的公园，很喜欢爬到山顶坐缆车俯瞰这座超棒的城市风景 5⃣宜宾夏威夷：在一个公园斜坡拍照很出片，不过要注意来往车辆注意安全 6⃣合江门广场：可以看到三江交汇之地，长江之名的诞生的地方 7⃣冠英古街：是一条有着悠久历史保存完整古老街道，现在是条美食街 8⃣雪滩公园：被当地人戏称“宜宾的马尔代夫”，有灯塔，大岩石，看看涌动的江流和翻腾浪花 9⃣天主教堂：巴洛克建筑风格，有着百年历史，在门口拍照很好看 - 🫕来宜宾怎么吃！ 来宜宾尝尝Z正宗的宜宾燃面和宜宾把把烧，随便一家小店都很棒！李庄白肉，凉糕、黄粑和猪儿粑、水粉都是必打卡的美食，这里的川菜也是很有本地的风格。 - 📆打卡宜宾小贴士 ❶来了宜宾喜欢喝酒一定要尝尝五粮液，不太能喝酒也可以试试咖啡店的五粮液diry也是不错的 ❷川南区域的川菜食物普遍比较辣，点菜记得和老板说选择辣度，或者提前备好肠胃药和消食片缓解饮食问题 ❸在宜宾想看夜景可以来合江门这边看，和白天有不同的美 ❹宜宾消费不高好吃好玩，不是传统的旅游城市，这里更有着长江边川南小城的烟火气

00
上前一小步
9月前

Simon阿文: 经常被问到平时都用什么 AI 工具，于是整理了一下我和 @海辛Hyacinth 在工作流中常用的工具合集。 *由于工具迭代太快，本条将永久动态更新。 *都是我们做项目用的工具，你永远可以相信我写的推荐。 🖼️🖼️ 主力生图工具 ▶ Whisk & ImageFX（也就是 Google 家的 Imagen3） 写实风格能达到以假乱真的程度，而且还免费。 · 🖼️ 辅助生图工具 ▶ midjourney：曾经的王者，但用过 Whisk 之后用不回去了，希望 V7 加油。 ▶ 即梦：如果你需要生成中国风和中文字，这是最好的选择。 ▶ Flux：开源最佳，适合搭配 ComfyUI 工作流使用。 · 🎨 修图工具 ▶ PS 的创成式填充：虽然生图很拉，但缝缝补补很合适。 ▶ Krea 的编辑器：其实就是 Flux 的局部重绘，但前端交互做得超好。 ▶ MJ 的编辑器：常用的是 Retexture，局部调整不推荐。 ▶ 个人忠告：抠局部细节的时候还是直接P吧。因为当生成区域小到一定程度时，inpainting 对关键词的响应就会极弱，与其浪费时间抽卡，真的不如直接上行活。 · 🔍放大工具 ▶ 图片放大用 Maganific & Krea：老实说 Maganific 用多了其实也没那么好用，Krea 更经济实惠。 ▶ 视频放大用 Topaz。 · 📽️ 视频生成工具 ▶ 目前我们用得最多：可灵 & Pixverse ▶ 风格化场景我们用：Hailuo ▶ 创意特效我们用：Pika ▶ 转绘我们用：ComfyUI · 🐋 我们在哪用 DeepSeek？ ▶ 我用 ima ▶ 海辛用官方app 和 元宝 · 其他想到再补充。

00
上前一小步
9月前

歸藏: 很多朋友问如何将下面的这种全是字的文档，变成上面这种美观、直观的网页。 👇分享一下提示词和逻辑： 其实大部分的技巧和提示词来自我前几天写的这个教程：https://mp.weixin.qq.com/s/tUOAfd4OI56QxD94-0PPKw 我又加了几条要求，确保你可以将任何文件扔进去，不需要一个字的修改就能生成美观的网页： 因为我们很多的文件都是英文的，所以我加了让他变成中文的要求 另外让他参考 Linear App 的设计语言，这个灵感来自 Padphone 老师 还有就是可以在页面加上你的社交媒体链接和你的名字，方便网页传播之后大家可以找到作者 去掉了 Unsplash 的图片要求，因为免费的 API 不太好查找对应的主题图片 完整的提示词： 我会给你一个文件，分析内容，并将其转化为美观漂亮的中文可视化网页： ## 内容要求 - 所有页面内容必须为简体中文 - 保持原文件的核心信息，但以更易读、可视化的方式呈现 - 在页面底部添加作者信息区域，包含： * 作者姓名: [作者姓名] * 社交媒体链接: 至少包含GitHub、Twitter/X、LinkedIn等主流平台 * 版权信息和年份 ## 设计风格 - 整体风格参考Linear App的简约现代设计 - 使用清晰的视觉层次结构，突出重要内容 - 配色方案应专业、和谐，适合长时间阅读 ## 技术规范 - 使用HTML5、TailwindCSS 3.0+（通过CDN引入）和必要的JavaScript - 实现完整的深色/浅色模式切换功能，默认跟随系统设置 - 代码结构清晰，包含适当注释，便于理解和维护 ## 响应式设计 - 页面必须在所有设备上（手机、平板、桌面）完美展示 - 针对不同屏幕尺寸优化布局和字体大小 - 确保移动端有良好的触控体验 ## 图标与视觉元素 - 使用专业图标库如Font Awesome或Material Icons（通过CDN引入） - 根据内容主题选择合适的插图或图表展示数据 - 避免使用emoji作为主要图标 ## 交互体验 - 添加适当的微交互效果提升用户体验： * 按钮悬停时有轻微放大和颜色变化 * 卡片元素悬停时有精致的阴影和边框效果 * 页面滚动时有平滑过渡效果 * 内容区块加载时有优雅的淡入动画 ## 性能优化 - 确保页面加载速度快，避免不必要的大型资源 - 图片使用现代格式(WebP)并进行适当压缩 - 实现懒加载技术用于长页面内容 ## 输出要求 - 提供完整可运行的单一HTML文件，包含所有必要的CSS和JavaScript - 确保代码符合W3C标准，无错误警告 - 页面在不同浏览器中保持一致的外观和功能 请根据上传文件的内容类型（文档、数据、图片等），创建最适合展示该内容的可视化网页。

00
上前一小步
11月前

崔迪_Pepsi: 这本书是目前我心中最好的中餐读物，我在遇外滩吃饭的时候看到了这本书，买下之后相见恨晚，爱不释手，今年准备多多复刻里面的菜谱。 本书第一个内容（P1-2）是介绍中国境内存在的所有菜系，时至今日，八大菜系或许该重新洗牌了，很高兴看到有一本书开始全面关注地方菜系，西藏菜、天津菜、斋菜等等都考虑在内。 第二个内容（P3）是拆解中餐的烹饪技法，掌握做菜的底层逻辑，会更容易一通百通。 第三个部分（P4-8）也是本书重头戏：图文并茂、精确到克的各地家常菜菜谱，从冷菜到热菜到甜品，一应俱全，真的太太太赏心悦目啦，不出现“少许”、“适量”的中餐菜谱，对厨房小白更友好啦～ 还有让我眼前一亮的最后一部分（P9）名厨名菜谱🤩，中餐厅公布菜谱可不多见，多是当作秘密武器藏起来的，感兴趣的朋友可以尝试复刻一下呀！ 好久没给大家推荐书啦，这本《中国菜》我是真的很爱。 祝大家新的一年厨艺大涨，平安喜乐呀🥰！

00
上前一小步
11月前
上前一小步
1年前
上前一小步
1年前
上前一小步
1年前
草台班子😰😰😰
00
上前一小步
1年前
上前一小步
1年前
上前一小步
2年前

冰清小仙女: 真的是憋死我了！终于可以官宣了！ 从五月开始，我参与了@少楠Plidezus 和@Lightory 新产品的内测（是的！他们又孵化出新产品了！天哪！这是怎样喷薄而出的创造力！） 新产品的名字叫做「如果相机」。这是一款基于AI技术，通过抓取你的面部特征来生成数字分身的图像生成app （可能讲得不对，但这不重要😝）。 和一般美图产品不同的是，这款产品的场景非常吸引人。正像它的名字一样「如果…… 我会是什么样的呢？」这就很有意思了！我的第一感觉是—— 这并不仅仅是一款美图软件，而是打开人生无限种可能的大门。 我生成的第一张照片是「如果我去学习无动力帆船」。看到照片那一瞬，我突然就心生向往了，有了一种「未来我要让这个如果成真！」的强烈念头——这就是我说这款产品有意思的地方。 现在，这款产品提供的场景有「如果跨越山海」「如果拥有一间小店」「如果在另一座城漫步」「如果挑战自我」「如果看遍文明奇观」。 很难说我更喜欢哪个，每个都好有意思！ 对了，我的年龄参数设置的是「正常」，美颜参数是「写实」——我觉得这款产品最吸引我的地方就是，它不像其他AI生成软件那么油腻，就是一个真实的我，真实到上次用图5做公众号题图没有人发现哈哈哈哈哈😀 今天算是这款产品的生日，短短一个月不到的时间产品的画质和模板都有了很大的改善，我也邀请大家来和我一起玩玩看，每天发现一个「如果」，新用户有3张免费体验效果的机会哦😁 ​

00
上前一小步
2年前
上前一小步
2年前
上前一小步
2年前
上前一小步
2年前
上前一小步
2年前
上前一小步
2年前
上前一小步
2年前