stageshow

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Stageshow

Miniature product UI: a believable interface, framed in its space, as one still or a short animation in which one thing happens. The viewer recognizes the screen and sees the thing happen.

微型产品 UI：一个可信的界面，在其所在空间中进行有意图的构图，以单张静态图或一段只发生一件事的短动画呈现。观众能认出屏幕，也看得见事情发生。

The one idea

核心理念

It reads as a real product, simplified to what the viewer needs, framed with intent, and every motion has a cause.

Five ways it fails:

Too much. Real text in every row, numbers everywhere, everything packed. The more detail, the more it looks generated.
Wireframe. Two gray blobs and a button. Built too small, or stripped of what made it recognizable.
Boxed. A whole window shrunk into a card with even margins: a screenshot pasted in, not a product shot.
Flat. Every object the same weight in the same bordered card. The eye has nowhere to land.
Bland. A gray window with a cursor, whatever the brief said. The brief's look and energy (a blueprint, glass over color, a Dynamic Island, a mascot) are the point; take what it asks for and build it to the rules, as
```
examples/hero-demo
```
does with its typed popup and terminal satellite (a satellite is a smaller second object, a receipt, phone or detail card, straddling the hero's edge).

The fix: a full, structured screen in quiet grays, real words only on what the story is about, placeholder lines for the rest, room to breathe, a crop that puts the eye where the story is. Simplify the words, not the context. An empty corner, a void under a list, rows spread to fill a pane, a window floating on a plate (a backdrop or tinted field behind it): unfinished, not calm.

These are authored illustrations, not browser automation:

a.click()

draws the cursor pressing,

a.set()

changes the scene.

它看起来像真实产品，但经过简化，只保留观众需要的内容；构图有意图，每个动作都有原因。

五种常见失败方式：

信息过多。 每一行都是真实文字，到处都是数字，所有内容都塞得满满当当。细节越多，越显得像是生成的。
线框化。 两个灰色色块和一个按钮。做得太小，或被剥除了让它可辨识的元素。
装框感。 把整个窗口缩进一张四周等距的卡片里：看起来像粘贴的截图，而不是产品展示图。
扁平。 所有对象都采用相同的视觉重量，置于相同的带边框卡片中。视线无处聚焦。
乏味。 无论需求说明写了什么，都只给一个灰色窗口和一支光标。需求中的视觉风格和能量（蓝图、玻璃叠加色彩、Dynamic Island、吉祥物）才是重点；要充分采纳其要求并按照这些规则构建，正如
```
examples/hero-demo
```
通过带已输入文本的弹窗和终端卫星所展示的那样（卫星是一个较小的第二对象，如收据、手机或详情卡，跨骑在 Hero 区边缘）。

解决方案：使用安静灰色构建完整且结构化的屏幕，只在故事焦点处使用真实文字，其余使用占位文本线，留出呼吸空间，并通过裁切把视线引向故事发生之处。简化文字，而不是简化上下文。空荡的角落、列表下方的空洞、为填满面板而拉开间距的行、悬浮在底板（窗口背后的背景或着色区域）上的窗口——这些都显得未完成，而非从容克制。

这些是人工编排的插图，而非浏览器自动化：

a.click()

绘制光标按下动作，

a.set()

改变场景。

How hard to press

如何加压打磨

Build it the way a product designer builds a launch page they will be judged on. The gold examples in

examples/

are the bar, not a reference: if yours is the emptier, flatter or smaller one beside the closest gold, that is the first fix. Then look at the frame the way the most exacting designer you know would, the one who screenshots the one wrong thing and sends it back with "what is this?": a dot off its avatar, a unit on its own line, a grabber under the island, copy touching a card. If you can picture that screenshot, you have found the next fix.

要像产品设计师打造一个将受到评审的发布页那样来构建它。

examples/

中的黄金示例是质量基准，而不是仅供参考的样例：如果你的作品与最接近的黄金示例并排时显得更空、更平或更小，那就先修这一点。然后以你认识的最严苛设计师的方式审视画面——就是那种会截取唯一有误之处并发回来问“这是什么？”的设计师：头像偏了一个点、单位单独占了一行、Dynamic Island 下方多了一个拖拽手柄、文案碰到了卡片。如果你能想象出那张截图，就找到了下一处需要修复的问题。

Workflow

工作流程

Most of the quality is decided before any code. Write the plan first: where it sits, the focal object, the action, the payoff, what can be left out.

Medium and place. Still or animation (loop, once in view, or hover). The page, its ground, its width. Design at the size it will be seen, about 720 × 340 for a hero beside copy (
```
hero-demo
```
), 900 to 1100 wide for a full-width hero (
```
linear
```
), 400 × 300 for a card, shown at 1:1; never under about 320 wide for a demo, though a bento tile or a satellite card may be smaller. Every demo that can sit in a phone column ships a
```
compact
```
design at the column's width (358), a redesign not a squeeze (
```
references/framing.md
```
, Small formats and the page). A grid of tiles is one set: plan it with
```
references/bento.md
```
.
Look. With the product's code or site at hand, map its tokens to the kit's (
```
references/looks.md
```
); if the developer asks for their own components, use them inside the stage instead of the kit's small parts. Otherwise a theme (light, dark, blueprint, glass), a palette (accent, mono) and a fidelity:
```
minimal
```
is all bars,
```
standard
```
is words where they carry meaning and bars elsewhere,
```
realistic
```
is real content everywhere. Default light, accent, standard; go realistic at hero scale, for a named real product, or a still whose subject is a list or page. Write filler once with
```
Text filler
```
and the fidelity decides. The product's own icons, its real chrome, the content that makes it recognizable. A brief with a style (kawaii, paper, a poster color) gets that style in full, still built to these rules.
The story. Its shape (
```
references/motion.md
```
, Story): how it feels to use, a flow, or what the system does. Three to five beats and a payoff, 10 to 16 seconds. No cursor move you can't explain. Data never rewinds in view without a cause. Between a richer story and a calmer frame, choose the frame.
Start from an example. Find the closest gold example (the Gold table below) and film it (
```
node scripts/film.mjs "<preview>/?capture=<gold>" --select '#example' --still --out gold.png
```
;
```
npm run dev
```
serves the preview). Copy its folder into your project as the starting point; don't rewrite it from a glance. The quickest loop: copy it to
```
examples/<yours>/
```
here, where the preview picks it up and
```
?capture=<yours>
```
films it, then move it into the host when it passes and fix its kit import path. Keep its structure: the stage size, the crop and bleed, row and type sizes, spacing, the script's beats, the kit parts. Now read
```
references/craft.md
```
in full: it is short, and it holds the still-frame rules the gold can't show you, the cases your gold doesn't happen to contain. Then replace its look and content with the brief's product: the tokens from step 2, the product's own icons, chrome and words. A copy that only changes the name is not done: it should read as the brief's product, not the gold's. If no gold tells your story, choose in two parts: the layout first (pick it from the table in
```
references/framing.md
```
; each layout names its example), and copy that example even though its story differs; then borrow the motion for your beats from the example whose story is closest, and build what neither has in the same style. Then frame it: crop to the panel the story happens in, judged in the final visible crop (
```
references/framing.md
```
has the rules and the layout table). The short form: one gutter, a full one or well past; only filler bleeds; what opens stays in; windows keep their shape; the page is the ground, so no plate under a hero on a white or dark page and no window whole with air on four sides;
```
unframed
```
only when the developer asks; no dead corners. Film one still at both widths beside the gold's; if yours is emptier, flatter or more boxed, fix the frame before any motion.
The screen. Count the real strings, usually 3 to 7 (
```
references/craft.md
```
, Restraint): a budget for words, not elements. Build with the kit's tokens,
```
Bar
```
,
```
Text
```
and
```
Row
```
. Fit every control's text before it moves. Mark what the cursor touches with
```
data-target
```
and
```
data-cursor
```
; measure with
```
rect()
```
, never hard-code.
Choreograph. The
```
Act
```
API. Keep what appears mounted and toggle it so exits animate (
```
Bubble
```
and
```
Fly
```
hand off explicitly). Animate the relationship, not just the object: a new row carries the rows below it, a surface that resizes never stretches its text. Beats overlap, groups stagger, the payoff holds, the loop ends where it began or resets with a visible cause.
Rehearse. Set
```
poster
```
first: most people see only that frame (a thumbnail, reduced motion, a screenshot), so it is the beat that tells the story on its own, never one caught mid-change, with the result left on screen rather than tidied away (
```
references/motion.md
```
, Story). Then film the loop, not just a still: the contact sheet at the shown width and at 390, and step through every press, menu, morph and the loop seam (
```
references/rehearse.md
```
). A still can't show a pop. Read every frame, fix the largest visible fault first (framing, then hierarchy, then motion, then polish), re-film. Then hold it next to the closest gold and answer the whole-composition and style pairs in
```
references/teaching.md
```
as questions about your still (what does the eye land on first, and is it the result? is one window, tile or device clearly leading?); any no is the largest fault.
```
film.mjs --gate
```
ending
```
rehearsal passed
```
is necessary, not sufficient. Then run the last pass in
```
references/rehearse.md
```
: a fresh-eye review (
```
references/review.md
```
) and
```
REHEARSAL.md
```
beside the component (template in
```
references/verify.md
```
, Hand over): the gold you copied, what you changed, what you did not check.

