在 Metalab 打造定制 AI 设计工具

Building Custom AI Design Tools at Metalab

迈尔斯·帕尔默 Myles Palmer · Dive Club · 2026-10-15 · 约 56 分钟 · 原视频 ↗

打开互动全文版(中英对照 + 朗读 + 问答)→

本期速览 · Overview

Metalab 设计总监 Myles Palmer 分享他如何打造 Oodles——一套 AI 驱动的参数化设计系统,让设计师仅凭一句提示词即可生成定制工具。

Myles Palmer, design director at Metalab, shares how he built Oodles, an AI-powered parametric design system that lets designers generate custom tools from a single prompt.

要点 · TL;DR

核心观点 · Key points

反共识 · Contrarian takes

本期章节 · Chapters(共 25)

全文 · Full transcript(中英对照)

引言 Introduction

Host

欢迎来到 Dive Club。我是 Rid,这里是设计师永不停止学习的地方。本周的嘉宾是 Myles Palmer,他是 Metalab 的设计总监,他将带我们幕后了解他在那里构建的内部设计工具系统。我在这个节目上见过很多工具,但这个可以说是最令人印象深刻的。我认为 Myles 是当今好奇的构建者的完美典范。让我们来看看他构建了什么。

Welcome to Dive Club. My name is Rid and this is where designers never stop learning. This week's episode is with Myles Palmer who's a design director at Metalab and he's going to give us a behind-the-scenes look at the internal design tooling system that he built there. And I've seen a lot of tools on this show, but this is about as impressive as it gets. And I think Myles is the perfect archetype of what it looks like to be curious as a builder today. So let's have a look at what he built.

Oodles 概述 Overview of Oodles

Myles

所以 oodles 是一种参数化工具,你可以用它制作任何你能想象的东西。背景是,我一直痴迷于用规则和系统来做设计,而不是自己手工制作。借助 AI 的力量,我想哦,这是完美的环境。这是完美的方式。所以 oodles 本质上是一个我们可以在 Metalab 内部使用的设计工具。全部来自 Claude。它的功能是一组控件,你可以在右侧看到。不同的控件类型做不同的事情。它有一些预设,你可以很容易地构建。它内置了随机化。它有画板尺寸。它拥有你期望的设计工具的所有功能,包括不同的画板、分享、框架、缩放,一切。设计师永远不需要考虑这些东西。他们只需要考虑他们想要在画布上呈现什么。

So oodles is a kind of parametric tool that you can use to make anything that you can imagine. And so like the background is I've always been obsessed by using rules and systems to make design rather than crafting things myself. And with the power of AI, I was kind of like oh this is the perfect circumstance for it. It's the perfect way. And so oodles at a base level is a design tool that we can use internally at Metalab. All from Claude. And what it does is a set of controls which you can see down on the right hand side here. So different control types that do different things. It is some presets that you can build really easily. It's got randomization built in. It's got artboard sizes. It's got all of the things that you'd expect of a kind of design tool, including different boards, sharing, frames, zoom, everything. And the designer never has to think about any of that stuff. All they have to think about is what they want to be on the canvas.

动机与用例 Motivation and Use Cases

Myles

我制作它的原因是,我们设计团队很多人都在制作这些工具,但 Claude 可以用很多不同的方式解释它,并且一遍又一遍地陷入同样的陷阱。所以如果你想要做麦克风反应或相机控制,或者你想要一个 3D 场景,但它总是被同一个 bug 绊倒。我的想法是,好吧,让我们节省大家这种痛苦,给他们一种方法来做所有这些。所以现在它已经扩展到大量不同的工具类型。这是一个超级 3D 的。它可以更像这样的 2D 东西,这是我们为最近举办的活动制作的,同样超级快速和简单。或者它可以是像这样的基于物理的。所以如果我再放一些鹅卵石进去。让我们来一大堆。我可以到这里,我可以改变,比如,好吧,我现在想要那些缩回到我的光标。或者实际上我想要分裂它们,这样当我拖动时它们都分裂成更小的尺寸。好的,我想要一个不同的调色板。不管是什么。我可以让形状更有机,我可以添加图案。大量不同的东西。但这一切都来自对 Claude 的单个提示,你说 forward/ new tool 并描述你想要什么。也许扔几个参考。它带着一个计划回来并为你构建它。

And the reason that I made it is a lot of our design team were making these tools, but Claude can interpret it in so many different ways, and it falls into the same trap over and over again. And so if you were wanting to do mic reactivity or camera control or you wanted to have let's say like a 3D scene but it was always tripping up over the same bug. My thought was okay let's save everybody that pain and let's give them a way to do all of that. And so now has span out to a ton of different tool types. So this is a super 3D one. It can be more kind of like 2D stuff like this, which we made for an event that we held recently that again is super quick and easy. Or it could be, let's say, like this, which is physics-based. So if I just do get some more pebbles in there. Let's go for a ton of them. And I can come down here, I can change like, all right, I want those to retract to my cursor now, for example. Or actually I want to split them so that when I drag through they all split into smaller sizes. Okay, I want a different color palette. Like whatever it is. I can have the shapes be more organic and I can add patterns. Tons of different stuff. But this all comes from just a single prompt into Claude where you say forward/ new tool and you describe what you want. Maybe chuck a couple of references. It comes back with a plan and builds it out for you.

底层系统架构 Underlying System Architecture

Host

我复述一下,以确保我理解正确。你几乎构建了这个底层系统,上面坐着单独的工具,就像 UI 完全可以根据你想要创建的工具而变化。我理解得对吗?

I'm going to repeat back just so I'm understanding correctly. You almost built like this underlying system that has individual tools sitting on top of it like the UI could totally change depending on the tool that you want to create. Is I'm getting this correct?

Myles

没错。所以,从根本上解释它是如何工作的。它是一组大约 25 或 30 个技能,上面有一个路由器。一个引擎和一个控制面板。它的作用是,技能会根据“好的,我检测到你想做一个 2D 工具或物理工具或 3D 工具”来接入,并且它对这些领域有所了解,然后说“好吧,过去我做 3D 时,我学到如果做这一步它会崩溃并且不渲染环境,所以要避免这样做,或者使用 React 3 fiber,因为它比 3JS 更好”之类的。所以这些领域技能,比如专业领域,然后还有功能技能,比如我知道如何接入 bike 函数。它还会自我学习。所以不同的人构建的工具越多,它开始学习的就越多,你可以从中吸取教训。所以你可以说,好吧,在过去一个月构建的所有工具中,我们学到了什么?人们在哪里绊倒了?出了什么问题?我们如何利用这些来改进进一步的工具?所以是的,它本质上是自己的系统。

Exactly. So, and it's kind of fundamental level to explain how it works. It is a set of skills about 25 or 30 with a kind of router that sits on top of it. An engine and a control panel. And what it does is it has the skills tap in based on okay I detect that you want to do a 2D tool or a physics tool or a 3D tool and it has things that it knows about those spaces to then kind of go okay well in the past when I've done 3D I learned that actually if I do this one step it crashes and it doesn't render the environment to avoid doing that or use React 3 fiber because it's better than 3JS or whatever it is. And so these kind of domain skills of like expertise areas, there are then like functional skills of like I know how to tap into the bike function. And what it also does is it self-learns. So the more tools that get built by different people, the more that it starts to learn, you can harvest lessons from that. So you can say, okay, of all of the tools built in the last month, what did we learn? Where did people trip up? What went wrong? How can we use that to improve further tools? So yeah, it's kind of its own system essentially.

系统构建的价值 The Value of System Building

Host

是的。我试图弄清楚你在这里构建的东西到底该叫什么词,因为就像它不是,它不仅仅是一个工具。这很有趣。

Yeah. I'm like trying to figure out what the word even is for what you've built here cuz it's like it's not it's not it's more than just a tool. It's very interesting.

Myles

是的。而且我认为对我来说最有趣的部分,因为这是我的思维方式,我喜欢制作系统,对吧?就像我觉得工具和那些可以玩的小东西本身挺有趣的。

Yeah. And and I think the most interesting part for me because it's the way that I think is I I love making the system, right? Like I I find the tools and the little things to play around with themselves like kind of fun.

赞助商广告 Sponsor Break

Host

可以说这是你早期使用 Paper 的最后机会,感觉每个人都在 Twitter 上谈论它,嘉宾们不断在这个节目上提到它。他们刚刚筹集了大量 A 轮融资,Paper 很快成为人们用智能体交付的设计工具选择。它真的感觉是专门为这种新的工作方式而构建的,这就是我每天使用它的一个重要原因。所以,如果你还在睡觉,请前往 dive.club/paper。我想你很快就会意识到为什么这么多设计师在转换。

I think it's safe to say that this is your last chance to be early on paper and it feels like everybody is talking about it on Twitter and guests are constantly bringing it up on this show. They just raised a massive series A and Paper's pretty quickly become the design tool of choice for people shipping with agents. It really feels like it was built specifically for this new way of working and that's a big reason why I use it every single day. So, if you're still sleeping, head to dive.club/paper. And I think you're really quickly going to realize why so many designers are making the switch.

Host

所以,我现在正在做一个新的 Dive 网站。让我告诉你,在 Framer 中拥有我需要的一切是一件大事。它现在不仅仅是一个网站构建器。它确实是一个完整的 AI 设计智能体。我可以在画布上探索想法,构建响应式页面,甚至为所有剧集设置我的 CMS,这非常有帮助。但这不仅仅是关于便利。Framer 还提高了我能创造的上限。比如,他们刚刚发布了一整套 3D 工具,让智能体可以处理透视、深度、原点,然后我可以直接在画布上微调属性,而不必来回提示。这只是我在 Framer 上构建 Dive 所有东西的另一个原因。所以,请前往 dive.club/framer 开始今天创作。现在,进入本集。

So, I'm working on a new dive website right now. And let me tell you, having everything I need within Framer is a pretty big deal. It's so much more than just a website builder now. It really is a full AI design agent. I can explore ideas on a canvas, build out responsive pages, even set up my CMS for all of the episodes, which is incredibly helpful. But it's not just about the convenience. Framer also raises the ceiling for what I can create. Like, they just released a whole set of 3D tooling so agents can work with perspective, depth, origin, and then I can fine-tune properties directly on the canvas without having to prompt back and forth. It's just another reason why I build absolutely everything for Dive on top of Framer. So, head to dive.club/framer to start creating today. Now, on to the episode.

工具演示 Tool Demonstration

Myles

这个工具接受你输入的任何文字,它可以采用开源字体,并以任何方式操纵它,添加这种像素化格式,你可以将其下载为 TTF 字体并在电脑上实际使用。或者你可以将其作为 SVG 获取,或者你可以制作时间线动画,你可以做任何事来操纵这些不同的东西。

