对话式入门表单

制作一个多步骤的用户注册/入门引导表单，收集以下信息：姓名、职业方向（提供几个选项）、工作中最大的挑战（开放文本）、期望的使用频率。 不要做成传统的分步表单，而是寻找一种更自然、更像对话的交互方式——每一步的过渡、反馈、进度感都要经过设计，最后一步要有一个有温度的完成状态。 全程不允许出现"下一步"这个按钮文字，要用更准确、更友好的表达。 请输出完整的HTML。

为一个虚构产品制作一个用户入门引导表单——它是用户首次注册后被引导填写的"自我介绍"步骤。这个表单要收集 4 项信息，但请不要把它做成传统的 4 步分页表单。寻找一种让用户感觉像是被一个温和的人主持着、一步步聊着填完信息的体验。 **收集的字段（4 项，顺序固定）** 1. **姓名 / 昵称**——一个开放文本输入，用户填写他们想被怎么称呼（不是真名，而是希望被称呼的名字） 2. **职业方向**——单选，提供至少 6 个选项（建议：设计、工程、产品、运营 / 市场、写作 / 内容、研究 / 学术、创业 / 自由职业、学生、其他）；"其他"选项被选中时应当出现一个补充输入框 3. **工作中最大的挑战**——开放文本（长文本输入），提示用户随便聊聊他们目前最头疼的事；至少要有 200 字符以上的输入空间 4. **期望的使用频率**——单选，提供 3-4 个选项（建议：每天都来、每周几次、偶尔逛逛、不确定）；选项的文字本身要有温度，不要做成"高 / 中 / 低 / 不确定" **硬约束（题眼，不允许违反）** 1. **全程不允许出现"下一步"这个按钮文字**——也禁止"Next" / "继续" / "下一题" / "进入下一步"等近义偷懒翻译。每一步推进的按钮文案必须根据当前情境**重新设计**，比如收集完姓名后的按钮可能是"那么——" / "好的，林晓" / "继续聊一聊？"——文案要符合此刻的对话语境，不能是通用占位 2. **不允许做成传统的"4 个分页 + 进度条 + 上下两个大按钮"模板**——要寻找一种更像"对话流"的呈现方式：可以是上下滚动展开的对话气泡、可以是问题与回答交替出现的卡片堆叠、可以是一段渐渐展开的文字流、可以是任何让人觉得"这是在和一个人聊"的呈现 3. **每一步的过渡都必须经过设计**：上一步收起 / 下一步出现的过程要有恰到好处的动画（淡入淡出 / 错位移入 / 高度展开 / 文字打字效果等任选），不允许硬切；过渡时长建议 300–600ms 4. **必须包含"前一步可改"的反悔机制**——用户一定会改前面的回答，要给到一个自然的方式回看 / 修改前面填过的内容（往上滚 / 点击之前的回答 / 一个不抢戏的"改一下"链接皆可），不要做一个孤零零的"上一步"按钮 5. **最后一步要有一个有温度的完成态**——所有信息填完之后，最后一步不是冷冰冰的"提交成功"，而是一个根据用户填写的内容"读懂他 / 她"的完成画面（比如根据职业 / 频率 / 名字组合出一句温暖的欢迎话术 / 一个可视化的"小卡片"汇总他刚填的信息 / 一段为他 / 她写的迎接文字） **整体气质** - 像一位有耐心的产品经理在桌子对面陪你聊几分钟，而不是一个 KPI 驱动的注册漏斗 - 文案克制不肉麻——温暖不等于"亲爱的~ 哈喽宝宝~"，而是用"成年人之间"的亲切感 - 视觉简洁：一次只让用户专注于一件事，不要在屏幕上同时塞 4 个表单 - 配色与字体应当传达"温和而专业"——避免饱和度过高的霓虹色，避免过分严肃的纯黑白 **功能要求** - 表单的每一项填写必须真实可用——单选会高亮、输入框会响应输入、"其他"补充框会动态出现 - 用户的输入应当通过 `localStorage` 暂存，刷新后能恢复进度（不要让用户填到一半丢了） - 完成态可以根据用户的填写内容生成个性化的欢迎文案 / 卡片 - 至少在某一步使用上一步的回答（最常见：用姓名称呼用户）让对话感真正成立 **技术要求** - 输出一个完整可运行的单文件 HTML，所有 CSS / JS 内联或走 CDN，不依赖任何本地资源 - 适配桌面端（≥ 1280×800）和手机端 - 允许通过 CDN 引入 Google Fonts、动画库（GSAP / Motion / anime.js / framer-motion 不可，但 motion-one 可） - 过渡动效必须流畅（≥ 30fps），缓动曲线要柔和 - 不强制要求后端，所有数据存 `localStorage` 请输出完整的单文件 HTML。