npm - @aiyiran/myclaw - Versions diffs - 1.1.24 → 1.1.26 - Mend

@aiyiran/myclaw 1.1.24 → 1.1.26

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (83) hide show

package/skills/yiran-course-template-pipeline/SKILL.md ADDED Viewed

@@ -0,0 +1,65 @@
+---
+name: yiran-course-template-pipeline
+description: 面向中文课堂的小专题课程模板流水线。适用于把一个题目灵感或设计角度，先生成 demo 页面，再先后整理成 __student__.json 和 __teacher__.json，最后通过脚本生成页面、整理目录、沉淀模板资产并构建模板索引。
+---
+# 课程模板流水线
+这个 skill 支持的是一条完整工作流，而不是单点产出。
+## 四阶段流程
+### 1）灵感 -> demo 页面
+当用户先给出题目灵感、设计角度或课堂切入点时，优先生成 demo 页面。
+这一阶段优先使用：
+- `prompts/阶段1-demo生成.md`
+### 2）生成 __student__.json
+这个阶段最重要的目标是：
+先把学生任务的步骤和评价结构 JSON 确立下来。
+这一阶段优先使用：
+- `prompts/阶段2-student生成.md`
+- `references/student-fields.md`
+- `references/student-example.json`
+- `references/student-scaffold.json`
+### 3）生成 __teacher__.json
+在 __student__.json 已经明确后，再整理教师侧信息。
+这一阶段优先使用：
+- `prompts/阶段3-teacher生成.md`
+- `references/teacher-fields.md`
+- `references/teacher-scaffold.json`
+### 阶段一到三的工作目录规则
+阶段一到阶段三产出的文件，统一放在：
+**当前工作目录下新建的 `任务名称/` 文件夹里。**
+也就是说，这几个中间产物先写在当前工作目录的任务文件夹内：
+- `__demo__.html`
+- `__student__.json`
+- `__teacher__.json`
+### 4）JSON -> HTML，并按目录打包
+第4阶段拆成两个独立脚本：
+- `scripts/build_template_views.py`
+- `scripts/move_template_task.py`
+其中：
+- build 负责在原目录生成 `__student-view__.html`、`__teacher-view__.html` 和 `index.html`
+- `index.html` 采用固定脚本规则：左边展示“评价目标”，右边展示“步骤”，不显示任务标题和一句话说明
+- move 负责把任务文件夹移动到 `yiran-playground-template-use` skill 的 `templates/`，并自动触发索引重建
+## 原则
+- 先做 demo
+- 再定 __student__.json
+- 再定 __teacher__.json
+- 阶段一到三先在当前工作目录的任务文件夹里完成
+- demo 中的媒体资源优先使用 CDN 链接，不使用本地相对路径；当前固定前缀为 `https://cdn.yiranlaoshi.com/yiran/workspace-ai-demo`，后面拼接资源相对路径
+- 第4阶段拆成 build 和 move 两个独立脚本
+- templates 作为 skill 的资产目录统一维护
+- 模板有变化后，要重新构建索引
+- 全部内容优先中文

package/skills/yiran-course-template-pipeline/assets/a100-teacher.example.html ADDED Viewed

