tldraw:画画、草图与交互界面的距离
胖车库
2023-11-26 19:47
订阅此专栏
收藏此文章

我觉得好的思维工具会使人极大的降低对他的功能性需求,而是减法到重复使用一两个最基础的功能。比如roam,热潮期过后,剩下重复的事就是叠 block,标注,连 block。exclidraw 的用例就是画图形,标注,连图形。

我一直苦于 exclidraw 上的脑草图距离交互界面之间几乎无法逾越的时间鸿沟,从想法到能编程写出一个 poc 确实不止一盘黄花菜。canvas 上的即时头(zi)脑(yu)风(zi)暴(le),那些矩形圈圈和实虚线在脑子里仿佛流动的剪辑,但在他人看来就是矩形圈圈和实虚线,还乱。

exclidraw

tldraw 和 exclidraw 差不多,是一个带有图形、颜色、箭头、frame 等绘图组件的 canvas。不同的是,它利用 gpt-4-vision,率先做出了 make-it-real。canvas 中的每一个组件,使用每一个组件所做的动作、基本上一切活动都变成了 prompt。你可以在 canva 上开展即时的 UI 工作坊,伙伴是 ai,draw-a-UI。

*gpt-4-vision 是 openai devday 上发布的功能,意思是你给 gpt 的 prompt 可以是图像。于是他不仅可以识别热狗,还可以解读你的简笔画。

draw-a-UI 这事儿始于 figma 的工程师 Sawyer Hood的操作,他将在 tldraw 上画的简笔 UI 导出成图片,接着投喂给 gpt-4-vision,然后得到了一个 HTML / CSS 可交互的网站。

另外我喜欢的一个 tldraw 探索是,箭头的使用。你只需要用形状、色彩画出个概念,然后几个箭头标注语义(context)情景,就可以生成对应的图片。

比如你用了两个矩形和一个圆,延伸➡️了三个场景:城市、室内装饰、cocktail。

最近的 draw-fast 尝试又结合了fal.ai api - inference 实时推理,Twitter 用户@lichinlin 在测试允许将稳定的扩散结果传递到画布上的下一帧的概念 (concept that allows passing the stable diffusion result to the next frame on the canvas)。

ai 以 prompt 的方式释放了巨大的想象力,思维的表征方式从对话文本框转战到了思维草草草图。

人和 ai 已经开始了非常紧密的分工协作,它帮助具象哪怕是一闪而过的想法。你负责圈圈圆圆圈圈,ai 负责实现;你负责出主意,ai 负责增强技能,一起放大想法的价值。

它甚至可以在团队中成为一个独特的角色:拟合 context 的沟通者。当产品无法向设计师具象他脑子中的想法时,也许 ai 可以成为第三者。

tldraw 激发了非常多的奇思妙想,每天团队与社区的互动令人目不暇接。并探索于 web 的技术,比如 iframe 可以不断的叠加网页,或结合 vercel、netlify 直接部署网站等,哪些是在 ai 的加持下可以增强的。

想尝试的伙伴可以开始行动了,欢迎评论分享你的 draw and UI。也欢迎推荐你所遇到的有趣且正在野蛮生长的 ai 工具!

* 以上视频均出自 tldraw 官方 Twitter 和其社区 Twitter,出处见视频号中简介

【免责声明】市场有风险,投资需谨慎。本文不构成投资建议,用户应考虑本文中的任何意见、观点或结论是否符合其特定状况。据此投资,责任自负。

胖车库
数据请求中
查看更多

推荐专栏

数据请求中
在 App 打开