Faults that come back every round, each with its rule; check them before handing over:

Content that swaps instead of moving (
```
references/motion.md
```
, Changing text and values).
Gray bars where the eye lands; filler belongs at the edges (
```
references/craft.md
```
, Restraint).
A plate behind the window, or a window floating with air on four sides; the window or phone fills at least two thirds of the stage and runs off an edge (
```
references/framing.md
```
, rule 5 and Small formats and the page).
Empty bands, cut controls and shadows (
```
references/craft.md
```
, Restraint;
```
references/framing.md
```
, rule 4).
Stock AI and made-up logos: sparkles, purple, a letter in a colored square (
```
references/craft.md
```
, Icons and logos).
Busy rows and uneven insets (
```
references/craft.md
```
, Restraint and Spacing and alignment).
Long holds and a reset with no cause (
```
references/motion.md
```
, Loops).
A selection that isn't under the I-beam (
```
references/motion.md
```
, Drags and selection).
A status bar or home indicator drawn by hand; the Phone draws both (
```
references/craft.md
```
, Chrome and devices).
A centered amount centered with its sign (
```
references/craft.md
```
, Spacing and alignment).

大多数质量在写任何代码之前就已决定。先写方案：它放在哪里、焦点对象是什么、动作是什么、结果落点是什么、哪些内容可以省略。

