design: 脱靶提醒改图形标记——竖抖即入口、无容器，读者追随图形进入阅读

design-refs/mockup/design-system/02-symbols.html

@@ -122,7 +122,7 @@
       <div class="shapechip">
         <div class="box"><svg width="30" height="28"><path d="M 15 26 L 10 21 L 20 16 L 10 11 L 20 6 L 15 2" fill="none" stroke="#ff6b6b" stroke-width="3" stroke-linejoin="round" stroke-linecap="round"/></svg></div>
         <div class="sn">⌇ 脱靶</div>
-        <div class="sm">竖立颤抖——此处可能脱靶<br>要重点关注</div>
+        <div class="sm">竖立颤抖——图形入口<br>追随图形进入阅读</div>
         <div class="src">skill · 脱靶提醒</div>
       </div>
       <div class="shapechip">
@@ -144,7 +144,7 @@
       </tr>
       <tr style="border-bottom:1px solid #ececea;"><td style="padding:6px 8px 6px 0; font-weight:700; color:#1a1a1a; width:130px;">密度 ≤ 8 / 屏</td><td style="padding:6px 8px 6px 0;">散落形状总数控制，避免噪化。</td></tr>
       <tr style="border-bottom:1px solid #ececea;"><td style="padding:6px 8px 6px 0; font-weight:700; color:#1a1a1a;">只在空白</td><td style="padding:6px 8px 6px 0;">永不压字、压卡、压线；与内容保持 ≥ 8px 间距。</td></tr>
-      <tr style="border-bottom:1px solid #ececea;"><td style="padding:6px 8px 6px 0; font-weight:700; color:#1a1a1a;">语境相关</td><td style="padding:6px 8px 6px 0;">页面里的散落形状应与附近内容语义呼应（脱靶注附近放 ⌇）。</td></tr>
+      <tr style="border-bottom:1px solid #ececea;"><td style="padding:6px 8px 6px 0; font-weight:700; color:#1a1a1a;">语境相关</td><td style="padding:6px 8px 6px 0;">页面里的散落形状应与附近内容语义呼应（脱靶内容旁放 ⌇）。</td></tr>
       <tr><td style="padding:6px 8px 6px 0; font-weight:700; color:#1a1a1a;">尺寸阶梯</td><td style="padding:6px 8px 6px 0;">主标记 28-44px；装饰散落 16-24px；线内标记跟随线规格。</td></tr>
     </table>
   </div>
@@ -158,7 +158,7 @@
       <tr><td class="k">○ 圆环</td><td>预期结果</td><td>可核对的样子</td></tr>
       <tr><td class="k">～ 横波</td><td>代理区</td><td>交给 agent</td></tr>
       <tr><td class="k">▬ 实心条</td><td>价值区</td><td>就地写过程</td></tr>
-      <tr><td class="k">⌇ 竖抖</td><td>脱靶警示</td><td>重点关注</td></tr>
+      <tr><td class="k">⌇ 竖抖</td><td>脱靶警示</td><td>图形入口</td></tr>
       <tr><td class="k">＋ 十字</td><td>指派学习</td><td>位置/预期/场景</td></tr>
     </table>
   </div>

design-refs/mockup/design-system/03-components.html

@@ -322,12 +322,12 @@
 <div class="page">
   <div class="story-head">
     <span class="tag">&lt;Components /&gt; 4/4</span>
-    <h2>组件 · 指派学习块、脱靶注与入口梳理</h2>
+    <h2>组件 · 指派学习块、脱靶标记与入口梳理</h2>
-    <div class="desc">三个配套组件：＋指派学习块（位置/预期/场景三样）、⌇脱靶注（跟在指派后）、入口徽章与读者画像路径。</div>
+    <div class="desc">三个配套件：＋指派学习块（位置/预期/场景）、⌇脱靶标记（图形入口，读者追随图形进入阅读）、入口徽章与画像路径。</div>
   </div>
 
   <div class="canvas" style="top: 138px; left: 40px; width: 880px; height: 594px;">