This one takes a um any kind of words that you type in uh and it can take an open source type face and it can you know manipulate it in any way to add this kind of like pixelated format and you can download that as a TTF font and actually use that on your computer. Uh or you can get it as an SVG or you could make a timeline animation like you can do whatever to like manipulate these different things.

工具范围与参数 Tool Scope and Parameters

Host

这个的约束是什么?比如我们这里看到的,上面有我的名字,这个特定工具在功能范围上有多广?你为它的能力设定了哪些限制?

What are the constraints for this? Like what we're looking at here with my name up here, how broad is this specific tool in terms of what it can do and what you've kind of prescribed for it in terms of its abilities?

Myles

所以这个工具的范围相当窄。它本质上是拿一种字体并改变其参数,比如字距或宽度。它所做的不仅仅是拿原始字体然后改变那个字体。它几乎像是把字母完全重绘,这就是它如何能做到像素化阈值之类的东西。而这只是与此相关。但你可以进来,你可以改变背景和类似的一些小部分。你可以改变前景。

So this one is quite narrow in its scope. It is essentially take a typeface and change its parameters, whether that's its tracking or its width. And what it's doing is it's not just taking the original typeface and then changing that typeface. It's almost like taking the letters and redrawing it completely, which is how it can do the threshold of pixelation and all of that kind of stuff. And this is tied just to that. But you could come in, you can change the background and bits and pieces like that. You can change the foreground.

Host

另一个很快的问题。所以我们右边看到的这些参数。是的。其中有多少是由与该工具绑定的技能所决定的, versus 由设计师实施的提示所创造的?

Another really quick question. So the parameters that we're looking at on the right here. Yep. How much of those are dictated by the skill that is tied to that tool versus created by the prompt that the designer implements?

Myles

这是两者的混合。所以 oodles 知道的事情,比如说颜色、前景、背景,对吧?就像它知道如何做画板并改变颜色。所以这对几乎任何工具都是全局的,对吧?所以即使我来到像这样的地方,你会看到这也有一个墨水设置,让我改变画布颜色。所以这很直接,再次像生成新外观这样的东西,对吧?所以你看到这里当我点击新外观时,它把所有参数都改成随机的,那种功能设计师不必描述,它就会自动带回来。

It's a mixture of the two. So the things that the oodles knows about are, let's say for example color foreground background, right? Like it knows how to do an artboard and to change the colors. So that is going to be global to pretty much any tool, right? So even if I come over to say like this right you'll see this has a again it has like an ink setting for me to change the canvas colors. So that is like pretty straightforward again stuff like generating a new look right so you see here as I'm clicking new look it's changing all the parameters to something random that kind of functionality the designer doesn't have to describe it's just going to kind of come back with it.

Myles

所以它的工作方式是我们只需这样做。它有两种工作方式。嗯,所以我输入 for/ new tool。嗯,然后我说类似“给我创建一个工具,它拿一堆弹珠并允许我在画布上扔它们”。现在它要做的是,它会说,好的,我得查找技能。它会去,它有一系列步骤,然后带回一个计划。所以它会带回一个计划,说,所以你看到那里它刚刚运行了技能领域路由器,对吧?所以这是它在运行技能,经过,好的,我已经加载了物理领域,我已经加载了用户交互,它正在拾取所有部分,嗯,它所做的就是带回一个计划,然后你可以从那个计划中选择你想要什么,然后它就开始制作。

So the way that it works is we can just do this. There's two ways that it works. Um so I type for/ new tool. Um and I just say something like create me a tool which takes a load of marbles and allows me to throw them around the canvas. And what it's going to do now is it's going to go, okay, I got to look up the skills. I'm going to go and it has a series of steps that it comes through and it comes back with a plan. So it will come back with a plan that will say so you saw there it just it just ran skill domain router right so this is it running the skill going through okay I've I've loaded the physics domain I've loaded the user interaction it's picking up all the bits uh and what it does is it comes back with uh the plan you can then select what you want from that plan uh and then it gets to work making it

Host

另一个澄清问题。我知道我这样用不同方式问了很多次。我还是想确保我真的理解它。所以它是从你拥有的选项数组中选择一个它觉得最匹配的工具,还是从工具中提取部分并创造新东西?

Another clarifying question. I know I'm like asking this a bunch of different ways. I'm still just trying to make sure I really understand it. So is it picking one of the tools in the array of options that you have that it feels like is the best match, or is it pulling pieces from tools and creating something new?

Myles

更接近后者,对吧?它知道已经存在什么,但它并不是在大量工具上训练过的。它就像,好的,我知道最接近这个的东西。它会做的是,它会说,好的,我想你以前做过类似的东西,所以我可以更接近一点。但你可以看到这里它带回了一个计划,对吧?它说,好的,这将被称为——我放大一点。嗯,这将被称为“弹珠投掷”。它是一个有光泽弹珠的实时画布。你抓住它,抓住它并甩动它。控件:我想改变样式、导出选项。没有 Figma 它会存在的地方。然后它在这里描述。“Tumble”是一个经过验证的工具,以同样的方式构建。画布加 2D 物理。Tumble 就是这个,对吧?你可以看到你从中学到的东西如何可能应用于有物理的弹珠。它在这里还建议,如果你更愿意从 Tumble 的完整副本开始,可以“混音 Tumble”。那是因为你可以拿一个现有的,嗯,Metal Lab 内的任何人都可以说“混音这个”。我想给它添加东西。我想改变东西。但否则,它会做的是,好的,这里是我默认会包含的东西。然后这里有一堆建议。所以,你想添加手机倾斜吗?你想对麦克风或音乐做出反应吗?你想有图像上传吗?这是因为技能告诉它建议它知道可以从控件集中做到的东西并添加。然后技能总是说的最后一件事是,有什么想法?就像如果你自己有这个想法,你会添加什么你觉得有趣的东西?嗯,所以,你知道,说“嘿,一定要加一个弹弓。”嗯,但我只需要说 yes。然后它会做的是,它现在将执行那个计划并开始构建它。

Closer to the latter, right? It knows what already exists, but it's not like it's trained on a ton of tools. It's like, okay, I know the closest thing to this. What it will do is it will go, okay, I think you've made something slightly like this before and so I can get a little bit closer. But you can see here it's come back with a plan, right? It said, okay, this is going to be called I'll just zoom in a bit. Um, this is going to be called marble toss. It's a live canvas of glossy marbles. You grab it, grab it and flick it around the controls. I want to change the style, the export options. There's no Figma where it's going to live. And then it describes here. Tumble is a proven tool built the same way. Canvas plus 2D physics. Tumble is this one, right? And you could see how like learnings that you'd had from this might apply to something that's marbles with physics. What it also suggests here is if you'd rather start from a full copy of Tumble, remix Tumble. And that's because you can take an existing one uh anybody within Metal Lab and say remix this. I want to like add things to it. I want to change things. But otherwise, what it will do is, okay, here are the things that I'll include by default. And then here's a load of suggestions. So, do you want to add phone tilting? Do you want to react to mic or music? Do you want to have a image upload? And this is because the skill kind of tells it to suggest stuff that it knows that it can do from the control set and add it on. And then the final thing that the skill always says is what are some ideas? like if you had this idea yourself, what would some stuff that you would be adding that you think is fun? Um, and so, you know, saying, "Hey, do add a slingshot." Um, but all I need to do is just say yes. And what that's going to do is it will now execute that plan and start building it out.

Host

你对这个响应迭代了多少,因为它很完美。就像甚至你建议想法并帮助给设计师提供可反应的东西的方式,这对你来说甚至是工具设计过程的一大部分吗?

How much have you iterated on just this response cuz it's perfect. Like even just the way that you're suggesting ideas and helping give designers things to react to, like is this a big part of the design process of the tool even for you?

Myles

它很早就出现了,我想。所以当这开始时,我会说在我工作的头两周内,我已经做了足够多种类的工具,其中许多现在在废品堆上,当 Claude 带回大量信息时,我想,我不能通过这个。我需要一种更简单的方式来处理这些信息。所以有点像编排那个并让它到达那里。花了一些时间,但并不是大量的来回,对吧?它绝对更像通过创造来试验。所以那,就今天有多少 oodles 而言,只有大约 60 或 70 个左右。它们可以像这样简单的东西,对吧?就像,好的,这是一个轨道的东西,你可以看到很多卡片,在某些方面你可以看到这也许更适用于产品内部,对吧?所以而我们看像这样的东西,这是为一个项目,我们在看能否在立方体内创造世界,我们想,好的,这是生成这些小世界的想法,它们生活在形状内,它是一个创意工具。例如这个再次类似地更功能化,对吧?就像,好的,如果一个网站是这样的,你可以点击所有这些,但你想看看,如果有更多行或更少列,或者如果单元格尺寸更大呢?你知道,再次,它给你一个非常快速的方式来迭代交互设计。所以它可以用于创意工具以及产品体验。这就是 oodles 从自身学习到的许多教训的来源。它只是把我能想到的每个想法都扔给它,看看它本质上会做出什么。设计这样一个系统意味着有太多的层次。

It came quite early on I think. So when this started, I would say within the first like two weeks of me working on this, I kind of I had done enough varieties of tools, many of which are kind of on the scrap heap now, that when Claude was coming back to me with like a plethora of information, I was like, I can't pass this. I need a simpler way to get through this information. And so kind of like orchestrating that and getting it there. It took some time, but it wasn't like tons of back and forth, right? It it was definitely much more a like trial through creation. And so that that like in terms of how many oodles there are today, there's only like 60 or 70 something like that. And they can be like stuff that's as simple as this, right? Which is like, okay, this is like an orbital thing where you can see lots of card and in some ways you could see how like this is much more applicable maybe to like inside of a product, right? So whereas we're looking at something like this, this was for for a project where we were looking at can we create worlds within cubes, we were like okay is this this idea of generating these little worlds that live within shapes and it was like a creative tool. This for example again similarly was much more functional, right? It's like okay what if a website is like this and you can click all these things but you want to see well what if there were more rows or less columns or what if the cell size was bigger? you know, again, it gives you a really quick way to iterate through interactive designs. And so, it can kind of been used for creative tools as well as like product experiences. And that's where a lot of the lessons for oodles to learn from itself have come from. It's just chucking every idea at it that I can and seeing what it makes of it essentially. There's so many layers to what it means to design a system like this.

可用性设计 Designing for Usability

Host

