打造让你入职顶尖初创公司的作品集

要打造一份能让你被如今顶级初创公司录用的作品集，需要具备哪些条件？

What does it take to create a portfolio that gets you hired at one of today's top startups?

我对它想要呈现的样子和给人的感觉有一个大致而模糊的想法，然后就是不断迭代、迭代、再迭代，最后再回来看什么感觉是对的。

I had this general, quite blurry idea about what I wanted this to look and feel like, and then it was just a case of iterate, iterate, iterate, iterate, and then come back and see what feels right.

我们该如何挑战以往对个人网站的固有看法，去创造一种真正脱颖而出的体验？

How can we challenge the way that we've historically thought about personal websites in order to create an experience that truly stands out?

我甚至不一定展示如何进入案例研究。更像是，我希望你去探索。我希望你拥有这种体验，希望你能感受到那种用心程度，你知道吗，即使你不去打开那些案例研究，对吧？即使你不点击那个东西去看看 Docifi 的案例研究，我也完全没问题。

I don't even really show how to get to the case studies necessarily. It's more just like I want you to explore. I want you to have this experience and I want you to feel the level of care, you know, even if you don't go to any of these case studies, right? Like even if you don't click on this thing and go and visit the Docifi case study, I'm okay with that.

欢迎收听 Dive Club。我是 Rid，在这里设计师永远不会停止学习。上个月，Lovable 的设计主管 Nad Shishi 带我们回顾了他最近招聘的一位设计师 Matt Sellers 的作品集。所以，我想和 Matt 聊聊，了解他是如何将他的网站变成现实的幕后故事。他分享了一些非常实用的思维模型，我认为每个设计师都能从中受益，而且光是听他说话就非常清楚，他的网站就是他作为设计师的表达。所以首先，我想问 Matt，他在这一版作品集中有意做了哪些不同的事情。

Welcome to Dive Club. My name is Rid and this is where designers never stop learning. Last month, Nad Shishi, the head of design at Lovable, walked us through the portfolio of one of his recent design hires, Matt Sellers. So, I wanted to catch up with Matt and get a behind the scenes of how he brought his website to life. He shares some really practical mental models that I think every designer can benefit from, but also just listening to him talk, it's so clear that his website is an expression of who he is as a designer. So to start, I wanted to ask Matt what he intentionally did differently with this version of his portfolio.

所以我想，如果回到我之前的作品集，它主要是极其功能性的。它只是一个落地页，就像单页，顶部有一点关于我的信息，然后就是一些不同的区块，列出我的项目，还有一个按钮会把浏览者带到案例研究。所以没有微交互，也没有动画。想象一下就像印刷出来的作品集，对吧？你翻一页、两页，就这样。而我这一版作品集的目标是把它真正当作一种体验，你知道吗？我希望作品集的访问者能看到那种用心、关注度和对手艺的专注。我也希望确保我把重点放在自己最引以为傲的工作上。我觉得我之前的作品集总是尽量塞进尽可能多的东西。我可能放了 20 年前某份工作里的作品，但它和今天相关吗？可能不相关。而这一版作品集，实际上是关于我能删掉多少东西，我会说这是一个做减法的策略。所以，在我甚至还没考虑作品集里要放什么之前，我就砍掉了大概 75% 的作品。然后在那剩下的 25% 里，我又砍掉了一半。对吧？所以你看到的是我本可以展示内容的 12% 或 13%。这个数字有点残酷，但我觉得很有必要。过程细节完全消失，是刻意省略的。关于影响力的指标，也没了，对吧？尽管有些人会说，那你如何展示你创造的价值？但我很清楚，手艺是我唯一想展示的东西。我心里在想，如果我不能给你看漂亮、有想法的作品，那么再多的过程解释也救不了我。所以我希望访问我作品集的人能立刻感受到那种用心，而这可能就是我核心原则或目标之一。

So I think if I can go back to my previous portfolio, it was mainly, you know, extremely functional. It was just a landing page, like a single page, a little bit about me at the top, and then just some different blocks which were outlining my projects with a button that would take the viewer to the case study. So there was no micro interactions, there was no animation. Imagine a kind of like printed portfolio, right? You're going like one page, second page, you know, and so on. Whereas like my goals for this portfolio was to really treat it like an experience, you know? Like I wanted visitors of this portfolio to see the level of care and attention and the focus on the craft. And I also wanted to make sure that I focused on the work that I was most proud of. I think my previous portfolios have kind of always been stuff as many things as I can into those, you know. I might have had work that was from like a job from 20 years ago, you know, which like is it relevant to today? Probably not, you know. And I think with this new portfolio, it was really about how much can I remove, you know, like I would say it was a strategy of subtracting. So, you know, I cut probably 75% of my work before I even thought about what was going to exist in the portfolio. And then of that kind of 25% that remained, I probably cut half again. Right? So you're seeing 12, 13% of what I could have shown. The math is kind of brutal, but I feel like it's necessary. You know, the process details completely gone. You know, deliberately left out. The metrics, you know, like around impact gone, right? Even though some people would say, how are you showing the value that you created then? You know, but it was a conscious decision that craft was like the only thing that I wanted to showcase. In my mind I was thinking if I can't show you beautiful thoughtful work then no amount of process explanation is going to save me. You know it's like I wanted the people visiting my portfolio to immediately get that feeling of care which yeah was probably one of the like core tenets or goals I would say.

非常快的消息，然后我们继续。如果你和我一样，那么你会知道给设计添加动效是让它们显得高端的最简单方式。问题是，我不是动效设计师。但这就是为什么 Jitter 新的 AI 头脑风暴功能彻底改变了游戏规则。我只要放入我的设计，就能立刻获得动效创意，然后我可以调整、优化，并把它变成自己的。用 Jitter 给作品添加动画真的太简单了。我怎么推荐都不够。今天就前往 dive.club/jitter 试试吧。