媒介与位置。 静态图或动画（循环、进入视口时播放一次，或悬停触发）。页面、承载界面及其宽度。按最终观看尺寸进行设计：文案旁的 Hero 区约为 720 × 340（
```
hero-demo
```
）；全宽 Hero 区宽 900 到 1100（
```
linear
```
）；卡片为 400 × 300，以 1:1 显示；演示宽度绝不低于约 320，但 Bento 磁贴或卫星卡片可以更小。每个能够放入手机栏位的演示都要提供按栏位宽度（358）设计的
```
compact
```
版本；这是重新设计，而不是强行压缩（
```
references/framing.md
```
，Small formats and the page）。磁贴网格属于同一套设计：使用
```
references/bento.md
```
进行规划。
观察。 拿到产品的代码或网站后，将其 tokens 映射到 kit 的 tokens（
```
references/looks.md
```
）；如果开发者要求使用他们自己的组件，就在 stage 内使用这些组件，而不要使用 kit 的小部件。否则需要确定一个主题（light、dark、blueprint、glass）、一套调色板（accent、mono）和一种保真度：
```
minimal
```
全部使用条形占位；
```
standard
```
在文字承载意义的地方使用文字，其余位置使用条形占位；
```
realistic
```
则处处使用真实内容。默认采用 light 主题、accent 调色板和 standard 保真度；在 Hero 尺寸、面向某个明确的真实产品，或静态图的主体是列表或页面时，使用 realistic。用
```
Text filler
```
一次性编写填充内容，具体呈现由保真度决定。使用产品自己的图标、真实界面外框，以及使其易于辨识的内容。如果需求说明指定了风格（kawaii、paper、poster color），就要充分贯彻该风格，同时仍按照这些规则构建。
故事。 故事形态（
```
references/motion.md
```
，Story）：使用体验、流程，或系统执行的操作。三到五个节拍和一个结果落点，时长 10 到 16 秒。不允许任何无法解释的光标移动。数据在观众视野内回退时，必须有明确原因。在内容更丰富的故事与更平静的画面之间，选择更平静的画面。
从示例开始。 找到最接近的黄金示例（见下方黄金示例表）并录制它（
```
node scripts/film.mjs "<preview>/?capture=<gold>" --select '#example' --still --out gold.png
```
；
```
npm run dev
```
用于提供预览服务）。将其文件夹复制到项目中作为起点；不要凭看一眼就重写。最快的迭代循环：把它复制到这里的
```
examples/<yours>/
```
，预览会自动识别，并由
```
?capture=<yours>
```
录制；通过后再将其移入宿主项目，并修正 kit 的导入路径。保留它的结构：stage 尺寸、裁切与出血、行和字体尺寸、间距、脚本节拍以及 kit 组件。现在完整阅读
```
references/craft.md
```
：它篇幅很短，却包含黄金示例无法展示的静态画面规则，以及黄金示例恰好未涵盖的情况。然后根据需求中的产品替换其外观和内容：采用第 2 步中的 tokens，以及产品自己的图标、界面外框和文案。只改了名称的复制品不算完成：它应该读起来像需求中的产品，而不是黄金示例中的产品。如果没有黄金示例能讲出你的故事，就分两步选择：先选布局（从
```
references/framing.md
```
的表中挑选；每种布局都注明对应示例），即使故事不同也复制该示例；然后从故事最接近的示例中借用动作节拍，并以相同风格构建两者都没有的内容。接着进行构图：裁切到故事发生的面板，并以最终可见裁切为准进行判断（
```
references/framing.md
```
包含规则和布局表）。简版规则：只保留一道留白槽，内容要么填满它，要么大幅越过；只有填充内容可以出血；展开后出现的内容要保持在画面内；窗口保持自身形状；页面就是承载面，因此在白色或深色页面的 Hero 区下方不要放底板，也不要让一个完整窗口四面都留有空白；只有开发者明确要求时才使用
```
unframed
```
；不能有死角的空洞。在两种宽度下各录制一张静帧，并与最接近的黄金示例并排查看；如果你的作品显得更空、更平或更“装框”，先修复构图，再处理任何动作。
屏幕。 统计真实文案字符串，通常为 3 到 7 个（
```
references/craft.md
```
，Restraint）：这是文字预算，而不是元素预算。使用 kit 的 tokens，以及
```
Bar
```
、
```
Text
```
和
```
Row
```
进行构建。移动前先确保每个控件的文字都能完整容纳。用
```
data-target
```
和
```
data-cursor
```
标记光标触碰的对象；使用
```
rect()
```
测量，绝不要硬编码。
编排动作。 使用
```
Act
```
API。让出现的内容保持挂载并通过切换状态实现退出动画（
```
Bubble
```
和
```
Fly
```
会显式交接）。要动画化元素之间的关系，而不只是对象本身：新行出现时带动下方各行；调整表面尺寸时，文字绝不能被拉伸。节拍相互重叠，组内错开出现，结果落点保持足够时长；循环要么回到起点，要么在有可见原因的情况下重置。
排练。 先设置
```
poster
```
：大多数人只会看到这一帧（缩略图、减少动态效果模式或截图），因此它必须能够独立讲清故事，不能定格在变化中途，并且要让结果留在屏幕上，而不是被收拾掉（
```
references/motion.md
```
，Story）。然后录制整个循环，而不只是静帧：在展示宽度和 390 宽度下生成接触印样表（contact sheet），逐步检查每次按压、菜单、变形以及循环衔接处（
```
references/rehearse.md
```
）。静态图无法展示弹出效果。逐帧检查，先修复最明显的视觉问题（构图，其次是层级，再次是动作，最后是润饰），然后重新录制。接着把它与最接近的黄金示例并排审视，并像对静帧提问一样，回答
```
references/teaching.md
```
中关于整体构图和风格的成对问题（视线首先落在哪里，是否落在结果上？是否有一个窗口、磁贴或设备明显领先？）；任何一个答案为“否”，它就是最大的问题。
```
film.mjs --gate
```
以
```
rehearsal passed
```
结尾是必要条件，但并非充分条件。然后执行
```
references/rehearse.md
```
中的最后一轮检查：用全新的眼光审阅（
```
references/review.md
```
），并在组件旁附上
```
REHEARSAL.md
```
（模板见
```
references/verify.md
```
，Hand over）：说明复制了哪个黄金示例、改动了什么，以及哪些内容没有检查。

