claude能根据设计图出页面吗
考拉的最近怎么样？还喜欢用的。我们有些工作场景里面就是需要人工去设计页面，我插电解决的问题就是把设计稿转化成前端代码，就是设计稿的页面这个样式，你看样式，然后这个是我导出来，我直接导出来代码运行的样式。 啊。现在这个代码我可以直接把它拿出来给前端去开发了。现在也就那样，没有太多的感触了。对，关键是你如果不用就难受了。不用难受？对，根本就没法干活。
粉丝4238获赞4.8万
相关视频
02:11查看AI文稿AI文稿分享一个昨天下午开源的项目啊，叫 open design， 你 可以把它理解为开源版的 cloud design， 它就是一个设计师， 这个项目就是把类似的设计工作流做成了开源版本。作者自己也说了，他是逆向争流的，他的核心逻辑很简单，你给他一个需求，他帮你把需求变成一个真正能看的设计作品，就相当于是一个优秀的设计师。 它内置了很多设计场景，各种软件的 ui 啊，或者 ppt， 博客页面都可以类似这样的， 这个属于移动端的这种交互页面的设计，更关键的是它内置了很多设计系统，比如你想要那种 verso 啊，或者 big 嘛这种产品感很强的视觉风格， 它都可以按照这些设计规则去生成。它就是有一套明确的设计规范，颜色、字体、间距、组件、版式 都有规则约束，它内置了十九个 skill， 还有七十一个设计语言。就设计风格还有五种视觉方向，它可以接入你电脑里任何一个智能体，比如说 cloud code， codex， 小 龙虾呀， hermes 都可以用它。 那你用了它以后呢？就相当于把你常用的智能体变成了一个 ai 设计师。因为目前很多大模型的短板，其实就是 ui 设计上面 那对普通人来讲的话，假如说你要做一个 ai 工具页面或者是课程销售页，想做一个视频里展示用的那种产品页面，做个 ppt 啊，或者做一个小软件都可以用它 安装方式也很简单，你只需要复制这个地址，把地址丢给你的任何一个智能体，就是你在用的。你 如果用小龙虾，你就丢给小龙虾，用可乐扣的，你就丢给他，让他去安装就可以了。目前这个项目才发布了几个小时，已经快到一千个星了，还是很火爆的， 我预测超不过一个月，这个星应该会达到四五万，这个一点也不夸张，因为非常非常的实用，所以大家可以关注一下。
855小代不懂代码
00:35查看AI文稿AI文稿你想不想让你的龙虾和可乐的扣的也能生成这种发布会级别的 ppt？ 今天给大家分享一个 sky， 这是一个拥有十年设计经验的设计师创建的 sky， 它提供了十种页面布局、五套主题色预设和一套完整的翻页交互。这个效果含金量不用多说了吧。 安装方法很简单，将上述 skill 发送给龙虾和 cloud code， 让其安装即可，就可以体验使用了。
1549PM.姜同学
01:25查看AI文稿AI文稿这六个 cloud code 神级 skills， 能让你的 ui 质感直逼 stripe。 ai 生成的界面总有一股塑料感。 in turn， 字体圆角矩形套路此渐变 二零二六年拉开开发者差距的不再是代码逻辑，而是对 ai 的 工程化审美掌控力。第一个， frontend design， antropic 官方出品，禁用过时审美，生成符合四 p x 网格的 react 加 tailwind 代码， 内置 audit 和 polish 命令。第二个 impeccable， 无暇的意思，专门打磨对齐留白和动效， 强制禁止不对称内编剧。第三个 design principle skill， 借鉴 notion 和 versal 设计规范，让产品像 strap 一 样极致简约。第四个 u i u x pro max， 一 千多种 u i 风格数据库， 输入暗黑科技，自动匹配整套方案。第五个， web design guidelines， furso 出品， ui 界的 eslint 自动检查，无障碍合规。第六个 algorithmicart， 用自然语言生成流体粒子等动态艺术， 实战三步走，剪辑风格生成，出版，精修，打磨 ai， 抹平了重复劳动，但提高了对审美决策的要求。这六个 skills 不是 在取代你，而是赋予你设计驱动开发的能力。
236星辰的雨
00:31查看AI文稿AI文稿接下来给大家分享一下做 ppt 啊最简单的方法，如何把从这样的内容变成这样的精美的 ppt 啊，就我们只需要把这个我们的文字文稿以及这段指令发送给 cloud 就 可以了， 它就会根据我们的需求层层相对应的 ppt， 我 们点击这里就能直接下载，打开看看这个各个界面，而且排版布局啊感觉都是非常的 ok 啊。如果大家也想使用的 cloud 用来写作、科研、做数据分析等等，都可以点击我主页的置顶作品找到我。
106阿坦说Ai
04:01查看AI文稿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 设计师，我就不做过多评价了，总体来说就是现在接流程跑通了，未来一定会越来越成熟，但还是离不开专业的人来做。 今天的视频就到这里了，如果对你有帮助，希望点赞、收藏加关注，这对我很重要。
260LIULEI
02:19查看AI文稿AI文稿ai 生成的网页，一用发现按钮点不了，布局全是乱的，这不叫设计，这叫凑数。很多 ai 工具号称能生成网页，但做出来的东西，文字一出，按钮点不了，手机上全是乱码。 本质上，它只给了你一张截图，不是真正能用的页面。 hermes cloud design 技能解决的就是这个问题。它不是画一张图，而是直接产出一个完整的 html 文件代码，样式交互全部内嵌，浏览器，打开就能用。 更关键的是，它能调用真实的商业设计系统， stripe 的 配色、 linear 的 布局，路由的组建，风格全部内置。你不需要懂设计，只需要说清楚想要什么，它帮你把专业级的视觉规范用上。 生成的代码完全自包含 c s i， 像是 java script， 逻辑响应式断点全部打包在一个 html 文件里，拿到文件直接发给别人，对方不需要装任何工具，浏览器打开就能看到效果， 具体怎么用？假设你是一个销售，要给客户演示你们 crm 的 客户跟进界面，以前要找产品经理出图，排期三天。现在你用 cloud design 把需求描述丢进去，几秒钟一个可点击的原型就出来了。按钮能点，流程能跑，客户看完当场就能给反馈。 它还严格遵守设计规范，按钮点击热区不低于四十四像素，响应式布局，自动适配手机和电脑，没有那些花里胡哨的渐变和玻璃效果。它反的就是 ai 设计的塑料感，做出来的东西干净专业。 而且它支持遍体探索。同一个需求，它会同时给出三种风格，保守版，贴近现有设计强势、更大胆的方向。你对比三版，选最合适的一版定稿。 以前你要找设计师出个原型图，沟通需求，半天改稿改三遍，等三天才出结果。现在你自己描述需求，实时生成，不满意直接改描述当场出新版本改到满意为止，从三天缩短到三分钟。 这就是 cloud design ai 做设计，不止出图，而是出真正能用的东西。关注我，下期讲 excel 手绘杆架构图，讲有温度的技术故事。
49订正星
00:41查看AI文稿AI文稿别让 ai 凭空设计，先让它学会一套审美。今天分享一套 cloud code 加 skill 的 网站设计流程，一共三步。首先，安装 hue skill， 这个 skill 可以 把你喜欢的页面提炼成一套可附用的设计规范。其次， 找到你想复刻的页面，可以去 refer 网站，找到自己喜欢的风格，复制给 cloud code， 可以 生成一套设计规范以及格式化设计看板 q 还会根据设计规范生成专属的 skill。 第三步，用这个专属的 skill 以及需求生成网站，最终生成的效果还挺不错的，我把整套流程也整理成了文档。
61朝朝AI工坊
02:50查看AI文稿AI文稿cloud code 浏览器自动化方案应该怎么选？先说结论，再介绍这几个方案。如果你是普通用户，只是想抓取简单页面的内容，订酒店机票，填写一些网站的表单，就用 agent browser。 如果你是开发者，想在开发中排查页面 bug， 查看接口信息，分析性能瓶颈，就用 chrome dvodes mcp。 如果你是测试，想生成测试脚本，执行测试流程，或者是抓取复杂页面的内容，更推荐使用 playwrite mcp。 如果是一些复杂图标 converse 实现的页面，不想依赖其他方式，例如 mcp 的 话，单纯依靠浏览器来操作，那么 cloud in chrome 几乎是你唯一的方案。 那么接下来具体的介绍一下每个方案。首先是 agent browser， 它会解析页面结构，过滤掉样式图片后，将内容交给大模型识别，在对页面变化的适应性和内容识别的准确度方面得到比较好的平衡， 适合进行日常的浏览操作。例如抓取内容平台数据，预定酒店机票，监控商品信息，填写在线表单深层咨询日报 chromos mcd 底层是通过远程调试端口直接控制浏览器，所以天然的比其他查看页面结构的工具可以做更底层的事情，更适合开发者来使用。 例如排查前端页面的 bug， 查看 api 接口信息，分析性能瓶颈，甚至能绕过页面的反爬虫机制人机验证等拦截。 playwrite mcp 会把整个页面的完整结构都交给大模型，所以它能面对很复杂的页面。如果通过 agent browser 抓取一些页面上的内容时，发现不能抓取或者抓取不完整， 可以考虑用 playrite mcp 来抓取，更多的时候会适合 qa 使用。例如辅助生成自动化测试代码，执行自动化测试脚本。微软还推出了 playrite and coi， 可以 搭配 playrite mcp 来干活。 最后是 cloud in chrome 最大的特点是采用纯视觉方案，好处是显而易见的拟人程度最高，任何人类能够操作和看到的内容它都能执行。例如执行 figma 这样的 canvas 画布类应用操作，可直观图标，填写图形验证码。 最后我们看一下它们大致的任务投币消耗量，从低到高依次是， agent browser、 chrome、 dvodes、 mcp、 per write mcp、 cloud in chrome。
101AI 触角
02:11查看AI文稿AI文稿大家好，我是刘大燕，上周 excel 发布了 cloud design， 这两天也试用了一下，今天我会来带大家看一个视例，把这个核心用法跟大家来讲讲清楚。目前它的这个功能只能从网页版进去啊，左边栏的最下面点击这个 design 图标，就会进到 cloud design 这个页面。页面的左边可以新建圆形，有 wireframe 就是 线框图， led light 就是 高保真两种精度。那右边呢？是你最近的项目顶部还有 examples， 就是 视例和 design systems 设计系统标 签。这里我想跟大家重点的来说一下这个设计系统，因为这个东西建好了，后面所有的生成都会在这个基础上跑，非常的方便，也非常的关键。 ok， 我 们点击 set up design system 来创建你自己 的设计系统。在这个填写页面里面，你可以填写你的产品名和一句话介绍，如果有 github 的， 可以把 github 上面的链接放过来，或者是直接把你本地的代码文件夹给拖进来。同 时如果你有这个码文件的，也可以上传，也可以再加上自己的字体、 logo 这些素材，然后可以再用自然语言来跟它进行一个描述点，继续的时候它就会帮你生成一套设计系统。双休日的时候，我自己搭了一个小程序，在这个小程序的完整框架里面，我已经让 cloud 给我生成了页面结构，但是整体的品牌色呀，字体呀，我都没有跟 cloud 来进行一个细讲， 就把这个代码文件夹直接拖进去了。 cloud design 它基于我这个系统给我出了一版界面的改版方案，包括配色呀，排版呀，字体层级啊，全部都有，这个我现在在页面上大家也都可以看到整个过程大概是花了半个小时左右的时间，这个就非常的棒。我们一般去设计一个系统，比如说网页或者是小程序， 你通常都会有一套配色和一套字体，比如说警示类的字体用什么颜色，提醒类的用什么颜色，这里它都会有一整套的方案来给你输出，非常契合我的需要的。原来我会说用 cloud 或者 codex， 它去做前端的时候总会出现这种 ai 感，那现在它加上了这个 design 跟 big 码就 很像。我倒不是说它是最完美的，但是我会觉得这个公司出来的东西都会有它自己的一些创意和逻辑在里面。这说实话，最近 cloud 的 也是在分进一些账号，包括它本身的访问，只是有门槛，这两点其实对于我们国内的用户来，这就是一个硬伤对不对？但是抛开这些现实的问题，我们 不谈的话，单说这个产品本身，我其实还是推荐有条件的人，你可以先去试用一下，因为我真实的感受是在生产过程或者抠定过程当中能够节省很大的时间。 ok， 那 我们今天就先分享到这里了，拜拜。
217刘大雁AI版
08:37查看AI文稿AI文稿大家好啊，我是 pk， 又见面了，这一期我们对比一下各大 agent 的 ppt 产出能力，一括了 design。 这里我把之前自己写完给安妮整润色的一篇 ppt 竹字稿给到各个 agent， 根据这篇竹子稿帮我生成一份 ppt 演示文稿。风格你自己定，按照你的审美，你可以理解一下我里面讲的内容来自己决定用什么设计风格。 a few， moments， later， 整个设计风格还是以它们的 cloud design 的 设计风格为基础，其实挺好看的，这个字体的选择， 这版的风格还不错，但是我们再试一下偏科技感一点，偏大公司汇报的风格的 ppt 吧。你在整体厨艺版也可以多加一些配图。 later， 可以 啊， 那我感觉挺好的。这是第一张的这个标题太小了，那我们换一个， 把第一页的标题部分整体做一个百分之三十的放大，你可以自己查看一遍。 later， 嗯，那这边我们看到标题已经放大了，但好像超过了百分之三十， 我们现在就不细调了，整体还是不错的。 二、 any 键那这个是 any 键，应该属于是字节的一个 ai 工具吧。 ppt 是 这样的，也可以看出来设计能力的体现。这个更像是一些汇报文档，萝卜青菜各有所爱吧，那我们现在也让它改一个。 这一稿的视觉从首页上来看，比较中规中矩，觉得比较老气。你可以再出一稿偏年轻化和科技范一点的，可以参考一些自己阿里大厂的。嗯，晋升汇报啊，或者是比较好的 ppt 模板。 later， 只能说够用。我要你刚刚让我选的那三个里面的深色的版本，你再给我出一版。 好吧，没有用料，让我订阅。三、 google notebook lm， 谷歌的 notebook ai， 我 们把相同的文稿给到它， 根据文稿里的大纲出一个 ppt 风格是蓝色科技风，可以参考大厂的汇报 ppt 风格要求，里面有跟每一张所要讲的意思相符的配图。 later， 我 们看一下， 我的 看着像是用 banana 生成的， 可能有老板会喜欢这种风格吧。 你仔细阅读一下这篇 ppt 的 读字口述稿，根据它所讲的生成一个 ppt 文档，可以是 ppt， 也可以是 html。 你 也可以同时给我生成两个。 ppt 的 主色调为蓝色科技风，你可以参考各大厂的汇报 ppt 来生成。 那 cloud code 呢？它就是命令行的一个界面，对于没有代码习惯的人来说呢，要适应一段时间，然后英语也不好，就同意它就好。 later， html 正在完成，现在生成 ppt 版本。 ppt 版本看着没有 html 那 么丝滑，但也不错了，比大部分普通人做的都好了，起码排版比较好。 htm 版本挺好的，我现在需要你帮我加一下在页面切换的时候，里面的文字元素和卡片元素出现的小动画，动画不需要太多太大，就是简单的出现和上移就可以了。 later， 改完了，用效效果挺 好。 那不管是你去做演示，给团队分享，还是做成一个视频，那这个就可以作为你口播的一个辅助。 五千七 p t， codex， 根据这一篇大纲文档生成一个 ppt 风格要求是蓝色为主色调，偏科技风，参考各大厂的汇报风格要求每一页有跟想要表述的观点相一致的配图。 那这边 codex 他 就会自己列几个任务，每一步他要干啥，再一步步的执行。我这边给的是王权的权限，就不需要每次去同意他。 later 啊，这个 ppt 版本可以了，那你再帮我生成一个 html 的 版本吧，设计风格和内容可以保持不变。 later h t m l 版本已经做好了，他也帮我们打开了。那我们来看一下。首先这个首页的观感没有克拉蔻的生成的好一点，这边太空了， 它是完全照搬的 ppt 的 版本，那就是我的提示词 限制的太死。好的，可以的，我能看见，但这个版本的首页我觉得太简单了点，美观度不够。右边比较空，只有三个类似胶囊的东西，选在哪里？把首页的优化一下， 再适当的加一些切换页面的动效，把上下的翻屏改成左右的切换。 later 它改成了左右的翻屏，这边也加上了，会好一些。嗯，它是左右出现的，动效可以， 但我觉得整体的设计风格还是没有 cloud 深沉的好。经过对比，不知道你觉得哪一稿 ppt 会更好一些。 我比较满意的是 quad code 的 版本，现在的 ai 工具确实能在 ppt 制作上帮不少忙，但是重点还是在要表达的内容和文稿。希望这个视频对大家有帮助。我是 pk， 感谢观看，感谢关注！
1915PanixStudio
02:53查看AI文稿AI文稿嗨嗨，这里是小壮。如果你用 webcoding 做出来的页面，总感觉死板像个 ppt， 这条视频教你把动态美学直接拉满，让你的产品充满高级感的动起来。 今天推荐三个顶级动效组件库和两个保姆级技巧，虽然我也不是技术出身，但也能做出这样这样， 还有这样的丝滑动效。第一，动效外挂库首推的是 u n c 管理 studio， 它最强的地方在于不需要任何的设计和代码基础，就能打造出这种顶级视觉创意的质感网站。它内置了无数现成的 webgl 动画和高级交互元素， 你可以直接一键复制整个项目。最棒的是，它不仅给代码，还支持你上传自己的项目图片，自定义参数，甚至直接导出视频或图像。你只需要把选中的效果和参数作为提示词，喂给你的 webcoding 工具， ai 就 会自动处理所有的技术细节，将这些丝滑组建完美缝合到你的网站里。 第二个， react bits， 它简直是 webcoding 的 动效全家桶，收入了全网几乎所有的开源动效。 无论是动态的背景组建动效，还是酷炫的文本效果，它都有设烈。对小白来说，它最香的地方在于支持高度定制化，你可以直接在网页上修改你的文字内容，调整具体的参数。 最硬核的是，它支持小白直接把代码喂给你的 webc 定工具。想用哪个这些效果让 ai 直接伸手进呢？真正实现一比一的视觉复刻。第三个， design spells， 这是一个专门收入全球顶级产品微动效的灵感库， 它不是对器那些大动画，而是专门研究那些让人心动的细节交互魔法，比如一个按钮被按下的弹性反馈，或者一个输入框聚焦时的优雅律动。它的核心价值在于帮你解决 webcointing 里的生硬感， 它能帮你把产品的精致度直接提升十倍，让用户在每一个交互瞬间都能感受到那种你很懂行的设计高级感。第二篇， ai 投喂小技巧方法一，代码加文档喂养法 当你选中一个动效后，连带着具体的代码和实现文档一起发给你的 web 控件工具，然后输入这段提示词。请参考一下 reactbeats 的 组建代码及官方文档说明，帮我实现一个逻辑完全一致的某某动效，注意保持原有动画的曲线和延迟参数。 方法二，詹姆莱动效翻译官如果你在网上看到一个很酷的动效，但没有公开代码，直接把它们录屏发给詹姆莱，让他帮你提炼一，动画的触发时机 是悬停还是滚动？二，缓动函数类型是 spring 弹性还是 easy in out 平滑？第三，关键，真参数然后把这些细节的关键词投喂给你的 web coding 工具精准复刻，你学会了吗？
4195HiHi小壮
05:20查看AI文稿AI文稿大家好，我们上次分享了 integrity mcp 的 安装，今天我们继续分享如何让设计稿变成代码，完成首页三个页面的开发。点赞加关注，我们开始 我这里是以 ios app 为例，如果大家想开发安卓 h 五都可以。首先我用叉 code 创建了一个空项目，只有一行代码。 hello， 我们来到 integrity， 我 们给他第一条指令，读取当前项目结构，熟悉代码发送给他， 他已经返回了，对我们当前项目进行了一个熟悉。项目处于起步阶段，代码量极少，因为是我刚创建的一个新项目。我们来到 figure， 选中页面，右击 copy link to selection， 我们给他一条指令，帮我开发当前页面。 figma 链接主界面是一个 tab 点发送，他给我做了一个计划， 我们可以看一下。他给我做了一个计划，我们点击继续，他自动给我生成代码，左侧我只有两个文件，都是空文件，什么都没有。我们稍等一下， 选择接受所有。我们运行一下，看一下效果。 它给我们创建了一个类首页，我们来看一下，大家看首页的效果，已经有了，虽然有 bug。 我 们点击这个心情，应该切换背景， 我们来开发第二个页面，现在第二个页面和第三个页面都是空白的，切换到 figma， 选中页面，选择 copy link to selection 这两个页面，让它一起开发。 给他一条指令，帮我开发这两个页面。两个页面的链接发送给他， 我们来看一下，他说已经完成了全部开发，我们来运行一下项目， 报了两个错，我们复制这个错误，我们复制错误发送给他，让他自己来修，他已经修复完了我们这个错误，他说现在项目可以运行了，我们来试一试， 项目已经运行起来了，我们看一看，刚才他还给我加了一个格式化的图标，首页，我们点击心情记录，背景色是改变的， 我们来修改一下这个 bug， 复制了四个设计图的链接，给他一条指令，首页记录心情，背景色是会改变的，参考设计图发送给他，已经完成了关键改动，我们来运行一下，看看项目报错了，没关系，我们复制 继续丢给 ai， 他 说已经修改完了，我们再来运行一下，运行起来了，我们看一下 现在这个颜色改变了，但是颜色值好像有点差别。这三个我们看一下，切换到 good 这个心情的时候，这个背景颜色和我们设计稿的颜色差异很大，应该是这个颜色， 我们给他一条指令， good 的 设计稿，点击 good， 参考这个设计图颜色，我们让它继续修改，修改完了，我们来看一下运行效果，跟我们这个颜色差异很大，我们切换一个模型， 我们再来运行一下，现在跟我们的颜色一致了，对不对？首页颜色有点偏深，我们让他继续把首页颜色改一改，给他一条指令，参考这个，点击首页 great 参考设计稿调整 返回了，说首页已经改完了，我们点击接受。我们来看一下首页的颜色，现在首页的颜色太深了， 首页的颜色现在跟我们的设计稿是不是保持了一致，我们看一下我们是不是不需要写一行代码，直接通过 ai 帮我们完成了从设计稿到代码的一个过程，现在我们已经 web coding 的 工作结束了， 三个主界面的功能都已经完成了。开发是不是很简单？我们只需要跟他沟通页面整体的开发，局部的调整他都可以帮我们完成。包括 他生成代码的时候报错了，我们直接把报错的信息发送给他，他也可以自动帮我们完成错误的修改。 下一次我们分享如何把项目发布到应用市场，让你的 a p p 走向世界。点赞关注收藏三年不要错过，下期，我们下期见，拜拜！
27下班学AI
01:37查看AI文稿AI文稿家人们刚刚看到 cloud 支持了一个新的功能，在对话里面可以支持交互式的 ui， 让我们看看到底是什么功能，以及它是怎么实现的吧。 在对话框中输入你的问题，它可以根据你的问题生成对应的 ui， 帮助你快速地理解你问题中的概念，甚至还能够生成一些按钮，帮助你继续去追问问题。 我非常好奇他们这个 u i 是 怎么做到的，于是我问了他这个问题，原来他们是新增了一个 soviet 工具，本质上就是生成了一段 html 代码，再把这个代码通过工具发送给前端，前端 再通过 ipham 炫长出这个 html 代码。接着我继续追问 soviet 这个工具，可以看到这个工具总共有四个参数，一个是 是否已经阅读了工具的使用说明书，第二个就是说这个前端 ui 的 这个标题名，第三个就是渲染期间的加载文案。最后的就是这个前端 ui 的 代码。 比较有意思的是这个阅读说明书的工具，它能够保证 ai 在 画不同的图的时候能够遵循它们的 ui 规范，比如颜色、布局、字体等等。最后我们可以简单看一下这个查看说明书的工具， 其实很简单，无非是对不同的以外主见，分门别类的写了一个说明书，让 ai 在 画的时候能够去参考。今天的分享就到这里，我个人认为在 ai 时代，友好的人际交互非常重要，希望今天的分享能够给你带来一点启发。
40小肖聊AI
00:32查看AI文稿AI文稿它被很多人称为 cloud 赞的平替神器，完全开源免费，还支持本地私有化部署，不用被绑定专属 ai 模型，完美兼容 cloud code、 cursor 等各类编程助手。内置七十一套一线大厂设计规范和多种高级视觉风格，能一键生成网页原型、 后台仪表盘、移动端、 ui、 商务 ppt 以及各类工作文档，还能导出 html、 pdf、 pptx 等多种格式。不管是开发者、设计师还是自媒体创作者，都能直接开箱即用，靠 ai 轻松搞定各类设计创作需求。
573晋城鼎峰网络科技
01:53查看AI文稿AI文稿哈喽，大家好，我是迪迪，最近在帮客户用 ai 去更新一些品牌的网站，让我遇到一个比较尴尬的事情，如果你直接问他，让他帮他更新，但是出来的界面还是比较的丑，没有一些审美， 所以我就去找了一些资料，意外发现了这个网站叫 styles 点 referral design， 那 这个网站它的好处就是它把所有市面上现在比较受欢迎的一些网站都给罗列出来了。 我们可以看到比如说这个是 cursor 的 页面，我如果点进去看，那么它的左边就是这个 cursor 的 一个界面，包括它的一个配色， 它字体的大小，行距应该怎么样，去用字体用哪些，这边都有很清晰的给列出来。右边就可以看到是有一个 design 点 markdown 的 文件，包括怎么样去让这个 agent 帮我去设计这个界面 啊，还有些 tellwind 的 css design tokens， 它都有列出来，那在这样的一个情况下，我就直接可以给它下载下来，变成一个 markdown， 让它交给我的 agent 帮我去直接设计。 因为之前跟大家分享过有一个 awesome design demo down， 它没有这个界面直接来的可视化，之前是有搜集五十多种 design demo down， 但是它只是一个单一的这个界面，它没有左边的这些可以给我 和用客户看到的这个 ui 界面，所以我觉得在我使用过程中，我觉得还是挺好用的，基本上会用一个 popular 的 tab 或者一个 trending tab， 找到一些比较适合客户行业的一些界面。那么如果说你现在是在做 sars 或者一些电商品牌， 除非你是做一些非常小众的一些行业，那么其他的一些竞争对手的界面其实都是基本上能够找到的。有了这个之后，你只要轻松的把它的 markdown 的 文件给下载下来之后，然后投喂给你的 agent 就 可以一劳永逸了，你的界面就会非常的好看。对，这个就是今天想跟大家分享的我发现的小众的网页。
81迪迪碎碎念
04:08查看AI文稿AI文稿今天学习了一下可乐的扣子的原码，就是把他的原码下下来，然后让 ai 读原码，根据他的原码，然后画了一个他的业务流程图啊，长这个样子，感兴趣的同学可以点暂停看一下。 呃，可以看出来就是有点超乎于一些，就是比较简单，比想象的简单太多了。 他总的来说其实就两个部分啊，第一个部分就是用户的内容输入进来之后呢，他会去 做一个上下文的组装，这个上下文里面他包含的内容可能就稍微细一点，然后主要是环境那种，比如甚至有没有自己的仓库这种啊，他都会包进去。然后呢我也给大魔仙进行第一次处理，第一次处理之后呢就开始进入一个循环，然后这个循环也很简单啊，就是魔性决策， 然后工具执行，执行结果再为回位的模型，然后再小模型自己去决策。 其实则部分呢也很简单，有也比我想象的简单的多，就是它没有特别复杂的流程啥的东西，它没有写那些东西， 它写的都是相对来说是边界性或者原则性的东西啊，比如安全策略问题，然后还有比如对一些细节，比如对 u r l 的 处理问题，然后还有 比如，哎，就是设计这一原则，比如不能过度设计啊，然后呢就是不要保留荣誉代码，不要为了兼容性去写那些荣誉代码，就是类似的这种东西， 就他没有指导下的东西，就是说你必须得先怎么样怎么样，然后再怎么样啊，他没有这这种类似的其实词，他都是边界性质的和原则性质的其实词， 这个就怎么说呢，现在现在就很不解啊，因为你这么简单的一个东西的话，为什么 costco 的 就比其他的好用那么多呢？对吧？不知道，这个是真的不知道， 然后根据，然后又跟叉的 j p c 聊了一下，那叉的 j p c 给的结论类似的就是说 a 阵它的核心，它不在于循环啊，也不在于那个技能啊，都不在，都不是关键，这些都不是关键。什么是关键呢？就是那个 世界模型啊，当然这个词用词可能比较大。那啥意思呢？简单来说就是比如我们用 a 键他，那你肯定有任务进来，对吧？那你的任务相关的各种信息，是不是又组成了一个任务的相关模型？ 然后呢，那你这个人啊，你的用户，那你的各种行为习惯啥的，是不是就能构建出来一个你的一个用户的模型？ 然后呢，你这个 agent 他 能在一个什么像环境下运行，对吧？他能调用哪些工具等等，而且这些东西他可能组成了一个环境模型，类似的这一大堆模型啊，合一块啊，你可以把它叫世界模型啊，但是这个词我觉得太大了。 总之来说呢，就是把这个东西构建出来之后呢，然后呢，你在每一步循环的时候利用这些信息，然后再去构建记日词，然后我也给打磨清啊，就是不需要特别复杂的循环，但是呢，上下文可能会比较多， 叉的 j b c 表示呢，这也是未来，一个也不应该不是未来，就是现在的一个发展方向吧？就是不是多次循环了啊，不追求多次循环，而是要追求尽可能少的循环，然后每一次循环呢，都尽可能去喂更多的双亚文啊。大概就这么一个思路。 但是根据我之前给自己定下来的原则呢，就是独立实践啊，独立思考，虽然他们都这么干的。嗯，到底怎么样，我还是自己先实践吧。 接下来呢，就先按照 cloud code 的 这种模式。我觉得先试一试吧，把它里面跟编程相关的其实对吧？全改了，全改了，然后去模仿它的玄幻组装逻辑， 然后再尝试一下吧，希望有好运。
177嘉豪