Real quick message and then we can jump back into it. If you're like me, then you know adding motion to your designs is the easiest way to make them feel premium. The thing is, I'm not a motion designer. But that's why Jitter's new AI brainstorm feature is a game changer. I just drop in my design and then get instant motion ideas that I can tweak, refine, and make my own. It's seriously so easy to animate your work with Jitter. I cannot recommend it enough. Just head to dive.club/jitter to try it out today.

你可能已经听说过 Paper 的着色器。感觉每次打开 Twitter，我都会看到有人在创造某种漂亮的半调效果。但你知道吗，Paper 在设计时使用的是真实的 CSS？这意味着你的布局已经就是代码。所以你只需一键复制为 React，然后粘贴到你选择的编码智能体里。Paper 每周都在发布更多核心编辑器功能。我越来越清楚地意识到，这就是设计工具的未来应该有的样子。所以，如果你还没试过，前往 dive.club/paper 并开始设计吧。

You probably already know about Paper's shaders. It feels like every time I open up Twitter, I see somebody creating some new beautiful halftone effect. But did you know Paper uses real CSS as you design? That means your layouts are already code. So you can just one-click copy as React and paste into your coding agent of choice. Paper is shipping more of their core editor every single week. And it's becoming so clear to me that this is what the future of design tools should look like. So, if you haven't tried it yet, head to dive.club/paper and start designing today.

好了，现在继续正片。

Okay, now on to the episode.

在我之前的作品集里，我可能有案例研究带一张图片和一段解释的文字，里面可能有过程、策略、价值，比如我跟用户交流，他们发现了某件事，然后我们如何据此行动，以及我们创建的解决方案等等。但这一版作品集，每个案例研究只有一段引言，对吧？它们非常刻意，我为这些引言费尽心思，对吧？但之后，就纯粹是作品了。除了那段引言之外没有任何文字，这是有意的选择。在我之前的作品集里，我会在这张图片下面放一段文字，可能解释我们通过用户测试发现的指标，以及我们为什么构建这个页面、为什么专注于这些特定的卡片等等。但只有最精华的内容才出现在这些页面上。每张图片的选择都基于一个问题：它是抬高了标准，还是拉低了平均水平，对吧？我记得你自己和 Nad 提到过，不要制造可能让自己被否定的暴露面。

In my previous portfolios, I might have had the case studies with an image and a paragraph explaining it, and it might have been the process, the strategy, the value, like I spoke to users and they found out X Y Z thing and this is how we acted on it and this is the solution that we created and stuff. But for this new portfolio, there's just an intro paragraph for each case study, right? They were extremely intentional and I obsessed over these, right? But after that, it's literally just work. There's no text beyond that intro paragraph, and that was an intentional choice. In my previous portfolios, I would have had a piece of text underneath this image and maybe it was explaining the metrics that we found via user testing as to why we built this page and why we focused on these particular cards and so on and so forth. But only the cream of the crop made it onto these pages. Every image was selected with this question of does it raise the bar or does it lower the average, right? I think yourself and Nad had mentioned something around not creating surface area that might disqualify yourself.

我认为对于作品集，你希望作品成为主角，而不是作品背后的过程。如果你展示过多过程，你可能会传达错误的信息。我仍然对你说的关于你几乎不想制造暴露面让别人挑毛病的话有所思考。并不是越多越好。我认为这是这次对话中一个非常有趣的收获。而且我认为这非常重要，对吧？你添加到作品集中的每一样额外的东西，都是让别人产生‘不太适合我’、‘那不太符合我的期望’之类的想法的机会。

I think for a portfolio, you want the work to be the hero rather than the process behind the work. I think you can give signal on the wrong things if you show too much process. I'm still kind of stuck on what you said about how you almost don't want to create surface area for people to poke holes in. It's not more is not always better. I think that's like a really interesting takeaway from this conversation. And I think that's super important, right? Like every extra thing that you add to your portfolio is like a chance for someone to think not quite for me. That didn't quite meet my expectations or something, you know?

所以，我想要的基本上是零废话，就像纯粹的信号，这些才是作品集里值得展示的东西。

So, I wanted like zero fluff essentially, just like pure signal like these are the things which matter to show in the portfolio.

和 Nad 聊完，我最大的收获是：要思考你作品的平均值，而不是总和。听到你如何刻意地删了两次，太不可思议了——我自己以前也有过老网站，总想着要把作品集的分量和规模都传达出来。但 Nad 说的是，你很容易给出一个负面信号。所以，痴迷于把每一条拿出去的信息做到极致，显然奏效了。现在再听到你当时是多么刻意，这是我为下一份作品集做规划时最重要的心得。

You know, the main thing I took away from that conversation with Nad was the importance of thinking about the average of your work rather than the sum of your work. Hearing how intentionally you cut things down twice—it's amazing, because I've definitely had old websites too where I think I need to communicate the gravity and scale of my body of work. But Nad was saying that you can easily give a negative signal. Obsessing over the quality of each signal you put out obviously worked. And now hearing how intentional you were is definitely the main thing I'm taking away in terms of how I'd strategize a new portfolio.

我还想指出这一段，这个小引言部分。我们来聊聊它。

Something else I'd like to point out is this paragraph, this little intro section. Let's talk about it.

