 技能的制作逻辑与设计思路，共 5 节，逐层拆开"读源码 → 规划内容 → 重绘界面 → 拼成 deck → 质检交付"的全过程。

该技能已经发布到技能市场，可以下载。直接skills hub技能市场里面搜索code-walkthrough-ppt即可下载和安装到WorkBuddy使用。

https://skillhub.cn/skills/user_81d33501/code-walkthrough-ppt

一、它要解决的问题：源码在，材料不在

很多交付型项目都卡在同一个尴尬位置上——系统已经上线甚至已经验收，手边却只有一份源代码，没有任何能直接拿出去讲的产品介绍材料。临时要汇报给客户、讲给领导听、交给新接手的同事，只能现翻代码现拼 PPT，讲一次换一套口径。这个技能就是为"源码在、材料不在"这种状态准备的：让源代码本身成为唯一必需输入，其余全部由流水线生产。

传统做法是"把系统跑起来再截图"，但这条路在真实项目里经常走不通：依赖内网环境、许可证已经过期、前端构建链断掉、生产数据不能连。所以这套技能的第一个判断就是——

。它把"看见界面"从"运行系统"里解耦出来，改用"读源码加重绘加截图"达成，于是一套十年前的老系统源码，也能产出一份看起来完整的介绍材料。

正因为不依赖运行环境，技能的定位被明确成"读源码重绘"而不是"抓真实界面"。界面部分靠读前端源码里的外壳布局、表头文案、字段顺序、状态标签，用纯 HTML 重画一个静态页面再高分辨率截图；看不见的架构与流程，则靠内联 SVG 图形讲清楚。两条腿走路，覆盖了"看得见的功能"和"看不见的设计"这两类内容，这也是整套方法能成立的前提。

受众设定同样决定了它的写法。deck 的观众要听懂的是"这个系统在做什么、一笔业务怎么走完、为什么这么设计、边界在哪里"，不是类怎么继承、用了什么设计模式、缓存分了几层。所以整套技能在"如何读代码"这件事上做了有意的裁剪——只从代码里取那些能翻译成业务语言的东西。这个取舍贯穿了后面所有环节，也是它区别于一般代码解读工具的根源。

从血统上看，这个技能由两个更早的技能融合而成：一个是基于源代码做讲解视频的源码勘察与界面重绘流水线，另一个是咨询风格的 1920×1080 版式硬骨架与三大模板库。融合保留了两者的长处，也刻意做了两处根本性改造：界面重绘从深色改为浅色，以与纯白 deck 融合；产物是可直接放映的 deck，不再带配音与时间轴。

二、内容逻辑规划：先决定讲什么，再决定怎么讲

内容规划的第一步不是打开代码，而是问三个问题。

，要具体路径、要确认单仓库还是多仓库、要问清排除目录与对齐的分支版本；

，这是最容易被跳过、也最影响成稿的一问；

，是管理层十分钟过一遍，还是技术评审逐个展开。这三项答案直接决定后面所有工作量，因此技能把它写成硬规则：不要猜、不要默认、不要自己拍板，逐条问、问完复述确认再动手。

第二个问题之所以关键，是因为核心功能页要占整份 deck 三分之一以上的篇幅，选错了整份材料就废了。技能的做法是先把源码扫一遍，再用"三档判据"筛：承担端到端主链路上关键业务动作的、含业务规则或状态机的、构成差异化价值点的，进核心功能章节；字典维护、用户权限、日志监控、导出打印这类通用件一律排除；拿不准的用一句判据裁决——"去掉它，业务链会不会断"，断了就入选，不断就排除。

在核心功能的挑选上还有一条硬约束，它同时是整套技能最有辨识度的设计：

每个核心功能都必须能落到一个看得见的界面

。原因很直接——核心功能页的版式是"左栏讲机制、右栏放截图"，如果挑到一个没有界面的功能，比如纯后端守卫、注册表加载器、定时任务，这一页就做不出来。处理办法是把这类功能移到"技术架构"章节，用架构图或序列图去讲，deck 的结构也随之变得清楚。

数量上技能给了明确区间：短汇报六个核心功能页，标准版八到十个，详细版十二到十五个，十五是硬上限。超过十五个候选时要收口，手段是合并同类项、升维、降级三种——把同一模块的多个子功能合成一页，或把三个相似功能合成"某类操作的三条路径"，或干脆降级到功能架构页的清单里。这一条背后是对注意力的判断：PPT 没有时长上限，但有注意力上限。

章节顺序被固定为：先"是什么"，再"怎么走"，再"怎么搭"，最后"具体怎么做"。也就是系统定位、端到端流程、整体功能架构、技术架构、核心功能逐个看、结语与边界。理由来自观众的认知路径——人总是先建立全局再往里钻；把核心功能页放前面，观众不知道它在系统里处于哪个位置，放最后又太晚。功能架构之后、结语之前，是核心功能页唯一正确的位置。