我觉得这是我目前的主要收获之一。甚至当你拖动参数时,一切看起来都很好。右侧面板的设计很直观。模型的文本响应甚至也很直观。就像做出一个你能用的东西,与做出一个能让许多不同项目的人都能用的东西之间,有一个很大的飞跃。而我认为看到幕后,让我意识到后者所需要的所有小设计决策。

I think that's like one of my main takeaways right now. Or even when you were dragging the parameters, everything looked good. The design of the right panel is intuitive. The text response from the models is even intuitive. Like there's a big leap between making something that you can use versus making something that a bunch of different people working on different projects can use. And I think seeing the behind the scenes is kind of opening my eyes to all of the little design decisions that are required for the latter.

Myles

是的。我认为这实际上是最重要的事情之一。我们在一个代理机构工作。我们有各种技能和能力的设计师。我热衷于让所有这些设计师都能获得与其他人相同水平的知识和工具。部署网站并不是每个设计师都知道如何做的事情,对吧?比如能够发布一些东西并与他人分享。所以 oodles 做的另一件事是,你永远不需要考虑 GitHub。一切都会自动进入一个 GitHub 组织。你永远不需要考虑发布,因为一旦创建了某个东西,哦看,我们得到了 marbles 的第一个版本。哦,这相当粗糙。我的意思是,它能用。我不确定那些 marbles 是否很棒,但仅仅基于字面上的一句话,对吧?比如,给我创建一个做某某事的工具。呃,我们得到了一个具有物理效果和零碎东西的东西,我们可以——

Yeah. And I think that's like one of the things that was actually biggest. We work at an agency. We have designers of all different kind of skill sets and capabilities. And I'm passionate about all of those designers having access to the same level of knowledge and tools that somebody else does. Deploying a website isn't something that every designer knows how to do, right? Like being able to publish something and share it with other people. And so the other thing that oodles does is you never need to think about GitHub. Everything is in a GitHub organization automatically. And you never need to think about publishing because once something is created, oh look, we got our first version of marbles. Ooh, that's pretty rough. I mean, it works. I'm not sure those marbles are fantastic, but based on just like literally like one sentence, right? Like, create me a tool which does blah. Uh, we've got something that's got physics and bits and pieces and we could—

迭代至卓越 Iterating to Greatness

Host

好的。好的。那么让我们深入探讨一下,因为这可能是很多观看此节目的人都有的经历,他们会说:“好的,我使用 AI。我做了一个我以前绝对无法做出的东西,但迭代到卓越,尤其是当标准像我知在 Metal Lab 那样高时,你在这里会怎么做?比如这哪里感觉不对?也许甚至在高层次上,跟我谈谈你会如何从这一基线提升质量。”

Okay. Okay. Well, let's pull on this then because this is probably the experience that so many people have had who are watching this where they're like, "Okay, I use AI. I made a thing that I definitely would not have been capable of making before, but the iteration to greatness, especially when the bar is as high as I know it is at Metal Lab, like what would you even do here? Like what about this feels off? And maybe even at a high level, talk to me about how you would approach pushing up the quality from this baseline."

Myles

对于这个特定的,我要做的第一件事实际上是回到这个,对吧?所以你看到所有这些对我来说已经感觉像是一个 marble 了。

For this one particular, the first thing I would do is I would actually go back to this, right? So you see like how all of this to me feels like a marble already.

Host

是的。这是什么,老兄?这太酷了。

Yeah. What is this, dude? This is so cool.

Myles

我之前在看这个。这太疯狂了。

I was looking at this earlier. This is crazy.

Myles

所以所有这些事物,它们在这个里面,对吧?有折射,有扭曲。有你可以做的一切来遍历所有这些。你可以添加环境并更多地模糊它们,改变相机距离。而像这个是一个相当高级的 oodle,我会说特别是光谱东西存在的方式,而且呃如果有多于一组物体,你会得到这里的左侧面板,对吧,你可以说好的,我想要这个在这里成为不同的东西,你可以单独控制所有它们,比如带来不同的塔。

So like all of these things they have like inside of this one, right? There is like refraction, there's distortion. There's everything that you can kind of do to go through all of it. And you can add environments and blur them more and change the camera distance. And like this one is a pretty advanced oodle I would say particularly like the way that like the spectral stuff exists and also uh if there is more than like one set of objects you get this left hand panel over here right and you can be like okay I want this one here to be a different thing and you can control all of them individually to like bring different towers.

Host

这太疯狂了。

This is crazy.

Myles

在这个实例中,我要做的第一件事是这个。这是一个网站,一个我用 Claude 做的小网站。这是从刚才展示的第一个 oodle 程序化生成的 200 个版本,它们像是无缝循环。所以,我可能首先要做的是,“好的,我想要那个图像,我要把它倒在这里。”我会这样做,因为我选了 marbles,因为呃我知道这会派上用场。嗯,我会说,好的,我希望它们在纹理上更像这样,或者有那种半透明和斑点。而这就是其中一件事,它永远只能和你通过提示达到的一样好,对吧?所以我记得当我做这个的时候,我非常热衷的是里面的所有小点。让我看看我有没有一个有点的。是的,这个。所以像这些生活在里面的粒子,那是我花了很长时间才弄对的,通过大量的不同迭代。我认为这个特定的 oodle 这大概是版本 67 之类的。从那以后就 stuck 在那里了,对吧?它没有改变。它拥有了一切。但它真的有陀螺仪。它有 Bloom。它有一切优势。而只是情况是,嘿,我想知道我现在能不能做到。所以像这是改变里面的粒子颜色,但也可以增加它的大小,让它占据更多。我可以增加数量。我可以让它们旋转。我可以让它们放大和缩小。而只是把所有这些事情一个接一个地结合起来,才达到了这个点。

In this instance here, the first thing I do is this. This is a site, a little site that I have that Claude made. This is 200 maybe procedurally generated versions from that first oodle that I just showed that are like seamless loops. So, the first thing that I would probably be doing is going, "All right, I want that image and I'm going to dump it in here." And I would because I picked marbles cuz uh I knew this would come up. Um, and I would just go like, all right, I want them to feel much more like texturally like this or to have like the translucency and the kind of specs. And that's one of the things is it's only ever going to be as good as you can kind of like prompt it through, right? So, I remember when I was making this one, the thing that I was really keen on was all of the little dots that are inside. Let me see if I've got one that's got it. Yeah, this one here. So like these particles that live inside, that's what took me an age to try and get right and it was through tons of different iteration. I think this particular oodle this is maybe like version 67 or something like that. And it's stuck there since, right? Like it's not changed. It's got everything. But it really has it has gyro. It has it has Bloom. It's got it's got everything going for it. And it was just a case of hey, I wonder if I can do that now. So like this is changing the particle color inside of it, but also I can increase the size of it so it takes up more. I can increase the count. I can make them swirl. I can make them scale up and down. And it was kind of just combining all of these things like one after the other that got it to this point.

视觉冲击与程序化生成 Visual Impact and Procedural Generation

Host

我不是因为你在我的播客上就吹捧你。我真的认为这是我看过 AI 制作的最视觉上令人惊叹的东西之一。这难以置信,就像这些形状内部发生的事情真的难以置信。我确实有一个澄清问题,关于它为你生成的页面。你谈到那些是程序化生成的。那是为了除了几乎给自己一个情绪板来参考之外的任何目的吗?比如你为什么这样做?以及你在自己的创意工作中多久做一次这种事情?我猜。

I'm not just gassing you up because you're on my podcast. I really do think that is one of the most visually stunning things I've seen AI make. It's unbelievable like the what is going on inside of these shapes is really unbelievable. I did have one clarifying question around the page that it generated for you. You talked about how those were procedurally generated. Is that for any purpose other than just almost giving yourself a mood board to be able to reference? Like why did you do this? And how often do you do this kind of thing in your own creative work? I guess.

Myles

呃对于这个特定的,只是因为我想知道我能不能做到。

Uh for this one specifically, it was just because I thought I wondered if I could.

Host

对。它是——

Right. It was—

Myles

所有图像和视频都被发送到我认为是 Google Vision API 来弄清楚它的分类是什么,然后那大概就是它返回给我的。但这非常像是“我能做到吗?”所以我训练这个玻璃立方体最多的方式是,我有一个脚本,脚本能做的是它只是一个变体生成器,它会输出单个生成,就是你能在这里看到的。它会输出那个单个的规格,然后把它写到一个文件夹里给我。嗯,所以这个,它只是做了一个循环,你可以看到现在这是静态的,但它基本上会生成 100 个某物的版本,我就让它后台运行,当它有了那 100 个版本后,我会进入文件夹,用蓝色或红色标记它。呃如果是红色,意味着我不喜欢它。如果是蓝色,意味着我喜欢它。呃我希望它更像那样。所以我会生成所有这些变体,无论是我为了运动目的而看它,还是为了它看起来或构图的方式的方面,基本上最终得到了这些文件夹,你可以在这里看到,对吧,它构建出不同的东西,那就是我如何回到它。我会说,“好的,我喜欢网格二,我喜欢网格一,但实际上网格零,角度不太对,或者它被裁剪了,或者不管是什么。”所以,这个,对,我喜欢那个。所以我会更多地提示它朝向这些。

All the images and videos got sent to like I think it was the Google vision API to work out like what is the categorization of it and that that's kind of like what it dumped back to me. But this was very much like a can I do this? So the way that I trained like this glass cube one the most was I had this script and what the script could do is it was just a variation generator and it would output a single generation which is what you can see here. It would output the spec of what that single one was and it would then write that to a folder for me. Um, so this one here is it has just made a loop and you can see that is now this is static but it would make essentially 100 versions of something and I just leave it running in the background and when it then had those 100 versions I would then go into the folder I would tag it with blue or red. Uh if it was red it meant that I didn't like it. If it was blue it meant that I liked it. Uh and I wanted it to be more like that. And so I would generate all of these variations and whether it was like I want to look at it for the movement purpose or I want to look at it for the like the aspect of the way that it kind of like looks or is composed essentially ended up with these folders and you can kind of see here right like it builds out different things and that is how I would then go back to it. I'd be like, "Okay, I like grid two and I like grid one, but actually grid zero, the angle's not quite right or it's cropping off or whatever it was." So, this one, right, I love that. So, I would prompt it more towards these.

随机化与斑点效果 Randomization and Speckles

Myles

我想说,在你做的随机化中,确保一百个里有二十个带斑点,因为我喜欢斑点。通过喂给它这个,它变得越来越接近。所以再次,这个,对,我喜欢背景和物体的一部分匹配,因为我有点喜欢它创造的这种透明感。在那个角度你看不太出来。呃,但背景中刚生成的一个也有同样的效果。