让我把话说清楚，这完全是一件出于热爱的事。整个作品集，我大概花了三到四周，完全痴迷于此。我在这里明确地针对某一类人设计。我不是为 HR 里的普通人或招聘人员设计的，而是为经验丰富的设计师或设计招聘经理设计的——就是那些一看就懂的人。而这个引言段落正是其中的核心。我在主页上这段主要简历上熬了好几个晚上，尤其是那句关于 12800% 缩放的。我知道我想要一些带点俏皮的东西，那种“懂的人自然懂”的感觉。因为它与我能产生共鸣的那类人有着深刻的特定关联。一个在设计工具里摸爬滚打过的人会完全理解。我想了很多种不同的变体：12800% 缩放、“存储为 Web 所用格式”的线索——老 Photoshop 用户肯定记得、图层样式因果、智能对象套娃，所有这些想法都在里面翻腾。但最终我选择了这一版，因为它仍然带着“懂的人自然懂”的气息，但又可以推广到任何设计工具。它具体到有意义，但又不会过于内行，让人觉得排斥。当有人读到时能立刻在脑海中浮现出 Adobe 的界面，这对我来说特别有趣。但我觉得这正体现了优秀微文案的作用——它创造了那些连接，对吧？它不只是为了聪明而聪明，而是某种共同经验的信号。你在这段简介里看到的每一个字，我花的时间长到我自己都觉得不好意思。另外，它之所以是这个长度，是因为这个东西有一个非常具体的尺寸。那一切都是因为所有元素必须对齐——bento 网格是一种特定的排列方式。所以，确实有很多方面。还有像这种地方，我又用了一次删除线，这是另一个小俏皮的地方。别人可能会直接改掉那个词，删掉“热情”，只留“痴迷”。但我觉得这算是一种自我审查，但与此同时，我把它当作另一种方式来让人明白：你可能会对某件事有热情，但还有另一个层次，那就是对某件事痴迷。设计师们会产生共鸣。所以，这整段话就是和阅读它的人对话。懂的人自然懂。

Just to put into perspective, this was a labor of love. I spent probably three to four weeks absolutely obsessing over this entire portfolio. I was explicitly designing for a particular type of person here. I wasn't designing for a random person from HR or a recruiter. I was designing for someone like an experienced designer or a design hiring manager—someone who would just get it. And this intro paragraph is a core piece of that. I obsessed for nights over this main bio paragraph on the homepage, especially the line about 12,800% zoom. I knew I wanted something that was sort of tongue-in-cheek, an 'if you know, you know' type thing, because it's deeply specific to a type of person I resonate with. Someone who's been in the weeds in a design tool would totally get it. I went around the houses with different variations. You know, 12,800% zoom, the 'save for web' clue that Photoshop users from back in the day will remember, layer style karma, smart object inception—all these things were bubbling away. But ultimately, I went with this one because it still has that vibe of 'if you know, you know,' but it could be extrapolated to any design tool. It's specific enough to be meaningful, but not so inside baseball that it feels exclusionary. And the fact that someone can immediately visualize the Adobe UI when they read it is funny to me. But it's an example of what great microcopy does—it creates those connections. It's not just clever for clever's sake; it's a signal of some kind of shared experience. Every word in this bio—it's embarrassing how long I spent tweaking it. Another reason it's the length it is: there's a very specific size this thing exists as. That's because everything had to line up—the bento grid is a specific way. So yeah, there were lots of aspects. And this kind of stuff—using a strikethrough again is another little tongue-in-cheek thing. Others might just change that word, get rid of 'passion' and leave 'obsession.' But I think this is kind of self-censoring, but at the same time, I'm using it as another way for someone to think, 'Okay, I get this. You can be passionate about something, but there's another level where you're obsessed with something.' Designers can resonate with that. So this whole paragraph is supposed to be a conversation with the person reading it. And the people who get it, get it.

看到 Nad 也提到它，你可能感觉特别好吧，因为那是他提到的第一个让他产生共鸣的东西。这个审美非常干净，所以这是一个服务于内容的设计，内容本身也很到位。我记得我读的时候——那句“20 年经验，在 12800% 缩放下度过”——我脑海中立刻浮现出 Adobe 套件和 Photoshop，我就像在脑子里打印出 12800% 一样。所以，内容很好，一点也不空洞，直击要点，信号密度很高——这让我有点好奇，你在设计这个作品集时，把目标公司缩小到了什么范围？你当时有考虑这一点吗？它是否和你决定把作品集做得非常注重工艺感相关？还是说这不是一个考虑因素，你仍然在试图吸引所有人？

It probably felt so good then to see Nad talk about it, because that was the very first thing he mentioned as resonating with him. The aesthetic is super clean, so this is a design that serves the content, and the content is on point as well. I remember even reading through—and it was the 20 years of experience spent at 12,800% zoom—I just had this... I could picture the Adobe suite and Photoshop, and I was literally printing 12,800% in my head as soon as I saw that. So the fact that the content is great, completely not fluffy, to the point, super high signal—which then makes me wonder, how much did you narrow down the type of company you were designing this to appeal to? Was that something you were thinking about, and did it tie in with the decision to go very craft-forward? Or was that not really a factor and you were still trying to appeal to everybody?

不，我觉得这同样是非常刻意的。我在做这个作品集时，就是针对一个非常特定类型的人和非常特定类型的公司。我希望把它分享给那些在意工艺、质量和细节的人。不是那种“哦，我们在乎设计”——不是，而是设计是我们的核心价值观。我构思这个作品集时，想到的就是 Linear 和 Vercel 这类公司。它应该达到那种水平。在这里，把每一个细节都抠到位非常重要。而且我把自己想象成一个已经身处那种公司的设计师，思考他们会怎么做。我来自——这么说会暴露年龄——但我来自设计的早期阶段。比如 2000 年代末的 Twitter：James McDonald、Benjamin Deco、Daryl Jin、Skullface，所有这些我完全共鸣的人。Dribbble 和 Forrst 的早期岁月，是我设计人格中非常重要的一部分，我从那些人身上汲取了大量灵感。即使是今天，比如这个作品集，我也在从所有这些不同的灵感来源中汲取。有些人可能从中看到 Daryl 的那种无尽内容或神级网站，或者 James McDonald 对阴影和渐变细节的执着。你从主页就能看出来。我甚至没有真正展示如何进入案例研究；更多是“我希望你去探索”。

