基于AI工程化文档创建应用前端代码示例

优质文章学习记录

06 Apr 2026 — 13 min read

基于AI工程层级文档，使用通义灵码、TypeDom框架示例构建的儿童英语学习应用的全部过程已经运行结果。

一、AI工程文档

基于AI语义框架，编写 Readme.md 文档。

 # Language Learning App ## 1.Product | 产品层 - **Description | 描述**: Product overview and purpose language learning app 语言学习应用 - **Target User | 目标用户**: Intended audience and user personas helps users improve their language skills through practice and feedback. 通过练习和反馈帮助用户提高语言技能。 - **Goal | 目标**: Primary objectives and success metrics To help users build and maintain positive habits throug tracking motivation. 通过跟踪动机帮助用户建立和保持积极的习惯。 ## 2.Design System | 设计系统层 - **Design Style | 设计风格**: Overall aesthetic direction Clean and minimal 简洁简约 playful and engaging 有趣且引人入胜 - **Color | 色彩**: Color palette and usage guidelines Gradient 渐变色 backgrounds from state-50 to blue-50 with accents in emerald, blue, and purple shadles. 背景从state-50到blue-50，配以绿宝石、蓝色和紫色的强调色。 Soft and minimal color palette, restrained design with subtle contrasts. Increase contrast of secondary text for improved readability. - **Typography | 字体排版**: Font families and hierarchy Inter and Poppins Inter 和 Poppins 字体 Inter and Fredoka fonts Inter 和 Fredoka 字体 fonts with various weights for headings and body text. 具有各种字重的字体，用于标题和正文文本。 Use inter font and Display Serif font Slightly larger body text size for readability. - **Visual Property | 视觉属性**: Visual elements and components 可视化元素和组件 - **Visual Mood | 视觉情绪**: Emotional tone and atmosphere 情感基调和氛围 - **Tone of Voice | 语调**: Communication style and personality 沟通风格和个性 Emphasize guidance with simple words and a warn, considerate tone. 强调使用简单词汇和温暖、体贴的语调进行指导。 ## 3.Feature | 功能层 - **Function | 功能**: Core functionalities and capabilities daily lessons, vocabulary cards, interactive quizzes,and level progression 日常课程、词汇卡片、互动测验和等级进阶 Allows users to explore various learning screens 允许用户探索各种学习界面 - **Content | 内容**: Information and media elements 信息和媒体元素 - **Information Architecture | 信息架构**: Organization and structure Learning screen 学习界面 structure centered 以结构为中心 around the home screen 围绕主页屏幕 ## 4.Component | 组件层 ### Card Component - Flash cards displaying vocabulary - 显示词汇的闪卡 ### Header Component - Header displaying top information of the app - 显示应用顶部信息的页眉 ## Implementation Details | 实现细节 ### File Structure | 文件结构 ``` language-learn/ ├── language-learn-app.ts # 主应用组件 ├── index.ts # 导出文件 ├── language-learn-app.test.ts # 测试文件 └── Readme.md # 文档文件 ``` ### Features Implemented | 已实现的功能 1. **Home View | 首页视图** - 用户统计信息展示 - 快速导航按钮 - 学习进度概览 2. **Lessons View | 课程视图** - 课程列表展示 - 课程详情和状态 - 学习时长和难度等级 3. **Vocabulary View | 词汇视图** - 词汇卡片展示 - 发音标注 - 例句和翻译 4. **Quiz View | 测验视图** - 互动问答系统 - 实时反馈和解释 - 成绩统计和评级 ### Technical Stack | 技术栈 - **Framework**: TypeDOM (@type-dom/framework) - **Styling**: CSS with gradient backgrounds - **Fonts**: Inter, Poppins - **Architecture**: Component-based design ### How to Use | 使用方法 ```typescript import { LanguageLearnApp } from './views/language-learn'; // Create instance const languageApp = new LanguageLearnApp(); // Add to DOM languageApp.mount(document.body); ``` ### Customization | 自定义 可以通过修改 `initializeData()` 方法中的数据来定制内容： - 添加新的课程 - 扩展词汇库 - 修改测验题目 - 调整用户信息

二、基于AI生成页面代码

