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-playground-template-use/templates/a100_/347/273/231/344/276/235/347/204/266/350/200/201/345/270/210/350/256/276/350/256/241/344/270/200/344/270/252AI/347/224/273/345/203/217/__teacher__.json ADDED Viewed

@@ -0,0 +1,36 @@
+{
+  "任务类别": "A",
+  "任务编号": "100",
+  "任务名称": "给依然老师设计一个AI画像",
+  "主能力标签": "表达构建",
+  "任务类型标签": "视听表达",
+  "适合学生类型": [
+    "初次接触",
+    "需要明确目标",
+    "持续迭代"
+  ],
+  "训练重点": [
+    "围绕明确对象生成形象",
+    "把人物图片放进网页中完成展示",
+    "通过小幅修改让作品逐步变好"
+  ],
+  "卡点和解决方案": [
+    {
+      "卡点": "学生不知道要画谁，描述很泛",
+      "解决方案": "先让学生说清楚对象是谁，再从发型、衣服、表情这些具体点开始描述"
+    },
+    {
+      "卡点": "学生一次改太多，看不出变化",
+      "解决方案": "提醒学生每次只改一个地方，比如先改头发，再改表情"
+    }
+  ],
+  "可拓展方向": [
+    "给画像加背景音乐",
+    "加入点击切换不同版本画像",
+    "给人物加一句语音介绍"
+  ],
+  "课后作业": [
+    "回家把老师画像再优化一版，至少改一个地方，并说明你改了什么",
+    "给网页再加入一张新版本图片，展示前后变化"
+  ]
+}

@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>给依然老师设计一个AI画像</title>
+</head>
+<body>
+<!--
+  这段内容在你完成第一版后会被清空。
+  你可以自由发挥，完成以下目标：
+  ★ 一星：完成一张老师图片。
+  ★★ 二星：把图片放进网页里，并完成发布。
+  ★★★ 三星：把图片再改好一点，再把几张图片一起放进网页里。
+-->
+<script type="application/json" id="task-data">
+{
+  "任务标题": "给依然老师设计一个AI画像",
+  "一句话说明": "先让 AI 生成一个老师形象，再用网页把它展示出来，重点练习描述和小修改。",
+  "步骤": [
+    {
+      "标题": "先做图片",
+      "说明": "先用 AI 做出一张依然老师的图片。"
+    },
+    {
+      "标题": "放进网页",
+      "说明": "把图片放进网页里，再加上标题和一句介绍。"
+    },
+    {
+      "标题": "小改一下",
+      "说明": "试着小改一次图片，让它变得更好看一点。"
+    },
+    {
+      "标题": "展示变化",
+      "说明": "把几张图片一起放进网页里，展示你的修改过程。"
+    }
+  ],
+  "评价目标": [
+    {
+      "等级": "一星",
+      "说明": "完成一张老师图片。"
+    },
+    {
+      "等级": "二星",
+      "说明": "把图片放进网页里，并完成发布。"
+    },
+    {
+      "等级": "三星",
+      "说明": "把图片再改好一点，再把几张图片一起放进网页里。"
+    }
+  ],
+  "示例区标题": "示范样例",
+  "示例页面文件": "example.html"
+}
+</script>
+</body>
+</html>

package/skills/yiran-playground-template-use/templates/a101_/345/201/2323/345/274/240/345/220/214/344/270/273/351/242/230/345/233/276/347/211/207/__demo__.html ADDED Viewed