No, I think again this was extremely intentional. When I was putting together this portfolio, it was for a very specific type of person and a very specific type of company. I was hoping to share it with people who care about craft, quality, and attention to detail. It's not just 'we care about design'—no, it's design as a core value of the business. And it's kind of like the Linear and Vercel of the world that I was imagining when creating this portfolio. This could be at that level. Sweating every detail was super important here. And I was putting myself in the shoes of a designer already embedded in a company like that, wondering what they might do. I come from—this will age me a little bit—but I come from the early days of design. For example, late 2000s on Twitter: James McDonald, Benjamin Deco, Daryl Jin, skullface—all these people I completely resonate with. Those early days of Dribbble and Forrst are so much a part of my design personality, and I draw a lot of inspiration from people like that. Even today, for example, with this portfolio, I'm pulling from all these different sources of inspiration. Some might look at this and see Daryl with his endless stuff or godly website, or James McDonald with his attention to detail around shadows and gradients. And you can see it here just from the homepage. I don't even really show how to get to the case studies necessarily; it's more just 'I want you to explore.'

我希望你体验到这种感受，感受到那种用心程度。哪怕你不去看这些案例研究——哪怕你不点进去看 Docify 的案例——我都没关系。我只是希望，你能感受到我在首页作品里倾注的那种用心和细节。

I want you to have this experience and feel the level of care, even if you don't go to any of these case studies. Even if you don't click on this and visit the Docify case study, I'm okay with that. I wanted to have the same level of care and attention to detail that I put into the work on the homepage.

嘿，插一句。如果你想加入像 Lovable、11 Labs 以及我非常喜欢的一些初创公司，Talent Network 是免费加入的。去 dive.club/talent 就行。好了，回到正题。我觉得这就是为什么我很感激你多次使用“体验”这个词，因为这个首页确实是一种体验。你作品的容器在某种程度上就是展示本身。这是我在一些最喜欢的作品集里总是注意到的特质。太多人仍然沿用旧的思维模式，认为你的网站几乎必须是一个你所有单个作品项目的静态目录。而你所做的核心就是如此——你说过，‘不，我要做一个能涵盖我作为设计师身份的一整页。’而且我喜欢这里没有 CTA。我很喜欢。这是我最喜欢的部分之一，因为它鼓励探索，真正进入你所策展的体验细节。对我来说，从很高的层面看，这将是我做作品集时的北极星。我觉得你在这里做到了。

Hey, real quick. If you want to get hired at companies like Lovable, 11 Labs, and some of my favorite startups, the Talent Network is free to join. Just head to dive.club/talent. All right, back to it. I think that's why I appreciate that you've used the word experience a few times, because this homepage is truly an experience. The container for your work is kind of the show in a way. And that's a trait I always noticed in some of my favorite portfolios. Too many people still work off of this old mental model where your website has to almost be a static catalog of all of your individual portfolio projects. And that's the main aspect of what you're making, where you said, 'No, I'm going to make a page that encompasses who I am as a designer.' And I love that there are no CTAs. I love it. It's one of my favorite parts because it encourages this exploration and really getting into the details of the experience you've curated. For me, at a very high level, that would be the northstar for how I'd want to approach a portfolio. And I think you nailed it here.

谢谢。设计不一定是我的工作，它就是我自己。我的个人工作室叫 Life is Good，简称 LFSGD。我来自那个年代，那时候流行不留元音。所以就是 Life is Good 去掉元音，对吧？但这确实就是我的感受。每天醒来，我都能做我爱的事，而且还能靠这个赚钱。所以说，生活很美好，你懂吗？回到你刚才说的，这个作品集不只是一个职业产物。它非常个人化，反映的是我的理念、价值观和痴迷。我希望它能传达出这一点，不管看到它的是招聘经理、潜在客户，还是在社交媒体上发现我的人。所以我才把 90% 的时间花在那些大多数人可能根本注意不到的细节上。但我就是控制不住。以那种用心程度去创造某样东西，本身就是一种极大的满足。

Yeah, I appreciate that. Design isn't what I do necessarily; it's who I am. My solo studio is called Life is Good, or LFSGD. I come from the era where it's cool to basically have no vowels. So it's just life is good without the vowels, right? But that's genuinely how I feel. Every single day I wake up and get to do what I love, and somehow I get paid for that. So life is good, you know? But going back to what you were saying, this portfolio isn't just a professional artifact. It's something deeply personal, a reflection of my philosophy, my values, and my obsessions. I wanted this to emanate that, whether it's a hiring manager, a potential client, or someone that finds me on social media. That's why I spent 90% of my time, let's say, on details that most people might not even notice. But I just can't help myself. The act of creating something with that level of care is just very fulfilling.

好，那现在就是你的机会，用你的手电筒去照亮这个作品集，让成千上万的设计师都能看到。跟我们讲讲那些你觉得人们可能会完全错过、但它们正是这个作品集表达自我的好标志的细节吧。我们就来聊聊这些硬核的东西。你在哪些地方花了几乎不必要的时间？

Okay, this is your chance then to shine a flashlight that thousands of designers will use to view this portfolio. Talk about some of the details that you think people might totally miss, but they're a good sign of what it looks like for this to be an expression of yourself. Let's just get nerdy. Where were you spending an almost unnecessary amount of time on this site?

