【标签】 生活娱乐、社会公益
【标题】 【生活娱乐赛道】超会起名 – AI 引经据典智能起名
【正文】先和大家打个招呼吧
我是一名 UI 设计师，做过飞书、企业微信等 SaaS 产品的 UI 设计，也做过金融证券 APP。但系统接触商业模式、从开发到上线这些环节对我来说是全新的领域。这次参赛让我第一次完整体验了一个产品从「想出来」到「做出来」的全过程。
和 TRAE 配合的感受非常真实：我是一个对 HTML/CSS 几乎零基础的人，但 TRAE 让我实现了以前完全不敢想的交互效果。我的设计思路是：先用自然语言把我想实现的画面「讲」给 TRAE，比如"我想要一个 3D 的百家姓星球，鼠标悬停文字旋转到正面放大，点击后光粒散开"——TRAE 会先用 Three.js 实现骨架，我再基于我的设计审美去调整颜色、动画节奏、排版细节。最让我惊喜的一步是当我想要赛博朋克背景时，TRAE 直接用 ShaderMaterial 生成了动态流光溢彩的 GLSL 着色器代码，我作为设计师完全不需要理解底层的 shader 语法，只需要看效果、提调整意见就行了。这种"设计师提需求，AI 做工程实现"的配合模式，是我这次最大的收获。
TRAE 帮我跨过的最大坎：
-
我不会 Three.js，但实现了完整的 3D 交互首页
-
我不会写 shader，但拥有了赛博朋克风格的动态背景
-
我对 JavaScript 逻辑不熟练，但实现了复杂的 hover/click 交互链路
-
Demo 简介
是什么：一款赛博国风 AI 智能起名网站（H5），用户填写基本信息后，AI 从中国古典诗词、经典古籍中生成引经据典的诗意名字。
面向谁：备孕/孕期准父母、新生儿家庭、追求名字文化内涵的年轻父母。
主要功能：
-
3D 交互首页：百家姓以斐波那契球面分布形成立体星球，自转悬浮，鼠标悬停文字自动旋转到正面并放大，点击触发光粒扩散效果后进入表单
-
智能信息填写：支持姓氏自动填入、性别/出生日期/名字字数/避讳字/期望标签等多维度输入，带字段级错误提示，支持单字名/双字名切换
-
AI 诗意起名：生成 5 个引经据典的名字，每个名字配有出处引典、白话解读、MBTI 预测、适合职业方向，支持一键复制名字
-
Freemium 模式：首个名字完整展示，其余 4 个需 ¥9.9 终身会员解锁
（截图：请上传 3D 首页效果、表单填写页、结果卡片页）
- Demo 创作思路
灵感来源： 身边多位朋友在孩子出生前后经历过"起名焦虑"，翻遍各种起名网站，得到的要么是毫无文化根据的随机组合，要么是千篇一律的"梓涵""子轩"式名字。作为设计师，我还发现现有起名网站的视觉体验非常落后，完全无法激发年轻父母的兴趣。
想解决的问题：
-
信息碎片化：起名信息散落在各大网站、APP、社交媒体，缺乏一站式整合
-
缺乏文化深度：大多数工具只是简单组合汉字，无法引经据典
-
交互体验差：UI 老旧粗糙，无法吸引年轻用户
-
缺少解读：即使给名字，也缺少典故故事和诗意解读
为什么做这个方向： 中国上下五千年的诗词歌赋是一座巨大的名字宝库，AI 让"从古籍中智能匹配最适合的名字"成为可能。同时天然契合大赛"古籍活化"附加赛题方向——把古籍诗词通过 AI 转化为日常可用的高频场景，让传统文化"活起来"。
- Demo 体验地址
交互式可体验的 HTML 格式文件，请下载附件超会起名-demo.zip，解压后用浏览器打开超会起名-demo.html 即可体验。
操作说明：
-
打开页面后，3D 星球会自动旋转，鼠标悬停在姓氏上会旋转放大
-
点击任意姓氏 → 光粒扩散效果 → 自动进入表单页，姓氏已自动填入
-
填写性别、出生日期等必填项，选择名字字数（单字名/双字名），点击"AI 智能起名"
-
等待 AI 加载动画（模拟翻阅古籍过程）→ 查看结果卡片，可点击"复制名字"
-
TRAE 实践过程
开发工具：TRAE Work（Auto 模式）
开发流程：
-
需求讨论与方案确定 – 与 AI 讨论参赛方向，确定"生活娱乐赛道 + 古籍活化附加赛题"，选定"AI 引经据典智能起名"方案
-
报名帖撰写 – AI 生成报名帖内容，包含创意介绍、目标用户、痛点分析、商业价值等
-
Demo v1 生成 – AI 生成初始 HTML 文件，包含 4 页 SPA 架构（首页/表单/加载/结果）
-
3D 首页开发 – 使用 Three.js 实现百家姓 3D 球体，包含：
-
Fibonacci 球面分布算法均匀排列 ~160 个姓氏
-
ShaderMaterial 流光溢彩背景 + 四角霓虹光晕 + 动态扫描光带
-
流光线条背景粒子系统（80 条方向随机的线性光丝）
-
鼠标悬停：sprite 从球体 group 脱离，旋转到正面并自然放大
-
点击破碎：120 粒子球形扩散 + 60 粒子环形光环扩散效果
-
-
交互优化迭代 – 多轮调整：
-
去掉首页多余信息，聚焦文字交互
-
修复悬停闪烁（detach/attach 机制）
-
添加表单字段级错误提示（替代 alert 弹窗）
-
支持单字名/双字名切换
-
结果卡片增加"复制名字"功能
-
首页底部增加操作引导文字
-
导航栏透明融合 + 滚动背景渐显
-
关键步骤截图： （请截图上传：1. 3D 首页效果 2. 表单填写页 3. 结果卡片页）
关键任务 Session ID：
-
Session ID 1（初始方案讨论与报名帖生成）：
2358899881280427:11826608608e5920dc476b7e41119302_6a53146b7f44f90b4408102e.6a53146b7f44f90b44081031.6a53146b7f44f90b4408102f:TRAE Work CN.0.1.32.no_sid.no_ppe.T(2026/7/12 12:13:31) -
Session ID 2（3D 首页 Three.js 开发）：
2358899881280427:1309c7d700e376cba1ca0451f0e0b413_6a53146b7f44f90b4408102e.6a5357ca7f44f90b440810f3.6a5357c97f44f90b440810f1:TRAE Work CN.0.1.32.no_sid.no_ppe.T(2026/7/12 17:00:58) -
Session ID 3（悬停交互优化与粒子效果）：
2358899881280427:cb9e5254edd06e4554ad9a06dfa40f24_6a53146b7f44f90b4408102e.6a537e657f44f90b44081133.6a537e657f44f90b44081131:TRAE Work CN.0.1.32.no_sid.no_ppe.T(2026/7/12 19:45:41)
当前状态说明： Demo 阶段名字数据为内置演示数据（男/女各 5 个，均引经据典，含出处、解读、MBTI、职业方向）。复赛阶段将接入 DeepSeek V3.2 API 实现真实 AI 生成，用户输入姓氏、性别、期望后实时生成个性化名字及深度解读。
- 对应的报名审核通过的帖子链接
（请填入你的报名帖链接）
===== 以上为初赛帖子内容 =====