Home Explore Help
Register Sign In
fmode
/
agent-app
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

feat: hundun product case

ryanemax 3 weeks ago
parent
02352fea52
commit
536971d2b9
10 changed files with 1943 additions and 0 deletions
Split View Show Diff Stats
  1. 314 0
      example-book/hundun/21-work.html
  2. 20 0
      example-book/hundun/21faq.md
  3. 115 0
      example-book/hundun/english-question.html
  4. 473 0
      example-book/hundun/english-share.html
  5. 228 0
      example-book/hundun/problem-card.html
  6. 191 0
      example-book/hundun/problem-english-employee.html
  7. 246 0
      example-book/hundun/problem-english-value.html
  8. 166 0
      example-book/hundun/problem-english.html
  9. 190 0
      example-book/hundun/story-card.html
  10. 0 0
      example-book/meeting.md

+ 314 - 0
example-book/hundun/21-work.html
View File 

@@ -0,0 +1,314 @@
 
+<!-- 
+ 请帮我用html，美观的样式，梳理和表达大家作业中的共性问题：
 
+
 
+
 
+共性问题
 
+
 
+# 挖需求环节
 
+现状：直接结合AI进行产业宏观层面内部外部的问题（经济、政策、技术）
 
+问题：缺少可聚焦到具体业务场景、关注目的、用户画像的用户故事和用户需求卡片。需要多采集真实的用户反馈还有相关岗位员工的反馈。
 
+注意：只客观记录不主观过滤，搜集后分析工作交给AI。
 
+
 
+# 立产品环节
 
+现状：通过问题给出了很多立产品的思路和选择
 
+问题：没有聚焦到某一个具体的功能模块
 
+注意：根据高重复、高价值、高发散的理论，进一步聚焦功能模块。
 
+
 
+# 拆单点环节
 
+现状：谈了针对需求和产品中问题的拆解与尝试，并且总结了尝试的效果和经验。
 
+问题：缺少结合AI工具，重新验证服务流程。
 
+注意：借助AI工具，来进行初步验证，并思考下一步的改进策略。
 
+
 
+可以适当补充。
 
+ -->
 
+<!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>
 
+        :root {
 
+            --primary-color: #4361ee;
 
+            --secondary-color: #3f37c9;
 
+            --accent-color: #4895ef;
 
+            --light-color: #f8f9fa;
 
+            --dark-color: #212529;
 
+            --success-color: #4cc9f0;
 
+            --warning-color: #f72585;
 
+        }
 
+        
+        body {
 
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 
+            line-height: 1.6;
 
+            color: var(--dark-color);
 
+            background-color: #f5f7ff;
 
+            margin: 0;
 
+            padding: 20px;
 
+        }
 
+        
+        .container {
 
+            max-width: 1000px;
 
+            margin: 0 auto;
 
+            background-color: white;
 
+            border-radius: 10px;
 
+            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
 
+            padding: 30px;
 
+        }
 
+        
+        h1 {
 
+            color: var(--primary-color);
 
+            text-align: center;
 
+            margin-bottom: 30px;
 
+            font-size: 2.5rem;
 
+            border-bottom: 2px solid var(--accent-color);
 
+            padding-bottom: 10px;
 
+        }
 
+        
+        h2 {
 
+            color: var(--secondary-color);
 
+            margin-top: 30px;
 
+            font-size: 1.8rem;
 
+            position: relative;
 
+            padding-left: 15px;
 
+        }
 
+        
+        h2:before {
 
+            content: "";
 
+            position: absolute;
 
+            left: 0;
 
+            top: 10px;
 
+            height: 20px;
 
+            width: 5px;
 
+            background-color: var(--accent-color);
 
+            border-radius: 3px;
 
+        }
 
+        
+        .section {
 
+            margin-bottom: 40px;
 
+            padding: 20px;
 
+            border-radius: 8px;
 
+            background-color: var(--light-color);
 
+            transition: transform 0.3s ease;
 
+        }
 
+        
+        .section:hover {
 
+            transform: translateY(-5px);
 
+            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
 
+        }
 
+        
+        .status, .problem, .suggestion {
 
+            padding: 15px;
 
+            margin: 15px 0;
 
+            border-left: 4px solid;
 
+            border-radius: 0 5px 5px 0;
 
+        }
 
+        
+        .status {
 
+            background-color: rgba(67, 97, 238, 0.1);
 
+            border-color: var(--primary-color);
 
+        }
 
+        
+        .problem {
 
+            background-color: rgba(247, 37, 133, 0.1);
 
+            border-color: var(--warning-color);
 
+        }
 
+        
+        .suggestion {
 
+            background-color: rgba(76, 201, 240, 0.1);
 
+            border-color: var(--success-color);
 
+        }
 
+        
+        .label {
 
+            display: inline-block;
 
+            padding: 3px 10px;
 
+            border-radius: 20px;
 
+            font-size: 0.8rem;
 
+            font-weight: bold;
 
+            margin-bottom: 10px;
 
+            text-transform: uppercase;
 
+        }
 
+        
+        .status .label {
 
+            background-color: var(--primary-color);
 
+            color: white;
 
+        }
 
+        
+        .problem .label {
 
+            background-color: var(--warning-color);
 
+            color: white;
 
+        }
 
+        
+        .suggestion .label {
 
+            background-color: var(--success-color);
 
+            color: white;
 
+        }
 
+        
+        ul {
 
+            padding-left: 20px;
 
+        }
 
+        
+        li {
 
+            margin-bottom: 8px;
 
+        }
 
+        
+        .highlight {
 
+            background-color: #fffacd;
 
+            padding: 2px 5px;
 
+            border-radius: 3px;
 
+            font-weight: 500;
 
+        }
 
+        
+        .additional {
 
+            background-color: #f0f8ff;
 
+            padding: 15px;
 
+            border-radius: 5px;
 
+            margin-top: 20px;
 
+            border: 1px dashed var(--accent-color);
 
+        }
 
+        
+        .additional h3 {
 
+            color: var(--accent-color);
 
+            margin-top: 0;
 
+        }
 