当然。这个精选作品部分，你只要悬停在这上面，就能看到项目列表。我现在做的是这种磁吸效果。这里面有很多你第一眼不会注意到的细节。我觉得普通访客可能只是悬停一下，看到标题变成蓝色。但如果你仔细观察，这些图标也在变化——它们的描边成了品牌色，而且还有非常微妙的渐变色，从白色过渡到品牌色。还有那些内阴影，全都呼应了悬停状态的颜色。所以是超级刻意的。我可能在这些东西上纠结了太久。但这只是一个例子。所有这些微小的细节都有助于营造这种整体的品质感。然后当我们看到这个交互时——很不幸，这里有点小问题，对吧？我不知道这个动画怎么了，但这是另一个例子。我花了很多时间来完善你现在看到的这个状态。它本质上是在模拟一个文档扫描仪：文档进去，被扫描，然后变成某种炫酷的数据粒子出来。我大概花了三天时间才把它做好。光是这个扫描仪，我在 Figma 里就画了很长时间。而且这还是在设计工具自带页面模板之前。事实上，也许我可以给你看看那个。

Yeah, for sure. This selected work piece—just hovering on this and seeing the list of projects. I'm creating this now with this kind of magnetic effect. There's a lot of detail here that you immediately wouldn't notice. I think the general person visiting the site might just hover here and see that the title changed to blue. But if you look extremely closely, these icons are changing—the stroke around them is the brand color, and there's a really subtle gradient from white to the brand color. There are also inner shadows that all reflect that hover state color. So super intentional. I probably obsess way too long over those things. But that's just one example. All of those minute things help sell this overall feeling of quality. Then when we see this interaction here—unfortunately there's some bugginess here, right? I don't know why this animation is broken—but this is another example. I spent a lot of time perfecting this state that you're seeing right now. It's essentially mimicking a document scanner: documents go in, get scanned, and come out as some kind of fancy particles of data. I probably spent three days getting this right. Just this scanner alone took me a super long time to draw in Figma. And this is before design pages came along. In fact, maybe I can show you that.

好，请讲。我正想看你展示那个。那其实是我下一个问题——你是如何把其中一些东西变成现实的。这非常惊艳，让我很好奇你用了什么工具、什么流程？

Yeah, please. I'd love that. That was actually going to be my next question—kind of how you brought some of this stuff to life. It's super impressive and it makes me wonder what tools, what processes did you use?

在过去的 15 年里，我每天都在设计产品，但在最近 6 个月里，一切都变了。有了 AI 的加入，我比以往任何时候都更快地产出创意。但如果我得不到让团队对齐所需要的反馈，这些都毫无意义。而现在，获取异步反馈仍然有点糟糕。所以，我在打造我一直想要的产品，它叫 Inflight。我每天用它来分享想法并获取团队反馈，它彻底改变了我的工作方式。所以我很激动能给你看看。现在，我只对 Dive Club 的听众开放。所以去 dive.club/inflight 抢占一个名额吧。

I've been designing products every day for the last 15 years, but in the last 6 months, everything has changed. With AI in the mix, I'm cranking out ideas faster than ever. But none of that matters if I can't get the feedback that I need to get the team aligned. And right now, getting async feedback still kind of sucks. So, I'm building the product I've always wanted, and it's called Inflight. I use it every day to share ideas and get feedback from the team, and it's totally changing the way that I work. So, I'm excited to show you. Right now, I'm only giving access to Dive Club listeners. So head to dive.club/inflight to claim your spot.

是的。所以过去，我通常会利用制作新版作品集的机会，去学习一个新工具或新技能。比如，我记得自己学过怎么用 WordPress 做作品集，或者在 Webflow 早期就学着用它做作品集。而这一次，我想锻炼一下我的 Framer 功底。所以我用 Framer 从零开始创建了所有东西。我只在 Figma 里设计了大约 5% 的东西，然后就直接跳进 Framer。所有内容都是在 Framer 里原生创建的。而且你要知道，那还是在设计模板页面功能出现之前。所以这真的很痛苦，毫不夸张。比如这个扫描仪，这个插画的每一个部件都是手工绘制的，带着自己单独的阴影值，图层也命名得非常细致。所以这个作品集的每一个部件基本上都是用同样的方式做的。然后我还用 Framer 创建了组件，对吧？所以每个组件可能还会链接到一个子组件。

Yeah. So in the past, what I've usually done is to use the opportunity of creating a new version of my portfolio as a way to potentially learn a new tool or a new skill. For example, I can think back to learning how to use WordPress to create a portfolio, or learning how to use Webflow in the early days of Webflow to create my portfolio. This time around, I wanted to flex my Framer muscle. So I used Framer to create everything from scratch. I only designed about 5% of this in Figma before jumping directly into Framer. And everything's been created natively in Framer. And bear in mind, this is before design pages were a thing. So this was painful, to say the least. For example, this scanner—every single piece of this illustration has been handcrafted with its own values for shadows and meticulously named layers. So every single piece of this portfolio has basically been done the same way. Then I've used Framer to also create components, right? So each of these components might lead to a subcomponent.