每轮都会反复出现的问题，以及对应规则；交付前逐一检查：

内容发生替换而非移动（
```
references/motion.md
```
，Changing text and values）。
**视线落点处出现灰色条块；**填充内容应放在边缘。
**窗口后面有底板，或窗口悬浮着且四面留空；**窗口或手机至少占 stage 的三分之二，并延伸越过某个边缘。
空白带、残缺的控件和阴影（
```
references/craft.md
```
，Restraint；
```
references/framing.md
```
，rule 4）。
**陈腐的 AI 视觉和杜撰的 Logo：**闪光符号、紫色、彩色方块里的字母（
```
references/craft.md
```
，Icons and logos）。
拥挤的行和不均匀的内边距（
```
references/craft.md
```
，Restraint and Spacing and alignment）。
长时间静止和无原因的重置（
```
references/motion.md
```
，Loops）。
选区不在 I 型光标下方（
```
references/motion.md
```
，Drags and selection）。
手工绘制状态栏或 Home 指示条；
```
Phone
```
会同时绘制两者（
```
references/craft.md
```
，Chrome and devices）。
居中金额连同其正负号一起居中（
```
references/craft.md
```
，Spacing and alignment）。

Examples

示例

Film the closest one before you start (step 4). The gold examples are the quality bar; product studies are for borrowing an interaction, never another product's identity; specimen sheets are catalogs, not compositions. Run everything with

