opening-copyRedesigning the TT4G Design Systemfor Vibe Coding
从页面梳理设计系统与组件规范，再用 Figma Plugin 学习规则并批量生成组件变体
没有找到匹配的变体
标题与文案
route-introHelp Center AI Search
从查找帮助内容，转向直接解决用户问题
section-1-centered-judgment让组件规则在研发与 AI 中持续执行
section-2-scenario-heading02 · 设计迭代
让可执行规则驱动 Agent，减少批量刷新中的重复劳动
先用工作量与还原度筛选路径，再保留适合当前组件复杂度的执行方式，并为高重复场景探索生成工具。
02 · 设计迭代
搜索与回答共用同一下拉
搜索下拉保留相关页面，同时生成 AI 回答，不让新能力破坏原有路径。
02 · 设计迭代
搜索与回答共用同一下拉
搜索下拉保留相关页面，同时生成 AI 回答，不让新能力破坏原有路径。
回答结果卡片
卡片保持自己的内容 padding，不继承 Section 2 标题组的间距。
内容与媒体布局
content-rounded-media圆角媒体卡片媒体保留 24px 圆角容器，占满 12 / 12 内容轨道
content-project2-canvascontent-card-layout卡片标题
卡片正文用于展示内容说明层级
卡片标题
卡片正文位于卡片容器之外
卡片标题
同排保持相同文字结构与角色
卡片标题
同排保持相同文字结构与角色
卡片标题
同排保持相同文字结构与角色
卡片标题
同排保持相同文字结构与角色
content-open-grid
业务抽象
从真实场景定义内容结构、状态和使用边界
协作落地
把设计判断转译成可执行、可验收的修改依据
批量刷新
让工具批量更新既有内容，减少重复维护
工具探索
在高重复组合场景中控制生成结果
结构框架
site-headerStructuremxue/space
project-tocStructureindicator-linesProject 03 · 2 种指示线rail-dividerStructurejunction-marker5 directionscross
t-down
t-up
t-left
t-right
open-gridStructure01
02
03
媒体容器与间距
结构层（保持不变）
结构线 → 结构网格：上 / 右 / 下 / 左均为 16px；12 栏；gutter 16px
不参与本轮内容档位
圆角卡片容器的上方内容间距
结构线内侧 16px margin 结束处 → 卡片容器外轮廓顶边
0 / 96 / 128px 这是内容层；不包含结构线内侧 16px margin
圆角卡片容器的下方内容间距
卡片容器外轮廓底边 → 结构线内侧 16px margin 开始处
0 / 96 / 128px 与卡片上方独立选择；不包含结构线内侧 16px margin
Section 1 标题内容 padding
结构层四边 16px 独立保留；这里仅记录标题内容层
左 36px · 右 36px（固定） 标题组使用 128 / 36 / 36 / 36；卡片上下方分别使用 0 / 96 / 128。
Section 2 标题内容 padding
与 Section 1 分开归类；这里只固定横向值
左 36px · 右 36px（固定） 标题组使用 48 / 36 / 24 / 36；卡片上下方分别使用 0 / 96 / 128。三层必须独立：卡片上方、卡片下方与结构线四边 16px margin 分别计算，不能合并、相加成一个 token，也不能互相替代。卡片内部 padding 同样不属于本轮定义。
结构线
结构网格：四边 margin 16px · 12 栏 · gutter 16px
卡片上方内容间距：0 / 96 / 128px结构 margin 16px 另算
左 0
圆角矩形卡片容器仅看容器外轮廓；不包含附加说明区
右 0
卡片下方内容间距：0 / 96 / 128px结构 margin 16px 另算
Project 1 · 逐页面
页面覆盖：overview、help-center、help-current、help-iteration-decision、help-iteration（help-direction / help-answer / help-actions）、customer-support、support-current、support-task、support-entry-style、support-entry、support-answer-position、support-confirmation、support-final-flow。
页面位置圆角容器组当前上方实测当前下方实测
help-currentmedia stack40 · 标题内容底边→容器组顶边：24 + 1616 · 容器组底边→当前页面段底边
help-directioncomparison40 · 标题区底边→容器组顶边：24 + 1616 · 容器组底边→当前二级内容块底边
help-answerartifact grid40 · 标题区底边→容器组顶边：24 + 1616 · 容器组底边→当前二级内容块底边
help-actionsartifact grid40 · 标题区底边→容器组顶边：24 + 1624 · 容器组底边→下一内容 owner 顶边
support-currentartifact grid16 · 当前页面段顶边→容器组顶边16 · 容器组底边→当前页面段底边
support-entry-styleartifact cards40 · 标题区底边→容器组顶边：24 + 1616 · 容器组底边→当前页面段底边
support-entrycomparison40 · 标题区底边→容器组顶边：24 + 1616 · 容器组底边→当前页面段底边
support-answer-positionprototype card40 · 标题区底边→容器组顶边：24 + 1616 · 容器组底边→当前页面段底边
support-confirmationcomparison40 · 标题区底边→容器组顶边：24 + 1616 · 容器组底边→当前页面段底边
support-final-flowflow cards40 · 标题区底边→容器组顶边：24 + 1616 · 容器组底边→当前页面段底边
已核对、但不属于圆角媒体 / 卡片容器：overview 的原始 hero media 见下方“开放式媒体”；help-center、help-iteration-decision、support-task 是纯文字结构；customer-support 是开放式 statement grid；help-actions 与 support-final-flow 另含开放式 result grid。
Project 2 · 逐页面
页面覆盖：overview、background、challenge、token、component、business-component、engineering-handoff、automation、component-overview、value。
页面位置圆角容器组当前上方实测当前下方实测
backgroundstatement media16 · 当前固定陈述区顶边→容器顶边16 · 容器底边→当前固定陈述区底边
tokentoken cards16 · 当前卡片网格顶边→卡片顶边16 · 卡片底边→当前卡片网格底边
business-componentbusiness component cards24 · 标题区底边→容器组顶边：24 + 0112 · 容器组底边→页面段底边：56 + 56
engineering-handoffcapability cards60 · 标题区底边→容器组顶边：24 + 3656 · 容器组底边→当前页面段底边
component-overviewcomponent sample cards60 · 标题区底边→容器组顶边：24 + 3672 · 容器组底边→页面段底边：56 + 16
已核对、但不属于圆角媒体 / 卡片容器：overview、component 是纯文字结构；challenge、value 是开放式 result grid；token 的 open media cell 与 automation 的全宽 workflow iframe 见下方“开放式媒体”。
开放式媒体 · 逐页面
与圆角容器分开记录；这里只审计页面中真实存在的开放式媒体，不参与圆角容器的间距收敛。
项目 / 页面位置开放式媒体上方可见距离下方可见距离
Project 1 / overviewraw hero media36 · 开场文字行底边→媒体顶边96 · 媒体底边→项目开场页面段底边
Project 2 / tokenopen media cell36 · header 底部16 · 下一 cards grid 的上内边距
Project 2 / automationfull-width workflow iframe36 · 标题区底边→iframe 顶边0 · iframe 底边与当前页面段底边重合
读法：卡片上方与下方分别选择 0 / 96 / 128；结构网格上下各 16px 始终单独计算，不能合并成 16 / 112 / 144。
卡片与内容容器
media-sidecar-copyProject 01 · 8 + 4主媒体 · 8 / 12
保留原有路径降低学习成本
说明是独立的编辑 owner，不进入媒体 wrapper，也不作为 caption 使用。
external-captionProject 01 · Evidence identitymedia · 16 / 10
03 · 回答来源可以被检查
sequence-groupProject 01 · Causal flow01
STEP 01
打开入口
进入原有客服路径
02
STEP 02
提交问题
保留人工处理出口
03
STEP 03
生成回答
提交后再生成内容
04
STEP 04
判断结果
解决或继续人工
content-card / 3-column4 / 12Title
Body copy stays with the same authored object
reference-linkSource attributionReference: Alibaba Cloud Design — Vibe Designing Playbook
full-media-bottom-copy / span-66 / 12media · 16 / 10
Title
Owned explanation
comparison-groupRelationshipOption A
Same anatomy
Option B
Same anatomy
metric-groupContent structureExplanation
Explanation
颜色 Token
color.tokenspage/flat1#FEFEFE#121212页面背景page/flat2#F9F9F9#1E1E1E卡片 / 媒体容器page/flat3#F5F5F5#2C2C2C强调卡片底色text/text1black / 100%#F6F6F6标题与正文text/text2black / 65%white / 88%辅助解释text/text3black / 48%white / 60%元信息与注释text/inversewhite / 100%black / 100%反色文字shape/neutral1black / 100%#FAFAFA实心图形shape/neutral2black / 17%white / 32%强边界shape/neutral3black / 12%white / 19%控件边框 / 十字 / T 字shape/neutral4black / 5%white / 13%普通结构线shape/neutral5black / 2%white / 8%极弱分界shape/secondary1#20D5EC#20D5EC主青色 / 实心强调shape/secondary2cyan / 50%cyan / 50%次级强调shape/secondary3cyan / 32%cyan / 32%弱强调与状态shape/secondary4cyan / 13%cyan / 21%轻量结构与底色shape/secondary5cyan / 5%cyan / 13%极弱分界与底色Reveal 类型
content-cursorPointer打开鼠标反色预览文字与图片覆盖反色 · 自由跟随
reveal-groupMotion01Nearest owner
02Peer order
03Final geometry
title-line-groupMotionOne explicitline at a time