所以你看这里，那个实际扫描的激光是另一个组件，有些上面还有代码覆盖层。这是我在 ChatGPT 早期的创作。当时大概是 2023 年底、2024 年初，如果我没记错的话，那时自定义 GPT 刚出来。我就想：“好吧，我可以做一个包含全部 Framer 知识库的自定义 GPT，然后从那里我就能用它帮我创建自定义代码覆盖层或者 React 组件之类的东西，再用到作品集里。”所以就是大量复制、粘贴、迭代、破坏、修复。但我觉得这个做法完全改变了我对作品集创建过程的看法，有点像同时在做体验原型。你在这里看到的那些粒子效果，是我做的扫描页面变成数据的动画，它们全都是独立组件。本质上就是数据组件，然后每一个组件再有一个代码覆盖层，产生这种粒子效果，里面有很多数学之类的东西。我大概有 90% 的内容都看不懂，但我就是往墙上扔东西。我当时对想要达到的外观和感觉只有很模糊的概念，然后就是不断地迭代、迭代、迭代，再回到预览模式看看感觉对不对。我花了很多时间做这个，而且这适用于你看到的作品集里的大部分内容，甚至是一些小动画，比如产品 logo，但这些全是用 Framer 中的组件做出来的，营造这种感觉。这个的动画效果不太对，但试试看能不能让它动起来。

So you see here, the actual laser that's scanning is another component, and some of these even have code overrides on top of them. This was in the early days of ChatGPT that I was using to create this. To frame when this was actually made, it was sort of late 2023, early 2024, if I recall correctly, and that was when custom GPTs had come out. So I was like, 'Okay, cool, I can make a custom GPT which has all the Framer knowledge base, and from there I can use that to help me create custom code overrides or React components and stuff that I can then use in the portfolio.' So lots of copying, pasting, evolving, breaking, fixing things. But I think this approach completely changed how I thought about the portfolio creation process, kind of like prototyping the experience at the same time. You can see here, the particles that I showed for the animation of the scanned pages turning into data—these are all individual components. Essentially, this data component, and then each of these has a code override which produces this particle effect with maths and stuff. I probably don't understand 90% of what is here, but it was just me throwing stuff at the wall. I had this quite blurry idea about what I wanted this to look and feel like, and then it was just a case of iterate, iterate, iterate, iterate, and then come back and see what feels right in the preview mode. I spent a lot of time doing this, and this is true for the majority of what you see in the portfolio, even these smaller animated pieces where it's just the logo of the product, but all of this is done using components in Framer to create this feeling. So this one isn't animating correctly, but let's see if we can get it to work.

不过这真的很酷。我没意识到你是在 Framer 里手工制作这么多东西。把它看作一个 Framer 组件，我完全没想到。你在这个项目之前的 Framer 水平如何？你在这里做得非常深——你以前做过这种组件级动画吗？

It's so cool though. I didn't realize how much of this you were hand-making in Framer. I mean, seeing this as a Framer component, I did not see that coming. What was your Framer knowledge before this project? You're going really deep here—had you done this type of component-level animation before?

没到这种程度。我在 Framer 变成网页构建工具之前就开始用它了——Framer 早期是一个原型设计工具，用 TypeScript 或者 CocoScript 之类的。所以我有一些 Framer 基础，但在创建这个作品集之前，我只做过几个简单的落地页，没有达到这种细节水平，没有真正尝试过推动 Framer 的边界。所以肯定有一些让我抓狂的时刻。比如这个项目就比较激烈。这个实际上是真实应用，是用户会经历的完整流程。这是一个叫车应用，你可以和这些面板交互，本质上是叫一辆出租车。但这是整个流程。它是真实应用，但它是用 Framer 构建的原型。当访问我的首页时，有一个小光标飞进来，你用那个光标来和它交互。但你可以看到，这些都是真实的素材——这就是一切。

Not to this level. I come from a background of using Framer before it was a web builder tool—like the early days of Framer when it was a prototyping tool with TypeScript or CocoScript or whatever it's called. So I had some background in Framer, but prior to building my portfolio, I had done a few simple landing page things, but nothing to this level of detail, really trying to push the boundaries of what Framer can do. So there were certainly some moments where I was tearing my hair out. For example, this one was kind of intense. What this actually is, is the real app, the real flow that a user would have gone through. This was a ride-sharing app, and you could interact with these sheets and you could book a cab essentially. But this is an entire flow. It's the real app, but it's a prototype built in Framer. So when you visit my homepage, there's a little cursor thing that shoots in and you use that to interact with this. But you can see that these are the real assets—this is everything.

对，这真的非常棘手，因为当你在 Framer 里做原型时，你需要把拼图块连到其他部分。然后你开始添加悬停状态、点击状态和动画，你很快意识到你必须把所有这些子组件都做出来，它们本质上就是点击目标，这让事情变得极其复杂，因为这些点击目标会挡在你想要交互的其他元素前面。所以和 Framer 的拉扯非常多。我觉得现在的 Framer 要健壮得多，所以这些东西可能会更好做。但你可以看到，从这个状态到那个状态，再到彩纸效果——这只是一个两侧带延迟的 frame，但彩纸效果一直在运行，对吧？

Yeah. And this was really, really tricky to do, because when you prototype in Framer, you need pieces of the puzzle to link to the rest. And then you want to start adding hover states and click states and animations, and you quickly realize that you have to have all of these subcomponents which essentially are hit targets, and it just makes things super complicated because then those hit targets are in the way of other elements that you want to interact with. So there's a lot of fighting with Framer. And I think nowadays Framer is a lot more robust, so I feel some of this stuff would be simpler to create. But you can see here, going from this state to this state with the confetti to this—it's just a frame with delays on either side, but the confetti is constantly running, right?

所以我尝试了很多很有意思的方法来突破当时 Framer 的能力边界。那真的是了解工具边界的好方法。而且在创建完作品集之后，我觉得自己在为客户构建落地页方面就像是有了某种超能力，你懂吧？

So there were lots of really interesting ways that I was trying to push the boundaries of what Framer could do at the time. And that was a really great way to learn where the edges of the tool were. But also, after I'd created my portfolio, I felt like I had some kind of superpower when it came to building landing pages for my clients, you know?

