# Vibe design to build incredible web UI

https://www.youtube.com/watch?v=nC7TrzUYvig
Translation: zh-CN

[00:06] This screen uses the animation trigger property that makes scroll trigger animations buttery smooth and incredibly easy.
  此屏幕使用了动画触发器属性，使滚动触发器动画流畅无比，并且极其简单。

[00:13] And this select drop down uses a native select element styled with appearance base select.
  这个下拉选择框使用了原生的选择元素，并用 appearance: base-select 进行了样式设置。

[00:18] Oh, and this layout uses CSS grid with non-uniform track sizes, which tells the user where to look first, establishing a spatial hierarchy.
  哦，这个布局使用了 CSS 网格，具有不均匀的轨道大小，这会告诉用户首先看哪里，从而建立空间层次结构。

[00:30] And we didn't build this with an AI coding agent.
  我们并不是用 AI 编码代理构建的这个。

[00:32] Well, it's not entirely true, right?
  嗯，这不完全是真的，对吧？

[00:36] Well, okay, yeah, but it we did build it with a design agent.
  嗯，好吧，是的，但我们确实是用设计代理构建的。

[00:41] This is Stitch. It's an AI design tool.
  这是 Stitch。它是一个 AI 设计工具。

[00:44] You describe what you want your app to look and feel like and it's going to generate a design backed by real HTML and Tailwind CSS.
  你描述你希望你的应用程序看起来和感觉起来是什么样的，它就会生成一个由真实的 HTML 和 Tailwind CSS 支持的设计。

[00:52] And the most important part of this workflow is that every feature we're covering in CSS maps directly to a design principle.
  这个工作流程中最重要的部分是，我们正在 CSS 中涵盖的每个功能都直接映射到一个设计原则。

[00:57] Grid gives us structural hierarchy, and scroll triggered animations create a sense of
  网格为我们提供了结构层次，而滚动触发的动画则创造了一种感觉

[01:03] continuity as the user moves through the page.
  用户在页面中移动时保持连续性。

[01:07] And we know how to direct this design because we use the vocabulary, descriptions, and even the syntax of these CSS features.
  我们知道如何指导这种设计，因为我们使用了这些 CSS 功能的词汇、描述甚至语法。

[01:14] I'm Dion and I work on Stitch.
  我是迪昂，我在 Stitch 工作。

[01:16] And and I'm I'm David and you know, I I also work on Stitch.
  我是大卫，我也在 Stitch 工作。

[01:19] And today we're going to teach you how to vibe design with CSS.
  今天我们将教你如何用 CSS 进行氛围设计。

[01:24] So, what is vibe design?
  那么，什么是氛围设计？

[01:26] It's using your intent to build a design.
  它是利用你的意图来构建设计。

[01:28] You describe what you want, the layout, the feel, the behavior, and the tool builds it.
  你描述你想要什么，布局、感觉、行为，然后工具会构建它。

[01:35] That's just the baseline, though.
  但这只是基础。

[01:37] What makes it more powerful is when you use your CSS vocabulary.
  当你使用你的 CSS 词汇时，它会变得更强大。

[01:41] Then your intent gets specific.
  然后你的意图就会变得具体。

[01:44] Instead of saying "Make it look nice", you say "Use a non-uniform grid with a two-column hero span."
  与其说“让它看起来不错”，不如说“使用一个带有两列英雄跨度的非均匀网格”。

[01:51] Instead of "Add some animation", you can say "Bind a scale Y transform to the scroll timeline."
  与其说“添加一些动画”，不如说“将 Y 轴缩放变换绑定到滚动时间轴”。

[01:57] Your CSS knowledge turns vague intent into precise direction.
  你的 CSS 知识将模糊的意图转化为精确的方向。

[02:03] CSS is the shared language between you,
  CSS 是你和...

[02:06] Design, code, and the agent.
  设计、代码和代理。

[02:09] And that's the workflow that we're going to cover today.
  这就是我们今天要介绍的工作流程。