npm install

and

npm run dev

teaching/

holds bad/good pairs (

references/teaching.md

) for diagnosing a problem; the bad halves are never starting points.

开始前先录制最接近的示例（第 4 步）。黄金示例是质量基准；产品研究用于借鉴交互，绝不能借用其他产品的身份；样张目录是组件目录，而不是完整构图。使用

npm install

和

npm run dev

运行所有内容。

teaching/

存放用于诊断问题的糟糕/优秀对照（

references/teaching.md

）；糟糕的一半绝不能作为起点。

Gold

黄金示例

Need	Example	What to learn
Still or feature card	`static-card`	Quiet hierarchy, a hard crop, one satellite, real words only on the selected customer, its neighbors and the total
Dark still	`dark-bento`	One signal said once; album art keeps it a music app
Animated hero, a gesture	`hero-demo`	Five beats, named targets, an annotation, a terminal coming forward
Choreography, no cursor	`payout-flow`	Slow overlapping arrivals, reading time, a payoff that holds
Content changing in place	`choreography`	Retained tracks, soft masks, dependent timing
AI answer	`ai-chat`	The question sent, Thinking, the answer streaming in with its height, sources last; no sparkles, no purple
AI with cards	`ai-cards`	A multiple-choice card answered and kept as the record, a card of options opening in the thread, booked from its own button
Form validation	`form-error`	An error on the field that caused it, cleared by fixing it, then the button confirms on itself
Drag to reorder	`reorder`	A row lifted by its grip, the others making room, dropped into place
Chart scrub	`chart-scrub`	A hairline and dot that follow the pointer, the headline value rolling to the day under it
Edit in a table	`table-edit`	A cell edited in place, then the total it feeds rolls a beat later
Loading to content	`loading`	A skeleton at the content's own geometry, rows resolving top to bottom, real chrome throughout
Dark hero	`dark-hero`	Depth from surface steps on black, one lit color, a status that changes on its own pill
Live collaborators	`presence`	Each person one color everywhere, names riding their cursors, work shown in the doc's own marks
System story	`subscriptions`	A chip flies into a row, MRR rolls, a second scene is the reset
Close-up	`close-up`	One control at 1.4x with its window's chrome, the row whole, a large cursor to match
Many of one	`many-of-one`	A grid of one thing off every edge, one tile in focus by depth, the only one with words
Fade crop	`fade-crop`	A window fading out at its foot, over filler, instead of running off an edge
Panel over product	`panel-annotation`	A settings panel over the product's margin, one leader from the setting to what it changed
Overlapping windows	`overlap`	A card in front of a window, its edge on the window's sidebar line
Stacked cards	`stacked-cards`	Two components at one width, a small gap, the lower one off the bottom
Opposite corners	`opposite-corners`	A bento tile: copy bottom-left, the product hung from the top-right corner
Tilted stack	`tilted-stack`	A loose pile of paper, small alternating angles, only the top card has words
Corner chip	`corner-chip`	A small chip centered on a window's corner, half outside
Monochrome	`monochrome`	Other companies' products in a row, grayscale, faded at the foot
Row of windows	`window-row`	Sessions side by side at one height: focus by depth, neighbors cut by the stage, only filler cropped
Window and phone	`device-pair`	A dashboard and a lock screen telling one event; the phone straddles over margin, never over the figure
Related objects	`story`	An invoice, a plan, a connector, rolling totals
Calendar drag	`calendar`	A populated week, one focal event, a measured pickup
Free dragging	`freeform-drag`	Grab offset, a measured grid, a drop slot that snaps
Phone app	`phone-touch`	A card opens into its screen as one object, and the loop folds back
Dynamic Island	`dynamic-island`	One black shape, its content a separate layer
Messages	`messages`	Composer, typing, receipts, a bubble's lifetime
Cursors	`cursors` , `cursor-morph` , `cursor-resize`	Five styles, element-driven kinds, resize edges and corners, no cursor at all
Annotations	`annotations`	Leaders, dimensions, flows and a moving target; `references/annotations.md`
Feature grid	`bento`	One hero, one window, a stat, an object, a diagram
Dark ruled grid	`ruled-bento`	Shared rules and technical imagery
Consumer grid	`staggered-bento`	Offset tiles, graphic art, physical objects
Image-led hero grid	`hero-grid`	Different grounds and materials composed as one picture
Upload	`upload`	A file dragged in from the desktop, an upload row with progress that settles as a file row
Share	`share`	A share popover over a document: an email becomes a chip, a role menu, a person added to the list
Swipe	`swipe`	A phone swipe to archive: press, swipe, a throw at the finger's speed, the gap closes