I'd say with the randomization that you do, make sure that 20 out of the hundred have speckles cuz I love the speckles. And by feeding it this, it then became closer and closer. So again, this one right, this was I loved it when the background and part of the object matched because I kind of like how it creates this kind of like see-through nature. You can't see it too much in that um angle. Uh but there was one that just got generated in the background which had the same thing.

传统设计方法 Old-fashioned Design Methods

Host

趁这些还在,我想深入探讨一个兔子洞,那就是今天你有多经常用所谓的“老式方法”做事,比如手工制作东西,无论是在代码还是 Figma 中,你知道,一个像素一个像素地拖动东西。

There's a rabbit hole that I want to go down while these are which is how often today are you doing things quote the you know old-fashioned way where you are making something by hand be it in code or Figma you know dragging pixel by pixel things around

Myles

至少对我来说相当罕见。嗯,我大部分时间要么从代码开始,然后推到 Figma 里,在 Figma 里做一些调整,然后再推回代码。我永远不会离开代码。我只会留在 Figma 里。在 Metal Lab,不同的人情况不同。我们有一些设计师,他们在手艺上非常出色,他们设计东西的方式远远超出我能做的,对吧?他们在 Figma 中能创造的东西和那些设计的美感不是我所能做到的。但我的力量来自于我是一个创造者。我喜欢制作东西,我喜欢非常 tangible 地创作,所以这种设计方式非常适合我。

Pretty rarely for for me at least um I spend most of my time I either start in code and then push it into Figma and I'll do a bit of kind of like massaging in Figma and then push it back into code. I will never never leave code. I will just remain within Figma. It is different for different people at Metal Lab. We have some designers that are they're incredible at their craft and the way that they can design things is far beyond what I could ever do, right? And what they can create in Figma and the beauty of those designs is isn't what I could do. But where my power comes from is I'm a maker. I love to make things and I love to be very tangible with with how I create and so this way of designing suits me a ton.

Oodles 组件库 Oodles Component Library

Myles

但我尝试做的事情,实际上就像用 oodles 做的那样?你可以看到这里,对,这是 Figma 中存在的 oodles 组件库,这是 oodles 所有的不同组件。所以在右侧,这些已经经历了多次迭代。我处理的方式就是让 Claude 把组件写到这里。我做一点小改动然后发回去。所以对于那种小迭代的设计,我会进入 Figma,但很多时候对我来说它真的首先从 Claude 开始。

But what are the things that I try and do which actually like is done with oodles? You can see here right this is this is the oodles component library that exists within Figma and this is all of the different components that there are for oodles. So down on the right hand side and these have gone through like several iterations. And the way that I would handle that is I would just get Claude to write the components into here. I'd make a slight change and I'd send it back. And so for like that kind of like small iteration of design, I will come into Figma, but a lot of the time it really starts in Claude first for me.

Host

但是,这些组件你是在 Figma 中开始的,还是只是让 Claude 把它们打印回来?

But but did you start these components in Figma or did you just have Claude print them back?

Myles

是的,没错。让 Claude 把它们打印回来。就像嗯,这个有点更疯狂,但这是我的实验:我能不能做一个东西而从不使用 Figma。嗯,所以我有一个我使用的 markdown 编辑器,你可以在这里看到。嗯,它只是一个我构建的 markdown 编辑器,它有很多不同的功能。它内置了 AI。你可以高亮内容,它使用本地模型,你知道它可以重写东西和建议内容。它还有点了解我的语气。所以当我让它生成一些文本时,就像它在这里做的那样,它理解我想用什么样的方式表达。嗯,它有分屏视图和焦点模式等等。

Yeah, that's right. hydro print them back. The same as like um this is this is this one's a little bit crazier, but like this is a uh this was my experiment of can I make something and never use Figma. Um and so I have a a markdown editor that I use uh which you can kind of see here. Um and it's just a markdown editor that I built that's got it has a ton of different features. It has like AI in it. You can highlight stuff and it uses a local model and you know it can rewrite things and suggest stuff. It kind of knows my tone as well. So like when I ask it to generate some text like it's doing here, it understands like what kind of way I wanted to to to phrase things. Um it's got split view and focus mode and all sorts of stuff.

Markdown 编辑器实验 Markdown Editor Experiment

Myles

但我构建了这个,我从未真正设计过它。我又一次想,我能做这个吗?这里所有的屏幕都是完全生成的。就像所有这些原语、原子,一切。我没有在 Figma 中碰过任何这些东西。它有插槽,有所有面板,有历史记录,所有令牌。所以现在对于这个 markdown 编辑器,有时我会这样做:哦,好吧,有些东西不太工作。比如拿这个文件项来说,对吧?就像左侧的这个组件。如果我想改变活动颜色,嗯,我在这里设置了变量。我会,看看它是什么。颜色 BG 选中。我会来这里,让我们把它改成粉色调。让我们让它更明显。这样做。好了。呃,丑,但超级明显。这和故事书类似,对吧?所以,这是这个产品的故事书。你可以看到这已经更新了。那是因为我在这里运行了一个本地实例,它在代码库和 Figma 文件之间同步令牌。所以如果我在任何一个中更改,它会自动更新,所以它总是同步的。但我这里还有这个漂移检查器,例如我可以检查这个组件,它会检查代码库与 Figma 文件,并返回一份审计报告给我。

But I built this out and I I've never designed this really. I kind of again it was like can I make this? All of these screens here are entirely generated. like all of these primitives, atoms, like everything. I have not touched any of this stuff in Figma. It's got slots, it's got all of the panels, it's got the history, everything tokens. And so sometimes what I will do now for this this markdown editor is I'm like, "Oh, okay. Something's not like super working." So let's say like let's take this file item, right? Like this is this component down the the left hand side. If I wanted to change like the active color, uh, I have the variable set in here. I would, let's see what it is. Color BG selected. I would come in here and let's just make that like a a pinky tone instead. Let's make it more obvious. Let's do that. There we go. Uh, ugly, but super obvious. And this this exists similarly with like a story book, right? So, this is a story book that exists for this product. And you can actually see this is already updated. And that's because I have a like a local instance running here which syncs tokens between the codebase and between the Figma file. So if I change it in either it automatically updates and so it's always going to be in sync. But what I also have in here is this drift checker where for example I can check this component and it will check the codebase against the Figma file and it will return an audited report for me.

赞助商信息 Sponsor Message

Host

有一个问题我无法停止问自己。如果公司申请与你交谈,而不是反过来呢?这个问题是全新的 Dive Talent Network 的基础。而且它正在起作用。就像现在,我正在帮助我认识的许多最令人兴奋的初创公司招聘收听这个节目的设计师和构建者。所以,如果你好奇外面可能有什么,也许你想加入我的名单,或者你甚至正在寻找你的下一个设计雇员,请访问 dive.comclub/talent 今天加入。

There's one question that I can't stop asking myself. What if companies applied to talk to you rather than the other way around? And that question is the foundation for the all-new Dive Talent Network. And it's working. Like right now, I'm helping many of the most exciting startups that I know to hire the designers and builders who listen to this show. So, if you're curious what might be out there and maybe you want to get on my list, or maybe you're even looking for your next design hire, head to dive.comclub/talent to join today.

Figma 作为真实来源的价值 Value of Figma as Source of Truth

Host

我现在有这么多问题。我要在那个兔子洞里再挖一个兔子洞,那就是在你看来,当设计起源于代码时,将东西打印回 Figma 并在 Figma 内部组件级别拥有那个真相来源的价值是什么。

I have I have so many questions now. I'm going to do a rabbit hole inside of that rabbit hole, which is what's the value in your mind of printing things back to Figma and having that source of truth at like a component level inside of Figma when the designs originate in code.

Myles

只是有时候进入 Figma 进行设计调整仍然快得多,对吧?但就像来这里说:“哦,这个内边距不太对。”你知道,稍微改一下,增加一点之类的,然后能够把它推到代码中并继续,而不是其他方式。对我来说,这有点像是视觉上的,只是一个视觉的东西,对吧,就像我想看这个组件,我想设想它是什么样子,好吧,如果你把字体大小改成 22 像素呢,对吧?所以这又是我构建的另一个插件,它只是向你展示视觉差异。所以技术上你永远不需要进入 Figma,但这样做然后看到它在大量这样的屏幕上更新,Figma 仍然非常方便,用于那种概览和围绕视觉设计的实验,对吧?因为看这个并不是世界上最好的设计。老实说,这大概花了 10 分钟。但如果我看看我们设计师达到的工艺水平,比如这个,这是我们与 Mozilla Firefox 最新版本合作的一些设计工作,你知道,所有这些东西的工艺、细节和美感水平。

It's just that sometimes it is still way faster to come in in into Figma and make a design tweak, right? But it is like coming in here being like, "Oh, this padding isn't quite right." you know, changing it a little bit, increasing it or whatever, and then being able to push that into code and move on rather than than anything else. And to me, it's a little bit of like a visual, it's just a visual thing, right, of like I want to look at this component here and I want to envisage what it's like with all right, what if you made the the type size 22 pixels, right? And so this is again another plugin that I've built which just it's just about showing you visual differences. So you technically never need to come into Figma, but to do that and then see it update across a ton of like screens like this, Figma is still super handy for like that overview and the kind of experimentation around the visual design, right? Cuz like looking at this is not the best design in the world. Like it's honestly it's like 10 minutes of time. But if I look at, you know, the the level of craft that our designers get on, you know, say something like this, which is some of our design work for for the newest version of Mozilla Firefox that we worked with them on, you know, the the the level of craft and detail and beauty in all of this stuff.

设计与产品制作 Design vs. Product Making

Host

如果团队试图直接用代码实现这一点,那还做不到,对吧?仍然需要大量创造力来完成所有这些探索性工作,而这只是团队探索的一个方向。所以它非常适合制作,但我仍然认为 Figma 是进行出色设计工作的地方。我只是不认为它是制作产品的地方。而且我认为这是两件不同的事情。

If the team were trying to achieve this straight in code, it's just not there yet, right? There's so much creativity involved in still doing all of this explorative work, and this is just one direction that the team did. So it's great for making, but I still think that Figma is the place to do great design work. It's just not the place to make product, I don't think. And I think that those are two different things.

Host

你能再深入谈谈你心目中这两者的区别吗?

Can you go a little bit deeper into what the distinction is there in your mind?

Myles