[02:11] We're going to go over how to go from a CSS idea to a finished design using Stitch and the Chrome DevTools MCPs together.
  我们将介绍如何使用 Stitch 和 Chrome DevTools MCP 将 CSS 创意转化为最终设计。

[02:20] Then we'll start with layouts.
  然后我们将从布局开始。

[02:23] We'll build a grid with non-uniform track sizes that showcases visual hierarchy because like who doesn't love a good grid?
  我们将构建一个具有非均匀轨道尺寸的网格，以展示视觉层次结构，因为谁不喜欢一个好的网格呢？

[02:30] And after that, we'll cover how to define your visual identity and have every screen inherit from it.
  在此之后，我们将介绍如何定义您的视觉标识，并让每个屏幕都继承它。

[02:36] Colors, typography, spacing, all of it in one source of truth.
  颜色、排版、间距，所有这些都集中在一个真实来源中。

[02:43] Then we'll get into the weeds on the fundamentals of scroll-triggered animations to create them right from prompts.
  然后我们将深入研究滚动触发动画的基础知识，以便直接从提示创建它们。

[02:50] And last and definitely not least, we'll cover appearance-based selector style a select element without any JavaScript or any libraries.
  最后但绝非最不重要的一点是，我们将介绍基于外观的选择器样式，无需任何 JavaScript 或任何库即可选择元素。

[02:59] And we're going to leave all of the prompts, the tools, and everything we did in the description today.
  我们将在今天的描述中留下所有的提示、工具以及我们所做的一切。

[03:07] So before we start prompting, let's set up the development environment.
  那么在我们开始提示之前，让我们设置好开发环境。

[03:11] We're using two MCP servers that work together with Antigravity as our IDE.
  我们正在使用两个MCP服务器，它们与Antigravity一起作为我们的IDE协同工作。

[03:17] First, Stitch MCP.
  首先，Stitch MCP。

[03:19] This connects your coding agent to Stitch so it can create projects, generate screens, and edit designs programmatically.
  这会将您的编码代理连接到Stitch，以便它可以以编程方式创建项目、生成屏幕和编辑设计。

[03:26] Open the Antigravity MCP gallery, find Stitch, and add it.
  打开Antigravity MCP库，找到Stitch，然后添加它。

[03:31] It'll ask for an API key.
  它会要求提供API密钥。

[03:33] You can grab that from the Stitch settings page.
  您可以从Stitch设置页面获取它。

[03:36] Enter it into the Antigravity UI and you're connected.
  将其输入Antigravity UI，您就连接成功了。

[03:39] Your agent can now call tools like generate screen from text, edit screens, and list screens.
  您的代理现在可以调用诸如从文本生成屏幕、编辑屏幕和列出屏幕之类的工具。

[03:47] Second, Chrome DevTools MCP.
  第二，Chrome DevTools MCP。

[03:51] This lets your coding agent inspect a live page in Chrome, read the DOM, check computed styles, look at the console.
  这允许您的编码代理检查Chrome中的实时页面，读取DOM，检查计算样式，查看控制台。

[03:58] For this one, you just go to the GitHub repo.
  对于这个，您只需转到GitHub仓库。

[04:00] You copy the Antigravity config block.
  您复制Antigravity配置块。

[04:04] Then, open the MCP settings in Antigravity.
  然后，在Antigravity中打开MCP设置。

[04:06] Switch to the raw config
  切换到原始配置

[04:09] editor and paste it in.
  编辑器并粘贴进去。

[04:11] Now, one little thing to watch for, the GitHub config wraps the server in an MCP servers key.
  现在，有一件小事要注意，GitHub 配置会将服务器包装在 MCP 服务器键中。

[04:16] But, your config probably already has that parent.
  但是，您的配置可能已经有了那个父级。

[04:18] So, just paste the inner server block.
  所以，只需粘贴内部服务器块即可。

[04:23] So, the workflow is one, design in Stitch, prompt it with CSS concepts.
  所以，工作流程是第一，在 Stitch 中设计，用 CSS 概念提示它。

[04:29] Two, inspect in Chrome, use DevTools MCP to validate the output.
  第二，在 Chrome 中检查，使用 DevTools MCP 来验证输出。