需求	示例	学习要点
静态图或功能卡片	`static-card`	克制的层级、果断的裁切、一个卫星对象；只为选中的客户、相邻项和总计使用真实文字
深色静态图	`dark-bento`	只表达一次一个信号；专辑封面让它仍像一款音乐应用
带手势的动画 Hero 区	`hero-demo`	五个节拍、具名目标、一处标注、一个向前推进的终端
无光标的动作编排	`payout-flow`	缓慢重叠的出现节奏、留出阅读时间、结果落点持续展示
原位变化的内容	`choreography`	保留轨道、柔和遮罩、依赖式时序
AI 回答	`ai-chat`	发送问题、Thinking、回答随高度变化流式出现、来源最后出现；不要闪光特效，不要紫色
带卡片的 AI	`ai-cards`	已回答并保留为记录的多选卡、在对话中展开的选项卡、可从自身按钮完成预订
表单验证	`form-error`	错误显示在触发错误的字段上；修复后错误消失，随后按钮自身给出确认
拖拽排序	`reorder`	一行通过拖拽手柄被提起，其余行让出空间，再被放到正确位置
图表拖动	`chart-scrub`	一条细线和圆点跟随指针，标题数值滚动到指针下方的日期
表格内编辑	`table-edit`	单元格原位编辑，随后其影响的总计延后一个节拍滚动更新
从加载到内容	`loading`	骨架屏保持内容本身的尺寸结构，各行自上而下解析为真实内容，并始终保留真实界面外框
深色 Hero 区	`dark-hero`	通过黑色背景上的表面层级营造深度，只使用一种点亮色，状态在自身胶囊内变化
实时协作者	`presence`	每个人在各处只使用一种颜色，姓名跟随各自光标，工作以文档自身的标记呈现
系统故事	`subscriptions`	标签飞入一行，MRR 滚动更新，第二个场景用于重置
特写	`close-up`	控件以 1.4 倍放大，并保留窗口界面外框，整行完整可见，使用与之匹配的大光标
单一元素的阵列	`many-of-one`	同一种物件从每条边缘延伸出去的网格，通过景深让一个磁贴成为焦点，并且只有它带文字
渐隐裁切	`fade-crop`	窗口底部在填充内容上方渐隐，而不是延伸越过边缘
覆盖产品上的面板	`panel-annotation`	设置面板覆盖在产品边缘上，用一条引导线从设置项连到它所改变的内容
重叠窗口	`overlap`	一张卡片位于窗口前方，其边缘与窗口的侧边栏线对齐
堆叠卡片	`stacked-cards`	两个组件宽度相同，间距很小，下方卡片越过底部
对角	`opposite-corners`	一个 Bento 磁贴：文案位于左下角，产品悬挂在右上角
倾斜堆叠	`tilted-stack`	一叠松散的纸张，以小幅交替角度排列，只有顶部卡片带文字
转角标签	`corner-chip`	小标签居于窗口一角，一半露在外部
单色	`monochrome`	其他公司的产品排成一行，采用灰度，并在底部渐隐
窗口横排	`window-row`	多个会话并排且高度一致，通过景深确定焦点，相邻窗口被 stage 裁切，只有填充内容被裁掉
窗口与手机	`device-pair`	仪表盘和锁屏共同讲述一个事件；手机跨在页边距上，但绝不跨在主体上
相关对象	`story`	发票、方案、连接器，以及滚动更新的总计
日历拖拽	`calendar`	填充完整的一周、一个焦点事件，以及经过测量的拾取动作
自由拖拽	`freeform-drag`	抓取偏移量、经过测量的网格，以及可吸附的放置槽
手机应用	`phone-touch`	卡片作为一个整体展开为屏幕，循环再折回原处
Dynamic Island	`dynamic-island`	一个黑色形状，其内容位于独立图层
消息	`messages`	输入框、输入过程、已读回执和气泡的生命周期
光标	`cursors` , `cursor-morph` , `cursor-resize`	五种样式、由元素驱动的类型、调整尺寸时的边缘和角落，以及完全不显示光标
标注	`annotations`	引导线、尺寸、流程和移动目标； `references/annotations.md`
功能网格	`bento`	一个 Hero 区、一个窗口、一项统计、一个对象和一张图示
深色标尺网格	`ruled-bento`	共享的标尺和技术图像
消费者网格	`staggered-bento`	错位磁贴、图形艺术和实体物件
图像主导的 Hero 网格	`hero-grid`	不同承载面与材质组合成一幅图
上传	`upload`	从桌面拖入一个文件，上传行中的进度最终稳定为文件行
分享	`share`	文档上方的分享浮层：邮箱变成标签、角色菜单，以及把一个人加入列表
滑动	`swipe`	手机滑动手势用于归档：按压、滑动，以手指速度将内容甩出，随后间隙闭合