-    <div class="sec-label">指派学习块 ＆ 脱靶注 <i>总在指派之后成对出现——普通内容块，非票据</i></div>
+    <div class="sec-label">指派学习块 ＆ 脱靶标记 <i>标记跟在指派后——图形即入口，无容器</i></div>
     <div style="display:flex; gap:24px; align-items:flex-start; margin-bottom:18px;">
       <div style="width:260px; background:#fff9f0; border:2px solid #111; border-radius:12px; box-shadow:5px 5px 0 #111; padding:11px 13px;">
         <div style="display:flex; align-items:center; gap:8px;">
@@ -336,12 +336,15 @@
         </div>
         <div style="font-size:10.5px; color:#3d3d3d; line-height:1.6; margin-top:6px;"><b>位置</b>：包管理家族——npm 的坐标与邻居<br><b>预期</b>：能说清 lockfile 锁住了什么<br><b>场景</b>：加一个依赖 / 换源重装</div>
       </div>
-      <div style="flex:1; background:#fff9f0; border:2px solid #111; border-radius:12px; box-shadow:5px 5px 0 #111; padding:10px 12px;">
+      <div style="flex:1; padding-top:2px;">
-        <div style="display:flex; align-items:center; gap:8px;">
+        <div style="display:flex; gap:11px; align-items:flex-start;">
-          <svg width="20" height="20"><path d="M 10 18 L 7 15 L 13 12 L 7 9 L 13 6 L 10 3" fill="none" stroke="#ff6b6b" stroke-width="3" stroke-linejoin="round" stroke-linecap="round"/></svg>
+          <svg width="24" height="36" style="flex:none;"><path d="M 12 34 L 8 29 L 16 24 L 8 19 L 16 14 L 12 9 L 14 2" fill="none" stroke="#ff6b6b" stroke-width="3.5" stroke-linejoin="round" stroke-linecap="round"/></svg>
-          <b style="font-size:12px;">脱靶提醒 · 跟在指派后</b>
+          <div>
+            <b style="font-size:12.5px;">脱靶 · 装了但没跑</b>
+            <div style="font-size:10.5px; color:#3d3d3d; line-height:1.55; margin-top:3px;"><b>可能怎么脱靶</b>：命令成功、页面空白。<br><b>脱靶什么样子</b>：缺的是「真机验收」这块积木。</div>
           </div>
-        <div style="font-size:10.5px; color:#3d3d3d; line-height:1.55; margin-top:6px;">写两样：<b>可能怎么脱靶</b>（装了但没跑）＋ <b>脱靶什么样子</b>（命令成功、页面空白）——读者撞上时认得出缺哪块。</div>
+        </div>
+        <div style="font-size:10px; color:#8a7a5c; margin-top:10px; line-height:1.55;">图形即入口：竖抖是第一视觉，无边框无底色，落在内容旁的空白；文字只写两样——怎么脱靶＋脱靶什么样。</div>
       </div>
     </div>
 
@@ -377,7 +380,7 @@
     <table class="spec">
       <tr><th>组件</th><th>关键 prop</th></tr>
       <tr><td class="k">指派学习块</td><td><code>pos</code> · <code>expect</code> · <code>scenes[]</code></td></tr>
-      <tr><td class="k">脱靶注</td><td><code>how</code> 怎么脱靶 · <code>looks</code> 什么样</td></tr>
+      <tr><td class="k">脱靶标记</td><td><code>how</code> 怎么脱靶 · <code>looks</code> 什么样</td></tr>
       <tr><td class="k">画像卡</td><td><code>icon</code> · <code>entry</code> · <code>path[]</code> · <code>note</code></td></tr>
     </table>
     <div style="font-size:12px; color:#555; line-height:1.6; margin-top:10px;">三样缺一即退化为「AI 说啥信啥」（skill 原文）。</div>