与顺序配套的还有两个细节。第一，六章标题要写成"读者脑子里的问题"，比如"这是一个什么系统""一笔业务怎么走完""它不做什么"，而不是"第二章 业务流程"这种目录语言。第二，每一页的标题必须写成动作式结论，带动词、带判断，例如"一次录入要过三道关""可处理量不能超过剩余可用量"，而不是"录入页""流程总览图"这样的名词短语。

三、从源码到 PPT：一条五步串起来的转换链路

转换链路的第一段是勘察，目标是**产出一份可汇报的业务大纲，而不是"读懂代码"**。技能把它拆成三个阶段：阶段 A 用十分钟摸清底细，包括技术栈与代码量、入口清单、业务名词提取；阶段 B 是核心功能的筛选；阶段 C 解决其余四章内容从哪来。拿到源码后先做规模探测，把代码量与分层结构报给用户再决定怎么读——三万行以内逐模块读，三万到十五万行按业务动作抽，超过十五万行必须先问用户要讲哪个子系统。

其中最见功力的一步是提取业务名词。技能明确指出：

业务名词藏在配置和模型里，不在代码逻辑里

。读取优先级依次是本体模型与领域模型、UI 模型与页面注册表、权限表与角色资源映射、枚举与数据字典常量、数据库 DDL 或实体类、定时任务与消息队列消费者清单、外部接口对接清单、需求文档与 README。把这些名词按"业务动作"聚合而不是按"技术层次"聚合，大纲骨架自然就浮出来了。

端到端主链路靠追四步找到：触发点在哪里、写操作落到哪些表、状态怎么流转、哪里需要人工介入。触发点看 Controller 入口、定时任务或消息消费者；写操作看持久层落到哪些实体；状态流转看枚举取值怎么变；人工介入点看哪一步必须有人确认。一个系统通常有多条链路，技能要求把候选列出来让用户挑一条主链路，不自己拍板，然后再铺成三页：总览、前半段展开、后半段加异常分支。

界面重绘有一段专门的"还原清单"，共列十类要还原的东西，每一项都写明去哪读。路由表与菜单配置提供页面标题与导航层级，主布局组件决定整体外壳，列的 label 就是表头文案、顺序就是列顺序，表单 schema 里的 label 是字段名、required 决定要不要加红星，CSS 变量里的主色是浅色重绘最重要的输入。技能在这里特意纠正了一个常见误区——不要试图把源码跑起来看真实页面。

还原程度的标准被写成一句话：

结构一比一、文案一比一、数据仿真

。判断方法是一个用过这个系统的人，看一眼就认得出"这是那个页面"，但仔细看数据会发现不是真实数据。外壳布局、导航层级、表头与按钮文案、字段顺序与分组必须像；精确像素间距、图标具体形状、主题皮肤细节、数据真实取值可以不像。画布固定 1600×900、设备像素比 2，出图 3200×1800。

截图之后、写标注之前，中间还有一步被技能单独拎出来强调：

。做法是把界面 HTML 灌进无头浏览器，注入探测脚本，读出每个区块的真实矩形，再换算到 1316×740 的截图本地坐标系；框的四个数直接抄，编号圆标按"框的横坐标减 24、纵坐标加 26"算。之所以非做不可，是因为目测误差常在几十像素，足以让圆标压住卡片标题的第一个字。

后面三步是定蓝图、画图拼 deck、质检交付。蓝图要把每一页的七个字段写全：页码、章节、动作式结论标题、形态、素材来源、源码落点、演讲备注；写不出源码落点的页说明内容没有依据，要么补勘察要么删页。拼 deck 时图形一律从三个模板库里取、不自己造。质检则由脚本按十项逐条扫，交付物是 html、images 目录、蓝图与可追溯表四件，必须整目录一起给。

四、视觉一致性：为什么二十多页看起来像同一套东西

支撑二十多页视觉统一的第一件事是一套"硬骨架"，它的每个数值都是强约束而非建议。画布 1920×1080，背景必须纯白，不允许任何底色或渐变；四边各留 20 像素边距；标题区占纵向 20 到 170，标题 48 像素字重 700 左对齐；紧接着在纵向 170 的位置有一条 5 像素纯黑分隔线，横向拉通顶到画布两侧边缘。骨架一旦被破坏，页与页之间立刻显得不是同一套东西。

在这套骨架之上，每一页动手前必须走一遍"五种形态判定"，顺序是截图页、数据页、架构图页、图形页、文本分类页，优先级从高到低。这一页在讲某个功能的界面和机制吗，是就用截图页，而且有界面就必须用截图页，不许用示意图替代；有数字要对齐比较吗，有就用真实图表；讲的是软件系统的构成、运行或演进吗，是就用架构图页。判定顺序本身就是内容口径的裁决规则。

截图页是这套技能新增的第五形态，也是工作量最集中的一页。内容区 1880 像素被分成左栏 504、间距 60、右栏 1316 三段，右栏正好占七成。左栏按固定节次写：动作式功能名、细分隔线、一句话价值、三条编号机制要点，最后用一条琥珀色的"边界与约束"撑到底部。右栏是 1316×740 的截图容器，用 1 像素灰边描边——不用阴影，因为 Flat Design 禁用阴影。

