全球每天有数十亿人在短视频平台上看做菜。问题是，真到了厨房，你得反复拖动进度条，辨认字幕里一闪而过的"少许盐"到底是多少克。我最近给recipe-finder.org加了个功能：粘贴链接，直接拿到结构化菜谱。

用户旅程很简单。粘贴TikTok、Instagram或YouTube的烹饪视频链接，前端把URL发给后端。后端标准化链接，抓取平台元数据和文本，跑一遍提取流程，返回带标题、食材清单、步骤的干净格式。重复链接会命中缓存，历史记录也能随时调取。

打开网易新闻 查看精彩图片

真正的难点不在输入框，而在"清理"这一步——把社交平台的原始内容变成能照着做的菜谱。

打开网易新闻 查看精彩图片

技术栈用了Vue 3、TypeScript和Node.js/Express。前端入口是个独立页面，需要登录。UI走暗色模式，活跃状态用亮橙色点缀。核心组件管四件事：粘贴的链接、加载和错误反馈、提取结果、最近导入历史。输入放左边，结果放右边，功能逻辑不跨页面散。

前端不直接解析社交内容，这是关键设计。所有链接发给后端专用路由，服务器负责验证请求、标准化URL、查缓存、抓取元数据和文本、把非结构化内容转成菜谱格式。平台解析、速率控制、缓存策略、提取质量，这些本该归服务器管。前端只处理类型安全的响应。

打开网易新闻 查看精彩图片

提取流程不止于"从页面抓点文字"。输出被强制塞进高度结构化的形状：菜谱标题、准备时间、食材、步骤、标准化食材、来源元数据（平台、缩略图、原标题、作者）。结构化结果比原始文本堆好用得多，数据能驱动后续功能，不用重新解析。

这个边界划清楚之后，整个系统的可维护性变好了。前端专注呈现，后端专注理解那些语速飞快、字幕乱跳的烹饪视频到底在说什么。