fix(skill): 加强 d8d-prototype 技能步骤执行纪律
三个改进防止步骤被跳过或简化执行： 1. workflow.md 增加"步骤完成门禁"机制： - 每个步骤必须提供 evidence 才能标记完成 - Step 7 强制要求 Playwright 截图 + ZAI 图片分析 - 明确列出禁止的替代行为 2. step-03 更新桌面端 iframe 缩放模板： - 添加 min-width:0 防止 iframe 撑开 grid 列宽 - display:block 去除 iframe 底部间隙 3. step-07 增加"强制验证"声明： - 文件开头明确禁止 curl 替代截图 - 规定必须按顺序执行：截图→分析→修复→报告 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
yourname
@@ -20,6 +20,8 @@
|
||||
|
||||
### 3.2 桌面端平铺入口 (admin-index.html)
|
||||
|
||||
**核心原理：iframe 以桌面端固定宽度（1280px）渲染，通过 CSS `transform: scale()` 等比缩小到网格列宽度。这样页面内容保持桌面端布局，只是视觉上缩小了。**
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
@@ -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;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -64,15 +73,37 @@
|
||||
<p class="text-blue-100 text-sm">所有页面同时显示，一目了然</p>
|
||||
</header>
|
||||
<div class="prototype-grid">
|
||||
<!-- 为每个页面生成 iframe -->
|
||||
<!-- 为每个页面生成 iframe（注意 wrapper 容器结构） -->
|
||||
<div class="flex flex-col">
|
||||
<div class="bg-blue-600 text-white text-sm px-3 py-1 rounded-t-lg inline-block self-start">
|
||||
<i class="fas fa-file-alt mr-1"></i>页面标题
|
||||
</div>
|
||||
<iframe src="pages/admin/xxx.html" class="prototype-iframe" title="页面标题"></iframe>
|
||||
<div class="prototype-iframe-wrapper">
|
||||
<iframe src="pages/admin/xxx.html" class="prototype-iframe" title="页面标题" loading="lazy"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 重复... -->
|
||||
<!-- 重复每个页面... -->
|
||||
</div>
|
||||
<script>
|
||||
const IFRAME_NATIVE_WIDTH = 1280;
|
||||
const IFRAME_NATIVE_HEIGHT = 1000;
|
||||
|
||||
function resizeIframes() {
|
||||
document.querySelectorAll('.prototype-iframe-wrapper').forEach(wrapper => {
|
||||
const wrapperWidth = wrapper.clientWidth;
|
||||
const scale = wrapperWidth / IFRAME_NATIVE_WIDTH;
|
||||
const iframe = wrapper.querySelector('.prototype-iframe');
|
||||
if (iframe) {
|
||||
iframe.style.transform = 'scale(' + scale + ')';
|
||||
wrapper.style.height = (IFRAME_NATIVE_HEIGHT * scale) + 'px';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
window.addEventListener('resize', resizeIframes);
|
||||
window.addEventListener('load', resizeIframes);
|
||||
resizeIframes();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
@@ -2,6 +2,20 @@
|
||||
|
||||
**Progress: Step 7 of 7** — Next: 完成
|
||||
|
||||
## ⚠️ 强制验证（不可跳过）
|
||||
|
||||
本步骤**禁止**用以下方式替代：
|
||||
- ❌ 用 curl/wget 检查 HTTP 状态码代替截图
|
||||
- ❌ 只检查文件是否存在
|
||||
- ❌ 跳过图片分析直接标记完成
|
||||
- ❌ 自行声称"验证通过"而不提供截图证据
|
||||
|
||||
**必须**按以下顺序执行：
|
||||
1. Playwright 导航 → 截图（至少：平铺入口页 + 每个独立页面）
|
||||
2. ZAI analyze_image 分析每张截图
|
||||
3. 发现问题 → 修复 → 重新截图验证
|
||||
4. 全部通过 → 写入验证报告 → 标记完成
|
||||
|
||||
## STEP GOAL
|
||||
|
||||
使用 Playwright MCP 和图片 MCP 对所有已生成的页面进行自动化验证，输出验证报告。
|
||||
|
||||
@@ -20,6 +20,30 @@
|
||||
- 💾 **始终**在每步/每页面完成后更新状态文件
|
||||
- 🎯 **始终**严格遵循步骤文件中的指令
|
||||
|
||||
## 🔒 步骤完成门禁（强制）
|
||||
|
||||
每个步骤标记完成前，**必须**满足以下条件，无证据 = 未完成：
|
||||
|
||||
### 通用门禁（所有步骤）
|
||||
1. ✅ 已完整 Read 当前步骤文件
|
||||
2. ✅ 步骤文件中每条指令都已执行
|
||||
3. ✅ 状态文件 `completed_steps` 包含 `evidence` 字段
|
||||
|
||||
### 验证步骤门禁（Step 7 专属）
|
||||
1. ✅ 使用 `mcp__playwright__browser_take_screenshot` 对平铺入口截图
|
||||
2. ✅ 使用 `mcp__zai-mcp-server__analyze_image` 分析截图，验证：
|
||||
- 桌面端页面：布局列数正确，内容按桌面端比例缩放
|
||||
- 移动端页面：手机框架包裹，375×812 尺寸
|
||||
- 文字可读、UI 元素清晰
|
||||
3. ✅ 生成验证报告文件 `prototype/VALIDATION-REPORT.md`
|
||||
4. ✅ 分析结果中无 ❌ 级别问题（有则必须修复后重新验证）
|
||||
|
||||
### ❌ 禁止的替代行为
|
||||
- ❌ 用 curl/wget HTTP 状态码代替截图验证
|
||||
- ❌ 只检查文件是否存在
|
||||
- ❌ 跳过图片分析直接标记完成
|
||||
- ❌ 自行声称"验证通过"而不提供截图证据
|
||||
|
||||
## 状态文件：.prototype-state.md
|
||||
|
||||
状态文件位于输出目录 `prototype/.prototype-state.md`，用于跟踪前后台每个页面的生成进度。
|
||||
@@ -36,7 +60,8 @@ status: in_progress | completed
|
||||
current_step: step-02-generate-pages
|
||||
current_page_index: 3
|
||||
completed_steps:
|
||||
- step-01-analyze
|
||||
- step: step-01-analyze
|
||||
evidence: "描述做了什么"
|
||||
scene_type: mixed | desktop | mobile
|
||||
design_system_source: {设计系统文档路径或 "default"}
|
||||
page_counts:
|
||||
@@ -67,7 +92,7 @@ page_counts:
|
||||
|
||||
1. **每个步骤开始时**：更新 `current_step`、`last_updated`
|
||||
2. **每个页面生成后**：勾选对应行 `[x]`，添加完成时间戳，更新 `page_counts` 和 `current_page_index`
|
||||
3. **每个步骤完成时**：将步骤名加入 `completed_steps`
|
||||
3. **每个步骤完成时**：将步骤名和 evidence 加入 `completed_steps`（必须有 evidence，描述具体做了什么）
|
||||
4. **全部完成时**：设置 `status: completed`
|
||||
|
||||
## 状态机：启动与恢复
|
||||
|
||||
Reference in New Issue
Block a user