用途:当需要向用户呈现多个结构化的设计变体或实现选项供其评审时使用。该技能规定了一套以 HTML 文件承载选项方案的呈现规范。
主要能力与结构:
- 按“轮次”(turn)纵向堆叠展示选项,每轮是一个独立的
<section class="dv-turn">,作为根元素的直接子级,紧跟在</helmet>之后,不使用外层包裹容器。 - 每个选项拥有稳定 ID,采用“轮次+字母”格式(1a、1b、2a……),该 ID 放在选项最外层元素
.dv-opt上,而非徽标上,以便#1b能滚动到整个选项。ID 永久稳定,从不重复使用或重新编号。 - 用户要求新一轮时,将新 section 插入到已有 section 之上,使最新成果位于顶部;不得重排、重新编号或删除历史轮次。
- 选项在一轮内以可换行的横向行并排排列;
.dv-card按内容设定尺寸(可显式指定宽度),不使用height:100%。
使用方式:
- 在
<helmet>中放置一个<style>块,并始终包含<meta name="design_doc_mode" content="canvas">,由宿主提供平移/缩放,不要自行实现。 - 每轮以一行
.dv-next结尾,列出 2–3 条用户可直接粘贴到对话中的英文后续指令。 - 文件中所有选项 ID 引用(轮次标题、选项标签、
.dv-next行及任何正文)都应写成<a class="dv-oid" href="#1b">1b</a>链接,而非裸文本;在对话回复中直接写 1b 即可。 - 轮次 section 的 ID 依次为 t1、t2、t3……
适用场景:设计方案的多样化探索与对比评审,例如多版布局、间距、字体搭配的备选方案,并支持用户基于既有选项提出迭代要求(如“更像 2a 但用 1c 的衬线字体”“把 2b 改为通栏”或“新方向”)。
限制:资料仅给出 HTML 结构与命名规范,未说明具体的设计样式体系、支持的设计工具范围、浏览器兼容性或收费信息,这些暂未提供。