[04:32] And three, refine.
  第三，优化。

[04:35] Feed what you learn back into the next prompt.
  将您学到的东西反馈到下一个提示中。

[04:39] So, design, inspect, refine.
  所以，设计，检查，优化。

[04:43] One loop, and the CSS knowledge is what makes each iteration better than the last.
  一个循环，CSS 知识使每次迭代都比上一次更好。

[04:49] All right, we have the full setup, so let's let's go build something.
  好了，我们已经完成了全部设置，所以让我们去构建一些东西。

[04:52] And let's start with the layout.
  让我们从布局开始。

[04:56] And a quick note about this site.
  关于这个网站有一个快速说明。

[04:59] It's a site about CSS features that uses those same CSS features.
  这是一个关于 CSS 功能的网站，它使用了那些相同的 CSS 功能。

[05:03] So, it's it's a meta site.
  所以，它是一个元网站。

[05:06] So, every card in this grid is a topic that we're going to cover today, built
  所以，这个网格中的每张卡片都是我们今天要介绍的一个主题，构建

[05:10] with the technique that it's describing.
  使用它所描述的技术。

[05:13] So, I prompted Stitch to have this grid structure explicitly.
  所以，我提示 Stitch 明确地拥有这个网格结构。

[05:19] Four columns, the scroll animations card spanning two columns and two rows as the hero.
  四列，滚动动画卡片跨越两列和两行作为主元素。

[05:25] The customizable select in a tall single column cell, and the secondary features filling in around it.
  可自定义的选择器位于一个高单列单元格中，次要功能填充在周围。

[05:33] So, let's look at what came back.
  所以，让我们看看返回了什么。

[05:36] So, here is what Stitch did.
  所以，这是 Stitch 所做的。

[05:39] But, let's actually get this into the IDE workflow.
  但是，让我们将其实际放入 IDE 工作流程中。

[05:44] So, in Stitch, I right-click the screen and I can grab this link.
  所以在 Stitch 中，我右键单击屏幕，然后可以获取此链接。

[05:46] Then I can go into anti-gravity and I paste in that link with a prompt to get the project info.
  然后我可以进入反重力并粘贴该链接，并附带一个提示以获取项目信息。

[05:53] Anti-gravity talks to the Stitch MCP and returns the project details, screen IDs, and everything that I need.
  反重力与 Stitch MCP 通信并返回项目详细信息、屏幕 ID 以及我需要的一切。

[06:01] Now, I need to see this in a real browser, so the Chrome DevTools MCP can access it.
  现在，我需要在真实的浏览器中看到这一点，以便 Chrome DevTools MCP 可以访问它。

[06:07] So, I wrote a small CLI tool for this, which you can access at NPX at _davide
  所以，我为此编写了一个小型 CLI 工具，您可以通过 NPX 在 _davide 访问它。

[06:12] stitchmcp,
  stitchmcp，

[06:14] and you can use the serve command.
  并且您可以使用 serve 命令。

[06:16] And this pulls the screen HTML down locally
  然后这会将屏幕 HTML 拉取到本地

[06:19] and serves it on, well, localhost.
  并在本地主机上提供服务。

[06:22] And now that it's running locally, the
  现在它在本地运行，

[06:25] Chrome DevTools MCP can access the live
  Chrome DevTools MCP 可以访问实时

[06:28] DOM.
  DOM。

[06:29] So, let's inspect what Stitch actually
  所以，让我们检查一下 Stitch 实际

[06:31] generated.
  生成了什么。

[06:33] So, if we look at the grid container,
  所以，如果我们看网格容器，

[06:35] Stitch used grid template columns repeat
  Stitch 使用了 grid template columns repeat

[06:37] 4 1fr.
  4 1fr。

[06:39] And the scroll animations card landed in
  滚动动画卡片位于

[06:42] colspan 2, rowspan 2, and that's the
  colspan 2，rowspan 2，那就是

[06:45] hero card.
  主卡片。

[06:47] And the smaller feature cards all filled
  较小的功能卡片都填充了

[06:49] in around it.
  在其周围。