通义灵码 agent 中输入：仔细阅读 apps/samples/src/views/language-learn/Readme.md 文档，根据文档在 apps/samples/src/views/language-learn/ 文件夹下生成 language-learn-app 的页面代码，要使用TypeDom前端框架参考项目下的其它页面的代码。

三、生成的代码

import{ TypeDiv, Div, Head,P, Span, Button, addDomClass, removeClass, renderClass }from'@type-dom/framework';import{ TdButton,}from'@type-dom/ui';/** * Language Learning App Component * 语言学习应用组件 */exportclassLanguageLearnAppextendsTypeDiv{ className:'LanguageLearnApp'; appData!: AppData; currentView:'home'|'lessons'|'vocabulary'|'quiz'='home'; currentLessonIndex:number=0; currentVocabIndex:number=0; quizScore:number=0; totalQuizQuestions:number=0;constructor(){super();this.className ='LanguageLearnApp';this.initializeData();this.setupStyles();this.renderHomeView();}privateinitializeData():void{this.appData ={ appName:'Language Master', appSubtitle:'掌握语言的艺术', user:{ name:'学习者', level:'初级', streak:5, totalXP:1250}, lessons:[{ id:1, title:'基础问候语', description:'学习日常问候和基本表达', level:'入门', duration:'15分钟', completed:false, content:['Hello - 你好','Good morning - 早上好','How are you? - 你好吗？','Thank you - 谢谢','Goodbye - 再见']},{ id:2, title:'数字和时间', description:'掌握数数和询问时间', level:'入门', duration:'20分钟', completed:false, content:['One, Two, Three - 一、二、三','What time is it? - 现在几点？','Today - 今天','Tomorrow - 明天','Yesterday - 昨天']},{ id:3, title:'家庭成员', description:'认识家庭成员的称呼', level:'初级', duration:'18分钟', completed:false, content:['Father/Mother - 父亲/母亲','Brother/Sister - 兄弟/姐妹','Grandfather/Grandmother - 祖父/祖母','Uncle/Aunt - 叔叔/阿姨','Cousin - 表兄弟姐妹']}], vocabulary:[{ id:1, word:'Hello', translation:'你好', pronunciation:'/həˈloʊ/', example:'Hello, how are you today?', exampleTranslation:'你好，今天怎么样？', category:'问候语'},{ id:2, word:'Thank you', translation:'谢谢', pronunciation:'/θæŋk juː/', example:'Thank you for your help.', exampleTranslation:'谢谢你的帮助。', category:'礼貌用语'},{ id:3, word:'Family', translation:'家庭', pronunciation:'/ˈfæməli/', example:'My family is very supportive.', exampleTranslation:'我的家人很支持我。', category:'家庭'},{ id:4, word:'Learning', translation:'学习', pronunciation:'/ˈlɜːrnɪŋ/', example:'I enjoy learning new languages.', exampleTranslation:'我喜欢学习新语言。', category:'学习'},{ id:5, word:'Practice', translation:'练习', pronunciation:'/ˈpræktɪs/', example:'Practice makes perfect.', exampleTranslation:'熟能生巧。', category:'学习'}], quizQuestions:[{ id:1, question:'"Hello" 的中文意思是？', options:['再见','你好','谢谢','对不起'], correctAnswer:1, explanation:'"Hello" 是最基本的英语问候语，中文意思是"你好"'},{ id:2, question:'如何用英语说"谢谢"？', options:['Sorry','Thank you','Goodbye','Please'], correctAnswer:1, explanation:'"Thank you" 是表达感谢的标准英语说法'},{ id:3, question:'"Family" 的中文翻译是？', options:['朋友','学校','家庭','工作'], correctAnswer:2, explanation:'"Family" 指的是家庭成员的集合'},{ id:4, question:'早上见面时应该说什么？', options:['Good night','Good evening','Good morning','Good afternoon'], correctAnswer:2, explanation:'"Good morning" 是早上见面时的标准问候语'},{ id:5, question:'如何表达"我爱你"？', options:['I love you','I like you','I miss you','I need you'], correctAnswer:0, explanation:'"I love you" 是表达爱意的标准英语表达'}]};}privatesetupStyles():void{this.setStyleObj({ fontFamily:"'Inter', 'Poppins', Arial, sans-serif", maxWidth:'1200px', margin:'0 auto', padding:'20px', backgroundColor:'#f8fafc', minHeight:'100vh'});// Add CSS stylesconst style = document.createElement('style'); style.textContent =` .app-container { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; padding: 20px; } .header { background: white; border-radius: 16px; padding: 25px; margin-bottom: 30px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); display: flex; justify-content: space-between; align-items: center; } .user-info { display: flex; align-items: center; gap: 15px; } .avatar { width: 50px; height: 50px; border-radius: 50%; background: linear-gradient(45deg, #3498db, #27ae60); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 20px; } .nav-buttons { display: flex; gap: 12px; } .nav-btn { background: #3498db; color: white; border: none; padding: 12px 20px; border-radius: 8px; cursor: pointer; font-weight: 600; transition: all 0.3s ease; } .nav-btn:hover { background: #2980b9; transform: translateY(-2px); } .nav-btn.active { background: #27ae60; } .content-area { background: white; border-radius: 16px; padding: 30px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); min-height: 500px; } .home-view { text-align: center; } .welcome-section { margin-bottom: 40px; } .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin: 30px 0; } .stat-card { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 25px; border-radius: 12px; text-align: center; } .stat-number { font-size: 2.5em; font-weight: bold; margin: 10px 0; } .lesson-card, .vocab-card { background: #f8f9fa; border-radius: 12px; padding: 20px; margin: 15px 0; border-left: 4px solid #3498db; transition: transform 0.2s ease; } .lesson-card:hover, .vocab-card:hover { transform: translateX(5px); box-shadow: 0 4px 15px rgba(0,0,0,0.1); } .card-title { font-size: 1.3em; font-weight: 600; color: #2c3e50; margin-bottom: 10px; } .card-meta { display: flex; gap: 15px; margin: 10px 0; color: #7f8c8d; font-size: 0.9em; } .quiz-question { background: #f8f9fa; padding: 25px; border-radius: 12px; margin: 20px 0; } .option-btn { display: block; width: 100%; padding: 15px; margin: 10px 0; border: 2px solid #ddd; border-radius: 8px; background: white; cursor: pointer; text-align: left; font-size: 1.1em; transition: all 0.3s ease; } .option-btn:hover { border-color: #3498db; background: #e3f2fd; } .option-btn.selected { border-color: #3498db; background: #bbdefb; } .option-btn.correct { border-color: #27ae60; background: #c8e6c9; } .option-btn.incorrect { border-color: #e74c3c; background: #ffcdd2; } .progress-bar { height: 12px; background: #ecf0f1; border-radius: 6px; overflow: hidden; margin: 20px 0; } .progress-fill { height: 100%; background: linear-gradient(90deg, #27ae60, #3498db); transition: width 0.5s ease; } .action-btn { background: linear-gradient(45deg, #3498db, #27ae60); color: white; border: none; padding: 15px 30px; border-radius: 8px; cursor: pointer; font-size: 1.1em; font-weight: 600; margin: 10px; transition: all 0.3s ease; } .action-btn:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,0.2); } .badge { display: inline-block; padding: 5px 12px; border-radius: 20px; font-size: 0.8em; font-weight: 600; } .badge-primary { background: #3498db; color: white; } .badge-success { background: #27ae60; color: white; } .badge-warning { background: #f39c12; color: white; } `; document.head.appendChild(style);}privaterenderHomeView():void{console.warn('renderHomeView');this.currentView ='home';this.clearChildren();const container =newDiv({class:'app-container'});// Header container.addChild(this.createHeader());// Content Areaconst contentArea =newDiv({class:'content-area'});const welcomeSection =newDiv({class:'home-view'}); welcomeSection.addChildren(newHead({ tag:'h1', slot:`欢迎来到 ${this.appData.appName}`, styleObj:{ fontSize:'2.5em', color:'#2c3e50', marginBottom:'15px'}}),newP({ slot:this.appData.appSubtitle, styleObj:{ fontSize:'1.2em', color:'#7f8c8d', marginBottom:'30px'}}),newP({ slot:`你好，${this.appData.user.name}！你已经连续学习 ${this.appData.user.streak} 天了。`, styleObj:{ fontSize:'1.1em', color:'#27ae60', fontWeight:'600'}}));// Stats Gridconst statsGrid =newDiv({class:'stats-grid'}); statsGrid.addChildren(this.createStatCard('总经验值',this.appData.user.totalXP.toString(),'🏆'),this.createStatCard('学习天数',this.appData.user.streak.toString(),'🔥'),this.createStatCard('课程完成','3/15','📚'),this.createStatCard('词汇掌握','25/100','🧠')); welcomeSection.addChild(statsGrid);// Quick Actionsconst actions =newDiv({ styleObj:{ marginTop:'30px'}}); actions.addChildren(newButton({ slot:'开始今日课程 📚',class:'action-btn',onClick:()=>this.renderLessonsView()}),newButton({ slot:'复习词汇卡片 🃏',class:'action-btn',onClick:()=>this.renderVocabularyView()}),newButton({ slot:'挑战小测验 🎯',class:'action-btn',onClick:()=>this.renderQuizView()})); welcomeSection.addChild(actions); contentArea.addChild(welcomeSection); container.addChild(contentArea);if(this.isMounted){ container.mount(this.dom);}else{this.addChild(container);}}privatecreateHeader(): Div {const header =newDiv({class:'header'});// Logo and Titleconst logoSection =newDiv(); logoSection.addChildren(newHead({ tag:'h1', slot:this.appData.appName, styleObj:{ margin:0, color:'#2c3e50', fontSize:'1.8em'}}),newP({ slot:this.appData.user.level,class:'badge badge-primary'}));// User Infoconst userInfo =newDiv({class:'user-info'}); userInfo.addChildren(newDiv({class:'avatar', slot:this.appData.user.name.charAt(0)}),newDiv({ slot:[newP({ slot:this.appData.user.name, styleObj:{ fontWeight:'600', margin:'0 0 5px 0'}}),newP({ slot:`${this.appData.user.totalXP} XP`, styleObj:{ color:'#7f8c8d', margin:0, fontSize:'0.9em'}})]}));// Navigation Buttonsconst navButtons =newDiv({class:'nav-buttons'}); navButtons.addChildren(newButton({ slot:'首页',class:`nav-btn ${this.currentView ==='home'?'active':''}`,onClick:()=>this.renderHomeView()}),newButton({ slot:'课程',class:`nav-btn ${this.currentView ==='lessons'?'active':''}`,onClick:()=>this.renderLessonsView()}),newButton({ slot:'词汇',class:`nav-btn ${this.currentView ==='vocabulary'?'active':''}`,onClick:()=>this.renderVocabularyView()}),newButton({ slot:'测验',class:`nav-btn ${this.currentView ==='quiz'?'active':''}`,onClick:()=>this.renderQuizView()})); header.addChildren(logoSection, userInfo, navButtons);return header;}privatecreateStatCard(title:string, value:string, icon:string): Div {const card =newDiv({class:'stat-card'}); card.addChildren(newDiv({ slot: icon, styleObj:{ fontSize:'2em', marginBottom:'10px'}}),newDiv({ slot: value,class:'stat-number'}),newP({ slot: title, styleObj:{ margin:0, opacity:0.9}}));return card;}privaterenderLessonsView():void{console.warn('renderLessonsView');this.currentView ='lessons';this.clearChildren();const container =newDiv({class:'app-container'}); container.addChild(this.createHeader());const contentArea =newDiv({class:'content-area'}); contentArea.addChildren(newHead({ tag:'h2', slot:'📖 我的课程', styleObj:{ color:'#2c3e50', marginBottom:'25px'}}));this.appData.lessons.forEach((lesson, index)=>{const lessonCard =newDiv({class:'lesson-card'}); lessonCard.addChildren(newDiv({class:'card-title', slot:`${index +1}. ${lesson.title}`}),newP({ slot: lesson.description, styleObj:{ color:'#7f8c8d', marginBottom:'15px'}}),newDiv({class:'card-meta', slot:[newSpan({ slot:`⏱️ ${lesson.duration}`,class:'badge badge-warning'}),newSpan({ slot:`📊 ${lesson.level}`,class:'badge badge-primary'}),newSpan({ slot: lesson.completed ?'✅ 已完成':'⏳ 未开始',class:`badge ${lesson.completed ?'badge-success':'badge-warning'}`})]}),newButton({ slot: lesson.completed ?'复习课程':'开始学习',class:'action-btn', styleObj:{ marginTop:'15px'},onClick:()=>this.startLesson(index)})); contentArea.addChild(lessonCard);}); container.addChild(contentArea);// this.addChild(container); container.mount(this.dom);}privaterenderVocabularyView():void{console.warn('renderVocabularyView');this.currentView ='vocabulary';this.clearChildren();const container =newDiv({class:'app-container'}); container.addChild(this.createHeader());const contentArea =newDiv({class:'content-area'}); contentArea.addChildren(newHead({ tag:'h2', slot:'🃏 词汇卡片', styleObj:{ color:'#2c3e50', marginBottom:'25px'}}));this.appData.vocabulary.forEach((vocab, index)=>{const vocabCard =newDiv({class:'vocab-card'}); vocabCard.addChildren(newDiv({class:'card-title', slot: vocab.word }),newP({ slot:`/${vocab.pronunciation}/`, styleObj:{ fontStyle:'italic', color:'#7f8c8d'}}),newP({ slot: vocab.translation, styleObj:{ fontSize:'1.2em', fontWeight:'600', color:'#27ae60'}}),newP({ slot:`分类: ${vocab.category}`,class:'badge badge-primary', styleObj:{ marginTop:'10px'}}),newDiv({ styleObj:{ marginTop:'15px'}, slot:[newP({ slot:`例句: ${vocab.example}`, styleObj:{ fontStyle:'italic', color:'#555'}}),newP({ slot: vocab.exampleTranslation, styleObj:{ color:'#7f8c8d', marginTop:'5px'}})]})); contentArea.addChild(vocabCard);}); container.addChild(contentArea); container.mount(this.dom);}privaterenderQuizView():void{console.log('renderQuizView');this.currentView ='quiz';this.quizScore =0;this.totalQuizQuestions =this.appData.quizQuestions.length;this.clearChildren();const container =newDiv({class:'app-container'}); container.addChild(this.createHeader());const contentArea =newDiv({class:'content-area'}); contentArea.addChildren(newHead({ tag:'h2', slot:'🎯 语言测验', styleObj:{ color:'#2c3e50', marginBottom:'25px'}}),newP({ slot:'测试你的语言掌握程度！', styleObj:{ fontSize:'1.1em', color:'#7f8c8d', marginBottom:'20px'}}));const startButton =newButton({ slot:'开始测验',class:'action-btn',onClick:()=>this.startQuiz()}); contentArea.addChild(startButton); container.addChild(contentArea);this.addChild(container); container.mount(this.dom);}privatestartLesson(index:number):void{alert(`开始学习课程: ${this.appData.lessons[index].title} 内容预览: ${this.appData.lessons[index].content.join('')}`);// 这里可以跳转到具体的课程详情页面}privatestartQuiz():void{this.currentView ='quiz';let currentQuestionIndex =0;let selectedAnswer:number|null=null;constshowQuestion=()=>{this.clearChildren();const container =newDiv({class:'app-container'}); container.addChild(this.createHeader());const contentArea =newDiv({class:'content-area'});// Progress barconst progressPercent =((currentQuestionIndex)/this.totalQuizQuestions)*100;const progressBar =newDiv({class:'progress-bar'}); progressBar.addChild(newDiv({class:'progress-fill', styleObj:{ width:`${progressPercent}%`}})); contentArea.addChildren(newP({ slot:`题目 ${currentQuestionIndex +1} / ${this.totalQuizQuestions}`, styleObj:{ textAlign:'center', color:'#7f8c8d', marginBottom:'10px'}}), progressBar );const question =this.appData.quizQuestions[currentQuestionIndex];const questionDiv =newDiv({class:'quiz-question'}); questionDiv.addChildren(newHead({ tag:'h3', slot: question.question, styleObj:{ color:'#2c3e50', marginBottom:'20px'}}));const optionsDiv =newDiv(); question.options.forEach((option, index)=>{const optionBtn =newButton({ slot:`${String.fromCharCode(65+ index)}. ${option}`,class:'option-btn',onClick:()=>{// Remove previous selectionsconst allButtons = optionsDiv.children as Button[]; allButtons.forEach(btn =>{// btn.removeClass('selected');removeClass(btn,'selected');});// Select current option// optionBtn.addClass('selected');renderClass(optionBtn,'selected'); selectedAnswer = index;}}); optionsDiv.addChild(optionBtn);}); questionDiv.addChild(optionsDiv);const submitButton =newButton({ slot:'提交答案',class:'action-btn',onClick:()=>{console.log('提交答案');if(selectedAnswer ===null){alert('请选择一个答案！');return;}// Show resultconst allButtons = optionsDiv.children as Button[]; allButtons.forEach((btn, idx)=>{if(idx === question.correctAnswer){// btn.addClass('correct');addDomClass(btn.dom,'correct');}elseif(idx === selectedAnswer && selectedAnswer !== question.correctAnswer){// btn.addClass('incorrect');addDomClass(btn.dom,'incorrect');}});setTimeout(()=>{if(selectedAnswer === question.correctAnswer){this.quizScore++;alert(`🎉 回答正确！\n\n解析: ${question.explanation}`);}else{alert(`❌ 回答错误！\n\n正确答案: ${question.options[question.correctAnswer]}\n解析: ${question.explanation}`);} currentQuestionIndex++; selectedAnswer =null;if(currentQuestionIndex <this.totalQuizQuestions){showQuestion();}else{this.showQuizResults();}},1500);}}); questionDiv.addChild(submitButton); contentArea.addChild(questionDiv); container.addChild(contentArea);// this.addChild(container); container.mount(this.dom);};showQuestion();}privateshowQuizResults():void{this.clearChildren();const container =newDiv({class:'app-container'}); container.addChild(this.createHeader());const contentArea =newDiv({class:'content-area', styleObj:{ textAlign:'center'}});const scorePercent = Math.round((this.quizScore /this.totalQuizQuestions)*100);let resultMessage ='';let resultEmoji ='';if(scorePercent >=90){ resultMessage ='优秀！你是语言天才！'; resultEmoji ='🌟';}elseif(scorePercent >=70){ resultMessage ='很好！继续保持！'; resultEmoji ='👍';}elseif(scorePercent >=50){ resultMessage ='不错！还有进步空间！'; resultEmoji ='💪';}else{ resultMessage ='继续努力！多加练习！'; resultEmoji ='📚';} contentArea.addChildren(newHead({ tag:'h2', slot:'测验结果', styleObj:{ color:'#2c3e50', marginBottom:'30px'}}),newDiv({ slot: resultEmoji, styleObj:{ fontSize:'4em', marginBottom:'20px'}}),newHead({ tag:'h1', slot:`${this.quizScore}/${this.totalQuizQuestions}`, styleObj:{ fontSize:'3em', color:'#27ae60', margin:'20px 0'}}),newP({ slot:`得分率: ${scorePercent}%`, styleObj:{ fontSize:'1.5em', color:'#7f8c8d', marginBottom:'30px'}}),newP({ slot: resultMessage, styleObj:{ fontSize:'1.3em', color:'#2c3e50', marginBottom:'30px'}}),newTdButton({ slot:'返回首页', type:'primary',onClick:()=>this.renderHomeView()})); container.addChild(contentArea);// this.addChild(container); container.mount(this.dom);}}// Data interfacesinterfaceAppData{ appName:string; appSubtitle:string; user: User; lessons: Lesson[]; vocabulary: VocabularyItem[]; quizQuestions: QuizQuestion[];}interfaceUser{ name:string; level:string; streak:number; totalXP:number;}interfaceLesson{ id:number; title:string; description:string; level:string; duration:string; completed:boolean; content:string[];}interfaceVocabularyItem{ id:number; word:string; translation:string; pronunciation:string; example:string; exampleTranslation:string; category:string;}interfaceQuizQuestion{ id:number; question:string; options:string[]; correctAnswer:number; explanation:string;}