Product studies

产品研究

Recognizable products (Figma, Linear, Slack, Raycast, Finder, Spotify, Notion, Gmail, Google's apps, Office, Wikipedia, Telegram, iMessage): read

references/products.md

first. Borrow the interaction, not another product's identity.

Need	Example	What to learn
Design tool	`figma`	Canvas selection, a color picker, a second cursor
Issue tracker	`linear`	Command menu and assignment
Chat	`slack`	Messages, a reaction, a thread reply
Launcher	`raycast`	Search and clipboard history over a blurred desktop
Files	`finder` , `finder-glass`	Quick Look over a file list; a file moved into a folder; the same window in frosted glass
Music, dark	`spotify`	A dark desktop app with album art
Docs and editors	`notion` , `google-docs`	A slash command; a comment and its reply
Email	`gmail`	Hover actions, archive, an undo toast
Calendar, real app	`google-calendar`	Drag to create an event, the quick-create popup
Office	`powerpoint` , `excel`	Slide editing; AutoSum and a chart
Browser page	`wikipedia`	Search suggestions in a browser
Phone conversations	`telegram` , `imessage`	Native chat apps on an iPhone

可辨识产品（Figma、Linear、Slack、Raycast、Finder、Spotify、Notion、Gmail、Google 的应用、Office、Wikipedia、Telegram、iMessage）：先阅读

references/products.md

。借鉴交互，而不是另一个产品的身份。

需求	示例	学习要点
设计工具	`figma`	画布选中、颜色选择器、第二个光标
任务跟踪器	`linear`	命令菜单和任务分配
聊天	`slack`	消息、表情回应和会话回复
启动器	`raycast`	模糊处理的桌面上展示搜索和剪贴板历史
文件	`finder` , `finder-glass`	文件列表上的 Quick Look；文件移入文件夹；同一窗口采用磨砂玻璃效果
音乐，深色	`spotify`	带专辑封面的深色桌面应用
文档与编辑器	`notion` , `google-docs`	斜杠命令；评论及其回复
电子邮件	`gmail`	悬停操作、归档和撤销 Toast
日历，真实应用	`google-calendar`	拖拽创建事件和快速创建弹窗
Office	`powerpoint` , `excel`	幻灯片编辑；AutoSum 和图表
浏览器页面	`wikipedia`	浏览器中的搜索建议
手机会话	`telegram` , `imessage`	iPhone 上的原生聊天应用

Specimen and reference sheets

样张与参考表

Catalogs of parts and grounds, described in

references/kit.md

(Specimen sheets). Look up a part here; compose from a gold example.

Need	Example	What to learn
Kit specimens	`chrome` , `phones` , `controls` , `parts` , `kit-extras`	Every frame and part
Glass	`glass`	Frosted surfaces over a color field
Backgrounds	`backgrounds`	One interface over twenty grounds; `references/backgrounds.md`
Logos	`brand-marks`	Real marks, optically sized, on light and dark; `references/brands.md`
A product's look	`looks`	Type, shape and color working together

组件和承载面的目录，说明见

references/kit.md

（Specimen sheets）。可在此查找组件，并以黄金示例为蓝本进行构图。

需求	示例	学习要点
Kit 样张	`chrome` , `phones` , `controls` , `parts` , `kit-extras`	每一种框架和组件
玻璃	`glass`	覆盖在色彩场上的磨砂表面
背景	`backgrounds`	一个界面置于二十种承载面之上； `references/backgrounds.md`
Logo	`brand-marks`	在浅色和深色背景上按视觉尺寸呈现的真实标志； `references/brands.md`
产品的视觉风格	`looks`	字体、形状和颜色协同工作

The kit

Kit

Copy

kit/

into the project and import from

kit/index.ts

. React, react-dom and lucide-react (for

Icon

, which

Field

and

Chip

use); each part brings its own CSS. It does the parts that are hard to get right by hand and leaves the product's look to you.

references/kit.md

has every part's props and rules; read the entries for the parts you use.

The stage.
```
Stage
```
: design size and scale-to-fit,
```
compact
```
, scene state, playback, the look, the cursor. The script gets an
```
Act
```
(
```
set
```
,
```
wait
```
,
```
move
```
,
```
click
```
,
```
type
```
and the rest:
```
references/kit.md
```
, Act).
Frames.
```
Window
```
,
```
Phone
```
with
```
LockScreen
```
and
```
Notification
```
,
```
Keyboard
```
,
```
Thread
```
with
```
Bubble
```
,
```
Stamp
```
,
```
Receipt
```
. Real geometry; never draw a window, device or bubble by hand.

Motion.

Collapse

Roll

Swap

Count

Connector

Fly

Follow

States

Stream

Popover

Scroll

Camera

Expand

. They handle the frames a cold hand gets wrong.

Small parts.
```
Bar
```
,
```
Text
```
,
```
Row
```
(every list is made of it),
```
Avatar
```
,
```
Pin
```
,
```
Icon
```
,
```
Menu
```
,
```
Field
```
,
```
Segmented
```
,
```
Toggle
```
,
```
Tabs
```
,
```
Badge
```
,
```
Chip
```
,
```
BrandMark
```
,
```
Code
```
,
```
Chart
```
. Quiet starting points; restyle to the product, never reshape a kit part's geometry from outside.
stageshow.css
: tokens, looks, edge fades, chrome, phones, keycaps.

将

kit/

复制到项目中，并从

kit/index.ts

导入。使用 React、react-dom 和 lucide-react（用于

Icon

，

Field

和

Chip

会使用它）；每个组件都自带 CSS。它负责处理那些手工难以做好的部分，而产品的视觉风格则由你决定。

references/kit.md

列出了每个组件的 props 和规则；请阅读你所用组件对应的条目。

Stage。
```
Stage
```
：设计尺寸与缩放适配、
```
compact
```
、场景状态、播放、外观和光标。脚本获得一个
```
Act
```
（
```
set
```
、
```
wait
```
、
```
move
```
、
```
click
```
、
```
type
```
等；
```
references/kit.md
```
，Act）。
Frames。
```
Window
```
、
```
Phone
```
（含
```
LockScreen
```
和
```
Notification
```
）、
```
Keyboard
```
、
```
Thread
```
（含
```
Bubble
```
）、
```
Stamp
```
、
```
Receipt
```
。采用真实几何结构；绝不要手工绘制窗口、设备或气泡。
Motion。
```
Collapse
```
、
```
Roll
```
、
```
Swap
```
、
```
Count
```
、
```
Connector
```
、
```
Fly
```
、
```
Follow
```
、
```
States
```
、
```
Stream
```
、
```
Popover
```
、
```
Scroll
```
、
```
Camera
```
、
```
Expand
```
。它们能处理那些新手手工处理时容易出错的部分。
Small parts。
```
Bar
```
、
```
Text
```
、
```
Row
```
（每个列表都由它构成）、
```
Avatar
```
、
```
Pin
```
、
```
Icon
```
、
```
Menu
```
、
```
Field
```
、
```
Segmented
```
、
```
Toggle
```
、
```
Tabs
```
、
```
Badge
```
、
```
Chip
```
、
```
BrandMark
```
、
```
Code
```
、
```
Chart
```
。朴素的起点；重新设计成产品的样子，但绝不要从外部改变 kit 组件的几何结构。
**
```
stageshow.css
```
：**tokens、视觉风格、边缘渐隐、界面外框、手机和键帽。

The references

参考资料

references/framing.md

: the framing rules and the layout table.

references/craft.md

: the still frame (restraint, type, spacing, icons, color, chrome).

references/motion.md

: story, loops, pace, the cursor and drags.

references/verify.md

: the checklist with a you-see / you-do table.

references/rehearse.md

: how to film, and the film lines that are never intentional.

references/framing.md

：构图规则和布局表。

references/craft.md

：静态画面（克制、字体、间距、图标、颜色、界面外框）。

references/motion.md

：故事、循环、节奏、光标和拖拽。

references/verify.md

：包含“你看到什么／你做什么”表格的检查清单。

references/rehearse.md

：如何录制，以及录制中绝不应出现的画面问题。