是的,在我看来,打造一款出色的产品关乎它的感觉、外观、影响力、功能、技术层面、营销方式等等。我认为所有这些,包括用户反馈,并将其融入产品中。我认为所有这些都构成了打造伟大产品的要素,而这正是我们在 Metal Lab 所做的。但我认为,打造精美的设计对伟大产品有重大影响,你不想从零和一开始,被文本指令或书面语言的边界所困。设计是视觉的东西,对吧?它本质上是视觉的,如果你从纸上开始画草图,那也可以,对吧?但从根本上说,我认为伟大的设计总是源于观察视觉事物,并通过迭代来实现,至少对我们来说,我们一直在创造新的上下文。你知道,作为一家代理机构,我们有一个约 50 名设计师的设计部门。我们同时处理许多项目,涉及许多不同的企业。我们不是在创建那些庞大的设计系统,像组装零件套件那样,对吧?我们从不做那种工作。我们的工作全是关于转型。是从无到有。全是关于那种真正帮助团队加速的喷气燃料。当你进行那种创意过程时,只是生活在这种环境中,试图通过调整来达到目标,那很痛苦。那不是最好的地方,对吧?你被限制在这个小东西里。所以,我认为对我们来说,AI 在设计过程中只是另一个工具。它没有取代任何东西。它可以像画笔和纸一样使用。它只是另一个输入。它只是另一种表达自己的方式。而我认为对于内部团队来说,它可能改变了很多,对吧?我们与客户合作,看到他们的设计团队现在工作方式的差异,对吧?设计系统的价值从未如此之高。工程与设计团队之间的整合从未如此紧密。我看到越来越多的内部设计团队在构建自己的工具,以更快地组装自己的产品。所以我的意思是,如果你有一个故事书,就像我刚才闪现的那个,但针对你的产品,你有规则和条例,比如如何组合在一起,应该感觉如何,原则等等,你的工作就变成了定义什么是对客户最有价值的东西。我们如何确保一致性?我们如何确保它正确工作?它变成了关于产品的体验,而不是美学或产品设计,如果这说得通的话。

Yeah, in my mind I think making a great product is about how it feels, how it looks, the impact it's having, the functions, the technical aspects that go into it, the way that you market it, whatever. I think all of those things, user feedback, right, and integrating that into the product. I think all of those things is what goes into making great products, which is what we do at Metal Lab. But I think making beautifully crafted design which has a heavy influence on a great product, you don't want to start with zeros and ones and stuck in the boundaries of text instructions or written language. It is a visual thing, right? Like it is inherently visual and if you start sketching on a bit of paper that's also fine, right? But like fundamentally I think great design is always originated from looking at something visual and I think iterating towards that just through a text box at least for us where we're spinning up new context all the time. You know as an agency we have a design department of about 50 designers. We're working on a lot of projects at once with a lot of different businesses. We're not creating these massive design systems where you're kind of like assembling a kit of parts, right? Like we never really do that work. Our work is all about transformation. It's about going from something to nothing. It's all about that jet fuel that really helps a team accelerate. And when you're doing that kind of creative process, just living in this kind of environment and trying to tweak your way towards it, it's just painful. It's not the best place, right? You're just restricted down into this little thing. So, I think for us, AI in the design process is just another tool. It hasn't replaced anything. It can be used in the same way as just like drawing pen and paper. It's just another input. It's just another way to express yourself. Whereas, I think for in-house, it probably has changed a lot more, right? Like, we work with clients and we see a difference in the way that their design teams now work, right? Like the value of design systems has never been higher. The integration between engineering and the design team itself has never been greater. And I see more and more in-house design teams are building their own tools to assemble their own products quicker. And so what I mean by that is if you have a storybook, right, like the one that I just flashed up, but for your product and you have rules and regulations of like how this should all go together, what it should feel like, the principles, you know, all of that stuff, your job becomes about defining what is the most valuable thing for our customer. How do we ensure that we have cohesion? How do we make sure that it's working correctly? It becomes about the experience of the product rather than the aesthetic or the design of the product if that makes any sense.

Host

你这么说,但你从 oodles 展示的许多美学真的非常令人印象深刻且新鲜。那么你能谈谈 oodles 在 Metalab 中扮演的角色吗?比如你认为这种输入的投资回报率何时最高?

You say that and yet a lot of the aesthetic that you were showing from oodles is really really impressive and fresh. So then can you talk a little bit about the role that oodles plays in metalab like when do you think that the ROI for this type of input is highest?

Myles

这是个好问题。我认为目前 oodles 仅限于我和其他几个人使用,对吧?不是每个人都在外面疯狂使用它。人们在做其他非常有趣的事情。但 oodles 的用武之地在于,如果我们正在做一个品牌项目,或者我们正在说嘿,你知道,如果我回想一下,我有一个例子,如果我们看看我们为 Windsurf 做的项目,例如

It's a good question. I think oodles at the moment is like limited to me and a few other people, right? Like not everybody is out there using it and going crazy with it. People are doing other really interesting things. But where oodles comes in is if we're working say on a branding project or we're kind of going like hey uh you know if I think back to I've got an example right if we look at the work that we did for wind surf for example project

Host

让我把 Windsurf 调出来。哦,显然 Windsurf 不见了。不,在那里。好的。呃,如果我们看看 Windsurf。

Let me get windsurf up. Oh apparently windsurf is gone. No there it is. Okay. uh if we if we look at the the the windsurf.

Myles

所以 Windsurf 绝对是 oodles 执行的理想工具或美学,对吧?团队制作的这些渐变和美丽的波浪图案是适合参数的东西,对吧?它适合调整那些小东西并看到它在你面前变化的能力。就像团队在这里做了模拟。所以当这个被制作时,需要工程师来构建这个工具,才能创建这些生产输出。但现在,你知道,我和负责 Windsurf 的设计师 Mac 谈过,我说:“嘿,你可以直接把这个扔进 oodles,开箱即用,然后玩一玩。”我们有一次用 Windsurf 做了,他说:“好的,我能看到这如何引导出我没想到的东西。”我认为这是关键,对吧?我并不是因为 oodles 输出的东西而喜欢它。我喜欢 oodles 是因为它引导出意想不到的东西。有时甚至只是我坐在这里按随机按钮,对吧?就像有些纯粹是垃圾,对吧?在这个例子中,很多都是不好的。但有时你也可以这样做,正如我们刚刚看到的所有这些变体,对吧?现在这就像一百个不同的东西之类的。实际上是 28 个。好的,它一定崩溃了。它转到视频了。呃,这有点 bug。我有一段时间没运行这个了。嗯,但你明白意思,对吧?这里有很多东西我可以看,而我以前无法想象。对我来说,就像你可以进入设计的心流状态,你可以在 Figma 中进入心流状态,但你也可以在用 oodles 时进入心流状态,对吧?你只是会想,哦,如果我现在加上那个呢?哦,如果我这样做,会发生什么?这是一种非常相似的感觉。只是在一个不同的空间里做。

So windsurf is absolutely like the optimum tool uh or kind of like aesthetic for oodles to execute upon, right? These gradients and these beautiful kind of like wave motifs that the team made are something that suits parameters, right? It is something that suits the ability to tweak those little things and see the way that it changes in front of you. like just have the team have kind of got mocked up here. And so when this was made, this would take like an engineer to come up with it to build this tool that could kind of create these production outputs. But now, you know, I spoke to Mac, the designer that worked on Windsurf and I was like, "Hey, you could just like chuck this into oodles and get it all out of the box and play around with it." And we did it with Windsurf one time and he was like, "Okay, I could see how this leads to things that I hadn't thought of." And I think that's the critical thing, right? Like I don't love oodles because of necessarily like what comes out this side. I love oodles because it leads to unexpected things. And sometimes that's even just me like sitting here and pressing the random button, right? It's like some of this is pure trash, right? In in this example, like a lot of this is is bad. Uh but also sometimes you can do it and as we've just seen with all of these variations that have been made, right? like these is this is now like a hundred different things or whatever. 28 in fact. Okay, it must have crashed. It's moved on to videos. Uh which it's a little buggy. I haven't ran this for some time. Um but you get you get the point, right? Like there's there is just a volume of stuff here that I can look at that I just couldn't imagine before. And it and it to me it's like you can get into a flow state with design and you can get into a flow state in Figma, but you can also get into a flow state with oodles, right? Where you're just kind of like, oh, what if I now added that? Oh, if I do this, what happens? And it's a very similar kind of feeling. It's just a different space to be doing it in.

Host

我想这就是为什么我在问我的问题。对我来说,问题背后的问题是,我最近甚至为自己的实践思考了很多,因为老兄,我真的不再手工制作任何东西了,感觉很奇怪,但我实际上很开心。我认为我的输出很好,你知道,我为我正在做的工作感到自豪。然而甚至昨天,我的意思是,我只是给自己不同类型的系统,以在给定的机会空间中看到大量的选项。然后我只是挑选和优化,挑选和优化。

I think that's why I'm asking my question. Like the the question behind the question for me is I've even been thinking about this for my own practice so much recently because dude I don't craft anything anymore really and it feels weird but I'm actually happy. I I think that my output is good, you know, like I'm proud of the work that I'm doing. And yet even yesterday, I mean, I'm just giving myself different types of systems to see massive amounts of options in a given opportunity space. And then I just pick and refine and pick and refine.

创造力与系统 Creativity and Systems

Host

我觉得轻易反驳这一点的方式是说,嗯,你只是受限于模型能做的事情,你知道,那里面其实没有那么多创造力。而我会说,是的,我完全结合了那个逻辑。但同时,每天我都会看到一些我实际上觉得在 Figma 里根本想不到的东西。那完全不在我的大脑里。然后我就沿着那条路走下去了。所以真是喜忧参半,我觉得这几乎引发了一点存在危机,当我思考自己的创造力时,你知道。但你在最开始说了一句话,让我深有共鸣,你说:“你一直是一个倾向于使用规则和系统,而不是自己动手制作东西的人。”我觉得那也是我的原型,也是为什么我以这种新方式工作如此有趣,然而你就是这样做的。我不知道。我几乎有点不自在,因为这也是我的工作方式。我不知道这是否引起共鸣。

And I think the easy way to poke holes in that is like, well, you're just limited to what the models can do, you know, like there's not really as much creativity in that. And I'm like, yeah, I totally combine that logic. And at the same time, every day I end up seeing something that I just don't actually think that I would have been able to think of in Figma. It wasn't in my brain at all. And I ended up going down that path. And so there's such a mixed bag and I think it's almost causing a bit of an existential crisis when I think about my own creativity, you know. But you said the line at the very beginning of this that resonated so deeply with me where you said, "You've always been someone that gravitates towards using rules and systems rather than crafting something yourself." And I think that is me as an archetype as well and why I'm having so much fun with this new way of working and yet you do this. I don't know. I feel a little bit self-conscious almost because this is how I work too. I don't know if that resonates at all.