@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>A100 · 给依然老师设计一个AI画像</title>
+  <style>
+    * { box-sizing: border-box; }
+    body { margin: 0; font-family: "PingFang SC", "Microsoft YaHei", sans-serif; background: #f4f7fb; color: #24324a; }
+    .page { max-width: 1200px; margin: 0 auto; padding: 20px; }
+    .hero { background: linear-gradient(135deg,#5f82ff 0%,#8c74ff 100%); color: #fff; border-radius: 24px; padding: 22px 24px; box-shadow: 0 16px 36px rgba(92,108,192,.22); }
+    .hero h1 { margin: 0; font-size: 28px; }
+    .hero p { margin: 8px 0 0; opacity: .92; font-size: 14px; }
+    .view { margin-top: 18px; display: grid; gap: 16px; }
+    .top { display: grid; grid-template-columns: 1.1fr .9fr; gap: 16px; }
+    .card { background: #fff; border: 1px solid #e7eefc; border-radius: 20px; padding: 18px; box-shadow: 0 10px 24px rgba(100,122,166,.08); }
+    .card h2 { margin: 0 0 12px; font-size: 18px; color: #314a96; }
+    .meta-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; }
+    .meta-item { background: #f8faff; border: 1px solid #e7eefc; border-radius: 14px; padding: 12px; }
+    .meta-item .label { font-size: 12px; color: #7a89ad; margin-bottom: 6px; }
+    .meta-item .value { font-size: 14px; color: #24324a; font-weight: 700; }
+    .tags { display: flex; flex-wrap: wrap; gap: 8px; }
+    .tag { display: inline-flex; align-items: center; padding: 7px 12px; border-radius: 999px; background: #edf2ff; color: #4c65c3; font-size: 13px; font-weight: 700; }
+    .section-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; }
+    .list { display: grid; gap: 10px; }
+    .list-item { background: #f8faff; border: 1px solid #e7eefc; border-radius: 14px; padding: 12px; line-height: 1.7; font-size: 14px; color: #60708b; }
+    .issue { border-left: 4px solid #8c74ff; background: #faf8ff; }
+    .issue strong { color: #314a96; display: block; margin: 6px 0; }
+    @media (max-width: 900px) { .top, .section-grid, .meta-grid { grid-template-columns: 1fr; } }
+  </style>
+</head>
+<body>
+  <div class="page">
+    <section class="hero">
+      <h1>A100 · 给依然老师设计一个AI画像</h1>
+      <p>这是根据教师 JSON 自动生成的可视化查看页，方便老师快速扫读与判断。</p>
+    </section>
+    <section class="view">
+      <div class="top">
+        <div class="card">
+          <h2>基础信息</h2>
+          <div class="meta-grid">
+            <div class="meta-item"><div class="label">主能力标签</div><div class="value">表达构建</div></div>
+            <div class="meta-item"><div class="label">任务类型标签</div><div class="value">视听表达</div></div>
+          </div>
+        </div>
+        <div class="card">
+          <h2>适合学生类型</h2>
+          <div class="tags"><span class="tag">初次接触</span><span class="tag">需要明确目标</span><span class="tag">持续迭代</span></div>
+        </div>
+      </div>
+      <div class="section-grid">
+        <div class="card"><h2>训练重点</h2><div class="list"><div class="list-item">围绕明确对象生成形象</div><div class="list-item">把人物图片放进网页中完成展示</div><div class="list-item">通过小幅修改让作品逐步变好</div></div></div>
+        <div class="card"><h2>可拓展方向</h2><div class="list"><div class="list-item">给画像加背景音乐</div><div class="list-item">加入点击切换不同版本画像</div><div class="list-item">给人物加一句语音介绍</div></div></div>
+      </div>
+      <div class="section-grid">
+        <div class="card"><h2>卡点和解决方案</h2><div class="list"><div class="list-item issue"><strong>卡点</strong>学生不知道要画谁，描述很泛<strong>解决方案</strong>先让学生说清楚对象是谁，再从发型、衣服、表情这些具体点开始描述</div><div class="list-item issue"><strong>卡点</strong>学生一次改太多，看不出变化<strong>解决方案</strong>提醒学生每次只改一个地方，比如先改头发，再改表情</div></div></div>
+        <div class="card"><h2>课后作业</h2><div class="list"><div class="list-item">回家把老师画像再优化一版，至少改一个地方，并说明你改了什么</div><div class="list-item">给网页再加入一张新版本图片，展示前后变化</div></div></div>
+      </div>
+    </section>
+  </div>
+</body>
+</html>

package/skills/yiran-course-template-pipeline/assets/student-template.html ADDED Viewed

@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>{{任务标题}}</title>
+  <style>
+    * { box-sizing: border-box; }
+    body { margin: 0; font-family: "PingFang SC", "Microsoft YaHei", sans-serif; background: #f4f7fb; color: #24324a; }
+    .page { max-width: 1440px; margin: 0 auto; padding: 20px 20px 48px; }
+    .header-bar { background: linear-gradient(135deg,#5f82ff 0%,#8c74ff 100%); border-radius: 24px; padding: 20px 24px; box-shadow: 0 16px 36px rgba(92,108,192,.24); }
+    .header-left h1 { margin: 0; font-size: 26px; line-height: 1.3; color: #fff; font-weight: 800; }
+    .header-left .subtitle { margin: 8px 0 0; font-size: 13px; line-height: 1.8; color: rgba(255,255,255,.88); }
+    .main-section { margin-top: 18px; }
+    .block { background: #fff; border-radius: 24px; padding: 22px; box-shadow: 0 10px 28px rgba(100,122,166,.12); }
+    .content-layout { display: grid; grid-template-columns: 220px minmax(0,1fr) 220px; gap: 14px; align-items: stretch; }
+    .task-panel, .goal-panel { background: #f8faff; border: 1px solid #e7eefc; border-radius: 20px; padding: 16px; display: flex; flex-direction: column; gap: 14px; }
+    .panel-group h3 { margin: 0 0 10px; color: #334d98; font-size: 17px; }
+    .task-item { margin-bottom: 10px; }
+    .task-item:last-child { margin-bottom: 0; }
+    .item-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 12px; font-weight: 600; color: #7a89ad; }
+    .item-body { background: #fff; border: 1px solid #e7eefc; border-radius: 12px; padding: 10px 12px; font-size: 13px; color: #60708b; line-height: 1.7; }
+    .task-item .num { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: #edf2ff; color: #7a89ad; font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
+    .star-item .num { background: #fff7dc; color: #b89a4f; }
+    .sample-frame-wrap { background: #f8faff; border: 1px solid #e7eefc; border-radius: 20px; padding: 14px; min-width: 0; }
+    .sample-frame-head { display: flex; justify-content: flex-start; align-items: center; gap: 10px; margin-bottom: 12px; }
+    .sample-frame-head h3 { margin: 0; color: #334d98; font-size: 17px; }
+    iframe { width: 100%; height: 560px; border: 1px solid #dfe7fb; border-radius: 16px; background: #fff; display: block; }
+    @media (max-width: 960px) { .page { padding: 14px 12px 32px; } .header-bar { padding: 16px 18px; } .header-left h1 { font-size: 22px; } .header-left .subtitle { font-size: 12px; } .content-layout { grid-template-columns: 1fr; } .task-panel, .goal-panel, .sample-frame-wrap { padding: 14px; } iframe { height: 360px; } }
+  </style>
+</head>
+<body>
+  <div class="page">
+    <header class="header-bar">
+      <div class="header-left">
+        <h1>{{任务标题}}</h1>
+        <p class="subtitle">{{一句话说明}}</p>
+      </div>
+    </header>
+    <div class="main-section">
+      <section class="block">
+        <div class="content-layout">
+          <div class="task-panel">
+            <div class="panel-group">
+              <h3>步骤</h3>
+              {{步骤区域}}
+            </div>
+          </div>
+          <div class="sample-frame-wrap">
+            <div class="sample-frame-head"><h3>{{示例区标题}}</h3></div>
+            <iframe src="{{示例页面文件}}" title="{{示例区标题}}"></iframe>
+          </div>
+          <div class="goal-panel">
+            <div class="panel-group">
+              <h3>评价目标</h3>
+              {{评价目标区域}}
+            </div>
+          </div>
+        </div>
+      </section>
+    </div>
+  </div>
+</body>
+</html>

package/skills/yiran-course-template-pipeline/assets/teacher-portrait-demo.html ADDED Viewed

@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>小专题模板 Demo</title>
+  <style>
+    * { box-sizing: border-box; }
+    body { margin: 0; font-family: "PingFang SC", "Microsoft YaHei", sans-serif; background: #f4f7fb; color: #24324a; }
+    .page { max-width: 1440px; margin: 0 auto; padding: 20px 20px 48px; }
+    .header-bar { background: linear-gradient(135deg, #5f82ff 0%, #8c74ff 100%); border-radius: 24px; padding: 20px 24px; box-shadow: 0 16px 36px rgba(92, 108, 192, 0.24); }
+    .header-left h1 { margin: 0; font-size: 26px; line-height: 1.3; color: #fff; font-weight: 800; }
+    .header-left .subtitle { margin: 8px 0 0; font-size: 13px; line-height: 1.8; color: rgba(255,255,255,0.88); }
+    .main-section { margin-top: 18px; display: grid; gap: 18px; }
+    .block, .teacher-section { background: #fff; border-radius: 24px; padding: 22px; box-shadow: 0 10px 28px rgba(100, 122, 166, 0.12); }
+    .content-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr) 220px; gap: 14px; align-items: stretch; }
+    .task-panel, .goal-panel { background: #f8faff; border: 1px solid #e7eefc; border-radius: 20px; padding: 16px; display: flex; flex-direction: column; gap: 14px; }
+    .panel-group h3 { margin: 0 0 10px; color: #334d98; font-size: 17px; }
+    .task-item { margin-bottom: 10px; }
+    .task-item:last-child { margin-bottom: 0; }
+    .item-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 12px; font-weight: 600; color: #7a89ad; }
+    .item-body { background: #fff; border: 1px solid #e7eefc; border-radius: 12px; padding: 10px 12px; font-size: 13px; color: #60708b; line-height: 1.7; }
+    .task-item .num { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: #edf2ff; color: #7a89ad; font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
+    .star-item .num { background: #fff7dc; color: #b89a4f; }
+    .sample-frame-wrap { background: #f8faff; border: 1px solid #e7eefc; border-radius: 20px; padding: 14px; min-width: 0; }
+    .sample-frame-head { display: flex; justify-content: flex-start; align-items: center; gap: 10px; margin-bottom: 12px; }
+    .sample-frame-head h3 { margin: 0; color: #334d98; font-size: 17px; }
+    iframe { width: 100%; height: 560px; border: 1px solid #dfe7fb; border-radius: 16px; background: #fff; display: block; }
+    .block-title { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
+    .block-title h2 { margin: 0; font-size: 24px; color: #2d438c; }
+    .badge { padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; }
+    .badge-teacher { background: #f1edff; color: #7156c8; }
+    .teacher-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
+    .teacher-card { background: #f8faff; border: 1px solid #e7eefc; border-radius: 18px; padding: 16px; }
+    .teacher-card h3 { margin: 0 0 8px; color: #334d98; font-size: 16px; }
+    .teacher-card p, .teacher-card li { margin: 0; color: #60708b; line-height: 1.85; font-size: 13px; }
+    .teacher-card ul { padding-left: 18px; margin: 0; }
+    .teacher-note { margin-top: 14px; background: #f6f8ff; border: 1px dashed #cfdcff; border-radius: 18px; padding: 14px 16px; }
+    .teacher-note h3 { margin: 0 0 7px; color: #334d98; font-size: 16px; }
+    .teacher-note p { margin: 0; color: #60708b; line-height: 1.85; font-size: 13px; }
+    .footer-note { margin-top: 12px; text-align: center; font-size: 13px; color: #7a879f; }
+    @media (max-width: 960px) {
+      .page { padding: 14px 12px 32px; }
+      .header-bar { padding: 16px 18px; }
+      .header-left h1 { font-size: 22px; }
+      .header-left .subtitle { font-size: 12px; white-space: normal; }
+      .content-layout, .teacher-grid { grid-template-columns: 1fr; }
+      .task-panel, .goal-panel, .sample-frame-wrap, .teacher-section { padding: 14px; }
+      iframe { height: 360px; }
+    }
+  </style>
+</head>
+<body>
+  <div class="page">
+    <header class="header-bar">
+      <div class="header-left">
+        <h1>【任务标题】</h1>
+        <p class="subtitle">【一句话任务说明：先做什么，再放到网页里，重点练什么】</p>
+      </div>
+    </header>
+    <div class="main-section">
+      <section class="block">
+        <div class="content-layout">
+          <div class="task-panel">
+            <div class="panel-group">
+              <h3>步骤</h3>
+              <div class="task-item"><div class="item-top"><span class="num">1</span><span>【步骤短标题】</span></div><div class="item-body">【学生真正要读的简短说明】</div></div>
+              <div class="task-item"><div class="item-top"><span class="num">2</span><span>【步骤短标题】</span></div><div class="item-body">【学生真正要读的简短说明】</div></div>
+              <div class="task-item"><div class="item-top"><span class="num">3</span><span>【步骤短标题】</span></div><div class="item-body">【学生真正要读的简短说明】</div></div>
+              <div class="task-item"><div class="item-top"><span class="num">4</span><span>【步骤短标题】</span></div><div class="item-body">【学生真正要读的简短说明】</div></div>
+            </div>
+          </div>
+          <div class="sample-frame-wrap">
+            <div class="sample-frame-head"><h3>示范样例</h3></div>
+            <iframe src="./example.html" title="示范样例"></iframe>
+          </div>
+          <div class="goal-panel">
+            <div class="panel-group">
+              <h3>评价目标</h3>
+              <div class="task-item star-item"><div class="item-top"><span class="num">★</span><span>一星</span></div><div class="item-body">【完成最基础的一步】</div></div>
+              <div class="task-item star-item"><div class="item-top"><span class="num">★★</span><span>二星</span></div><div class="item-body">【比基础要求再多完成一点】</div></div>
+              <div class="task-item star-item"><div class="item-top"><span class="num">★★★</span><span>三星</span></div><div class="item-body">【完成进阶挑战，展示更多变化】</div></div>
+            </div>
+          </div>
+        </div>
+      </section>
+    </div>
+    <section class="teacher-section">
+      <div class="block-title"><h2>下半区：给老师看</h2><span class="badge badge-teacher">教师区</span></div>
+      <div class="teacher-grid">
+        <div class="teacher-card"><h3>为什么这样设计</h3><p>上半区直接给学生使用，文字短，结构清楚，中间样例突出。</p></div>
+        <div class="teacher-card"><h3>模板使用原则</h3><p>只把学生真正需要阅读的内容放到白卡片里，编号和星级放在卡片外面，做出主次关系。</p></div>
+        <div class="teacher-card"><h3>上半区写法</h3><p>步骤和评价目标都要短句化，面向小学生，避免长句和抽象词。</p></div>
+        <div class="teacher-card"><h3>示例区原则</h3><p>中间 iframe 永远是视觉中心，具体项目案例放在 example.html 或外部链接里。</p></div>
+      </div>
+      <div class="teacher-note"><h3>模板提示</h3><p>后续换专题时，优先替换任务标题、一句话说明、步骤、评价目标和 iframe 地址，不要先改结构。</p></div>
+      <div class="footer-note">这个文件已经同步了新的上半区结构，可作为后续模板继续复用。</div>
+    </section>
+  </div>
+</body>
+</html>

package/skills/yiran-course-template-pipeline/assets/teacher-task-view.html ADDED Viewed

@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>教师任务查看页</title>
+  <style>
+    * { box-sizing: border-box; }
+    body { margin: 0; font-family: "PingFang SC", "Microsoft YaHei", sans-serif; background: #f4f7fb; color: #24324a; }
+    .page { max-width: 1200px; margin: 0 auto; padding: 20px; }
+    .hero { background: linear-gradient(135deg,#5f82ff 0%,#8c74ff 100%); color: #fff; border-radius: 24px; padding: 22px 24px; box-shadow: 0 16px 36px rgba(92,108,192,.22); }
+    .hero h1 { margin: 0; font-size: 28px; }
+    .hero p { margin: 8px 0 0; opacity: .92; font-size: 14px; }
+    .toolbar { margin-top: 16px; display: grid; gap: 12px; }
+    textarea { width: 100%; min-height: 240px; border: 1px solid #d9e2fb; border-radius: 16px; padding: 14px; font-size: 13px; line-height: 1.7; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; background: #fff; color: #24324a; }
+    button { width: fit-content; border: none; border-radius: 999px; background: #5f82ff; color: #fff; padding: 10px 18px; font-size: 14px; font-weight: 700; cursor: pointer; }
+    .view { margin-top: 18px; display: grid; gap: 16px; }
+    .top { display: grid; grid-template-columns: 1.1fr .9fr; gap: 16px; }
+    .card { background: #fff; border: 1px solid #e7eefc; border-radius: 20px; padding: 18px; box-shadow: 0 10px 24px rgba(100,122,166,.08); }
+    .card h2 { margin: 0 0 12px; font-size: 18px; color: #314a96; }
+    .meta-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; }
+    .meta-item { background: #f8faff; border: 1px solid #e7eefc; border-radius: 14px; padding: 12px; }
+    .meta-item .label { font-size: 12px; color: #7a89ad; margin-bottom: 6px; }
+    .meta-item .value { font-size: 14px; color: #24324a; font-weight: 700; }
+    .tags { display: flex; flex-wrap: wrap; gap: 8px; }
+    .tag { display: inline-flex; align-items: center; padding: 7px 12px; border-radius: 999px; background: #edf2ff; color: #4c65c3; font-size: 13px; font-weight: 700; }
+    .section-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; }
+    .list { display: grid; gap: 10px; }
+    .list-item { background: #f8faff; border: 1px solid #e7eefc; border-radius: 14px; padding: 12px; line-height: 1.7; font-size: 14px; color: #60708b; }
+    .issue { border-left: 4px solid #8c74ff; background: #faf8ff; }
+    .issue strong { color: #314a96; display: block; margin-bottom: 6px; }
+    @media (max-width: 900px) {
+      .top, .section-grid, .meta-grid { grid-template-columns: 1fr; }
+    }
+  </style>
+</head>
+<body>
+  <div class="page">
+    <section class="hero">
+      <h1>教师任务查看页</h1>
+      <p>把结构化 JSON 粘贴进来，就能渲染成给老师快速扫读的可视化页面。</p>
+    </section>
+    <section class="toolbar">
+      <textarea id="jsonInput">{
+  "任务类别": "A",
+  "任务编号": "100",
+  "任务名称": "给依然老师设计一个AI画像",
+  "主能力标签": "表达构建",
+  "任务类型标签": "视听表达",
+  "适合学生类型": ["初次接触", "需要明确目标", "持续迭代"],
+  "训练重点": ["围绕明确对象生成形象", "把人物图片放进网页中完成展示", "通过小幅修改让作品逐步变好"],
+  "卡点和解决方案": [
+    {"卡点": "学生不知道要画谁，描述很泛", "解决方案": "先说清楚对象是谁，再从发型、衣服、表情这些具体点开始描述"},
+    {"卡点": "学生一次改太多，看不出变化", "解决方案": "提醒学生每次只改一个地方，比如先改头发，再改表情"}
+  ],
+  "可拓展方向": ["给画像加背景音乐", "加入点击切换不同版本画像", "给人物加一句语音介绍"],
+  "课后作业": ["回家把老师画像再优化一版，至少改一个地方，并说明你改了什么", "给网页再加入一张新版本图片，展示前后变化"]
+}</textarea>
+      <button onclick="renderView()">渲染教师页</button>
+    </section>
+    <section class="view" id="view"></section>
+  </div>
+  <script>
+    function renderList(arr = []) {
+      return `<div class="list">${arr.map(item => `<div class="list-item">${item}</div>`).join('')}</div>`;
+    }
+    function renderIssues(arr = []) {
+      return `<div class="list">${arr.map(item => `<div class="list-item issue"><strong>卡点</strong>${item.卡点 || ''}<strong>解决方案</strong>${item.解决方案 || ''}</div>`).join('')}</div>`;
+    }
+    function renderTags(arr = []) {
+      return `<div class="tags">${arr.map(item => `<span class="tag">${item}</span>`).join('')}</div>`;
+    }
+    function renderView() {
+      const view = document.getElementById('view');
+      try {
+        const data = JSON.parse(document.getElementById('jsonInput').value);
+        view.innerHTML = `
+          <div class="top">
+            <div class="card">
+              <h2>${data.任务类别 || ''}${data.任务编号 || ''} · ${data.任务名称 || ''}</h2>
+              <div class="meta-grid">
+                <div class="meta-item"><div class="label">主能力标签</div><div class="value">${data.主能力标签 || '—'}</div></div>
+                <div class="meta-item"><div class="label">任务类型标签</div><div class="value">${data.任务类型标签 || '—'}</div></div>
+              </div>
+            </div>
+            <div class="card">
+              <h2>适合学生类型</h2>
+              ${renderTags(data.适合学生类型 || [])}
+            </div>
+          </div>
+          <div class="section-grid">
+            <div class="card"><h2>训练重点</h2>${renderList(data.训练重点 || [])}</div>
+            <div class="card"><h2>可拓展方向</h2>${renderList(data.可拓展方向 || [])}</div>
+          </div>
+          <div class="section-grid">
+            <div class="card"><h2>卡点和解决方案</h2>${renderIssues(data['卡点和解决方案'] || [])}</div>
+            <div class="card"><h2>课后作业</h2>${renderList(data.课后作业 || [])}</div>
+          </div>
+        `;
+      } catch (err) {
+        view.innerHTML = `<div class="card"><h2>JSON 解析失败</h2><div class="list-item">${err.message}</div></div>`;
+      }
+    }
+    renderView();
+  </script>
+</body>
+</html>

package/skills/yiran-course-template-pipeline/prompts//351/230/266/346/256/2651-demo/347/224/237/346/210/220.md ADDED Viewed

@@ -0,0 +1,92 @@
+# demo 生成提示词
+用途：
+把一个题目灵感、设计角度或课堂切入点，先变成一个适合演示的 demo 页面。
+## 目标
+你现在不是在先整理 JSON。
+你要做的是：
+**先把灵感做成一个看得见的 __demo__.html 页面。**
+## 为什么先做 demo
+因为 demo 是后续流程的起点：
+- demo 出来后，学生页内容更容易整理
+- demo 出来后，教师 JSON 也更容易提炼
+- demo 能帮助快速判断这个题目有没有意思、能不能继续发展
+## 输出要求
+生成的 demo 页面要满足：
+- 适合演示
+- 页面不要太复杂
+- 一眼能看出这个任务大概是什么
+- 能作为后续 __student__.json 和 __teacher__.json 的上游参考
+## 写 demo 时要注意
+### 1）先突出核心效果
+不要一开始把所有功能都做满。
+先做出最能说明这个题目价值的那一个效果。
+### 2）适合课堂抛砖引玉
+这个 demo 不一定是完整作品，
+但它必须足够清楚，能让人一眼看懂方向。
+### 3）优先做“能看见”的页面
+优先让页面可看、可点、可感受，
+而不是先写很多结构化说明。
+### 4）为后续 JSON 留出空间
+做 demo 时，心里要有这些问题：
+- 这个任务学生到底要做什么？
+- 步骤会是什么？
+- 评价目标会是什么？
+- 老师侧会怎么看这个任务？
+## 如果 demo 是多图对比练习页，要遵守这些规则
+### 页面结构
+- 首屏基本看完
+- 尽量一屏展示核心内容
+- 如果是三张图对比，必须三栏横排同时展示
+### 每一栏的结构
+- 上面放图片
+- 下面放观察和思考提示
+- 不直接写改进建议
+- 不直接告诉学生答案
+### 文字控制
+- demo 页面优先短句
+- 顶部说明必须很短
+- 每张图下面只放 2 到 3 个短问题
+- 不要长段落
+- 不要把老师说明塞进学生首屏
+### 目标
+- 让学生一打开就能同时看到几张图
+- 能马上开始比较
+- 能先发现一个问题
+- 能想一个最小修改点
+### 资源命名方式
+- demo 中使用的图片、音频等资源文件名，不要只用简单固定名
+- 统一使用：`中文学生友好名_2位数字随机戳`
+- 例如：`班级小组徽章_47.png`
+- 这样可以减少浏览器缓存带来的旧图问题
+### 资源路径方式
+- demo 网页中的所有媒体资源，不要使用本地相对路径
+- 必须使用 CDN 链接
+- CDN 固定前缀写死为：`https://cdn.yiranlaoshi.com/yiran/workspace-ai-demo`
+- 后面再拼接资源相对路径
+- 例如：`https://cdn.yiranlaoshi.com/yiran/workspace-ai-demo/c102_给小组作品做微调训练/班级小组徽章_47.png`
+## demo 生成后的下一步
+生成 demo 页面后，不要立刻结束。
+下一步要继续：
+1. 从 demo 中提炼 __student__.json
+2. 再提炼 __teacher__.json

package/skills/yiran-course-template-pipeline/prompts//351/230/266/346/256/2652-student/347/224/237/346/210/220.md ADDED Viewed

@@ -0,0 +1,115 @@
+# 阶段2：生成 __student__.json
+用途：
+在题目灵感已经比较清楚、或者 demo 方向已经大致确定时，先把学生侧任务结构定下来。
+注意：
+**这个阶段不要求一定已经有 __teacher__.json。**
+**这个阶段甚至不要求一定已经有完整作品。**
+这个阶段最重要的目标只有一个：
+**先把学生任务的步骤和评价结构 JSON 确立下来。**
+---
+## 本阶段输出对象
+必须输出：`__student__.json`
+结构如下：
+```json
+{
+  "任务标题": "",
+  "一句话说明": "",
+  "步骤": [
+    {
+      "标题": "",
+      "说明": ""
+    }
+  ],
+  "评价目标": [
+    {
+      "等级": "",
+      "说明": ""
+    }
+  ],
+  "示例区标题": "",
+  "示例页面文件": ""
+}
+```
+---
+## 这个阶段真正要解决什么
+不是去做教师分析。
+不是去做能力标签。
+不是去解释教学意义。
+而是先确定：
+- 学生要做什么
+- 这个任务怎么拆成步骤
+- 评价目标怎么分一星、二星、三星
+- 学生页中间示例区叫什么、加载什么文件
+---
+## 字段逐项对应
+### 1）任务标题
+学生页最上方的大标题。
+必须短、清楚、一眼看懂。
+### 2）一句话说明
+用一句话告诉学生：
+- 先做什么
+- 再做什么
+- 重点练什么
+### 3）步骤
+这是本阶段最重要的部分。
+先把学生完成任务的路径定下来。
+要求：
+- 一般 3 到 4 步
+- 每一步都包含：
+  - 标题
+  - 说明
+### 4）评价目标
+也是本阶段核心。
+告诉学生做到什么程度算完成、做到更好是什么样。
+要求：
+- 默认固定三档：一星、二星、三星
+- 每一档都要有一句清楚说明
+### 5）示例区标题
+控制学生页中间示例区标题。
+默认可写“示范样例”。
+### 6）示例页面文件
+控制 iframe 加载哪个页面文件。
+默认可写：
+```json
+"示例页面文件": "example.html"
+```
+---
+## 原则
+1. 全部使用中文
+2. 只写学生真正需要读的内容
+3. 不把老师看的信息混进来
+4. 标题要短
+5. 一句话说明只保留一句
+6. 步骤比解释更重要
+7. 评价目标必须清楚可执行
+---
+## 结果要求
+输出的 __student__.json 应该可以直接喂给学生页模板，不需要再大改。