对。Tommy Gio 说的一句话我很喜欢。他说：‘工具弯折者’。这就是工具弯折，兄弟。你给自己一个高层目标——一段写得很好的文案加一个便当网格，其中每一个都是独立的定制体验，然后你就把 Framer 这个工具弯折成你想要的样子。看到你比我意识到的还要深入，真的很酷。

Yeah. There's a phrase that Tommy Gio says that I really like. He says, 'Tool benders.' This is tool bending, man. Where you gave yourself the high-level objective of a really well-written piece of copy and then a bento grid, and each one of them is their own bespoke experience, and then you just bent the tool of Framer to your will. It's really cool to see you went way deeper than I even realized.

我觉得这就是我大脑运作方式的一部分。我知道它有可能，但可能不是传统意义上的方式，对吧？我觉得很有意思的是，我们拥有这些出色的工具，它们真的很擅长做自己的事，给我们提供很多突破边界的方式，但总有一些地方你会希望它这样做、希望你那样做。最后往往会發現你能找到办法黑进系统里，你懂吗？那真的就是一种不可思议的 Framer 使用方式。

I think that's just part of the way my brain works. I know it's possible, but maybe just not in the traditional sense, right? I think it's really interesting that we have these amazing tools and they're incredible at what they do, and they provide us amazing ways to push the boundaries, but there's always something that you wish it did this and you wish it did that. It turns out usually you can find a way to hack the system, you know? And that was just an incredible way to use Framer.

在你走之前，有没有什么我们没聊到、或者你本来期待在 NAD 采访中提出的内容却没被提到？因为我想把所有问题都覆盖到，我们越是在你的各个创意分支上往下挖，我就觉得越有意思。

Before I let you go, is there anything that we haven't talked about, or maybe something that you expected us to bring up in the interview with NAD that didn't get mentioned? Because I want to cover our bases, because the more that we keep pulling on your different creative strands, the more fun I'm having.

有一件我们没聊到的事，可能是我展示的一个缺点：如果你从移动端访问，体验会不太一样，因为这里的设计非常依赖悬停，对吧？首页上的很多交互，比如微交互，基本上都需要用户悬停。而在移动端，它会以某种方式运行——当你点击时，它也会触发一些东西。

One thing that we didn't touch on that's maybe a shortcoming of what I've shown is that the experience is kind of different if you're hitting it from mobile, because it's very hover-based, right? A lot of these interactions on the homepage, like the micro-interactions, essentially require a user to hover. Now, on mobile, it's going to work in some way, shape, or form—when you tap, it's going to trigger something to happen.

但你也会发现有很多断点，其中一些做得不太好看，有些内容会被截断，体验也完全不同。

But you'll notice that there are lots of breakpoints, but some of them aren't very pretty, and some of them have content cut off, and the experience is very different.

而这并不是我刻意为之的。我想这是我最开始创建这个项目的方式导致的。

And that's something that wasn't necessarily intentional. I think it was the way that I created the project initially.

我未必想过在手机上会是什么感觉、什么样子。那肯定是我会做得不一样的地方。如果有时间投入，我也会在移动端打造一个真正强大的体验。

I hadn't necessarily thought all the way through exactly what that might feel like or look like on mobile. That's something I certainly feel I would do differently. If I had time to spend, I would create a really powerful experience on mobile too.

我有个略反主流的小观点想分享：多年来我们严重高估了移动优先设计和移动体验的重要性，尤其在科技领域。你必须知道你在为谁设计。显然，如果你的目标用户会在手机上浏览，或者你有数据支撑，那就当我没说。但如果你的用户是科技从业者——尤其是从评估候选人角度看待作品集的设计管理者——我的直觉是，这绝对是桌面端优先的体验。超过 80% 的人都在电脑上访问。过去六七年我做过五个不同的网站，数据始终是 80% 到 85% 以上的桌面端。我也不想因为把移动端当作限制而无法触达创意上限。我之所以说这是反主流观点，是因为每当我们发布一个惊艳的网页体验，总有人评论说：“对，但移动端体验呢？”而我的回答是：“这个网站的目标是什么？”目标是让你连接绝佳机会，赢下潜在招聘经理，获得理想工作。这是一个桌面端为主的流程。你在网页上表现得出色，全力投入悬停交互，而且奏效了。所以我理解你的想法，但我也认为，把时间和创意投入到打磨网页细节，而不是平摊到不同断点，是非常正确的资源分配。这可能是反主流观点，但我忍不住要说，因为我认为你的做法成功了。

I have a bit of a hot take I want to share: for years we've been vastly overestimating the importance of mobile-first design and the mobile experience in general, specifically within tech. You have to know who you're designing for. Obviously, if you're designing for people who will be on their phones, or you have data to back that up, then totally disregard this. But if your users are people in tech—definitely design managers who are viewing this through the lens of evaluating someone as a potential candidate—my gut is that this is definitely a desktop-first experience. Over 80% of people are on their computers. I've had five different sites over the last six or seven years, and it's always above 80–85% desktop. I also never want to create something that feels like it doesn't hit the ceiling of creative potential because I use mobile as too much of a constraint. I think it's a hot take because every time we post some amazing web-based experience, there's always somebody in the comments asking, 'Yeah, but what about the mobile experience?' And it's like, 'Well, what's the goal of this website?' The goal is to connect you with amazing opportunities and win over a potential hiring manager to get a dream job. That's a desktop-focused flow. And you freaking nailed it on the web, going all in on hover interactions, and it worked. So I hear you, but I also think this was probably a really good allocation of your time and creative efforts—sweating the details on the web rather than evenly allocating them across different breakpoints. Potentially a hot take, but I feel compelled to say it because I think what you did worked.

是的，我完全同意。你说到点子上了。

Yeah, no, I totally agree. I think you hit the nail on the head.

