SuperAPI AI 工具集

codebase-to-course

前端与建站

查看项目

更新于 10-16 03:47

技能介绍

用途:将任意代码库转成面向非技术人群的交互式单页 HTML 课程,讲解代码如何运作,学习者只需浏览器即可阅读,无需搭建环境(唯一外部依赖为 Google Fonts CDN)。目标读者是不具备传统计算机教育背景、用自然语言指挥 AI 编程工具的“vibe coder”,侧重读懂代码、指导 AI 与调试,而非从零写代码。

主要能力:输出为目录结构,包含预置的 styles.css、main.js、逐模块 HTML 文件以及组装出的 index.html;课程用滚动式模块、动画可视化、内嵌测验和代码的白话翻译来讲解。支持本地文件夹、GitHub 链接(先 git clone <url> /tmp/<repo-name>)或当前项目作为输入。可用时借助原生并行子代理与 200k+ 上下文窗口。复杂代码库先写模块简报(course-name/briefs/0N-slug.md),再并行撰写模块。

使用方式:先分析代码库,再设计 4–6 个(必要时 7–8 个)模块的课程;将 references/styles.css、main.js、_footer.html、build.sh 原样复制到课程目录,定制 base.html(替换 COURSE_TITLE、ACCENT*、NAV_DOTS),撰写各模块的 <section> 内容,最后运行 cd course-name && bash build.sh 生成 index.html 并在浏览器打开。每个模块需含代码与白话对照、至少一个交互元素、测验与术语提示,整门课程须含群聊动画、消息/数据流动画等。不得重新生成 styles.css 与 main.js,模块文件只含 <section> 内容。

限制:设计规范要求暖色调、单一强调色、指定字体(如 Bricolage Grotesque、DM Sans、JetBrains Mono)与深色代码块,避免冷白/蓝、紫色渐变及 Inter、Roboto、Arial、Space Grotesk;滚动使用 scroll-snap-type: y proximity。其余如具体收费、支持平台、实测效果等资料暂未提供。