[06:51] But, generating a static layouts is like
  但是，生成静态布局就像

[06:53] only half the story.
  只讲了一半的故事。

[06:53] This is a Bento
  这是一个 Bento

[06:55] grid, and what's better than a Bento
  网格，有什么比 Bento

[06:56] grid?
  网格更好呢？

[06:56] Well, a Bento grid that you can
  嗯，一个您可以

[06:58] drag and drop.
  拖放的 Bento 网格。

[06:59] I wanted to see if Stitch could handle
  我想看看 Stitch 是否能处理

[07:01] complex interactions on top of this
  在此之上的复杂交互

[07:03] generated code, so I asked it to make
  生成的代码，所以我让它制作

[07:05] these cards draggable and reorderable.
  这些卡片可拖动且可重新排序。

[07:08] I was very specific in the prompt,
  我在提示中非常具体，

[07:11] telling it to use standard vanilla
  告诉它使用标准的 vanilla

[07:13] JavaScript and pointer events, so it just had pure performant code.
  JavaScript 和指针事件，所以它只有纯粹的高性能代码。

[07:18] And let's see how it did.
  让我们看看它的表现如何。

[07:21] Stitch generated a drag-and-drop Bento box that lets us reorder these cards while maintaining their grid span dimensions.
  Stitch 生成了一个拖放式 Bento 框，让我们可以在保持其网格跨度尺寸的同时重新排序这些卡片。

[07:29] So, before we start prompting screens, we need to talk about the design system.
  所以，在我们开始提示屏幕之前，我们需要谈谈设计系统。

[07:34] In Stitch, every project has something called a design MD.
  在 Stitch 中，每个项目都有一个称为设计 MD 的东西。

[07:36] Think of it like the agents MD for the agents, but for design.
  可以将其视为代理人的代理人 MD，但用于设计。

[07:43] It defines your colors, your typography, your spacing rules, your component patterns.
  它定义了你的颜色、排版、间距规则、组件模式。

[07:48] And when the design agent reads it, every screen it generates follows the same visual identity.
  当设计代理读取它时，它生成的每个屏幕都遵循相同的视觉标识。

[07:55] Without it, each screen is an island, but with it, they all belong together.
  没有它，每个屏幕都是孤岛，但有了它，它们就属于在一起了。

[08:00] And when you generate a screen, Stitch will automatically create a design system for you.
  当你生成一个屏幕时，Stitch 会自动为你创建一个设计系统。

[08:06] Here, Stitch created the design system called the technical curator.
  在这里，Stitch 创建了名为技术策展人的设计系统。

[08:11] Every design system has a color scheme,
  每个设计系统都有一个配色方案，

[08:13] typography hierarchy, and components visualized.
  排版层次结构和组件可视化。

[08:18] There's also a written spec generated called design MD.
  还有一个名为设计 MD 的书面规范已生成。

[08:22] Now, this is a readable spec that describes your visual identity and design into an agent readable document.
  现在，这是一个可读的规范，它将您的视觉身份和设计描述为机器可读的文档。

[08:29] It contains colors with hex values and roles, typography rules, component guidelines, dos and don'ts.
  它包含带有十六进制值和角色的颜色、排版规则、组件指南、注意事项。

[08:37] And you can export this file with your project, and then any downstream developer or AI agent can read it.
  您可以将此文件与您的项目一起导出，然后任何下游开发人员或 AI 代理都可以读取它。

[08:45] Now, let me show you why this matters for the code.
  现在，让我向您展示为什么这对代码很重要。

[08:49] When Stitch exports a screen, the design system tokens become a Tailwind CSS config.
  当 Stitch 导出屏幕时，设计系统令牌会成为 Tailwind CSS 配置。

[08:55] Our four color roles, primary, secondary, tertiary, neutral, each generates a Tailwind CSS design tokens, such as BG primary, primary container, on primary container, and tokens for fonts, like font headline, font body, and font label.
  我们的四种颜色角色，主色、辅助色、第三色、中性色，每种都会生成一个 Tailwind CSS 设计令牌，例如 BG primary、primary container、on primary container，以及字体令牌，如 font headline、font body 和 font label。