好了，我们聊了很多。我收获的要点包括：优先考虑整体而非平均值的差异；还有你对这段开场白投入的执着让我印象深刻。我知道至少对我自己来说，而且我相信其他设计师也一样，很多人都忽略了真正有效的微文案的重要性。这是一点。然后是把首页当作一种体验来思考。我想给你一个机会，分享一些对其他人的建议——直接对正在开始做作品集、或者正在重新思考方法的人说。他们不想完全复制你，而是想找到自己独特的视角，想创造什么样的体验。在我让你离开之前，你有什么话想对正在听的人说吗？

All right. So, we've covered a lot of ground. Some of the takeaways I'm coming away with: first, the difference between prioritizing the average rather than the sum. I also think it's amazing how much you've obsessed over this intro paragraph. And I know for myself, at least—and I'm sure other designers listening will agree—a lot of people overlook the importance of really effective microcopy. That's one piece. And then thinking about your homepage as an experience. I'd like to give you the opportunity to share any other advice—speaking directly to someone who is starting a portfolio or rethinking their approach, and they don't want to copy you exactly; they're trying to figure out what their unique angle is, what experience they want to create. Do you have any parting words for that person listening, before I let you go?

当你开始着手制作新版本的作品集，或者第一次做自己的作品集时，这可能是一个相当令人生畏的过程。这有点像设计师的诅咒：你永远不会对自己创作的东西完全满意，也永远不会对自己交付的东西完全满意。总有成千上万的事情你想要改变或不喜欢。我认为，这就是把作品公之于众、创造一个纯粹属于你的东西的本质。如果你觉得自己还无法在某个工艺水平上执行，或者对自己的技能信心不足，我真诚的建议是：不要假装。不要用冗长的过程解释来包装平庸的作品。相反，深入钻研某件你能做得特别出色的事。你也可以在提升技能之前先培养品味。找到你欣赏的作品集，尝试以某种方式去复刻它——不是单纯地模仿，而是逆向工程其中的决策：为什么用那个间距？为什么选那个颜色？为什么用那种转场节奏？真正深入到细节里。回到我的个人简介，放大 12800%，深入去看，因为没有什么秘密配方。只是对细节的执着和研习优秀设计的意愿。如果你能展示出自己能看到质量，即便暂时还做不出来，那也是在向招聘经理或招聘人员传达一个信号：你有品味。他们有希望相信你可以发展技能、可以被培养。如果你真的卡住了，就坦诚地说：“我正在这里提升技能，这是我今天擅长的地方。”我认为招聘经理对这种自我认知的尊重，远远超过对那些虚张声势的平庸作品的尊重。外面有太多东西可以给你灵感，如果你真的去观察，真的专注于细节，你就有希望从中创造出伟大的作品。

When you're starting out on the journey of creating a new version of your portfolio—or just your portfolio for the first time—it can be quite a daunting process. It's kind of the designer's curse: you're never quite happy with what you've created, never quite happy with what you've shipped. There are always a thousand things you'd probably change or dislike. And I think that's just the nature of putting your own work out there and creating something that is purely you. If you feel like you can't execute at a certain level of craft yet, or you're not comfortable with where your skills are, my honest advice would be: don't try to fake it. Don't dress up mediocre work with verbose process explanations and so on. Instead, go deep on something you can do exceptionally well. You can also build your taste before you build your skills. Find portfolios you admire and try to replicate them in some way, shape, or form—not just copying them, but reverse-engineering the decisions: why that spacing, why that color choice, why that transition timing. Get really into the weeds. To go back to my bio, zoom in 12,800%. Get deep and really look, because there's no secret sauce. It's just obsession over attention to detail and a willingness to study great design. If you can demonstrate that you can see quality even if you can't yet produce it, that's a signal to the hiring manager or recruiter that you have taste, and they'll hopefully trust that you can develop your skills and are coachable. And if you're really stuck, just be honest: 'I'm growing my skills here; this is where I'm strong today.' I think hiring managers respect that self-awareness way more than they respect inflated mediocrity. There's so much out there you can draw inspiration from, and if you really look, if you really focus on the details, you can hopefully create great things from that.

我很喜欢，Matt。感谢你今天来分享你的思考和过程，还打开了 Framer 现场演示。真的太棒了。我个人从你的作品里获得了很多灵感，希望其他人也是。感谢你今天抽出时间。在你走之前，我想用一分钟给你介绍一下我最喜欢的产品，因为经常有人问我的技术栈里有什么。Framer 是我用来搭建网站的，Genway 是我用来做研究的，Granola 是我在评审时做笔记的，Jitter 是我用来做设计动效的，Lovable 是我用来把想法写成代码的，Mobin 是我用来寻找设计灵感的，Paper 是我用来像创意人员一样设计的，Raycast 是我每一步都在用的快捷键。我手工挑选了这些公司，这样我就能全职做这些节目。所以，目前为止支持节目的头号方式就是去看看它们。你可以在 dive.comclub/p partners 找到完整列表。

I love it, Matt. I appreciate you coming on today and explaining your thinking and process, and even cracking open Framer. It was really awesome to see. I personally am inspired by what you've made, and I hope others are as well. So, thanks for taking the time today. Before I let you go, I want to take one minute to run you through my favorite products, because I'm constantly asked what's in my stack. Framer is how I build websites. Genway is how I do research. Granola is how I take notes during crit. Jitter is how I animate my designs. Lovable is how I build my ideas in code. Mobin is how I find design inspiration. Paper is how I design like a creative. And Raycast is my shortcut every step of the way. I've hand-selected these companies so that I can do these episodes full-time, so by far the number one way to support the show is to check them out. You can find the full list at dive.comclub/p partners.