@@ -385,7 +388,7 @@
   <div style="position:absolute; top: 400px; left: 948px; width: 292px;" class="panel">
     <h3>原则</h3>
     <div class="note" style="margin-bottom:6px;"><span class="idx">1</span><span class="txt"><b>无锁</b>：状态是推荐不是门槛。</span></div>
-    <div class="note" style="margin-bottom:6px;"><span class="idx">2</span><span class="txt"><b>指派后必有脱靶注</b>：成对出现。</span></div>
+    <div class="note" style="margin-bottom:6px;"><span class="idx">2</span><span class="txt"><b>指派后必有脱靶标记</b>：成对出现，且是图形不是卡片。</span></div>
     <div class="note" style="margin-bottom:0;"><span class="idx">3</span><span class="txt"><b>位置给坐标，预期当尺子，场景管巩固</b>。</span></div>
   </div>
 

design-refs/mockup/design-system/04-examples.html

@@ -154,12 +154,12 @@
       <div style="font-size:9.5px; color:#3d3d3d; line-height:1.5; margin-top:4px;">位置 / 预期 / 场景</div>
     </div>
 
-    <div style="position:absolute; left:40px; top:420px; width:300px;">
+    <div style="position:absolute; left:380px; top:352px; display:flex; gap:9px; align-items:flex-start;">
-      <div style="display:flex; align-items:center; gap:8px;">
+      <svg width="20" height="30" style="flex:none;"><path d="M 10 28 L 7 24 L 13 20 L 7 16 L 13 12 L 10 8 L 12 2" fill="none" stroke="#ff6b6b" stroke-width="3" stroke-linejoin="round" stroke-linecap="round"/></svg>
-        <svg width="22" height="22"><path d="M 11 20 L 8 17 L 14 14 L 8 11 L 14 8 L 11 4" fill="none" stroke="#ff6b6b" stroke-width="3" stroke-linejoin="round" stroke-linecap="round"/></svg>
+      <div>
-        <b style="font-size:12px;">脱靶提醒</b>
+        <b style="font-size:11px;">脱靶 · 装了但没跑</b>
+        <div style="font-size:10px; color:#3d3d3d; line-height:1.5; margin-top:2px;">命令成功、页面空白——缺「真机验收」这块积木。</div>
       </div>
-      <div style="font-size:11px; color:#3d3d3d; line-height:1.6; margin-top:6px;">常见脱靶：装了但没跑。脱靶的样子——命令成功、页面空白；此时缺的是"真机验收"这块积木。</div>
     </div>
 
     <div style="position:absolute; left:380px; top:430px; display:flex; align-items:center; gap:8px;">
@@ -179,7 +179,7 @@
     <div class="note" style="margin-bottom:6px;"><span class="idx">1</span><span class="txt"><b>主线</b>：快速开始 →（直角步进）→ React →（直线）→ 全栈基础；四枚站点半嵌卡边。</span></div>
     <div class="note" style="margin-bottom:6px;"><span class="idx">2</span><span class="txt"><b>虚线</b>：React 底边 → 指派学习块顶边（相关：块属于该章扩展）。</span></div>
     <div class="note" style="margin-bottom:6px;"><span class="idx">3</span><span class="txt"><b>点线</b>：React 顶边 → 全栈基础顶边（同族：工程基础一族）。</span></div>
-    <div class="note" style="margin-bottom:0;"><span class="idx">4</span><span class="txt"><b>指派学习块</b>：React 的相关扩展（虚线相连）；脱靶注跟在其叙事之后。</span></div>
+    <div class="note" style="margin-bottom:0;"><span class="idx">4</span><span class="txt"><b>指派学习块</b>：React 的相关扩展（虚线相连）；脱靶标记（图形）紧随其下——先见图形，再读文字。</span></div>
   </div>
   <div style="position:absolute; top: 420px; left: 948px; width: 292px;" class="panel">
     <h3>对照检查</h3>