左栏的三条编号要点与截图上的标注圆标必须一一对应，这是把左右两栏"绑"起来的关键。每张截图放两到四个标注，超过四个说明这一页想讲的事太多、应该拆页。圆标只有两种落点可选：骑在卡片左边线外侧的页面底色带上，不能骑上下边线，因为卡片之间的间隙只有八到十像素，塞不下直径三十四像素的圆标；也不能放框内左上角，那里通常正好是卡片标题文字所在。

反单调是咨询风格最容易翻车的地方，技能把它写成了可机检的硬指标：相邻两页骨架必须不同；截图页连续不超过四页，第五页之前必须插一页架构图、流程图或数据页；等宽卡片网格全篇最多出现两次；文本分类页占比不超过三分之一且连续不超过两页。八个核心功能不要八页连着排，而是在第四个之后插一页"四个功能的共同机制"来调节节奏。

与版式配套的还有配色与取用两条纪律。配色上，全页只有一处真正的红，语义必须唯一，红色只落在最需要被看见的那个组件、那条结论或那处标注上；界面里的状态红则用偏橙的低饱和色，与 deck 的标注红刻意分开，否则观众分不清"这是系统状态"还是"这是你要我看的地方"。取用上，数据页、架构图页、图形页分别从各自模板库里选，一律照抄骨架、只替换文字与数值，不允许自创图形。

五、可信度是怎么生产出来的：证据链、仿真数据与能力边界

这套技能最不像"做 PPT"的地方，是它把可信度当成一项要生产出来的指标。第一条纪律是——

每个技术结论都必须有源码落点

，能指到具体的文件与行号；没找到证据的宁可不写，宁可少一页也不许编一条。为了让这条可核查，技能要求把页面号、功能、源码位置、重绘 HTML、截图文件、标注点全部填进一张可追溯表，质检脚本会检查它的行数是否与核心功能页数一致。

第二条纪律是针对 AI 最容易"顺手补全"的毛病而设的禁忌词表。写"微服务"就必须有多个独立部署单元，写"高可用"就必须有 nginx 配置或集群副本数，写"消息队列"就必须有 MQ 依赖加上生产者与消费者的实际代码，写"缓存层"就必须有 Redis 依赖与配置。技能还要求勘察阶段专门记一份"源码里没有的东西"清单——没有 Docker、没有 ORM、没有消息队列，全部如实记下。

第三条纪律关于数据。重绘界面里的数据全部仿真，源码中出现的真实客户名、账号、金额、内网地址一律不得进入 deck 的任何位置，包括页脚、HTML 注释和图片替代文本；源码里如果有明文密钥或 API Key，不仅要全程规避，还要单独提醒用户源码本身存在安全问题。收尾页必须写明"界面为按源码结构重绘的示意页面"以及数据仿真声明。

第四条纪律是主动声明能力边界。技能要求在结语页从代码里找出明确的限制，比如为什么写操作不开放、白名单边界在哪里、没有回滚机制、只支持单租户，并且主动写出来。这个决定初看有点反直觉——汇报材料通常倾向于只讲优点，但技能的理由很扎实：

，一份主动说出自己不做哪些事的材料，反而让剩下那些"能做"的部分显得更可信。

最后一道关口是机检。质检脚本按十项逐条扫：页面数量与蓝图是否一致、每页是否具备标题与分隔线、截图页三个数字之和是否等于 1880、图片引用文件是否存在、标注坐标是否越界、红色是否只有一个语义、截图页连排是否超过四页、标注数与左栏要点数是否相等、可追溯表是否齐备、是否出现疑似密钥或内网地址。错误项必须清零才算交付。

下面是我原来本体建模的一个源代码项目输出ppt参考：

本文由 人月聊IT 整理，对应技能：

本文系统梳理 code-walkthrough-ppt 技能的制作逻辑与设计思路，共 5 节，逐层拆开"读源码 → 规划内容 → 重绘界面 → 拼成 deck → 质检交付"的全过程。

基于源代码直接生成产品功能介绍PPT技能包-已经发布到WorkBuddy技能市场

开发工具

职业发展

架构设计

本文系统拆解code-walkthrough-ppt技能，聚焦“源码在、材料不在”的痛点，通过读源码、重绘界面、拼deck、质检交付五步流水线，将源代码转化为可放映的产品介绍材料。核心逻辑包括三档功能筛选、界面重绘还原清单、视觉硬骨架及证据链可信度生产，适用于交付型项目汇报场景。

消息队列

数据库

WorkBuddy 

SkillHub

容器

Docker

路由

Redis

Nginx

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

基于源代码直接生成产品功能介绍PPT技能包-已经发布到WorkBuddy技能市场

基于源代码直接生成产品功能介绍PPT技能包-已经发布到WorkBuddy技能市场

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