Naming / Playground

Selected

NameLab

名字测试 · 取名灵感实验站

Created 2026-01-31Updated 2026-02-05

一个轻量但体验完整的“名字测试”Demo:多模式(气质画像 / 语感寓意 / 情侣匹配 / 英文名推荐),可分享链接、导出结果卡片,并保留本地历史。

Web AppLiveWeb
NamingUXShareGenerator

Outcome

结果与影响

  • 四种模式 + 统一表单交互(快速切换)。
  • 结果卡片:可复制分享文案/链接、可下载 PNG。
  • 结果历史:本地保存,便于回看与对比。

Decision

关键决策与取舍

  • 四种模式 + 统一表单交互(快速切换)。
  • 结果卡片:可复制分享文案/链接、可下载 PNG。
  • 结果历史:本地保存,便于回看与对比。

Evidence

可验证证据

  • 单文件静态站点(HTML/CSS/JS),部署到 Vercel。
  • 使用 URLSearchParams 实现可分享状态。
  • Canvas 导出结果卡片 PNG(无需后端)。

Flow

关键路径(从打开到完成一次任务)

Input → Choose Mode → Generate → Share

NameLab flowInputChoose ModeGenerateShare

Product shape

这次交付的真实形态

  • Format:Web App
  • Status:Live
  • Platforms:Web
  • 体验重点: 页面结构、交互路径与实时反馈。

Screenshots

UI snapshots

用截图快速理解页面结构、视觉层级与交互状态。

NameLab screenshot — Cover
Cover

Case Study

先看结果、决策与证据

先看结果、关键决策与证据,再回看过程与实现。

Outcome

结果与影响

  • 四种模式 + 统一表单交互(快速切换)。
  • 结果卡片:可复制分享文案/链接、可下载 PNG。
  • 结果历史:本地保存,便于回看与对比。

Decision

关键决策与取舍

  • 四种模式 + 统一表单交互(快速切换)。
  • 结果卡片:可复制分享文案/链接、可下载 PNG。
  • 结果历史:本地保存,便于回看与对比。

Evidence

可验证证据

  • 单文件静态站点(HTML/CSS/JS),部署到 Vercel。
  • 使用 URLSearchParams 实现可分享状态。
  • Canvas 导出结果卡片 PNG(无需后端)。

Role

承担角色

  • 名字测试 · 取名灵感实验站

Problem

核心问题

  • “名字测试”本质是一个高频、低门槛的互动内容形态:输入成本低、输出反馈强、天然适合分享。这个 Demo 先把体验链路做对,再考虑规模化内容与模型。
  • 个人:取名灵感、昵称/英文名生成。
  • 情侣:互动玩法与分享传播。

Constraints

约束条件

  • Format: Web App
  • Status: Live

Background

为什么做

“名字测试”本质是一个高频、低门槛的互动内容形态:输入成本低、输出反馈强、天然适合分享。这个 Demo 先把体验链路做对,再考虑规模化内容与模型。

Scenario

应用场景

  • 个人:取名灵感、昵称/英文名生成。
  • 情侣:互动玩法与分享传播。
  • 产品:验证“输入→结果→分享→回流”的增长闭环。

Delivery

实现了什么

  • 四种模式 + 统一表单交互(快速切换)。
  • 结果卡片:可复制分享文案/链接、可下载 PNG。
  • 结果历史:本地保存,便于回看与对比。

Design

设计要点

  • 把“确定性”做成体验:即时反馈、可撤销/可回看。
  • 分享优先:URL 参数化 + 一键复制。
  • 移动端可读:卡片与结果层级对齐小屏浏览习惯。

Tech

技术实现

  • 单文件静态站点(HTML/CSS/JS),部署到 Vercel。
  • 使用 URLSearchParams 实现可分享状态。
  • Canvas 导出结果卡片 PNG(无需后端)。

Try it

看完介绍,继续探索

建议沿着项目的核心流程进行体验(如搜索、预览、导出、播放等),以评估信息结构与交互一致性。

NameLab cover

Live preview

部分站点可能因为安全策略无法被嵌入;遇到空白时请用上面的 Open live。

Related work

继续看相关项目

这里保留与当前项目更接近的入口,方便继续横向浏览。