@@ -0,0 +1,131 @@
+<!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>
+        :root {
+            --primary-color: #6366f1;
+            --bg-gradient: linear-gradient(135deg, #1a1c2c 0%, #4a1942 100%);
+            --card-bg: rgba(255, 255, 255, 0.1);
+        }
+        body {
+            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
+            background: var(--bg-gradient);
+            color: white;
+            margin: 0;
+            padding: 40px 20px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            min-height: 100vh;
+        }
+        h1 {
+            font-size: 2.5rem;
+            margin-bottom: 10px;
+            text-shadow: 0 0 20px rgba(99, 102, 241, 0.5);
+        }
+        p.subtitle {
+            font-size: 1.1rem;
+            opacity: 0.8;
+            margin-bottom: 40px;
+        }
+        .gallery {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+            gap: 30px;
+            width: 100%;
+            max-width: 1200px;
+        }
+        .card {
+            background: var(--card-bg);
+            backdrop-filter: blur(10px);
+            border-radius: 20px;
+            padding: 20px;
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            transition: transform 0.3s ease;
+            text-align: center;
+        }
+        .card:hover {
+            transform: translateY(-10px);
+            border-color: var(--primary-color);
+        }
+        .image-placeholder {
+            width: 100%;
+            aspect-ratio: 1;
+            background: rgba(0, 0, 0, 0.3);
+            border-radius: 12px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin-bottom: 20px;
+            overflow: hidden;
+            position: relative;
+        }
+        .image-placeholder img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+        .placeholder-text {
+            position: absolute;
+            color: rgba(255, 255, 255, 0.4);
+            font-size: 0.9rem;
+        }
+        .tag {
+            background: var(--primary-color);
+            padding: 4px 12px;
+            border-radius: 20px;
+            font-size: 0.8rem;
+            margin-bottom: 10px;
+            display: inline-block;
+        }
+        h3 {
+            margin: 10px 0;
+            font-size: 1.3rem;
+        }
+        .desc {
+            font-size: 0.9rem;
+            opacity: 0.7;
+            line-height: 1.5;
+        }
+    </style>
+</head>
+<body>
+    <h1>太空小猫的探险</h1>
+    <p class="subtitle">这是一个“风格统一、内容变化”的 AI 图片创作示例</p>
+    <div class="gallery">
+        <div class="card">
+            <div class="image-placeholder">
+                <img src="space_cat_moon.png" alt="太空小猫在月球">
+                <div class="placeholder-text">图片生成中...</div>
+            </div>
+            <div class="tag">月球探险</div>
+            <h3>正在赏月的橘猫</h3>
+            <p class="desc">在荒凉的月球表面，小橘猫穿着它的迷你宇航服，回头望着远处的蓝色地球。</p>
+        </div>
+        <div class="card">
+            <div class="image-placeholder">
+                <img src="space_cat_mars.png" alt="太空小猫在火星">
+                <div class="placeholder-text">图片生成中...</div>
+            </div>
+            <div class="tag">火星漫步</div>
+            <h3>探索红色星球</h3>
+            <p class="desc">火星的沙尘非常大，但小橘猫一点也不怕，它正在红色的岩石间寻找外星鱼干。</p>
+        </div>
+        <div class="card">
+            <div class="image-placeholder">
+                <img src="space_cat_station.png" alt="太空小猫在空间站">
+                <div class="placeholder-text">图片生成中...</div>
+            </div>
+            <div class="tag">空间站生活</div>
+            <h3>飘浮的下午茶</h3>
+            <p class="desc">在国际空间站里，小橘猫正在体验失重的感觉。你看，它的尾巴都飘起来了！</p>
+        </div>
+    </div>
+</body>
+</html>

package/skills/yiran-playground-template-use/templates/a101_/345/201/2323/345/274/240/345/220/214/344/270/273/351/242/230/345/233/276/347/211/207/__student-view__.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>做3张同主题图片</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>做3张同主题图片</h1>
+        <p class="subtitle">先确定一个有趣的主题，再用 AI 生成 3 张风格统一、但情节不同的系列图片。</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">选一种你最喜欢的画风（比如 3D 卡通或水彩），并在每一张图的提示词里都带上它。</div></div><div class="task-item"><div class="item-top"><span class="num">3</span><span>对比和微调</span></div><div class="item-body">把 3 张图放在一起看，如果细节不像，就调整一下提示词，让它们看起来像一套作品。</div></div>
+            </div>
+          </div>
+          <div class="sample-frame-wrap">
+            <div class="sample-frame-head"><h3>示范样例：太空小猫的探险</h3></div>
+            <iframe src="demo.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">成功生成了 3 张内容相关的图片。</div></div><div class="task-item star-item"><div class="item-top"><span class="num">二星</span><span>二星</span></div><div class="item-body">3 张图片不仅主题相同，主要的色彩和人物形象也非常接近。</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>
+  </div>
+</body>
+</html>

package/skills/yiran-playground-template-use/templates/a101_/345/201/2323/345/274/240/345/220/214/344/270/273/351/242/230/345/233/276/347/211/207/__student__.json ADDED Viewed

@@ -0,0 +1,34 @@
+{
+  "任务标题": "做3张同主题图片",
+  "一句话说明": "先确定一个有趣的主题，再用 AI 生成 3 张风格统一、但情节不同的系列图片。",
+  "步骤": [
+    {
+      "标题": "选个好主题",
+      "说明": "想一想你要画什么？比如“太空中的小猫”或者“深海里的探险”，主题要统一。"
+    },
+    {
+      "标题": "写出风格词",
+      "说明": "选一种你最喜欢的画风（比如 3D 卡通或水彩），并在每一张图的提示词里都带上它。"
+    },
+    {
+      "标题": "对比和微调",
+      "说明": "把 3 张图放在一起看，如果细节不像，就调整一下提示词，让它们看起来像一套作品。"
+    }
+  ],
+  "评价目标": [
+    {
+      "等级": "一星",
+      "说明": "成功生成了 3 张内容相关的图片。"
+    },
+    {
+      "等级": "二星",
+      "说明": "3 张图片不仅主题相同，主要的色彩和人物形象也非常接近。"
+    },
+    {
+      "等级": "三星",
+      "说明": "画风完全统一，细节处理精致，看起来非常像一套正式的绘本插图。"
+    }
+  ],
+  "示例区标题": "示范样例：太空小猫的探险",
+  "示例页面文件": "__demo__.html"
+}

package/skills/yiran-playground-template-use/templates/a101_/345/201/2323/345/274/240/345/220/214/344/270/273/351/242/230/345/233/276/347/211/207/__teacher-view__.html ADDED Viewed

@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>A102 · 做3张同主题图片</title>
+  <style>
+    * { box-sizing: border-box; }
+    body { margin: 0; font-family: "PingFang SC", "Microsoft YaHei", sans-serif; background: #f4f7fb; color: #24324a; }
+    .page { max-width: 1400px; 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; }
+    .layout { margin-top: 18px; display: grid; grid-template-columns: 360px minmax(0,1fr); gap: 16px; align-items: start; }
+    .sidebar { display: grid; gap: 16px; }
+    .card, .preview-card { background: #fff; border: 1px solid #e7eefc; border-radius: 20px; padding: 18px; box-shadow: 0 10px 24px rgba(100,122,166,.08); }
+    .card h2, .preview-head h2 { margin: 0 0 12px; font-size: 18px; color: #314a96; }
+    .meta-grid { display: grid; grid-template-columns: 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; }
+    .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; }
+    iframe { width: 100%; height: 900px; border: 1px solid #dfe7fb; border-radius: 16px; background: #fff; display: block; }
+    .empty-box { background: #f8faff; border: 1px dashed #cfdcff; border-radius: 14px; padding: 24px; color: #7a89ad; line-height: 1.8; }
+    @media (max-width: 960px) { .layout { grid-template-columns: 1fr; } iframe { height: 420px; } }
+  </style>
+</head>
+<body>
+  <div class="page">
+    <section class="hero">
+      <h1>A102 · 做3张同主题图片</h1>
+      <p>这是根据教师 JSON 自动生成的可视化查看页，左边快速扫读，右边直接看作品预览。</p>
+    </section>
+    <section class="layout">
+      <div class="sidebar">
+        <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></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 class="card"><h2>卡点和解决方案</h2><div class="list"><div class="list-item issue"><strong>卡点</strong>学生在改内容时，不小心把风格提示词也删掉或改掉了，导致风格跑偏。<strong>解决方案</strong>引导学生像玩乐高一样组装提示词，把“风格模块”固定住，只替换“内容模块”。</div><div class="list-item issue"><strong>卡点</strong>生成的角色长相在 3 张图里不完全一样。<strong>解决方案</strong>建议学生在描述角色时使用更具体的特征词（如：橘色条纹、蓝色领带），并多次尝试。</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 class="card"><h2>课后作业</h2><div class="list"><div class="list-item">尝试以“我的梦想职业”为题，制作一组 3 张的职业生活系列图，保持风格一致。</div></div></div>
+      </div>
+      <div class="preview-card empty"><div class="preview-head"><h2>作品预览</h2></div><div class="empty-box">当前文件夹下没有找到 example.html / index.html / preview.html</div></div>
+    </section>
+  </div>
+</body>
+</html>

package/skills/yiran-playground-template-use/templates/a101_/345/201/2323/345/274/240/345/220/214/344/270/273/351/242/230/345/233/276/347/211/207/__teacher__.json ADDED Viewed

@@ -0,0 +1,34 @@
+{
+  "任务类别": "A",
+  "任务编号": "101",
+  "任务名称": "做3张同主题图片",
+  "主能力标签": "表达构建",
+  "任务类型标签": "视听表达",
+  "适合学生类型": [
+    "初次接触",
+    "需要明确目标"
+  ],
+  "训练重点": [
+    "练习通过提示词锁定画面风格",
+    "理解作品一致性的价值",
+    "初步接触提示词的模块化修改"
+  ],
+  "卡点和解决方案": [
+    {
+      "卡点": "学生在改内容时，不小心把风格提示词也删掉或改掉了，导致风格跑偏。",
+      "解决方案": "引导学生像玩乐高一样组装提示词，把“风格模块”固定住，只替换“内容模块”。"
+    },
+    {
+      "卡点": "生成的角色长相在 3 张图里不完全一样。",
+      "解决方案": "建议学生在描述角色时使用更具体的特征词（如：橘色条纹、蓝色领带），并多次尝试。"
+    }
+  ],
+  "可拓展方向": [
+    "为这组系列图片配上旁白文字",
+    "尝试不同流派的艺术风格（如像素风、油画风）",
+    "将图片组合成一个简单的长图网页"
+  ],
+  "课后作业": [
+    "尝试以“我的梦想职业”为题，制作一组 3 张的职业生活系列图，保持风格一致。"
+  ]
+}

package/skills/yiran-playground-template-use/templates/a103_/345/201/232/344/270/200/344/270/252/344/273/213/347/273/215/351/241/265/351/235/242/__demo__.html ADDED Viewed

@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="zh">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>自我介绍页面</title>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body { font-family: sans-serif; background: #f5f0e8; min-height: 100vh; display: flex; justify-content: center; align-items: center; padding: 20px; }
+    .card {
+      background: white;
+      border-radius: 16px;
+      box-shadow: 0 4px 20px rgba(0,0,0,0.1);
+      overflow: hidden;
+      max-width: 480px;
+      width: 100%;
+    }
+    .hero-img {
+      width: 100%;
+      height: 220px;
+      object-fit: cover;
+      display: block;
+    }
+    .content { padding: 28px 24px; }
+    .tag {
+      display: inline-block;
+      background: #e8f4e5;
+      color: #2e7d32;
+      font-size: 12px;
+      padding: 4px 10px;
+      border-radius: 20px;
+      margin-bottom: 12px;
+    }
+    h1 {
+      font-size: 22px;
+      color: #222;
+      margin-bottom: 10px;
+    }
+    p {
+      font-size: 14px;
+      color: #666;
+      line-height: 1.7;
+      margin-bottom: 16px;
+    }
+    .highlight-box {
+      background: #fff9e6;
+      border-left: 4px solid #f0a500;
+      padding: 12px 16px;
+      border-radius: 0 8px 8px 0;
+      font-size: 14px;
+      color: #5a3e00;
+      margin-bottom: 20px;
+    }
+    .btn {
+      display: inline-block;
+      background: #4a90e2;
+      color: white;
+      padding: 10px 24px;
+      border-radius: 8px;
+      text-decoration: none;
+      font-size: 14px;
+    }
+  </style>
+</head>
+<body>
+  <div class="card">
+    <img src="https://picsum.photos/480/220?random=1" alt="介绍图" class="hero-img">
+    <div class="content">
+      <span class="tag">自我展示</span>
+      <h1>你好，我叫小星 ✨</h1>
+      <p>我是一个热爱科学和画画的小学生，喜欢用画笔记录每一天的发现。这个页面用来介绍我自己，让别人快速认识我！</p>
+      <div class="highlight-box">📌 本次练习重点：把图片和文字组合在一起，做出有结构的介绍页面。</div>
+      <a href="#" class="btn">了解更多</a>
+    </div>
+  </div>
+</body>
+</html>

package/skills/yiran-playground-template-use/templates/a103_/345/201/232/344/270/200/344/270/252/344/273/213/347/273/215/351/241/265/351/235/242/__student-view__.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 class="task-item"><div class="item-top"><span class="num">1</span><span>选一张图片</span></div><div class="item-body">选一张能代表你自己的图片，可以是照片、画画，或者用 AI 生成的图片。</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="demo.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>
+  </div>
+</body>
+</html>

package/skills/yiran-playground-template-use/templates/a103_/345/201/232/344/270/200/344/270/252/344/273/213/347/273/215/351/241/265/351/235/242/__student__.json ADDED Viewed

@@ -0,0 +1,38 @@
+{
+  "任务标题": "做一个介绍页面",
+  "一句话说明": "用一张图片加一段文字，做一个属于自己的介绍页面，练一练图文组合的技巧。",
+  "步骤": [
+    {
+      "标题": "选一张图片",
+      "说明": "选一张能代表你自己的图片，可以是照片、画画，或者用 AI 生成的图片。"
+    },
+    {
+      "标题": "写一段介绍文字",
+      "说明": "写几句话介绍自己：你是谁、你有什么特点、你喜欢什么。文字不用多，说清楚就行。"
+    },
+    {
+      "标题": "把图和文字放进网页",
+      "说明": "用网页把图片和文字组合在一起。注意排版：图片放哪里、文字放哪里，看起来要整齐。"
+    },
+    {
+      "标题": "调一调排版",
+      "说明": "试着调整图片大小、文字位置、背景颜色，让页面更好看。不同排版感觉不一样，多试试！"
+    }
+  ],
+  "评价目标": [
+    {
+      "等级": "一星",
+      "说明": "页面里有图片也有文字，结构基本完整。"
+    },
+    {
+      "等级": "二星",
+      "说明": "图文排列整齐，排版清晰，能一眼看出图片和文字的关系。"
+    },
+    {
+      "等级": "三星",
+      "说明": "排版有自己的想法，层次分明，比如标题、正文、重点提示都有区分，看起来很舒服。"
+    }
+  ],
+  "示例区标题": "示范样例",
+  "示例页面文件": "__demo__.html"
+}