[09:15] And even the corner radius scale with tokens such as rounded large, rounded extra large, rounded four.
  甚至角落半径也会随着诸如圆角大、圆角特大、圆角四之类的标记进行缩放。

[09:21] Every design decision I described in plain English is now a utility class.
  我用通俗易懂的英语描述的每一个设计决策现在都是一个实用类。

[09:27] And here's the key thing.
  这是关键所在。

[09:29] Every screen we generate from this point forward will inherit these tokens automatically.
  从现在开始，我们生成的每一个屏幕都将自动继承这些标记。

[09:34] The colors, the fonts, the spacing, they're all baked in.
  颜色、字体、间距，它们都已内置。

[09:39] And of course, if I want to change something later, say I want to try a different accent color, I change it once in the design system and apply it to screens, and now everything will update.
  当然，如果我以后想改变什么，比如说我想尝试一种不同的强调色，我会在设计系统中更改一次，然后将其应用于屏幕，现在一切都会更新。

[09:49] That's the CSS custom properties model.
  这就是 CSS 自定义属性模型。

[09:52] One source of truth, many consumers.
  一个真理之源，多个消费者。

[09:56] Now, when you export the project, the design MD file exports with it, which means your design intent survives the handoff.
  现在，当你导出项目时，设计 MD 文件会随之导出，这意味着你的设计意图在交接过程中得以保留。

[10:04] Let's look at what we're building next.
  让我们看看接下来要构建什么。

[10:06] We're going to dive into scroll-driven animations.
  我们将深入研究滚动驱动的动画。

[10:10] Watch what happens as I scroll on this page.
  看看我在这个页面上滚动时会发生什么。

[10:14] One key thing is happening here.
  这里有一个关键的事情正在发生。

[10:16] This thin vertical spine grew from the top of the page to the bottom.
  这个细长的垂直脊柱从页面顶部延伸到底部。

[10:21] And when I scroll back, it reverses.
  当我向后滚动时，它会反转。

[10:25] That's a progress indicator bound directly to the scroll bar.
  这是一个直接绑定到滚动条的进度指示器。

[10:29] There's no JavaScript scroll-less-ness.
  没有 JavaScript 的无滚动性。

[10:31] It's all pure CSS.
  这都是纯粹的 CSS。

[10:34] One property's doing all of the work here.
  一个属性在这里完成了所有工作。

[10:35] It's the scroll timeline.
  它是滚动时间轴。

[10:39] Here's the CSS that makes it work.
  这是使其工作的 CSS。

[10:42] A fixed position element with a scale Y keyframe that goes from zero to one.
  一个具有从零到一的 Y 轴缩放关键帧的固定定位元素。

[10:48] The magic is the rule animation-timeline-scroll.
  神奇之处在于 animation-timeline-scroll 规则。

[10:52] That single declaration binds the animation progress to the scroll position instead of time.
  这个单一声明将动画进度绑定到滚动位置而不是时间。

[10:59] And transform-origin-top-center ensures it grows downward.
  并且 transform-origin-top-center 确保它向下增长。

[11:05] Now, let's build this in Stitch.
  现在，让我们在 Stitch 中构建它。

[11:09] The first step is the document structure.
  第一步是文档结构。

[11:12] I'm prompting Stitch to create an alternating two-column layout.
  我正在提示 Stitch 创建一个交替的两列布局。

[11:16] Four sections, each a two-column grid,
  四个部分，每个都是一个两列网格，

[11:19] alternating which side gets pros and which gets the code block.
  交替哪一侧获得优点，哪一侧获得代码块。

[11:24] There's no animations yet.
  还没有动画。

[11:27] This is just the skeleton.
  这只是骨架。

[11:29] Now, let's inspect the result using the Chrome Dev Tools.
  现在，让我们使用 Chrome 开发者工具检查结果。

[11:33] Antigravity will get the screen ID and pull it up in Chrome.
  Antigravity 将获取屏幕 ID 并在 Chrome 中打开它。

[11:37] The skeleton looks good.
  骨架看起来不错。