+        
+        @media (max-width: 768px) {
 
+            .container {
 
+                padding: 15px;
 
+            }
 
+            
+            h1 {
 
+                font-size: 1.8rem;
 
+            }
 
+            
+            h2 {
 
+                font-size: 1.4rem;
 
+            }
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="container">
 
+        <h1>作业共性问题分析报告</h1>
 
+        
+        <div class="section">
 
+            <h2>1. 挖需求环节</h2>
 
+            
+            <div class="status">
 
+                <span class="label">现状</span>
 
+                <p>同学们能够直接结合AI进行产业宏观层面分析，包括经济、政策、技术等内部外部问题。</p>
 
+            </div>
 
+            
+            <div class="problem">
 
+                <span class="label">问题</span>
 
+                <p>缺少可聚焦到具体业务场景、关注目的、用户画像的用户故事和用户需求卡片。需要多采集真实的用户反馈还有相关岗位员工的反馈。</p>
 
+                <ul>
 
+                    <li>需求分析过于宏观，缺乏具体用户场景</li>
 
+                    <li>用户画像模糊，缺乏具体特征描述</li>
 
+                    <li>缺少真实用户反馈的一手资料</li>
 
+                </ul>
 
+            </div>
 
+            
+            <div class="suggestion">
 
+                <span class="label">建议</span>
 
+                <p>只客观记录不主观过滤，搜集后分析工作交给AI。</p>
 
+                <ul>
 
+                    <li>使用<span class="highlight">用户访谈模板</span>收集真实反馈</li>
 
+                    <li>创建<span class="highlight">用户旅程地图</span>识别痛点</li>
 
+                    <li>采用<span class="highlight">5W1H方法</span>细化需求场景</li>
 
+                </ul>
 
+            </div>
 
+            
+            <div class="additional">
 
+                <h3>补充建议</h3>
 
+                <p>可以考虑使用以下工具辅助需求挖掘：</p>
 
+                <ul>
 
+                    <li><strong>用户画像模板：</strong> 包含人口统计、行为模式、目标与痛点等维度</li>
 
+                    <li><strong>需求优先级矩阵：</strong> 根据影响力和实施难度对需求进行排序</li>
 
+                    <li><strong>AI辅助分析：</strong> 将原始用户反馈输入AI进行自动分类和主题提取</li>
 
+                </ul>
 
+            </div>
 
+        </div>
 
+        
+        <div class="section">
 
+            <h2>2. 立产品环节</h2>
 
+            
+            <div class="status">
 
+                <span class="label">现状</span>
 
+                <p>通过问题分析给出了很多立产品的思路和选择方向。</p>
 
+            </div>
 
+            
+            <div class="problem">
 
+                <span class="label">问题</span>
 
+                <p>没有聚焦到某一个具体的功能模块，产品定位较为宽泛。</p>
 
+                <ul>
 
+                    <li>产品范围过大，难以深入</li>
 
+                    <li>功能点分散，缺乏核心聚焦</li>
 
+                    <li>价值主张不够明确具体</li>
 
+                </ul>
 
+            </div>
 
+            
+            <div class="suggestion">
 
+                <span class="label">建议</span>
 
+                <p>根据<span class="highlight">高重复、高价值、高发散</span>的理论，进一步聚焦功能模块。</p>
 
+                <ul>
 
+                    <li>使用<span class="highlight">KANO模型</span>分析功能优先级</li>
 
+                    <li>采用<span class="highlight">MVP原则</span>确定最小可行产品</li>
 
+                    <li>通过<span class="highlight">功能矩阵</span>评估各模块价值</li>
 
+                </ul>
 
+            </div>
 
+            
+            <div class="additional">
 
+                <h3>补充建议</h3>
 
+                <p>产品聚焦的具体方法：</p>
 
+                <ul>
 
+                    <li><strong>价值主张画布：</strong> 明确产品为客户创造的价值</li>
 
+                    <li><strong>功能优先级投票：</strong> 团队成员对功能重要性进行评分</li>
 
+                    <li><strong>竞品功能分析：</strong> 研究市场上同类产品的功能结构</li>
 
+                    <li><strong>用户场景测试：</strong> 针对不同功能模块设计测试场景</li>
 
+                </ul>
 
+            </div>
 
+        </div>
 
+        
+        <div class="section">
 
+            <h2>3. 拆单点环节</h2>
 
+            
+            <div class="status">
 
+                <span class="label">现状</span>
 
+                <p>能够针对需求和产品中的问题进行拆解与尝试，并且总结了尝试的效果和经验。</p>
 
+            </div>
 
+            
+            <div class="problem">
 
+                <span class="label">问题</span>
 
+                <p>缺少结合AI工具，重新验证服务流程，迭代改进不足。</p>
 
+                <ul>
 
+                    <li>验证方法传统，未充分利用AI能力</li>
 
+                    <li>流程优化缺乏数据支撑</li>
 
+                    <li>改进策略系统性不足</li>
 
+                </ul>
 
+            </div>
 
+            
+            <div class="suggestion">
 
+                <span class="label">建议</span>
 
+                <p>借助AI工具，来进行初步验证，并思考下一步的改进策略。</p>
 
+                <ul>
 
+                    <li>使用<span class="highlight">AI模拟用户</span>测试服务流程</li>
 
+                    <li>通过<span class="highlight">数据分析</span>识别流程瓶颈</li>
 
+                    <li>建立<span class="highlight">持续改进机制</span>迭代优化</li>
 
+                </ul>
 
+            </div>
 
+            
+            <div class="additional">
 
+                <h3>补充建议</h3>
 
+                <p>AI辅助拆解单点问题的具体应用：</p>
 
+                <ul>
 
+                    <li><strong>流程挖掘：</strong> 使用AI分析现有流程日志发现优化点</li>
 
+                    <li><strong>A/B测试：</strong> 通过AI快速生成并测试多个解决方案</li>
 
+                    <li><strong>预测分析：</strong> 预测不同改进方案的可能效果</li>
 
+                    <li><strong>自动化报告：</strong> AI自动生成流程分析报告和改进建议</li>
 
+                </ul>
 
+            </div>
 
+        </div>
 
+    </div>
 
+</body>
 
+</html>

+ 20 - 0
example-book/hundun/21faq.md
View File 

@@ -0,0 +1,20 @@
 
+# 21群 第一次直播答疑 FAQ记录
 
+
 
+
 
+
 
+共性问题
 
+
 
+# 挖需求环节
 
+现状：直接结合AI进行产业宏观层面内部外部的问题（经济、政策、技术）
 
+问题：缺少可聚焦到具体业务场景、关注目的、用户画像的用户故事和用户需求卡片。需要多采集真实的用户反馈还有相关岗位员工的反馈。
 
+注意：只客观记录不主观过滤，搜集后分析工作交给AI。
 
+
 
+# 立产品环节
 
+现状：通过问题给出了很多立产品的思路和选择
 
+问题：没有聚焦到某一个具体的功能模块
 
+注意：根据高重复、高价值、高发散的理论，进一步聚焦功能模块。
 
+
 
+# 拆单点环节
 
+现状：谈了针对需求和产品中问题的拆解与尝试，并且总结了尝试的效果和经验。
 
+问题：缺少结合AI工具，重新验证服务流程。
 
+注意：借助AI工具，来进行初步验证，并思考下一步的改进策略。

+ 115 - 0
example-book/hundun/english-question.html
View File 

@@ -0,0 +1,115 @@
 
+<!-- 
+ 请您作为一名专业的英语教研老师，根据以下生词表生成一篇阅读文章：生词表：oracle, Shang, history, turtle
 
+ 然后将阅读文章及选择题用html格式表示，写在一个html文件内。
 
+ -->
 
+
 
+ <!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Ancient Chinese History Reading</title>
 
+    <style>
 
+        body {
 
+            font-family: Arial, sans-serif;
 
+            line-height: 1.6;
 
+            max-width: 800px;
 
+            margin: 0 auto;
 
+            padding: 20px;
 
+        }
 
+        .reading-passage {
 
+            background-color: #f9f9f9;
 
+            padding: 20px;
 
+            border-radius: 5px;
 
+            margin-bottom: 30px;
 
+        }
 
+        .questions {
 
+            background-color: #f0f8ff;
 
+            padding: 20px;
 
+            border-radius: 5px;
 
+        }
 
+        h1, h2 {
 
+            color: #2c3e50;
 
+        }
 
+        .question {
 
+            margin-bottom: 15px;
 
+        }
 
+        .options {
 
+            margin-left: 20px;
 
+        }
 
+        .vocab-word {
 
+            font-weight: bold;
 
+            color: #e74c3c;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <h1>The Oracle Bones of Ancient China</h1>
 
+    
+    <div class="reading-passage">
 
+        <p>In the study of ancient Chinese <span class="vocab-word">history</span>, one of the most fascinating discoveries has been the <span class="vocab-word">oracle</span> bones from the <span class="vocab-word">Shang</span> Dynasty (1600-1046 BCE). These artifacts give us important clues about early Chinese writing, religion, and society.</p>
 
+
 
+        <p>The Shang kings used these oracle bones to communicate with their ancestors and gods. They would write questions on pieces of animal bone or <span class="vocab-word">turtle</span> shell, then apply heat until the bone cracked. Special priests would interpret these cracks as answers from the spirit world.</p>
 
+
 
+        <p>Most oracle bones were made from the shoulder bones of oxen or the plastrons (bottom shells) of turtles. The Shang people believed turtles had special spiritual connections because they could live in both water and on land, and because their long lifespan represented wisdom.</p>
 
+
 
+        <p>Today, over 150,000 oracle bone fragments have been found. They provide valuable information about the Shang Dynasty's government, wars, weather, and even medical practices. The writing on these bones is the earliest known form of Chinese characters, showing how modern Chinese writing developed over thousands of years.</p>
 
+
 
+        <p>Without these oracle bones, our knowledge of early Chinese civilization would be much more limited. They serve as an important bridge between the ancient world and our understanding of history today.</p>
 
+    </div>
 
+
 
+    <div class="questions">
 
+        <h2>Comprehension Questions</h2>
 
+        
+        <div class="question">
 
+            <p>1. What were oracle bones primarily used for in the Shang Dynasty?</p>
 
+            <div class="options">
 
+                <input type="radio" name="q1" id="q1a"> <label for="q1a">Cooking food</label><br>
 
+                <input type="radio" name="q1" id="q1b"> <label for="q1b">Communicating with spirits</label><br>
 
+                <input type="radio" name="q1" id="q1c"> <label for="q1c">Building houses</label><br>
 
+                <input type="radio" name="q1" id="q1d"> <label for="q1d">Writing letters</label>
 
+            </div>
 
+        </div>
 
+
 
+        <div class="question">
 
+            <p>2. Why did the Shang people particularly value turtle shells for oracle bones?</p>
 
+            <div class="options">
 
+                <input type="radio" name="q2" id="q2a"> <label for="q2a">Because turtles were easy to catch</label><br>
 
+                <input type="radio" name="q2" id="q2b"> <label for="q2b">Because of turtles' spiritual connections and long lifespan</label><br>
 
+                <input type="radio" name="q2" id="q2c"> <label for="q2c">Because turtle shells were colorful</label><br>
 
+                <input type="radio" name="q2" id="q2d"> <label for="q2d">Because turtles could fly</label>
 
+            </div>
 
+        </div>
 
+
 
+        <div class="question">
 
+            <p>3. What important historical information do oracle bones provide?</p>
 
+            <div class="options">
 
+                <input type="radio" name="q3" id="q3a"> <label for="q3a">Only weather reports</label><br>
 
+                <input type="radio" name="q3" id="q3b"> <label for="q3b">Only military information</label><br>
 
+                <input type="radio" name="q3" id="q3c"> <label for="q3c">Various aspects of Shang society including government and medicine</label><br>
 
+                <input type="radio" name="q3" id="q3d"> <label for="q3d">Only religious practices</label>
 
+            </div>
 
+        </div>
 
+
 
+        <div class="question">
 
+            <p>4. How did priests get answers from the oracle bones?</p>
 
+            <div class="options">
 
+                <input type="radio" name="q4" id="q4a"> <label for="q4a">By reading written answers on the bones</label><br>
 
+                <input type="radio" name="q4" id="q4b"> <label for="q4b">By interpreting cracks made by heating the bones</label><br>
 
+                <input type="radio" name="q4" id="q4c"> <label for="q4c">By listening to the bones</label><br>
 
+                <input type="radio" name="q4" id="q4d"> <label for="q4d">By weighing the bones</label>
 
+            </div>
 
+        </div>
 
+
 
+        <div class="question">
 
+            <p>5. What is significant about the writing on oracle bones?</p>
 
+            <div class="options">
 
+                <input type="radio" name="q5" id="q5a"> <label for="q5a">It's the earliest known form of Chinese characters</label><br>
 
+                <input type="radio" name="q5" id="q5b"> <label for="q5b">It's written in gold ink</label><br>
 
+                <input type="radio" name="q5" id="q5c"> <label for="q5c">It's the same as modern Chinese writing</label><br>
 
+                <input type="radio" name="q5" id="q5d"> <label for="q5d">It was borrowed from Egyptian hieroglyphs</label>
 
+            </div>
 
+        </div>
 
+    </div>
 
+</body>
 
+</html>

+ 473 - 0
example-book/hundun/english-share.html
View File 

@@ -0,0 +1,473 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 
+    <title>English Reading Comprehension Test</title>
 
+    <style>
 
+        * {
 
+            margin: 0;
 
+            padding: 0;
 
+            box-sizing: border-box;
 
+            font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
 
+        }
 
+        
+        body {
 
+            background-color: #f5f5f5;
 
+            color: #333;
 
+            line-height: 1.6;
 
+            padding: 15px;
 
+            max-width: 100%;
 
+            overflow-x: hidden;
 
+        }
 
+        
+        .container {
 
+            background-color: #fff;
 
+            border-radius: 12px;
 
+            padding: 20px;
 
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
 
+            margin-bottom: 20px;
 
+        }
 
+        
+        h1 {
 
+            font-size: 22px;
 
+            margin-bottom: 15px;
 
+            color: #333;
 
+            text-align: center;
 
+            font-weight: 600;
 
+        }
 
+        
+        .passage {
 
+            background-color: #f9f9f9;
 
+            padding: 15px;
 
+            border-radius: 8px;
 
+            margin-bottom: 20px;
 
+            font-size: 16px;
 
+            line-height: 1.7;
 
+        }
 
+        
+        .question {
 
+            margin-bottom: 20px;
 
+            padding-bottom: 15px;
 
+            border-bottom: 1px solid #eee;
 
+        }
 
+        
+        .question-text {
 
+            font-size: 18px;
 
+            margin-bottom: 12px;
 
+            font-weight: 500;
 
+        }
 
+        
+        .options {
 
+            margin-left: 5px;
 
+        }
 
+        
+        .option {
 
+            display: flex;
 
+            align-items: center;
 
+            margin-bottom: 10px;
 
+            padding: 10px;
 
+            border-radius: 8px;
 
+            background-color: #f9f9f9;
 
+            transition: all 0.2s;
 
+        }
 
+        
+        .option input {
 
+            margin-right: 10px;
 
+        }
 
+        
+        .option label {
 
+            flex: 1;
 
+        }
 
+        
+        .score-display {
 
+            text-align: center;
 
+            padding: 15px;
 
+            background: linear-gradient(135deg, #6e8efb, #a777e3);
 
+            color: white;
 
+            border-radius: 10px;
 
+            margin: 20px 0;
 
+            font-size: 24px;
 
+            font-weight: bold;
 
+            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
 
+        }
 
+        
+        .btn {
 
+            display: block;
 
+            width: 100%;
 
+            padding: 14px;
 
+            border: none;
 
+            border-radius: 8px;
 
+            font-size: 16px;
 
+            font-weight: 500;
 
+            text-align: center;
 
+            cursor: pointer;
 
+            transition: all 0.3s;
 
+            margin-bottom: 15px;
 
+        }
 
+        
+        .btn-primary {
 
+            background-color: #4a6cf7;
 
+            color: white;
 
+        }
 
+        
+        .btn-primary:hover {
 
+            background-color: #3a5ce4;
 
+        }
 
+        
+        .btn-secondary {
 
+            background-color: #f0f0f0;
 
+            color: #333;
 
+        }
 
+        
+        .btn-secondary:hover {
 
+            background-color: #e0e0e0;
 
+        }
 
+        
+        .modal {
 
+            display: none;
 
+            position: fixed;
 
+            top: 0;
 
+            left: 0;
 
+            width: 100%;
 
+            height: 100%;
 
+            background-color: rgba(0, 0, 0, 0.5);
 
+            z-index: 1000;
 
+            justify-content: center;
 
+            align-items: center;
 
+        }
 
+        
+        .modal-content {
 
+            background-color: white;
 
+            width: 90%;
 
+            max-width: 400px;
 
+            border-radius: 12px;
 
+            padding: 20px;
 
+            animation: modalFadeIn 0.3s;
 
+        }
 
+        
+        @keyframes modalFadeIn {
 
+            from {
 
+                opacity: 0;
 
+                transform: translateY(-20px);
 
+            }
 
+            to {
 
+                opacity: 1;
 
+                transform: translateY(0);
 
+            }
 
+        }
 
+        
+        .modal-header {
 
+            font-size: 18px;
 
+            font-weight: 600;
 
+            margin-bottom: 15px;
 
+            text-align: center;
 
+        }
 
+        
+        .modal-body {
 
+            margin-bottom: 20px;
 
+        }
 
+        
+        .form-group {
 
+            margin-bottom: 15px;
 
+        }
 
+        
+        .form-group label {
 
+            display: block;
 
+            margin-bottom: 8px;
 
+            font-size: 14px;
 
+            color: #666;
 
+        }
 
+        
+        .form-control {
 
+            width: 100%;
 
+            padding: 12px;
 
+            border: 1px solid #ddd;
 
+            border-radius: 8px;
 
+            font-size: 16px;
 
+        }
 
+        
+        .modal-footer {
 
+            display: flex;
 
+            justify-content: space-between;
 
+        }
 
+        
+        .modal-footer .btn {
 
+            width: 48%;
 
+            margin-bottom: 0;
 
+        }
 
+        
+        .correct {
 
+            background-color: #e6f7e6;
 
+            border-left: 4px solid #4CAF50;
 
+        }
 
+        
+        .incorrect {
 
+            background-color: #ffebee;
 
+            border-left: 4px solid #F44336;
 
+        }
 
+        
+        .explanation {
 
+            display: none;
 
+            margin-top: 10px;
 
+            padding: 10px;
 
+            background-color: #f0f7ff;
 
+            border-radius: 8px;
 
+            font-size: 14px;
 
+            color: #333;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="container">
 
+        <h1>English Reading Comprehension Test</h1>
 
+        
+        <div class="passage">
 
+            <p><strong>Read the following passage and answer the questions:</strong></p>
 
+            <p>The rapid development of artificial intelligence (AI) has sparked both excitement and concern worldwide. While AI promises to revolutionize industries from healthcare to transportation, experts warn about potential job displacement and ethical challenges. A recent study by Oxford University suggests that 47% of U.S. jobs could be automated within the next two decades. However, many economists argue that AI will create new types of jobs even as it eliminates others, similar to previous technological revolutions.</p>
 
+            <p>Ethical considerations are equally important. As AI systems make more decisions affecting human lives, questions arise about accountability and bias. Tech companies are now establishing AI ethics boards to address these concerns, but critics say more government regulation is needed to ensure responsible development.</p>
 
+        </div>
 
+        
+        <div class="question">
 
+            <div class="question-text">1. What is the main idea of the passage?</div>
 
+            <div class="options">
 
+                <div class="option">
 
+                    <input type="radio" name="q1" id="q1a" value="A">
 
+                    <label for="q1a">A. The benefits and challenges of AI development</label>
 
+                </div>
 
+                <div class="option">
 
+                    <input type="radio" name="q1" id="q1b" value="B">
 
+                    <label for="q1b">B. The history of computer technology</label>
 
+                </div>
 
+                <div class="option">
 
+                    <input type="radio" name="q1" id="q1c" value="C">
 
+                    <label for="q1c">C. How to build an AI system</label>
 
+                </div>
 
+                <div class="option">
 
+                    <input type="radio" name="q1" id="q1d" value="D">
 
+                    <label for="q1d">D. Job opportunities in the tech industry</label>
 
+                </div>
 
+            </div>
 
+            <div class="explanation" id="explanation1">
 
+                <strong>Explanation:</strong> The passage discusses both the potential benefits (revolutionizing industries) and challenges (job displacement, ethical concerns) of AI development, making option A the correct answer.
 
+            </div>
 
+        </div>
 
+        
+        <div class="question">
 
+            <div class="question-text">2. According to the Oxford University study mentioned, what percentage of U.S. jobs could be automated?</div>
 
+            <div class="options">
 
+                <div class="option">
 
+                    <input type="radio" name="q2" id="q2a" value="A">
 
+                    <label for="q2a">A. 25%</label>
 
+                </div>
 
+                <div class="option">
 
+                    <input type="radio" name="q2" id="q2b" value="B">
 
+                    <label for="q2b">B. 37%</label>
 
+                </div>
 
+                <div class="option">
 
+                    <input type="radio" name="q2" id="q2c" value="C">
 
+                    <label for="q2c">C. 47%</label>
 
+                </div>
 
+                <div class="option">
 
+                    <input type="radio" name="q2" id="q2d" value="D">
 
+                    <label for="q2d">D. 52%</label>
 
+                </div>
 
+            </div>
 
+            <div class="explanation" id="explanation2">
 
+                <strong>Explanation:</strong> The passage clearly states that "47% of U.S. jobs could be automated within the next two decades" according to the Oxford University study.
 
+            </div>
 
+        </div>
 
+        
+        <div class="question">
 
+            <div class="question-text">3. What do critics say about current AI ethics efforts by tech companies?</div>
 
+            <div class="options">
 
+                <div class="option">
 
+                    <input type="radio" name="q3" id="q3a" value="A">
 
+                    <label for="q3a">A. They are completely sufficient</label>
 
+                </div>
 
+                <div class="option">
 
+                    <input type="radio" name="q3" id="q3b" value="B">
 
+                    <label for="q3b">B. More government regulation is needed</label>
 
+                </div>
 
+                <div class="option">
 
+                    <input type="radio" name="q3" id="q3c" value="C">
 
+                    <label for="q3c">C. AI doesn't need any ethical guidelines</label>
 
+                </div>
 
+                <div class="option">
 
+                    <input type="radio" name="q3" id="q3d" value="D">
 
+                    <label for="q3d">D. Ethics boards should be eliminated</label>
 
+                </div>
 
+            </div>
 
+            <div class="explanation" id="explanation3">
 
+                <strong>Explanation:</strong> The passage mentions that "critics say more government regulation is needed to ensure responsible development," which matches option B.
 
+            </div>
 
+        </div>
 
+        
+        <button id="submit-btn" class="btn btn-primary">Submit Answers</button>
 
+    </div>
 
+    
+    <div id="result-section" style="display: none;">
 
+        <div class="container">
 
+            <div class="score-display">
 
+                Your Score: <span id="total-score">0</span>/3
 
+            </div>
 
+            
+            <button id="analysis-btn" class="btn btn-primary">
 
+                View Answer Explanations
 
+            </button>
 
+            
+            <button id="retry-btn" class="btn btn-secondary">
 
+                Try Again
 
+            </button>
 
+        </div>
 
+    </div>
 
+    
+    <div id="analysis-modal" class="modal">
 
+        <div class="modal-content">
 
+            <div class="modal-header">
 
+                Unlock Full Analysis
 
+            </div>
 
+            <div class="modal-body">
 
+                <p>Enter your phone number to register and view detailed answer explanations and full passage analysis.</p>
 
+                <div class="form-group">
 
+                    <label for="phone">Phone Number</label>
 
+                    <input type="tel" id="phone" class="form-control" placeholder="Enter your phone number">
 
+                </div>
 
+                <div class="form-group">
 
+                    <label for="code">Verification Code</label>
 
+                    <div style="display: flex;">
 
+                        <input type="text" id="code" class="form-control" placeholder="Enter verification code" style="flex: 1; margin-right: 10px;">
 
+                        <button id="get-code-btn" class="btn btn-secondary" style="width: 120px; padding: 0;">Get Code</button>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+            <div class="modal-footer">
 
+                <button id="cancel-btn" class="btn btn-secondary">Cancel</button>
 
+                <button id="confirm-btn" class="btn btn-primary">Continue</button>
 
+            </div>
 
+        </div>
 
+    </div>
 
+    
+    <script>
 
+        document.getElementById('submit-btn').addEventListener('click', function() {
 
+            // Calculate score
 
+            let score = 0;
 
+            
+            // Check question 1 (correct answer: A)
 
+            const q1Answer = document.querySelector('input[name="q1"]:checked');
 
+            if (q1Answer && q1Answer.value === 'A') {
 
+                score++;
 
+                document.querySelector('input[name="q1"][value="A"]').parentElement.classList.add('correct');
 
+            } else {
 
+                if (q1Answer) {
 
+                    q1Answer.parentElement.classList.add('incorrect');
 
+                }
 
+                document.querySelector('input[name="q1"][value="A"]').parentElement.classList.add('correct');
 
+            }
 
+            
+            // Check question 2 (correct answer: C)
 
+            const q2Answer = document.querySelector('input[name="q2"]:checked');
 
+            if (q2Answer && q2Answer.value === 'C') {
 
+                score++;
 
+                document.querySelector('input[name="q2"][value="C"]').parentElement.classList.add('correct');
 
+            } else {
 
+                if (q2Answer) {
 
+                    q2Answer.parentElement.classList.add('incorrect');
 
+                }
 
+                document.querySelector('input[name="q2"][value="C"]').parentElement.classList.add('correct');
 
+            }
 
+            
+            // Check question 3 (correct answer: B)
 
+            const q3Answer = document.querySelector('input[name="q3"]:checked');
 
+            if (q3Answer && q3Answer.value === 'B') {
 
+                score++;
 
+                document.querySelector('input[name="q3"][value="B"]').parentElement.classList.add('correct');
 
+            } else {
 
+                if (q3Answer) {
 
+                    q3Answer.parentElement.classList.add('incorrect');
 
+                }
 
+                document.querySelector('input[name="q3"][value="B"]').parentElement.classList.add('correct');
 
+            }
 
+            
+            // Display score
 
+            document.getElementById('total-score').textContent = score;
 
+            document.getElementById('result-section').style.display = 'block';
 
+            
+            // Scroll to results
 
+            document.getElementById('result-section').scrollIntoView({ behavior: 'smooth' });
 
+        });
 
+        
+        // Show answer explanations modal
 
+        document.getElementById('analysis-btn').addEventListener('click', function() {
 
+            document.getElementById('analysis-modal').style.display = 'flex';
 
+        });
 
+        
+        // Close modal
 
+        document.getElementById('cancel-btn').addEventListener('click', function() {
 
+            document.getElementById('analysis-modal').style.display = 'none';
 
+        });
 
+        
+        // Try again button
 
+        document.getElementById('retry-btn').addEventListener('click', function() {
 
+            // Reset all selections
 
+            document.querySelectorAll('input[type="radio"]').forEach(radio => {
 
+                radio.checked = false;
 
+                radio.parentElement.classList.remove('correct', 'incorrect');
 
+            });
 
+            
+            // Hide results and scroll to top
 
+            document.getElementById('result-section').style.display = 'none';
 
+            window.scrollTo({ top: 0, behavior: 'smooth' });
 
+        });
 
+        
+        // Get verification code
 
+        document.getElementById('get-code-btn').addEventListener('click', function() {
 
+            const phone = document.getElementById('phone').value;
 
+            if (!phone) {
 
+                alert('Please enter your phone number first');
 
+                return;
 
+            }
 
+            
+            // Simulate sending verification code
 
+            this.textContent = 'Sending...';
 
+            this.disabled = true;
 
+            
+            setTimeout(() => {
 
+                this.textContent = 'Sent!';
 
+                setTimeout(() => {
 
+                    this.textContent = 'Get Code';
 
+                    this.disabled = false;
 
+                }, 2000);
 
+            }, 1500);
 
+        });
 
+        
+        // Confirm button
 
+        document.getElementById('confirm-btn').addEventListener('click', function() {
 
+            const phone = document.getElementById('phone').value;
 
+            const code = document.getElementById('code').value;
 
+            
+            if (!phone) {
 
+                alert('Please enter your phone number');
 
+                return;
 
+            }
 
+            
+            if (!code) {
 
+                alert('Please enter the verification code');
 
+                return;
 
+            }
 
+            
+            // Simulate verification
 
+            alert('Verification successful! Loading detailed explanations...');
 
+            document.getElementById('analysis-modal').style.display = 'none';
 
+            
+            // Show all explanations
 
+            document.querySelectorAll('.explanation').forEach(exp => {
 
+                exp.style.display = 'block';
 
+            });
 
+            
+            // Scroll to first question
 
+            document.querySelector('.question').scrollIntoView({ behavior: 'smooth' });
 
+        });
 
+    </script>
 
+</body>
 
+</html>

+ 228 - 0
example-book/hundun/problem-card.html
View File 

@@ -0,0 +1,228 @@
 
+<!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>
 
+        body {
 
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 
+            background-color: #f5f7fa;
 
+            padding: 20px;
 
+            color: #333;
 
+            line-height: 1.6;
 
+        }
 
+        
+        .container {
 
+            max-width: 1200px;
 
+            margin: 0 auto;
 
+            display: grid;
 
+            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
 
+            gap: 25px;
 
+        }
 
+        
+        .card {
 
+            background: white;
 
+            border-radius: 10px;
 
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
 
+            padding: 25px;
 
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
 
+        }
 
+        
+        .card:hover {
 
+            transform: translateY(-5px);
 
+            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
 
+        }
 
+        
+        .user-info {
 
+            display: flex;
 
+            align-items: center;
 
+            margin-bottom: 15px;
 
+        }
 
+        
+        .avatar {
 
+            width: 50px;
 
+            height: 50px;
 
+            border-radius: 50%;
 
+            background-color: #e0e6ed;
 
+            display: flex;
 
+            align-items: center;
 
+            justify-content: center;
 
+            margin-right: 15px;
 
+            font-weight: bold;
 
+            color: #4a5568;
 
+        }
 
+        
+        .user-name {
 
+            font-weight: 600;
 
+            font-size: 1.1em;
 
+            margin-bottom: 3px;
 
+        }
 
+        
+        .user-desc {
 
+            font-size: 0.85em;
 
+            color: #718096;
 
+        }
 
+        
+        .quote {
 
+            position: relative;
 
+            padding: 15px;
 
+            background-color: #f8fafc;
 
+            border-radius: 8px;
 
+            font-style: italic;
 
+            border-left: 4px solid orange;
 
+        }
 
+        
+        .quote:before {
 
+            content: """;
 
+            font-size: 3em;
 
+            color: #e2e8f0;
 
+            position: absolute;
 
+            left: 5px;
 
+            top: -15px;
 
+            line-height: 1;
 
+        }
 
+        
+        .tag {
 
+            display: inline-block;
 
+            padding: 4px 10px;
 
+            background-color: #ebf8ff;
 
+            color: red;
 
+            border-radius: 20px;
 
+            font-size: 0.75em;
 
+            margin-top: 15px;
 
+        }
 
+        
+        h1 {
 
+            text-align: center;
 
+            color: #2d3748;
 
+            margin-bottom: 40px;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <h1>医疗服务用户反馈</h1>
 
+    
+    <div class="container">
 
+        <!-- 卡片1 -->
 
+        <div class="card">
 
+            <div class="user-info">
 
+                <div class="avatar">张</div>
 
+                <div>
 
+                    <div class="user-name">张女士，32岁</div>
 
+                    <div class="user-desc">上班族，第一次带孩子看病</div>
 
+                </div>
 
+            </div>
 
+            <div class="quote">
 
+                下午4点挂的号，做完检查回来医生已经下班了，第二天来还要重新挂号。为什么不能设置一个检查结果出来后可以优先看原医生的机制呢？这样重复挂号既浪费钱又耽误时间。
 
+            </div>
 
+            <div class="tag">挂号问题</div>
 
+        </div>
 
+        
+        <!-- 卡片2 -->
 
+        <div class="card">
 
+            <div class="user-info">
 
+                <div class="avatar">王</div>
 
+                <div>
 
+                    <div class="user-name">王先生，45岁</div>
 
+                    <div class="user-desc">慢性病患者，每月复诊</div>
 
+                </div>
 
+            </div>
 
+            <div class="quote">
 
+                每次看病都像打仗一样，医生三分钟就看完了，我还有很多问题想问，但看到后面排着长队，实在不好意思多问。医院能不能增加每位患者的就诊时间？或者设置专门的咨询时间？
 
+            </div>
 
+            <div class="tag">就诊时间短</div>
 
+        </div>
 
+        
+        <!-- 卡片3 -->
 
+        <div class="card">
 
+            <div class="user-info">
 
+                <div class="avatar">李</div>
 
+                <div>
 
+                    <div class="user-name">李奶奶，68岁</div>
 
+                    <div class="user-desc">独居老人，腿脚不便</div>
 
+                </div>
 
+            </div>
 
+            <div class="quote">
 
+                我一个人来看病，检查科室在东楼，化验室在西楼，来回跑了好几趟。医院这么大，指示牌又不清楚，能不能安排志愿者帮帮我们这些老年人？
 
+            </div>
 
+            <div class="tag">就医流程</div>
 
+        </div>
 
+        
+        <!-- 卡片4 -->
 
+        <div class="card">
 
+            <div class="user-info">
 
+                <div class="avatar">赵</div>
 
+                <div>
 
+                    <div class="user-name">赵先生，28岁</div>
 
+                    <div class="user-desc">IT从业者，经常加班</div>
 
+                </div>
 
+            </div>
 
+            <div class="quote">
 
+                网上预约的号源太紧张了，放号一分钟内就被抢光。为什么不能增加一些号源？或者给常见病设置专门的快速通道？我们这些上班族请假看病真的很难。
 
+            </div>
 
+            <div class="tag">挂号难</div>
 
+        </div>
 
+        
+        <!-- 卡片5 -->
 
+        <div class="card">
 
+            <div class="user-info">
 
+                <div class="avatar">刘</div>
 
+                <div>
 
+                    <div class="user-name">刘女士，40岁</div>
 
+                    <div class="user-desc">全职妈妈，两个孩子</div>
 
+                </div>
 
+            </div>
 
+            <div class="quote">
 
+                带孩子看病最头疼，排队两小时，看病五分钟。医生开的药也不解释清楚怎么吃，回家查手机才知道注意事项。为什么不能多花一分钟说明一下呢？
 
+            </div>
 
+            <div class="tag">医患沟通</div>
 
+        </div>
 
+        
+        <!-- 卡片6 -->
 
+        <div class="card">
 
+            <div class="user-info">
 
+                <div class="avatar">陈</div>
 
+                <div>
 
+                    <div class="user-name">陈先生，50岁</div>
 
+                    <div class="user-desc">高血压患者，定期复查</div>
 
+                </div>
 
+            </div>
 
+            <div class="quote">
 
+                每次复查都要做同样的检查，医生说这是规定。但我上个月才做过，结果都正常，为什么还要重复检查？既浪费医疗资源，又增加我的负担。
 
+            </div>
 
+            <div class="tag">重复检查</div>
 
+        </div>
 
+        
+        <!-- 卡片7 -->
 
+        <div class="card">
 
+            <div class="user-info">
 
+                <div class="avatar">周</div>
 
+                <div>
 
+                    <div class="user-name">周同学，22岁</div>
 
+                    <div class="user-desc">大学生，外地求学</div>
 
+                </div>
 
+            </div>
 
+            <div class="quote">
 
+                学校医院看不了稍微复杂点的病，去大医院又人生地不熟。医生说的专业术语听不懂，想问又怕被嫌烦。能不能用更通俗的话解释病情？
 
+            </div>
 
+            <div class="tag">医患沟通</div>
 
+        </div>
 
+        
+        <!-- 卡片8 -->
 
+        <div class="card">
 
+            <div class="user-info">
 
+                <div class="avatar">吴</div>
 
+                <div>
 
+                    <div class="user-name">吴女士，35岁</div>
 
+                    <div class="user-desc">新手妈妈，产后复查</div>
 
+                </div>
 
+            </div>
 
+            <div class="quote">
 
+                产后42天复查，医生只简单问了问就说没问题。但我有很多关于哺乳和恢复的问题，看她那么忙没好意思问。医院能不能设立产后咨询专线？
 
+            </div>
 
+            <div class="tag">专科服务</div>
 
+        </div>
 
+    </div>
 
+</body>
 
+</html>

+ 191 - 0
example-book/hundun/problem-english-employee.html
View File 

@@ -0,0 +1,191 @@
 
+<!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>
 
+        body {
 
+            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
 
+            background-color: #f5f7fa;
 
+            padding: 20px;
 
+            color: #333;
 
+        }
 
+        
+        h1 {
 
+            text-align: center;
 
+            color: #2c3e50;
 
+            margin-bottom: 30px;
 
+        }
 
+        
+        .cards-container {
 
+            display: flex;
 
+            flex-wrap: wrap;
 
+            gap: 20px;
 
+            justify-content: center;
 
+        }
 
+        
+        .card {
 
+            background-color: white;
 
+            border-radius: 10px;
 
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 
+            width: 350px;
 
+            padding: 20px;
 
+            display: flex;
 
+            flex-direction: column;
 
+        }
 
+        
+        .card-header {
 
+            display: flex;
 
+            align-items: center;
 
+            margin-bottom: 15px;
 
+            padding-bottom: 15px;
 
+            border-bottom: 1px solid #eee;
 
+        }
 
+        
+        .avatar {
 
+            width: 50px;
 
+            height: 50px;
 
+            border-radius: 50%;
 
+            background-color: #e0e0e0;
 
+            display: flex;
 
+            align-items: center;
 
+            justify-content: center;
 
+            margin-right: 15px;
 
+            font-weight: bold;
 
+            color: #555;
 
+        }
 
+        
+        .user-info {
 
+            flex: 1;
 
+        }
 
+        
+        .name {
 
+            font-weight: 600;
 
+            margin: 0;
 
+            color: #2c3e50;
 
+        }
 
+        
+        .position {
 
+            margin: 3px 0 0;
 
+            font-size: 0.9em;
 
+            color: #7f8c8d;
 
+        }
 
+        
+        .feedback {
 
+            flex: 1;
 
+            font-size: 0.95em;
 
+            line-height: 1.5;
 
+            color: #34495e;
 
+        }
 
+        
+        .tag {
 
+            display: inline-block;
 
+            padding: 3px 8px;
 
+            border-radius: 15px;
 
+            font-size: 0.8em;
 
+            margin-top: 15px;
 
+            align-self: flex-start;
 
+        }
 
+        
+        .sales { background-color: #e3f2fd; color: #1976d2; }
 
+        .research { background-color: #e8f5e9; color: #388e3c; }
 
+        .teacher { background-color: #fff3e0; color: #f57c00; }
 
+        .management { background-color: #f3e5f5; color: #8e24aa; }
 
+    </style>
 
+</head>
 
+<body>
 
+    <h1>内部问题反馈统计</h1>
 
+    
+    <div class="cards-container">
 
+        <!-- 销售团队反馈 -->
 
+        <div class="card">
 
+            <div class="card-header">
 
+                <div class="avatar">卢</div>
 
+                <div class="user-info">
 
+                    <h3 class="name">Lucas</h3>
 
+                    <p class="position">城市经理 · 任职2年</p>
 
+                </div>
 
+            </div>
 
+            <div class="feedback">
 
+                "家长续费率连续3个季度下滑！竞品推出了AI口语陪练+阅读训练套餐，我们还在卖单一单词课程。签单时客户总问'能不能保证提分''有没有配套阅读课'，我们只能承诺'后续会上线'。最近两个月已有5个金牌销售被竞品挖走..."
 
+            </div>
 
+            <span class="tag sales">销售团队</span>
 
+        </div>
 
+        
+        <!-- 教研团队反馈 -->
 
+        <div class="card">
 
+            <div class="card-header">
 
+                <div class="avatar">王</div>
 
+                <div class="user-info">
 
+                    <h3 class="name">Dr. Wang</h3>
 
+                    <p class="position">教研总监 · 任职5年</p>
 
+                </div>
 
+            </div>
 
+            <div class="feedback">
 
+                "我们80%时间在制作标准化课件，但新课标改革后各地教材差异越来越大。上周杭州分校投诉课件中'smart'的例句还是'智能手机'，而当地教材已更新为'AIoT设备'。没有技术团队支持，我们连动态更新词库都做不到！"
 
+            </div>
 
+            <span class="tag research">教研团队</span>
 
+        </div>
 
+        
+        <!-- 教师团队反馈 -->
 
+        <div class="card">
 
+            <div class="card-header">
 
+                <div class="avatar">张</div>
 
+                <div class="user-info">
 
+                    <h3 class="name">张老师</h3>
 
+                    <p class="position">明星教师 · 任职3年</p>
 
+                </div>
 
+            </div>
 
+            <div class="feedback">
 
+                "我每天带8节直播课+批改200份语音作业，系统却还在用Excel排课！上周给学生做定制化复习清单，需要人工对比10份数据报表。现在腰部教师月流失率30%，公司宁愿高薪挖新人也不升级教学系统。"
 
+            </div>
 
+            <span class="tag teacher">教师团队</span>
 
+        </div>
 
+        
+        <!-- 管理层反馈 -->
 
+        <div class="card">
 
+            <div class="card-header">
 
+                <div class="avatar">葛</div>
 
+                <div class="user-info">
 
+                    <h3 class="name">Grace</h3>
 
+                    <p class="position">COO · 任职6年</p>
 
+                </div>
 
+            </div>
 
+            <div class="feedback">
 
+                "投资人都在追问第二增长曲线，但我们连核心业务的数字化都没完成！技术部开发智能组卷功能需要6个月，而竞品通过GPT-4三天就上线类似功能。现在不是业务扩张的问题，是生存危机！"
 
+            </div>
 
+            <span class="tag management">管理层</span>
 
+        </div>
 
+        
+        <!-- 其他反馈卡片 -->
 
+        <div class="card">
 
+            <div class="card-header">
 
+                <div class="avatar">苏</div>
 
+                <div class="user-info">
 
+                    <h3 class="name">Sophia</h3>
 
+                    <p class="position">课程顾问 · 任职1年</p>
 
+                </div>
 
+            </div>
 
+            <div class="feedback">
 
+                "试听课环节流失率高达65%！家长反馈试听课和正课内容完全一样，只是换了老师。我们知道课程模式老旧，但教研部给的标准化话术根本打动不了现在精明的家长。"
 
+            </div>
 
+            <span class="tag sales">销售团队</span>
 
+        </div>
 
+        
+        <div class="card">
 
+            <div class="card-header">
 
+                <div class="avatar">艾</div>
 
+                <div class="user-info">
 
+                    <h3 class="name">Emily</h3>
 
+                    <p class="position">课程设计师 · 任职8个月</p>
 
+                </div>
 
+            </div>
 
+            <div class="feedback">
 
+                "教师培训手册三个月没更新了！新老师连词根词缀教学法都不熟悉，有老师把'hang-hanged-hanged（绞刑）'和'hang-hung-hung（悬挂）'教混了，家长直接要求退费..."
 
+            </div>
 
+            <span class="tag research">教研团队</span>
 
+        </div>
 
+    </div>
 
+</body>
 
+</html>

+ 246 - 0
example-book/hundun/problem-english-value.html
View File 

@@ -0,0 +1,246 @@
 
+<!-- 
+ 请您帮我实现一个html，注意样式美观，表示单纯单词背诵，和结合阅读理解两种方式学习后者的优势和前者的缺点。并给给出可用AIGC针对用户刚学的生词生成阅读短文来巩固学习的好处。 -->
 
+
 
+<!DOCTYPE html>
 
+<html lang="zh-CN">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>单词学习方式对比与AIGC应用</title>
 
+    <style>
 
+        :root {
 
+            --primary-color: #4361ee;
 
+            --secondary-color: #3f37c9;
 
+            --accent-color: #4895ef;
 
+            --light-color: #f8f9fa;
 
+            --dark-color: #212529;
 
+            --success-color: #4cc9f0;
 
+            --danger-color: #f72585;
 
+            --border-radius: 8px;
 
+            --box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 
+        }
 
+        
+        body {
 
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 
+            line-height: 1.6;
 
+            color: var(--dark-color);
 
+            background-color: #f5f7fa;
 
+            margin: 0;
 
+            padding: 0;
 
+        }
 
+        
+        .container {
 
+            max-width: 1200px;
 
+            margin: 0 auto;
 
+            padding: 20px;
 
+        }
 
+        
+        header {
 
+            text-align: center;
 
+            padding: 40px 0;
 
+            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
 
+            color: white;
 
+            border-radius: var(--border-radius);
 
+            margin-bottom: 30px;
 
+            box-shadow: var(--box-shadow);
 
+        }
 
+        
+        h1 {
 
+            margin: 0;
 
+            font-size: 2.5rem;
 
+        }
 
+        
+        h2 {
 
+            color: var(--secondary-color);
 
+            margin-top: 30px;
 
+            border-bottom: 2px solid var(--accent-color);
 
+            padding-bottom: 10px;
 
+        }
 
+        
+        h3 {
 
+            color: var(--primary-color);
 
+        }
 
+        
+        .comparison-container {
 
+            display: flex;
 
+            gap: 30px;
 
+            margin-bottom: 40px;
 
+        }
 
+        
+        .method-card {
 
+            flex: 1;
 
+            background: white;
 
+            padding: 25px;
 
+            border-radius: var(--border-radius);
 
+            box-shadow: var(--box-shadow);
 
+            transition: transform 0.3s ease;
 
+        }
 
+        
+        .method-card:hover {
 
+            transform: translateY(-5px);
 
+        }
 
+        
+        .traditional {
 
+            border-top: 4px solid var(--danger-color);
 
+        }
 
+        
+        .contextual {
 
+            border-top: 4px solid var(--success-color);
 
+        }
 
+        
+        .pros-cons {
 
+            margin-top: 20px;
 
+        }
 
+        
+        .pros {
 
+            color: #2e7d32;
 
+            font-weight: bold;
 
+        }
 
+        
+        .cons {
 
+            color: #c62828;
 
+            font-weight: bold;
 
+        }
 
+        
+        ul {
 
+            padding-left: 20px;
 
+        }
 
+        
+        li {
 
+            margin-bottom: 8px;
 
+        }
 
+        
+        .conclusion {
 
+            background: white;
 
+            padding: 30px;
 
+            border-radius: var(--border-radius);
 
+            box-shadow: var(--box-shadow);
 
+            margin-top: 40px;
 
+            border-left: 5px solid var(--accent-color);
 
+        }
 
+        
+        .aigc-benefits {
 
+            background: #e8f4fc;
 
+            padding: 25px;
 
+            border-radius: var(--border-radius);
 
+            margin-top: 30px;
 
+        }
 
+        
+        .example {
 
+            background: #f0f7ed;
 
+            padding: 20px;
 
+            border-radius: var(--border-radius);
 
+            margin: 20px 0;
 
+            border-left: 4px solid #4caf50;
 
+        }
 
+        
+        .example-title {
 
+            font-weight: bold;
 
+            color: #2e7d32;
 
+            margin-bottom: 10px;
 
+        }
 
+        
+        footer {
 
+            text-align: center;
 
+            margin-top: 50px;
 
+            padding: 20px;
 
+            color: #666;
 
+            font-size: 0.9rem;
 
+        }
 
+        
+        @media (max-width: 768px) {
 
+            .comparison-container {
 
+                flex-direction: column;
 
+            }
 
+            
+            h1 {
 
+                font-size: 2rem;
 
+            }
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="container">
 
+        <header>
 
+            <h1>单词学习方式对比与AIGC应用</h1>
 
+            <p>探索更高效的词汇学习方法</p>
 
+        </header>
 
+        
+        <section>
 
+            <h2>两种单词学习方式对比</h2>
 
+            <div class="comparison-container">
 
+                <div class="method-card traditional">
 
+                    <h3>传统单词背诵法</h3>
 
+                    <p>通过反复记忆单词列表、闪卡或单词书来学习词汇，主要关注单词的拼写和基本含义。</p>
 
+                    
+                    <div class="pros-cons">
 
+                        <p class="cons">缺点：</p>
 
+                        <ul>
 
+                            <li>缺乏上下文，难以理解单词的实际用法</li>
 
+                            <li>记忆保持率低，容易遗忘</li>
 
+                            <li>难以掌握单词的多种含义和用法</li>
 
+                            <li>学习过程枯燥，缺乏趣味性</li>
 
+                            <li>难以在真实语境中正确使用单词</li>
 
+                        </ul>
 
+                    </div>
 
+                </div>
 
+                
+                <div class="method-card contextual">
 
+                    <h3>结合阅读理解的词汇学习</h3>
 
+                    <p>通过在真实的阅读材料中接触和学习新单词，理解单词在上下文中的意义和用法。</p>
 
+                    
+                    <div class="pros-cons">
 
+                        <p class="pros">优势：</p>
 
+                        <ul>
 
+                            <li>提供丰富的上下文，帮助理解单词的实际用法</li>
 
+                            <li>记忆更持久，因为与具体情境相关联</li>
 
+                            <li>能自然习得单词的搭配和语法结构</li>
 
+                            <li>学习过程更有趣，有成就感</li>
 
+                            <li>更容易将所学词汇应用到实际交流中</li>
 
+                        </ul>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+        </section>
 
+        
+        <section class="example">
 
+            <div class="example-title">学习效果对比示例：单词 "ambiguous"</div>
 
+            <p><strong>单纯背诵：</strong> ambiguous - 含糊的，不明确的</p>
 
+            <p><strong>通过阅读学习：</strong> "The politician's answer was deliberately ambiguous, leaving room for multiple interpretations."</p>
 
+            <p>后者不仅传达了词义，还展示了典型的使用场景（政治言论）、常见搭配（deliberately ambiguous）以及单词的情感色彩（可能有负面含义）。</p>
 
+        </section>
 
+        
+        <section class="conclusion">
 
+            <h2>AIGC在词汇学习中的革命性应用</h2>
 
+            <p>人工智能生成内容（AIGC）技术为解决传统单词学习的局限性提供了创新方案。通过分析用户的学习历史和刚掌握的生词，AIGC可以：</p>
 
+            
+            <div class="aigc-benefits">
 
+                <ul>
 
+                    <li><strong>即时生成个性化阅读材料：</strong> 根据用户刚学的生词自动创作包含这些词汇的短文或对话，确保新词在多种上下文中复现</li>
 
+                    <li><strong>调整难度级别：</strong> 根据学习者的水平控制生成文本的复杂度</li>
 
+                    <li><strong>多样化主题：</strong> 根据学习者的兴趣生成不同领域的阅读材料，提高学习动力</li>
 
+                    <li><strong>上下文强化：</strong> 在生成的文本中自然地融入目标词汇的多种用法和搭配</li>
 
+                    <li><strong>即时练习：</strong> 生成与阅读材料配套的理解题和词汇练习</li>
 
+                </ul>
 
+            </div>
 
+            
+            <h3 style="margin-top: 30px;">AIGC生成阅读材料示例</h3>
 
+            <p>假设用户刚学习了以下单词：<em>sustainable, innovation, renewable, ecosystem, carbon footprint</em></p>
 
+            
+            <div style="background: white; padding: 15px; border-radius: var(--border-radius); border: 1px dashed var(--accent-color); margin-top: 15px;">
 
+                <h4 style="color: var(--primary-color); margin-top: 0;">绿色科技的未来</h4>
 
+                <p>在追求<strong>sustainable</strong>发展的今天，科技<strong>innovation</strong>扮演着关键角色。许多公司正在投资<strong>renewable</strong>能源项目，这不仅有助于减少<strong>carbon footprint</strong>，还能保护脆弱的<strong>ecosystem</strong>。例如，某初创企业最近开发了一种新型太阳能电池，其效率比传统产品高出40%，同时生产过程中使用了可回收材料...</p>
 
+                <p>这种整合了目标词汇的自然文本，远比孤立的单词列表更能促进长期记忆和实际应用能力。</p>
 
+            </div>
 
+        </section>
 
+        
+        <section style="margin-top: 40px; text-align: center;">
 
+            <p style="font-size: 1.2rem; font-weight: bold; color: var(--secondary-color);">通过结合上下文学习和AIGC技术，词汇学习将变得更高效、更有趣、更实用</p>
 
+        </section>
 
+        
+        <footer>
 
+            <p>© 2023 语言学习科技研究 | 基于认知科学和人工智能的最新学习方案</p>
 
+        </footer>
 
+    </div>
 
+</body>
 
+</html>

+ 166 - 0
example-book/hundun/problem-english.html
View File 

@@ -0,0 +1,166 @@
 
+<!-- 
+ 请您帮我撰写一些用户提出意见发牢骚的卡片，可以聚焦在单词陪练App对于英语学习的牢骚（只能不停点单词读单次考察是否掌握单次，长时间用有些单调；只能帮助我记住单词，但是一旦放到文章里面就不认识了；考试不是考这个单词，还会考它的时态变化和相似词汇。等等），每个卡片有简单的用户描述还有用户说的一段话。用html实现，并且要样式美观（标记颜色用橙色或红色体现烦恼与焦虑）。
 
+  -->
 
+
 
+  <!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>
 
+          body {
 
+              font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 
+              background-color: #f5f5f5;
 
+              padding: 20px;
 
+              display: flex;
 
+              flex-direction: column;
 
+              align-items: center;
 
+              gap: 20px;
 
+          }
 
+          
+          .card {
 
+            margin-top: 20px;
 
+            margin-left: 10px;
 
+              width: 100%;
 
+              max-width: 500px;
 
+              background-color: white;
 
+              border-radius: 10px;
 
+              box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 
+              padding: 20px;
 
+              transition: transform 0.3s ease;
 
+          }
 
+          .list{
 
+            display:flex;
 
+            flex-wrap: wrap;
 
+            justify-content: center;
 
+            align-items: center;
 
+          }
 
+          
+          .card:hover {
 
+              transform: translateY(-5px);
 
+          }
 
+          
+          .user-info {
 
+              display: flex;
 
+              align-items: center;
 
+              margin-bottom: 15px;
 
+          }
 
+          
+          .avatar {
 
+              width: 40px;
 
+              height: 40px;
 
+              border-radius: 50%;
 
+              background-color: #ffa500;
 
+              color: white;
 
+              display: flex;
 
+              align-items: center;
 
+              justify-content: center;
 
+              font-weight: bold;
 
+              margin-right: 10px;
 
+          }
 
+          
+          .user-name {
 
+              font-weight: bold;
 
+              color: #333;
 
+          }
 
+          
+          .user-type {
 
+              font-size: 0.8em;
 
+              color: #666;
 
+              margin-left: 5px;
 
+          }
 
+          
+          .feedback {
 
+              color: #444;
 
+              line-height: 1.6;
 
+              padding: 10px;
 
+              border-left: 3px solid #ffa500;
 
+              background-color: #fff9f2;
 
+          }
 
+          
+          .highlight {
 
+              color: #ff4500;
 
+              font-weight: bold;
 
+              background-color: #fff0f0;
 
+              padding: 2px 4px;
 
+              border-radius: 3px;
 
+          }
 
+      </style>
 
+  </head>
 
+  <body>
 
+    <div class="list">
 
+
 
+      <!-- 卡片1：关于单调性的反馈 -->
 
+      <div class="card">
 
+          <div class="user-info">
 
+              <div class="avatar">A</div>
 
+              <div>
 
+                  <span class="user-name">Alice</span>
 
+                  <span class="user-type">· 中级学习者 · 使用6个月</span>
 
+              </div>
 
+          </div>
 
+          <div class="feedback">
 
+              这个单词陪练App的<span class="highlight">学习方式太单调了</span>！只能不停地点击单词听发音，然后选择是否掌握。刚开始还行，但用了两个月后就觉得<span class="highlight">枯燥乏味</span>，完全没有新鲜感。为什么不能加入一些游戏化的元素或者多样化的练习方式呢？现在每次打开App都需要<span class="highlight">强迫自己坚持</span>，而不是因为有趣而主动学习。
 
+          </div>
 
+      </div>
 
+      
+      <!-- 卡片2：关于上下文学习的反馈 -->
 
+      <div class="card">
 
+          <div class="user-info">
 
+              <div class="avatar">B</div>
 
+              <div>
 
+                  <span class="user-name">Bob</span>
 
+                  <span class="user-type">· 高级学习者 · 使用1年</span>
 
+              </div>
 
+          </div>
 
+          <div class="feedback">
 
+              我在App里能<span class="highlight">轻松认出并拼写所有单词</span>，但一到阅读文章时就傻眼了！同样的单词放在句子里<span class="highlight">完全认不出来</span>。这个App只教孤立的单词，却不教如何在<span class="highlight">真实语境</span>中使用它们。我现在有几千词汇量，却还是<span class="highlight">读不懂英文文章</span>，这种挫败感太强烈了！能不能加入一些短文阅读或者例句分析的练习？
 
+          </div>
 
+      </div>
 
+      
+      <!-- 卡片3：关于词形变化的反馈 -->
 
+      <div class="card">
 
+          <div class="user-info">
 
+              <div class="avatar">C</div>
 
+              <div>
 
+                  <span class="user-name">Carol</span>
 
+                  <span class="user-type">· 备考学生 · 使用3个月</span>
 
+              </div>
 
+          </div>
 
+          <div class="feedback">
 
+              考试根本不只考单词本身！我记住了"write"，但试卷上出现"written"时我<span class="highlight">完全没联想到</span>这是同一个词。App只测试基础形式，却<span class="highlight">忽略</span>了时态变化、词性转换这些<span class="highlight">考试重点</span>。还有那些长得像的单词（affect/effect，accept/except），App也从不对比讲解。花这么多时间背单词，考试成绩却<span class="highlight">不见提高</span>，真的很沮丧！
 
+          </div>
 
+      </div>
 
+      
+      <!-- 卡片4：关于记忆保持的反馈 -->
 
+      <div class="card">
 
+          <div class="user-info">
 
+              <div class="avatar">D</div>
 
+              <div>
 
+                  <span class="user-name">David</span>
 
+                  <span class="user-type">· 初级学习者 · 使用1个月</span>
 
+              </div>
 
+          </div>
 
+          <div class="feedback">
 
+              App说我已经"掌握"了200个单词，但<span class="highlight">一周后测试</span>，我至少忘了三分之一！现在的复习算法好像只是<span class="highlight">简单重复</span>，没有根据记忆曲线来安排。而且所谓的"掌握"标准太低了——能认出单词就算掌握？我更需要的是<span class="highlight">能主动回忆和使用</span>这些单词。现在的模式让我有种<span class="highlight">虚假的成就感</span>，实际上学习效果很差。
 
+          </div>
 
+      </div>
 
+      
+      <!-- 卡片5：关于实用性的反馈 -->
 
+      <div class="card">
 
+          <div class="user-info">
 
+              <div class="avatar">E</div>
 
+              <div>
 
+                  <span class="user-name">Eva</span>
 
+                  <span class="user-type">· 职场人士 · 使用4个月</span>
 
+              </div>
 
+          </div>
 
+          <div class="feedback">
 
+              背了这么多单词，开会时还是<span class="highlight">张不开口</span>！App只教单词的<span class="highlight">中文意思</span>，却不教如何使用。我记住了"negotiate"这个词，但不知道它常和"terms"、"contract"搭配使用。工作中需要的<span class="highlight">实际应用能力</span>完全没提升。而且商务英语中很多短语（如"follow up"、"touch base"）在App里根本学不到。花这么多时间学习，却<span class="highlight">解决不了实际问题</span>，真的很焦虑！
 
+          </div>
 
+      </div>
 
+    </div>
 
+
 
+  </body>
 
+  </html>

+ 190 - 0
example-book/hundun/story-card.html
View File 

@@ -0,0 +1,190 @@
 
+<!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>
 
+        body {
 
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 
+            background-color: #f5f7fa;
 
+            display: flex;
 
+            justify-content: center;
 
+            align-items: center;
 
+            min-height: 100vh;
 
+            margin: 0;
 
+            padding: 20px;
 
+        }
 
+        
+        .story-card {
 
+            width: 100%;
 
+            max-width: 600px;
 
+            background: white;
 
+            border-radius: 12px;
 
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
 
+            overflow: hidden;
 
+            transition: transform 0.3s ease;
 
+        }
 
+        
+        .story-card:hover {
 
+            transform: translateY(-5px);
 
+        }
 
+        
+        .card-header {
 
+            background: linear-gradient(135deg, #6e8efb, #a777e3);
 
+            color: white;
 
+            padding: 20px;
 
+            position: relative;
 
+        }
 
+        
+        .card-header h2 {
 
+            margin: 0;
 
+            font-size: 22px;
 
+            font-weight: 600;
 
+        }
 
+        
+        .card-header::after {
 
+            content: "";
 
+            position: absolute;
 
+            bottom: -10px;
 
+            left: 0;
 
+            width: 100%;
 
+            height: 20px;
 
+            background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"><path d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z" fill="white" opacity=".25"/><path d="M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60.65-49.24V0Z" fill="white"/></svg>');
 
+            background-size: cover;
 
+        }
 
+        
+        .card-body {
 
+            padding: 25px;
 
+        }
 
+        
+        .section {
 
+            margin-bottom: 25px;
 
+        }
 
+        
+        .section-title {
 
+            color: #6e8efb;
 
+            font-size: 16px;
 
+            font-weight: 600;
 
+            margin-bottom: 10px;
 
+            display: flex;
 
+            align-items: center;
 
+        }
 
+        
+        .section-title svg {
 
+            margin-right: 8px;
 
+        }
 
+        
+        .section-content {
 
+            background: #f9f9f9;
 
+            border-left: 4px solid #a777e3;
 
+            padding: 15px;
 
+            border-radius: 0 8px 8px 0;
 
+            font-size: 15px;
 
+            line-height: 1.6;
 
+            color: #555;
 
+        }
 
+        
+        .user-quote {
 
+            font-style: italic;
 
+            color: #666;
 
+            padding: 15px;
 
+            background: #f0f4ff;
 
+            border-radius: 8px;
 
+            position: relative;
 
+            margin: 20px 0;
 
+        }
 
+        
+        .user-quote::before {
 
+            content: """;
 
+            font-size: 60px;
 
+            color: #a777e3;
 
+            opacity: 0.2;
 
+            position: absolute;
 
+            top: -15px;
 
+            left: 5px;
 
+            font-family: serif;
 
+        }
 
+        
+        .metrics {
 
+            display: flex;
 
+            flex-wrap: wrap;
 
+            gap: 10px;
 
+        }
 
+        
+        .metric {
 
+            background: #e8f0fe;
 
+            color: #4285f4;
 
+            padding: 8px 12px;
 
+            border-radius: 20px;
 
+            font-size: 13px;
 
+            font-weight: 500;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="story-card">
 
+        <div class="card-header">
 
+            <h2>用户故事：快速找到并购买心仪商品</h2>
 
+        </div>
 
+        <div class="card-body">
 
+            <div class="section">
 
+                <div class="section-title">
 
+                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
 
+                        <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
 
+                        <circle cx="12" cy="7" r="4"></circle>
 
+                    </svg>
 
+                    用户画像
 
+                </div>
 
+                <div class="section-content">
 
+                    <p><strong>姓名：</strong>张丽</p>
 
+                    <p><strong>年龄：</strong>32岁</p>
 
+                    <p><strong>职业：</strong>职场妈妈</p>
 
+                    <p><strong>特点：</strong>工作繁忙，有两个孩子(5岁和8岁)，购物时间有限，注重性价比和商品质量</p>
 
+                </div>
 
+            </div>
 
+            
+            <div class="user-quote">
 
+                "作为一个忙碌的职场妈妈，我经常需要在午休或孩子睡觉后的有限时间里快速完成购物。我希望能够轻松找到我需要的商品，比较价格和质量，然后快速下单。现在的购物平台商品太多，筛选起来太费时间了！"
 
+            </div>
 
+            
+            <div class="section">
 
+                <div class="section-title">
 
+                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
 
+                        <circle cx="12" cy="12" r="10"></circle>
 
+                        <polyline points="12 6 12 12 16 14"></polyline>
 
+                    </svg>
 
+                    使用场景
 
+                </div>
 
+                <div class="section-content">
 
+                    <p>1. 午休时间只有30分钟，想为孩子购买新学期的文具</p>
 
+                    <p>2. 晚上孩子睡觉后，想为自己选购一件工作穿的衬衫</p>
 
+                    <p>3. 周末准备家庭聚餐，需要快速购买食材和装饰品</p>
 
+                    <p>4. 发现孩子长得快，需要紧急购买大一号的校服</p>
 
+                </div>
 
+            </div>
 
+            
+            <div class="section">
 
+                <div class="section-title">
 
+                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
 
+                        <line x1="12" y1="20" x2="12" y2="10"></line>
 
+                        <line x1="18" y1="20" x2="18" y2="4"></line>
 
+                        <line x1="6" y1="20" x2="6" y2="16"></line>
 
+                    </svg>
 
+                    关注指标
 
+                </div>
 
+                <div class="section-content">
 
+                    <div class="metrics">
 
+                        <span class="metric">搜索准确率 ≥90%</span>
 
+                        <span class="metric">筛选效率提高50%</span>
 
+                        <span class="metric">平均下单时间 ≤5分钟</span>
 
+                        <span class="metric">商品详情完整度</span>
 
+                        <span class="metric">价格比较便捷性</span>
 
+                        <span class="metric">移动端操作流畅度</span>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+        </div>
 
+    </div>
 
+</body>
 
+</html>

+ 0 - 0
example-book/meeting.md
View File