Myles

是的,百分之百。对我来说完全一样,对吧?就像我很久以前自学了编程。你知道我做的一件事是,如果我们看看我这里糟糕的网站,我可能应该恢复代码。但就像这里的这些东西,是我从 2012 年得到的,对吧?而这个,让我放大一下,它可能会像素化,但就像这些是我 14 年前左右做的两个东西。它们托管在 Tumblr 上,因为我不知道怎么编程之类的。那就是我开始的地方。

Yeah, it's 100%. It's the exact same for me, right? Like I taught myself to code a long time ago. And you know something that I did is like if we look at my awful website here that I should probably revive code. But like these things here I got from 2012, right? And this, let me just zoom in on this and it'll probably be pixelated, but like these are two things that I made 14 years ago or whatever. And they were hosted on Tumblr because I didn't know how to code or whatever. That's where I started.

Host

是的。我就像,我只是做一个 Tumblr 主题,然后把整个东西删掉。

Yeah. I just like I just make a Tumblr theme and delete the whole thing.

Myles

嗯,其中一个就像是,“哦,如果我能像冰箱贴那样排列文字呢?那很有趣。”呃,另一个是,哦,如果我能让人们用不同的形状制作字体呢?就是这两个奇怪的东西。事实上,我想如果我到这里。是的,它仍然有效,但显然内容在您所在地区无法查看。是的,很好。喜欢它。好。好东西,显然我不知道。我一定把它们托管在像 image tag 之类的地方,但你知道,就像,哦,添加线条之类的。嗯,我喜欢这个想法,就是你给人们所有这些材料,他们在另一边做出设计,对吧?对我来说,那部分来自一个叫做条件设计的东西。呃,这是一个不可思议的,不幸的是很多网站都消失了。但有一本不可思议的书叫做《条件设计工作手册》。呃,它是由三位设计师 Luna Mara、Jonathan Puki 和 Ral Lutters 写的。呃,他们整个事情就是每周四他们见面,设计出产生设计的条件。所以一切都像是,好吧,每个玩家收到一个贴纸,轮到你时你得到那个,你得到了所有这些有趣的东西。所以当我看到这个时,我想,哦,你可以制造出生成其他东西的东西。

Um, and one of them was like, "Oh, what if I could arrange words like on a fridge magnet? That's funny." Uh, and the other one was, oh, what if I could like allow people to make typography out of different shapes? And there were these kind of like two strange things. In fact, I think if I go here. Yeah, it still works, but it's but it's obviously content not viewable in your region. Yeah, great. Love it. Good. Good stuff to obviously I don't know. I must have hosted those on like image tag or something, but you know, it's like, oh, add lines or or whatever. Um and and I loved this idea of like you give people all these things and they make the designs out of it on the other side, right? And for me that like partially came from a thing called conditional design. Uh and and this is this is an incredible unfortunately uh that that a lot of the sites are gone. But um there's this incredible book called Conditional Design Workbook. Uh it was by three designers uh Luna Mara, Jonathan Puki, and uh Ral Lutters. Uh, and their whole thing was like every Thursday they met up and they designed conditions that made design. And so everything was like, okay, every player receives a sticker and in turn you get that and you got all of these like interesting things. And so when I saw this, I was like, oh, you can make things that generate other things.

Host

嗯,那真的是我热爱开始的地方。所以我后来自学了编程,因为我受到了这个的启发。但那也变成了,比如说这个项目,呃,再次缩放,太糟糕了,但这里的这个项目,在右侧,为 Ivy Park。所以这是 2016 年的一个项目。是我和一个工程师,是为了推出碧昂丝的运动休闲品牌。我们知道的是我们会有一大堆内容,对吧?我们就像,我们知道会有很多视频。我们知道会有很多图像。我们知道会有音乐和片段。呃,整个网站基本上就是把所有这些扔进一个桶里,然后它实时生成这个程序化视频。它从来不会重复。你可以做的是按住鼠标,它会在歌曲之间切换,它会带出动画和各种东西。但再次,这就像围绕大量内容设计一个系统来创造体验。所以,这一直是我个人实践的一部分。我的意思是,这个视频,这个非常旧的网站,来自 2018 年。嗯,我记得那个视频实际上是我屏幕的录制,因为我用代码构建了网站,对吧?我当时想,我要在做的时候用代码设计这个。这也大约是 Web 开发发生变化、React 被引入的时候。所以我在 2017、2018 年左右停止了编程。我当时想,我不能再构建东西了。让我们转向 React。但现在因为 AI,哦你好。呃,但现在因为 AI,我再次能够编程,在系统层面玩耍,创造制造其他东西的东西。你之前问我如何迭代让这个 marbles 更好。我从别的东西里扔了几个 picks,这就是它返回的结果。所以好一点了。它们仍然没有旋转,但呃

Um, and that's really where my love started. And so I then taught myself to code cuz I was inspired by this. But that also then became say for example this this project uh zooming again so terrible but this this project here on the right hand side for Ivy Park. So this was a project in 2016. It was myself and an engineer and it was for to launch Beyonce's athleisure brand. And what we knew is that we'd have a ton of content, right? We were like we know we're going to have lots of video. We know we're going to have lots of imagery. And we knew we'd have music and we'd have like clips. Uh, and this whole site was essentially all of those things dumped into a bucket and it generated this procedural video on the fly. It was never the same thing twice. And what you could do is you could press and hold the mouse and it would swap between songs and it would like bring up animations and all sorts of stuff. But again, it was like designing a system around a load of content to create an experience. And so, it's been something that's been like baked into my own personal practice. I mean, this this video here of this really old website uh from 2018. Um I remember that video is actually a recording of my screen cuz I built the site out in code, right? I was like, I'm going to design this in code as I'm doing it. And this is kind of around the time as well that the web development changed uh and React got introduced. And so I stopped coding in in like 2017, 2018 or something like that. I was like, I I can't build stuff anymore. Let's move to React. But now because of AI, oh hello. Uh but now because of AI, I am able once again to code and to play at the system level and to create things that make other things. You asked me earlier how I would iterate to get this marbles better. I dumped it a couple of picks from something else and and this is what it's coming back with. So it's a little bit better. It's still they're not rotating, but it's uh

Host

它正在接近,仍然在努力通过那个。不确定我会发布 marble oodles,但呃它会是的,呃是的,玩起来肯定很有趣。

it's getting there and it's still kind of like working its way through that. Not not sure I will ship the marble oodles, but uh it will be it's uh yeah, fun to play around with for sure.

Host

我想回到最初,关于 oodles,因为我确信很多人受到启发。我非常受启发,

I want to go all the way back for a second as it relates to oodles because I'm sure a lot of people are inspired. I'm very inspired,

Myles

但你看到最终状态,它可能有点令人生畏。我的意思是,现在这像是件大事。我有点好奇,你是否能谈谈你是如何开始的,甚至在你自己的思考中,关于这能成为什么,是否有转折点?也许你对那些看到这样的东西并说,伙计,你知道,我有机会在我自己的组织中填补一个更小的迈尔斯形状的洞的人有什么建议,也许那会是什么样子或如何开始,那种事情。

but you see the end state and it can be a little bit intimidating. I mean, this is like a big thing now. And I I guess I'm kind of curious if you could talk a little bit about how you started even like were there inflection points in your own thinking in terms of what this could become? Maybe any advice that you have for people who look at something like this and they're like, man, you know, there's an opportunity for me to maybe fill a smaller milesshaped hole in my own org and maybe what that could look like or how to get started, that kind of a thing.

Myles

我认为这一切都源于好奇心。呃,就像我之前在播客中说的,你问了一个问题,比如你为什么那样做?我的回答是我不知道,看看我能不能做到,对吧?我想我对大多数事情的回答是,我天生好奇,我想尝试看看会发生什么。所以一直有这些世界,对吧,嗯,外面的东西,比如 JavaScript 实验的控制器之类的,对吧?比如有一个很棒的叫做 DAT GUI,它插入到 3JS 中,你可以去着色器网站,使用它,玩着色器材质等等。所以所有这些东西以前都存在。但对我来说,转折点是真正决定如何让其他人尽可能容易地做到这一点,并且只思考想法。

I think all of it stems from curiosity. Uh like I said earlier in this podcast, like you asked a question of like why did you do that? And my answer was I don't know to see if I could, right? And I think that is my answer to most things is I'm curious naturally and I want to try and see what happens. And so there's always been these these worlds, right, of um stuff out there that's like a a controller for JavaScript experiments or whatever, right? like this is a great one called um DAT GUI uh which which plugs into to 3JS and you can kind of like go to like shader websites and you could use that and you can play around with shader materials and and whatever. And so all of that stuff has kind of been out there before. But the inflection point for me was really a determination of how can I make others able to do this as easy as possible and only think about the idea.

早期原型与演进 Early Prototypes and Evolution

Myles

所以当我最初开始做 oodles 时,它并没有今天的功能。今天它有类似多人协作的功能,对吧?你可以进来看到两个人在同一个画布上。这可能会出问题,因为我是用同一个用户配置文件登录的。所以它可能会不高兴,但让我们看看会发生什么。这样做。好的。你看,两个浏览器都更新了,对吧?所以它支持实时同步,但如果我是作为访客用户进入这个空间,它也能工作。早期它没有这些功能。它最初只是我在工具本身之外独立制作工具。我想,好吧,我能只做一个东西吗?所以我们最早做的东西之一就是这个,它现在还能用。但这是我们的一位设计师,娜塔莉。我们当时一起做一个项目,基本上需要创建一些图案,放在一些资产的背景里。所以我们把东西剪出来,放在这上面。我们当时想,好吧,我们能不能做一个东西,让和我们合作的团队能非常容易地制作这类资产?所以你可以改变不同的曲线之类的。到这一步,你可以把它下载为 SVG。我们还添加了一些基础动画和零碎的东西。所以我想,'好吧,这挺有意思的。'但痛苦的是,'好吧,所有这些控件都不怎么样。如果我们想导出放到这个里,我们还得再做一遍。'所以我想,'这里面哪些是可复用的?比如你反复使用、总是需要的是什么?'然后把它分解成那些基本部分。这就是它成长出来的方式,就是我们做的这个。然后我们想,好吧,我能做……我想我可能做的第二个现在就在这个更新后的格式里,因为这是 oodles 的另一件事,也是我为什么不能回到过去的原因,就是外壳。所以控制面板、预设、板子以及下面所有东西都会自动更新。所以当我发布新版本时,所有旧工具都会得到它。所以尽管这是最早的工具之一,而且再次,这就像好吧,我们对康威的生命游戏之类的东西感兴趣,比如我们如何创建不同种类的粘性世界之类的。所以这个就成了第二种工具类型。就像好吧,那看起来什么样?真的就是不断顺着线索拉。让我们玩得开心点。至少对我来说是开心的。