[11:39] So, now let's pull in some animation.
  那么，现在让我们加入一些动画。

[11:41] This is step two.
  这是第二步。

[11:43] The scroll-linked progress spine.
  滚动链接的进度脊柱。

[11:46] I want that thin vertical line fixed to the center of the viewport, so it grows as the user scrolls.
  我希望那条细长的垂直线固定在视口的中心，这样它会随着用户的滚动而增长。

[11:54] I'm going to ask my coding agent to generate a prompt that leverages this CSS.
  我将要求我的编码代理生成一个利用此 CSS 的提示。

[11:59] I'll specify using animation-timeline scroll with a root block axis mapping the scale transform directly to the scroll percentage.
  我将指定使用 animation-timeline scroll，并使用根块轴将 scale 变换直接映射到滚动百分比。

[12:09] And I'll make sure to specify transform-origin top center, so it scales downward from the origin rather than the center.
  我将确保指定 transform-origin top center，这样它会从原点向下缩放，而不是从中心缩放。

[12:18] Let's see what it gives us.
  让我们看看它给了我们什么。

[12:21] Before I run the prompt, look at what Antigravity came back with.
  在我运行提示之前，看看反重力返回了什么。

[12:25] The agent understood the intent and broke it down into exactly two pieces.
  代理理解了意图，并将其分解为两个部分。

[12:30] First, one empty div, editorial spine, as a direct child of the body.
  首先，一个空的div，编辑脊柱，作为body的直接子元素。

[12:37] That's really important because it can't be nested inside a relatively positioned container, or the fixed positioning breaks.
  这真的很重要，因为它不能嵌套在相对定位的容器内，否则固定定位会失效。

[12:46] Second, the CSS.
  其次，CSS。

[12:48] The agent centered the line with left 50% margin left minus 0.5 pixels instead of translate X, and that's a really good choice because it keeps the transform property completely free for scale Y.
  代理使用左50%的左边距减去0.5像素来居中该行，而不是使用translate X，这是一个非常好的选择，因为它使变换属性完全可用于缩放Y。

[13:03] Then the three lines that matter.
  然后是三个重要的行。

[13:05] Transform-origin top center animation.
  变换原点顶部中心动画。

[13:09] Spine draw linear and animation-timeline scroll root block.
  脊柱绘制线性动画和动画时间轴滚动根块。

[13:15] And notice what the agent called out about performance.
  请注意代理提到的关于性能的内容。

[13:18] Because the only properties changing are opacity and transform, the browser hands
  因为唯一变化的属性是透明度和变换，所以浏览器会处理

[13:23] This to the compositor thread.
  这到合成器线程。

[13:25] Zero JavaScript listeners, zero layout recalculations.
  零个 JavaScript 侦听器，零个布局重新计算。

[13:31] Just like the original, when I scroll back, it tracks my scroll position continuously using the scroll timeline.
  就像原始一样，当我向后滚动时，它会使用滚动时间轴连续跟踪我的滚动位置。

[13:39] And the prompt that built it was specific about the mechanics, the keyframes and the timeline type.
  构建它的提示明确了机制、关键帧和时间轴类型。

[13:47] The CSS vocabulary is what made the prompt precise enough to get the right result.
  CSS 词汇使提示足够精确以获得正确的结果。

[13:52] Okay, last demo.
  好的，最后一个演示。

[13:55] Look at the left side of the screen.
  看看屏幕的左侧。

[13:57] That's a regular native select element.
  这是一个普通的本地选择元素。

[14:00] It has a default system font, a default border, and a no OS rendered drop-down arrow that you can't change.
  它具有默认的系统字体、默认边框以及一个无法更改的、由操作系统渲染的下拉箭头。

[14:07] And for decades, this has been one of the most frustrating elements in HTML to style.
  几十年来，这是 HTML 中最令人沮丧的样式元素之一。

[14:11] I mean, people built like entire JavaScript component libraries just to get a decent-looking drop-down.
  我的意思是，人们构建了整个 JavaScript 组件库，只是为了获得一个外观不错的下拉菜单。

