1.摘要
我用SOLO从零开始搭建了一个面向小学三六年级和初中学生的互动写作平台——“妙笔生花·互动写作乐园”。平台基于SRSD（自我调节策略写作教学）设计，集成看图写话、渐进式五步写作、经典散文样板、写作闯关游戏、手写稿AI点评、成长雷达图等六大模块，全部实现在一个HTML文件中，无需后端服务器。整个过程从需求拆解到落地实现，都通过与SOLO的多轮对话完成，包括代码生成、六角色交叉验证、自动化测试、反复迭代修复等环节。
2.背景
我是一名教师，近期在探索如何将写作教学与AI技术结合。我希望做一个“即开即用、学教融合”的写作平台，让学生从看图写话开始，通过五步渐进式写作逐步提升，最终能独立完成一篇完整作文 。
核心挑战有三 个：
• 如何将SRSD（自我调节策略写作教学）这套经过学术验证的教学法转化为可交互的产 品流程
• 如何在单文件HTML中实现完整的写作引导、评分反馈、成长记 录等功能
• 如何让平台对小学生友好，同时兼顾初中生 的更高要求
3 .实践过程
3.1任务拆解：从一 句话到一篇文章
我没有一开始就让SOLO写代码，而是先做了任务拆解。整个平台被拆分为6个模块，每个模 块单独对话实现：
模块
核心功能
SRSD对应
看图写 话
10个场景卡片，点 击进入写作
背景知识激活+计划阶段
渐进写作
五步引导：句子 →段落→篇章
自监查+自我评价+修改
经典散文
21 篇名家散文样板+写作支架
范文学习 +模仿练习
闯关游 戏
10 关+ Boss关，星级评分
独立练习+内化动机
手写稿点评
上传照片 ，AI 7维点评
多维度反馈+升格建议
成长记录
7维雷达图+进步曲线
进步监控+目标设定
3.2关键Prompt与操作过程
第一轮：整体架构设计
我向SOLO 描述了平台的功能规划、用户 角色、技术约束，让它生成完整的单文件HTML架构。这一步产出了约1600行的基础代码，包含导航、页面切换、场景数据、写作引擎、评分系统等 核心模块。
第二轮：教研专家验证
我让SOLO以六个角色（AI专家、教研专家、优秀 学生、中等学生、较弱学生、游戏架构师）交叉审查代码，发现了3个严重Bug：
• finishW函数用旧的5维键计算分数，导致所有作品分数为NaN
• useClas sicScene调用selScene(-1)导致经典散文功能崩溃
• isP变量判断不检查版本，小学生被按初中标准评分
第三轮：自动化测试+ UI调优
我让SOLO用浏览器自动化工具逐页点击测试，同时进 行静态代码分析（ES6兼容性、事件绑定、资源引用）。发现并修复了可选链运算符、 隐式event引用、classList.toggle兼容性等问题。同时迭 代修复了用户反馈的UI问题：
• 白色卡片背景+浅灰文字= 看不清，统一改为纯黑文字
• 经典散文文本区域对比度不足，改为深色背景+亮色文字
• 首页“开始写作”按钮未选版本时无提示，加入版本检查和引导
第四轮：交互流程优化
我发现场景卡片点击后“开始写作”按钮无法触发，根因是渐进展示逻辑要求用户连续点击3 次才能看到关键词。修复方案 ：改为一次性展示全部信息（画面描述+关键词+思考引导）。同时将所有“开始写作” 按钮改为事件委托模式，统一绑定到#app容器上，确保动态加载的场景按钮也能 触发。
第五轮：完成反馈增强
我发现各写作板块完成后缺乏鼓励和升格建议。为渐进写作和闯关挑战分别增加了 完成弹窗，包含：
• 随机鼓励语（区分小学/初中，提及字数 和作品篇数）
• 自动识别最强 /最弱维度，给出针对性升格建议（ 7维×2版本= 14条建议）
• “去闯关验证”和“继续写作” 两个下一步引导
3.3踩过的坑
问题
解决方案
白色背景配浅灰文字
统一改为深色背景+亮色 文字，提升对比度
场景卡片点不动
场景卡片是div而非butt on，浏览器无法识别为交互元素，改用JS执行点击
7维评分分数为NaN
旧代码用5维键计算，新增7维后未同步 更新计算公式
经典散文功能崩溃
s elScene(-1) 将S.scene覆盖为 undefined，删除该 调用改为直接操作DOM
手写输入在 测试环境不可用
测试环境无麦克风权限，直接移除 手写输入模块，保留键盘+语音
4.成果展示
4.1平台功能概览
功能
说明
技术要点
看图写话
10个场景，点击进入写作
CSS渐变背景+ emoj i图标
渐进写作
5步引导 + 6步自查
S RSD自我调节策略映射
经典散文
21篇名家散文样板
写作支架 +关键词+句式图谱
闯 关游戏
10关+ Boss关
星级评分 +成就系统
手写稿点评
AI 7维点评
6+1 Traits评分模型
成长记录
7维雷达图+进步曲线
Canvas绘图+ localStorage
4.2技术架构
• 前端：单文件 HTML + CSS +原生JavaScript，零依赖
• 数据存储：local Storage，所有数 据本地保存，隐私零风险
• 评分系统： 基于6+1 Traits模型的 7维评分，区分小学/初中锚点
• 写作引擎：基于SRSD的五 步渐进式写作（句子→段落→篇章）
• 游戏化：关卡地图+ Boss 关+成就引擎+连胜机制
5.效果与总结
5.1提效数据
指标
数据
代码规模
约1600行单文件HTML
功能模块
6个（看图写话/渐进写作/散文/闯关/点评/成长）
场景数据
小学10个+初中10 个+经典散文21篇
交互流程测试
7个页面全部通过，0 JS错误
Bug修复
累计发现并 修复10+个问题
5.2 SOLO在我的流程中做了什么
• 代码生成：根据我的功能规划生 成完整的前端代码，包含HTML/CSS/JS
• 代码审查：以六角色视角交叉审查，发现我自己 很难发现的深层Bug
• 自动化测试：用浏览器工具逐页点击测试+控制台错误抓取
• 迭代修复：根据我的反馈反复调优UI和交互逻辑
• 功能增强：每次反馈都转化为具体的 代码修改
5.3可复用的方法
• “先拆解再实现”：复杂项目先拆成独立模块，每个模块单独对话实现
• “多角色审查”：让AI以不同角色（专家/用户/开发者）审查代码，发现盲点
• “测试驱动修复”：不是猜测性地修改，而是通过自动化测试和截图确认问题后再修复
• “用户反馈即代码”：用户说“点不动”“看不清”，直接转化为具体的CSS和JS修改