And so when I first started making oodles, it didn't have what it has today. What it has today is like multiplayer, right? So you can come in here and see like two people on a canvas at once. And this might not work because I'm logged in to the same user profile. So it might be unhappy about this, but let's see what happens. Do that. Okay. So you see that's updated across the two browsers, right? So it works in real-time sync, but it also works if I was like a guest user that came into this space. So it didn't have that back in the early days. It just started as I was making the tools independently outside of the tool itself. I was like, okay, can I just make one thing? So one of the very first things that we made was this, and it still kind of works. But this was one of our designers, Natalie. We were working on a project with each other where we essentially needed to create patterns that would go in the background of some assets. So we cut stuff out and it would sit on top of this. And we were kind of like, okay, can we make something that allows the team that we were working with to make these kinds of assets in a really easy way? And so you can change the different curves and stuff like that. And at this point, you could download it as an SVG. And we added some base animations and bits and pieces. And so I was like, 'Okay, this is pretty interesting.' But the thing that was painful was like, 'Well, all of these controls aren't fantastic. If we want to put an export into this, we're going to have to do it again.' And so I was like, 'What of this is reusable? Like, what do you use time and time again and always need?' And kind of broke it down to those fundamental parts. And that's what it kind of grew out of was this one here that we made. And then we were kind of like, okay, can I make... I think the second one that I maybe made is now in this updated format because that's one of the other things with oodles and why I can't kind of go back in time is the shell. So the control panel, the presets, the boards and everything down here that's automatically updating. So as I release new versions, all the old tools get it. So like although this was one of the very first tools and again this was like okay we were interested in Conway's game of life and different things like that of how could we create different kind of gooey worlds and whatever it was of this different stuff. And so this one was then the second tool type. It was like okay what does that look like? And it was really just a case of just constantly pulling on the thread. Let's have a bit of fun. Fun to me at least.

GitHub 活动与开发流程 GitHub Activity and Development Process

Host

你 GitHub 图表的变化相当令人印象深刻。

The shift in your GitHub chart is pretty impressive.

Myles

但你可以看到这里有 1,296 次提交,对吧?仅仅在 oodles 上。所以这要追溯到……我不知道。我不知道第一次是什么时候,但就像……是的。好的。让我们看看这个图表的起点是什么时候。我是在四月开始的吗?让我们看看。不。好的。我肯定是在那之后开始的。是的。好的,你可以看到这里 5 月 31 日。这大概是在……是的,我是在五月开始的,但你可以看到这里每天都有大量的提交。就是我和 Claude 一次又一次地添加东西。它期间遇到过问题。它已经有将近 200 个问题。所以每当有问题出现,我就让它提交一个问题,然后我会定期说,'好吧,扫描问题,看看有没有我们想修复的。'这包括它总结经验教训。所以你可以看到这里,这就像一个教训,对吧?它学到了发布的包可能在同一版本下落后于其源代码。验证产物,而不是源代码,不管那是什么意思。但它这里有一整套领域技能日志。所以这是更改领域相机手势。这就是它如何知道使用相机手势。所有这些都会被记录下来并随时间保留。仅仅通过拉取请求,对吧?所以你现在可以看到这就是发布的工作方式。所以你可以看到添加而不是形状。这是一个新工具。所以这是我在 oodles studio 里做的东西,那是 oodles 的下一个进化,不再是去 claude code 里使用,而是直接打开 oodles 应用,里面内置了聊天。你可以创建一个新工具,描述一个新工具,就像使用 claude 一样。这样做的原因是,今天设计师要使用 oodles,他们必须去终端。他们必须安装一些 homebrew 包之类的。这只是让它更容易一些。但它还做的一件事是,你只需点击发布。然后它就会发布到我们内部的某种架构中。所以你可以看到这里,这是我之前在 Noodle Studio 里做的。它已经部署到网站上了。只需点击一个按钮。作为设计师,我实际上不需要做任何基础设施方面的事情。所以就是不断顺着线索拉,好吧,如果发生这种情况呢?这就是最新版本的样子。就像好吧,我希望它非常容易使用。目前最大的障碍是你必须去终端安装一些东西,有些人不愿意这样做,而且我必须邀请人们加入 GitHub 仓库,不是每个人都有 GitHub。而这个则是,好吧,这是一个应用,安装一下就可以用了。这感觉就像 lovable 级别的简单,非常酷。

But you can see this has 1,296 commits, right? Just on oodles. And so this goes back I don't know. I don't know when the first one was, but like Yeah. Okay. Let's see if there's a when's the beginning of this chart. Did I begin it in April? Let's find out. No. Okay. I must have began it just after that. Yeah. Okay, you can see here 31st of May. This is probably around Yeah, I started it in May, but you can see this is just like the amount of commits there is every day. And it's just me and Claude adding stuff time after time after time. It's had issues over its time. It's had almost 200 issues. So like anytime something comes up, I get it to file an issue and periodically I'll be like, 'All right, scan the issues, see if there's anything that we want to fix.' And this is whether it's like coming up with lessons. So you can see here this is like a lesson, right? And it's learned that a published package can lag its own source at the same version. Verify the artifact, not the source, whatever that's on about. But it has a whole log of domain skills here. So this is the changing of like domain camera gesture. That's how it knows how to use the camera gesture. And this all kind of just gets logged and kept over time. Simply with pull requests, right? So you can see right now this is the way that publishing works. So you can see add instead of shapes. This is a new tool. So this is something that I made in oodles studio which is the next evolution of oodles which is instead of you going to claude code and using it in there you actually just open the oodles app and you have chat built in. You can create a new tool and describe a new tool just in the same way you use claude. The reason to do this is for designers to use oodles today, they have to go to the terminal. They have to install some homebrew packages and bits and pieces. This just makes it a bit easier. But one of the things that it also does is you just hit publish. And that just kind of publishes it out to an internal kind of architecture that we have. So you can see here, this is I made this one earlier in Noodle Studio. It's deployed it live to the site. And it was just at the click of a button. I didn't actually have to do anything as a designer of infrastructure wise. So it was just a constant pull on that thread of okay well what about if this happens and that's what this newest version is as well. It's like okay well I want it to be really easy for people to use. What's the biggest barrier at the moment is that you have to go to the terminal and install some stuff and some people don't want to do that and I have to invite people to a GitHub repo and not everybody has GitHub. Whereas this is okay here's an app just install it off you go and that's kind of it feels like lovable level simplicity which is very cool.

在 Metalab 的角色演变 Role Evolution at Metalab

Host

另一个快速背景问题,这是 Metalab 的自上而下的投资吗?比如 Sarah 和团队有没有来找你说,'嘿,Miles,我们希望你在这一领域开始探索。'还是完全是你自己的主意?如果是你自己的主意,你能不能谈谈你的角色形态是如何演变的?你知道,你显然花了很多时间在这上面。一千次提交,你在做一个 noodles 应用。我的意思是,你在 Metal 内部的工作到底是什么?因为看起来它可能和年初时截然不同,也许你甚至没有预测到自己会走这条路。

Another quick piece of context, was this a top-down investment at Metalab? Like did Sarah and the team come to you and say like, 'Hey, Miles, we want you to start exploring in this area.' Was it entirely yourself? And then if it was, can you just talk a little bit about like how the shape of your role has even evolved? You know, you're obviously spending a lot of time on this. A thousand commits, you're making a noodles app. I mean, like what is your job even inside of Metal? cuz it looks like it's probably hilariously different than what it was at the beginning of the year and maybe you didn't even predict this type of path for yourself.

Myles

是的,我认为这不是自上而下的。

Yeah, I think it wasn't top down.

Met Lab 的副项目 Side Projects at Met Lab

Myles

我认为在 Met Lab,我们普遍让所有设计师都能自主工作并交付项目。如果你能交付项目,你就很棒。所以所有这些实验,以及我或其他人做的其他零碎工作,都是副业。因此 Oodles 有一段时间成了我晚上的痴迷。对吧?就像,我能用 Oodles 做什么?我认为现在任何设计师能做的最强大的事情就是拥有副业项目,并且在这些副业项目中创造一些东西并学习,因为它会反馈到工作中。这就是我所做的。所以我从 Oodles 以及制作它的过程中学到了很多关于如何使用 AI 以及它如何在我的实践中运作的知识,现在我把这些带到其他工作中。

I think at Met Lab we are generally all the designers are enabled to work and be autonomous and deliver on their projects. And if you're delivering on your project, you are good. So all of these experiments and all the other bits and pieces that I or anybody else works on is side of desk. And so Oodles became an obsession of my evenings for a while. Right? It was like, what can I do with Oodles? And I think the most powerful thing that any designer can do right now is have side projects, and have side projects where they're creating something and learning, because it feeds back into the work. And that's what I did. So I learned a lot from Oodles and making it about how to use AI and how it works in my practice, and I now bring that into other bits of work.

Myles

例如,我之前提到的这个 markdown 编辑器,它有点进入 Figma,但也与 Storybook 同步。这是我们现在与一些客户合作过的事情,对吧?就像,我们如何从 Figma 中取东西,生成一个组件,并始终保持漂移受控。这又是一种——我一直对 Figma 和代码漂移感到恼火。我能对此做什么?大多数时候,我只是让 Claude 在后台运行,我会时不时检查一下。我会向它抛出一些想法。我会迭代一个新东西。我会把它玩出来,然后回去做我需要做的事情。但很多情况下,这只是玩一玩、发现一下。我认为这就是我们在 Met Lab 所有不同项目中每个人都在做的事情。

For example, this markdown editor that I mentioned earlier that kind of goes into Figma but also has like a sync with Storybook. That is something that we've worked on with some clients now, right? Is like, how can we take something from Figma, generate a component, and keep drift in check at all times. And that again was a kind of like—I've always been irritated by Figma and code drifting. What can I do about that? And most of the time I'd just have Claude in the background and I would every so often check in. I'd throw some thoughts at it. I'd iterate on a new thing. I'd play it out and then I'd go back to doing what I needed to be doing. But a lot of it has just been a case of like playing around and finding out. And that is what everybody is, I think, doing across all of our different projects at Met Lab.

Myles

