为何用 DFC Bridge

设计：

交付对象不明。

前后端、AI 在猜：做什么，数据哪来，按钮去哪？

DFC Bridge 不规定设计。交付决定，不是猜测。

↓ 下载设计 .fig

1. 打开 Figma。
2. 首页点 Import。
3. 选择下载的 .fig。

1. 好看，但不清楚

desktop、mobile-final-2：同一页面？名称没说。

两棵树：哪些元素相同？

桌面: Heading / Button.

移动: Title mobile / Button copy.

两项移动版决定：

• 标题删掉 «понятных»（清晰）。改了内容，不是换行。
• 整个 hero-actions 从 hero-copy 移到 hero，放在图后。换了父级，不只是顺序。

桌面：完整标题，两按钮在图前。

前端: 短文案、图下按钮，都可以。

移动：少了 «понятных»，两按钮在图下。 完整截图。

但需约定文案变体、结构变换，否则只能猜。

2. 连起两个画面

根节点约定：workshop 页面、/workshop 路由、default 视图，宽度 1440 和 375：

workshop [page=workshop] [route=/workshop] [bp=1440] [view=default]
workshop [page=workshop] [route=/workshop] [bp=375] [view=default]

Figma 各操作的连续录屏。自动逐字输入与剪切粘贴；光标不随操作移动。字幕和高亮是后加提示。

下方“全屏查看”→“原始大小”。

独立操作：关联同一页面的根。 GIF。

同一视图，两种宽度。

标签记录约定，不生成布局或代码。

3. 找到同一元素

按用途命名，不按设备：

原名称 1440 / 375	两种宽度的新名称
Heading / Title mobile	hero-title
Button / Button copy	contact-button

此例统一文案和父级，也可另定方案。

Title mobile → hero-title，只改名称。 GIF。

恢复完整标题。 GIF。

整个 hero-actions → hero-copy，不是一个按钮。 GIF。

不同文案需约定的产品变体，换父级需声明的响应式变换。 同一父级可调顺序。

同名按钮，同一父级。

桌面并排，移动版竖排。不同布局没问题： 改 Auto Layout，这里的文字与父级不变。

1440 px：按钮并排。

375 px：按钮竖排，在图前。

workshop-art [decor] [asset] 是图片，标题保留文字。

4. 做好组件库

button-primary、button-secondary 均为可复用组件：改源头，实例更新。

UI-kit 展示两种样式的状态，Modals 管窗口外观。

两种样式、五个状态。窗口在旁。

默认 → 悬停，再单独启用焦点。 GIF。

组件库管外观，页面实例管动作。 同款按钮，别处用途可不同。

• contact-button [action=modal:contact-modal] → 打开窗口。
• faq-link [href=#faq] → 去 FAQ。

声明意图，非运行时证据。

AI: 此宽度的目标是 contact-modal。

实例上设置动作，目标在 375。 GIF。

前往目标只找隐藏图层，不开窗。行为要实现。

组件细节

不是可运行原型。

State=default/hover/pressed/disabled 是 Figma 变体，不是 DFC 标签或页面视图。焦点独立：Focus visible=true 可与 hover、pressed 同时出现。

禁用条件与负责人写进实现契约。无异步请求，不加加载态。

各根有隐藏 [modal=contact-modal]。Modals 主组件只管外观，不是目标。邮箱窗口，不提交表单。

来源写进数据契约。

5. 检查结果

独立副本：hero-title 文案、hero-actions 父级不同。Auto Layout 开启。修正未入镜；视频只有旧报告与复查。

修正未入镜。复查：2 项错误 → 0，仅 375/1440。 GIF。

页面 02 是此方案，旁边有 UI-kit 和 Modals。

后端: 卡片仍是示例，数据来源还需确认。

设计、UI-kit、Modals。

页面 02 的较早报告，不是上段录像的结果，也不是对更新文件的新检查。 完整历史报告。

“就绪”只指检查范围，不是应用完成。

交付源文件、资源和约定。未决问题有负责人。不只一张 PNG 和“都懂了吧”。

按需继续

• 交付清单。
• 内容与溢出 — 准备最佳实践。
• 旧设计中的新区块。
• 视图与变体。
• 无障碍。

示例。Figma 真截图，Assistant 本地版。企鹅为生成插画，问题为示例。验证记录。