diff --git a/.claude/skills/d8d-prototype/steps/step-03-generate-index.md b/.claude/skills/d8d-prototype/steps/step-03-generate-index.md
index 8c23c27..9842995 100644
--- a/.claude/skills/d8d-prototype/steps/step-03-generate-index.md
+++ b/.claude/skills/d8d-prototype/steps/step-03-generate-index.md
@@ -20,6 +20,8 @@
### 3.2 桌面端平铺入口 (admin-index.html)
+**核心原理：iframe 以桌面端固定宽度（1280px）渲染，通过 CSS `transform: scale()` 等比缩小到网格列宽度。这样页面内容保持桌面端布局，只是视觉上缩小了。**
+
```html
@@ -36,25 +38,32 @@
gap: 16px;
padding: 16px;
}
- .prototype-iframe {
+ /* 防止子元素撑开 grid 列宽（关键！） */
+ .prototype-grid > div { min-width: 0; }
+ @media (min-width: 1400px) {
+ .prototype-grid { grid-template-columns: repeat(3, 1fr); }
+ }
+ @media (min-width: 768px) and (max-width: 1399px) {
+ .prototype-grid { grid-template-columns: repeat(2, 1fr); }
+ }
+ /* 缩放容器：min-width:0 防止 iframe 撑开列宽，overflow:hidden 裁剪 */
+ .prototype-iframe-wrapper {
+ position: relative;
width: 100%;
- height: 1000px;
+ min-width: 0;
+ overflow: hidden;
border: 1px solid #e5e7eb;
- border-radius: 12px;
+ border-radius: 0 0 12px 12px;
background: white;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
- @media (min-width: 1400px) {
- .prototype-grid {
- grid-template-columns: repeat(3, 1fr);
- }
- .prototype-iframe { height: 750px; }
- }
- @media (min-width: 768px) and (max-width: 1399px) {
- .prototype-grid {
- grid-template-columns: repeat(2, 1fr);
- }
- .prototype-iframe { height: 900px; }
+ /* iframe 以桌面端固定宽度渲染，通过 transform 缩放，display:block 去除底部间隙 */
+ .prototype-iframe {
+ width: 1280px;
+ height: 1000px;
+ border: none;
+ transform-origin: top left;
+ display: block;
}
@@ -64,15 +73,37 @@
所有页面同时显示，一目了然
+