[14:16] But now, let's look at the right side.
  但现在，让我们看看右侧。

[14:19] This is the same element.
  这是同一个元素。

[14:21] It's a real select, but it's styled with
  这是一个真正的选择，但它使用了...进行样式设置

[14:24] Appearance-base select.
  外观基础选择。

[14:26] It has a custom background, custom icon, custom typography, and that blue bottom border.
  它具有自定义背景、自定义图标、自定义排版以及蓝色的底部边框。

[14:33] Everything you see here is pure CSS on a native form element.
  您在此处看到的所有内容都是原生表单元素上的纯 CSS。

[14:36] And that's what we're going to build.
  这就是我们要构建的内容。

[14:40] So, here's how it works.
  那么，它的工作原理是这样的。

[14:43] One CSS property, appearance-base select, and that single declaration tells the browser to stop rendering its own Chrome and hand control over to you.
  一个 CSS 属性，appearance-base select，这个单一声明告诉浏览器停止渲染它自己的 Chrome 并将控制权交给你。

[14:53] Now, the select is just a box.
  现在，选择框只是一个盒子。

[14:56] And I mean, you can put anything in a box.
  我的意思是，你可以在盒子里放任何东西。

[14:58] So, you can set the border, you can set the font, everything you do with any other element.
  所以，你可以设置边框，你可以设置字体，你可以用任何其他元素做的任何事情。

[15:03] And the browser still handles all the accessibility and keyboard behavior.
  浏览器仍然处理所有的可访问性和键盘行为。

[15:07] You just own the visuals.
  你只拥有视觉效果。

[15:11] So, let's build that right side.
  那么，让我们构建右侧部分。

[15:13] I'm telling Stitch exactly what I want, setting appearance-base select, the warm gray background, the blue bottom border, and the layers icon and I'm being really specific about the design tokens because
  我正在告诉 Stitch 我想要什么，设置外观基础选择，暖灰色背景，蓝色底部边框，以及图层图标，并且我正在对设计令牌进行非常具体的说明，因为

[15:25] The more precise the prompt, the closer that stitch is going to get on the first try.
  提示越精确，第一次尝试时缝合就越接近。

[15:30] And here it is.
  它就在这里了。

[15:32] Remember that right side of the split screen?
  还记得分屏的右侧吗？

[15:34] Well, this is it, running live.
  嗯，这就是它，实时运行。

[15:36] It's the same thing.
  这是同一件事。

[15:38] That warm gray background, the blue accent border, the layers icon all generated from that one prompt.
  那个暖灰色背景、蓝色强调边框、图层图标都由那个提示生成。

[15:42] And if you tap to it from the keyboard, it just works and you can arrow through the options and the focus ring is there because it's just a native select that looks like a custom component and it's all just CSS.
  如果你从键盘点击它，它就能正常工作，你可以通过箭头浏览选项，焦点环就在那里，因为它只是一个看起来像自定义组件的原生选择，而这一切都只是 CSS。

[15:59] So, your CSS knowledge isn't just for implementation anymore.
  所以，你的 CSS 知识不再仅仅用于实现。

[16:01] It's your design vocabulary.
  它是你的设计词汇。

[16:03] Every feature you learn from grid to scroll-driven animations, custom select styling, custom properties, clip path mask, and you name it, it gives you a new word in that vocabulary.
  你从网格到滚动驱动动画、自定义选择样式、自定义属性、剪切路径蒙版等学到的每一个功能，它都会给你这个词汇库中的一个新词。

[16:15] And don't forget to check the description for all the links and tools and prompts and and if you have any questions, I I will literally be the first comment on this talk.
  别忘了查看描述中的所有链接、工具和提示，如果你有任何问题，我我将是这个演讲的第一个评论者。

[16:22] So, you know, you can you can just
  所以，你知道，你可以，你可以只是

[16:26] Ask. So, thank you so much for spending this time with us and please go design something.
  问。所以，非常感谢您抽出宝贵时间与我们在一起，请继续设计一些东西。

[16:31] And and see you in the comments.
  我们将在评论区再见。