人们做过一些令人难以置信的东西,我一直对此感到敬畏。所以我就在这里拉一个出来举例。我们的另一位设计师 Henry,当他面试我们时,他从未见过 Oodles,他做了这个,就像一个令人难以置信的资产转储。对吧。所以这个会加载。它会加载。是的,这是一个类似的东西,就像,好吧,我们可以在这里放入大量资产,我们可以改变视差中不同事物的强度,还有网格和列。或者我们可以——他做了这些浮动药丸形状的,如果它能加载的话,但它没有。是的,好了。就像这些浮动药丸形状的,比如我们可以用这些来制作社交资产吗?比如这是不同的东西吗?这又是 Henry 在业余时间做的。

There's some incredible stuff that people have worked on that I'm kind of in awe of all of the time. So I'll just pull one up here for example. So one of our other designers, Henry, when he was interviewing with us and he'd never seen Oodles, he made this which was like an incredible asset dump. Right. So this is going to load up. It's going to load. Yeah, this is a similar thing of like, okay, we can just put tons of assets in here and we can change the intensity of different things in parallax and again like grids and columns. Or we can—he made these floating pill ones if it wants to load which it doesn't. Yeah, there we go. Like these floating pill ones of like could we use these to make like social assets for example? Like is this a different thing? And this was again this was just Henry in his spare time made this.

Myles

他最近做的另一件事是——这是一个他为女朋友做的精彩网站,这是他们的狗,你可以,你知道,就像它都是程序化生成的。我想他今天早上刚加了这顶帽子。让我们惊喜一下。但你可以四处走动,它有一个小地图,你可以跑,你可以捡东西。所以这里有一根棍子,你得捡起棍子。哦是的,拿起棍子,然后它会告诉你去哪里放下它。再说一次,这只是他在业余时间做的东西,美丽、有趣、迷人。

Something else that he made recently is—so this is this wonderful website that he's made for his girlfriend and this is their dog, where you can, you know, like it is all kind of procedurally generated. He's just added this cap this morning I think. Let's take a surprise. But you can walk around and it's got like a mini map and you can run and you can pick things up. So over here's a stick and you got to like pick up the stick. Oh yeah, take the stick and then it kind of tells you where to go and drop it. And again, this is just something that he's made in his spare time that's beautiful and fun and charming.

Myles

其他人,比如 Lorenzo,我们的另一位设计师,做了 Beno,就像所有这些交互式组件,超级有趣。是的。所以,这是我们的设计师之一 Natalie。她为她的伴侣做了一个应用,他经营一家小型建筑公司。他必须做的一件事就是总是进去估算房间的尺寸,这可能需要你知道 30 到 45 分钟之类的。所以她为他构建了一个应用,让他可以 just 这样做。所以现在他可以走进一个工作现场,进行所有这些测量,这帮助他完成所有的规划。

Other people like Lorenzo, who's one of our other designers, has made Beno, which is like all of these interactive components, which is super interesting. Yeah. So, this is one of our designers, Natalie. She made an app for her partner who runs a small building company. And one of the things that he has to do is like always go in and estimate the measurements of a room and it can take like you know 30 to 45 minutes or whatever. And so she built him an app that allows him to just do that. And so now he can walk into a job and he can take all these measurements and it helps him do all of his planning.

Host

我昨晚正试图做这个。我不骗你。我昨晚正试图做这个,我当时想,天哪,我不想拿出卷尺,但我没有。我明白,老兄。

I was trying to do this last night. I kid you not. I was trying to do this last night and I was like, man, I don't want to get a measuring stick out, but I didn't. I get it, man.

Myles

另一个非常酷的是,我们的设计师之一 Adam,他最近有了一个孩子,所以他为自己做了一个小应用,帮助他跟踪婴儿记录,对吧?比如记录睡眠和所有那些事情。这是他做的一个应用,它在应用商店上,你可以使用它。所以副业项目非常强大,并且非常受鼓励。

Another really cool one is like one of our designers, Adam, he recently had a baby and so he made himself a little app which helps him keep track of baby tracking, right? Like logging sleeps and all of those kinds of things. And this is an app that he made and it's on the app store and you can use it. And so side projects are super powerful and are very encouraged.

Myles

同时,有些人在做——所以我可以展示这个。这是 Marcus 做的这种——在 Met Lab,我们有这个相同想法的三四个不同变体,就像一种快速构建屏幕的方法,因为我们总是像调出低保真原型,对吧?并注释它们并交给客户。所以这是一个你可以组装零件套件的地方。你可以缩小并看到不同的屏幕,看看原型的样子。它有介绍,所以这是 Marcus 构建的一个完整的原型工具。其他设计师也有类似的版本。所以我们都在这些不同的项目上,解决不同的问题,并试图找出解决方法。

At the same time there are people making—so I can show this one off. This is Marcus who has made this kind of—and at Met Lab we have like three or four different variations of this same idea which is like a way to build out screens really quickly because we're always like dialing up prototypes at low fidelity, right? And annotating them and handing them off to clients. And so this is one where you can assemble kind of kits of parts. You can zoom out and see different screens and see what the prototype looks like. It's got intros and so it's a full prototyping tool that Marcus has built out. And other designers have like a similar version of this. And so we're all on these different projects running at different problems and trying to figure out ways of doing it.

Myles

我认为这就是与内部团队如此不同的地方,在内部团队中,你靠的是,好吧,找到最可行的路径,大家现在都去做,围绕它同质化,然后就像这是做事的方式。

And I think that's what's so different to in-house is in in-house you thrive on, okay, find the most viable path, everybody go do it now, homogenize around it, and kind of go like this is the way to do it.

Host

我们甚至还没到那个阶段。我们还在说,

We're still not even at that stage. We're still going,

Myles

我们还能做什么,对吧?所以每个人总是在创造新事物,想出一些东西来玩,这超级有趣。这不是自上而下的。

what else can we do, right? And so everybody is always creating new things and coming up with stuff to play around with, which is super fun. It's not top down.

Myles

我的角色是设计总监。所以我的主要职责是始终照看客户工作,并确保每个人都开心。但我通常承担的一件事就是对一切保持好奇,并与人们分享,看看这会导向哪里。所以我有的其他东西,例如,这是一个我和另一位设计师在内部维护的小网站,叫做 Field Notes,它只是关于设计和 AI 的学习。所以我会做一个,嘿,这是如何使用 GitHub,这是一个使用它的小指南,或者我会去测试一下什么是设计 MD 文件,这是一个展示它如何工作的大东西,并运行一个实验来展示这一点。所以我只是好奇、修补并与人们分享。所以我的角色有点变成了这样。但它的核心仍然是项目工作,确保项目是好的。

My role is I'm a design director. So my primary responsibilities are to always look after client work and make sure that everybody is happy. But one of the things that I take up generally is just being curious about everything and sharing it with people and seeing where that leads to. And so other things that I have for example are like this is a little site that me and another designer keep internally which is called Field Notes and it's just learnings about design and AI. And so I'll make like a hey here's how you use GitHub and it's a little guide to use it or I'll go off and make a test of like what is a design MD file and this is like a big thing of showing how it works and ran an experiment to show that. And so I'm just curious and tinkering and sharing it with people. So my role has kind of become a little bit of that. But still at the core of it is project work and making sure that projects are good.

Host

你知道,这很有趣。

You know, it's funny.

对好奇心与韧性的反思 Reflections on Curiosity and Resilience

Host

过去一年半里,随着 AI 的热度以另一种逃逸速度飙升,我采访过很多设计负责人,人们不断谈论好奇心的价值,以及这是他们看重的东西。而我觉得这里有一点落差:它实际上到底是什么样子?很好,我们谈了那么多好奇心,而这一整期节目讲的就是这个,我真的很感激,因为看到你对待工作的方式,看到你养成的那种条件反射式的反应——“我想知道我能不能做这件事,所以我就应该去做”。这多酷啊?还有它把你带到的那些不同的地方,这真的非常鼓舞人心。你的工作真的非常非常令人印象深刻,我很感激你今天给我们讲了这一切的幕后故事。

I've interviewed a lot of design leaders over the last year and a half, when the AI uptick has hit a whole other escape velocity, and people are constantly talking about the value of curiosity and how that's something they look for. And I felt a little bit of a gap in terms of, you know, what does it actually look like? Great, we've talked about curiosity so much, but that's what this entire episode is, and I'm really grateful for it, because just seeing the way that you approach your work, seeing that knee-jerk reaction that you've developed of like, "I wonder if I can do this, therefore I should do it." How cool is that? And all the different places that it's led you, and this is just incredibly inspiring. Your work is really, really impressive, and I appreciate you giving us this behind the scenes of everything today.

Myles

非常感谢,我真的很感激。我觉得对设计师来说,现在是最令人兴奋、也最令人恐惧的时代,我认为这两件事可以同时成立,而这让人极其不适,也极其艰难。但如果你有好奇心,如果你有韧性,如果你适应力强,如果你尽最大努力专注于你今天能做什么、你今天能改变什么——别太担心明天,对吧?你未必能控制那么多。昨天发生的事已经过去了。我每天大概就是这样做的:“嘿,我今天能做什么让我的工作更好、让我同事的工作更好、去帮助别人、去发现点什么?”只要带着这种精神,我觉得你就能走得很远。

Thanks so much. I really appreciate it. I think it has never been a more exciting and more fearful time to be a designer, and I think both things can be true, and that's incredibly uncomfortable and it's incredibly difficult. But if you are curious, if you are resilient, if you're adaptable, and if you try as hard as you can to focus on what you can do today and how you can change today — don't worry too much about tomorrow, right? You can't necessarily control that too much. What happened yesterday is gone. And that's kind of how I go about things every day: "Hey, what can I do today to make my work better, to make my colleagues' work better, to help people, to find something out?" And just kind of take that spirit, then I think you'll go a pretty long way.

Host

我想不出比这更好的方式来结束这一期了。所以,谢谢你,Myles。

I can't think of a better way to end this episode. So, I appreciate you, Myles.

Myles

非常感谢,我很感激。

Thanks so much. Appreciate it.

结尾与电台推广 Outro and Radio Promo

Host

嘿,如果你喜欢这一期,别忘了每周四我都会和 Tommy Gio 一起直播 Dive Radio,我们会深入探讨热门话题,并聆听业内众多出色的设计师分享。所以,如果你想把它加到日历里,就去 dive.comclub/radio。我们周四美国东部时间下午 4 点见。

Hey, if you enjoyed this episode, don't forget that every Thursday I go live with Tommy Gio for Dive Radio, where we deep dive into trending topics and hear from a ton of incredible designers in the industry. So, if you want to get that on your calendar, just go to dive.comclub/radio. And I'll see you on Thursdays at 4:00 p.m. Eastern.

互动版:逐字朗读 + 针对本期提问 →