The First Knight
一款以「王国的首席骑士」世界观情感驱动的游戏化短期任务管理系统,帮助用户以"骑士冒险"的叙事框架管理日常目标与进度,将枯燥的任务执行转化为有仪式感的成长旅程。
Resources & Links
产品官网
Product Website
项目文档
Full Documentation
潜在规划问卷
User Research Survey
用户体验问卷
UX Feedback Survey
GitHub Repository
Source Code
📖 完整的项目拆解、竞品分析、用户体验设计、迭代记录等详见飞书项目文档
Background
Key Results
Tech Stack
文档 & 规划 &调研
设计 & 开发
后端 & 部署
Workflow
Process
从需求萌芽到产品落地的完整工作流,每个阶段都有明确的产出与决策依据。
Phase 01
痛点产生 & 需求发现
基于Notion存在交互薄弱、切换操作繁琐等痛点,萌生将Notion内的任务管理文档转化为可独立运行、同时带有原来游戏化叙事的网页。
产出物
Notion原始版本页面 · 初步功能需求清单 · MVP边界定义(P0/P1/P2)
Phase 04
用户画像&竞品分析
基于自我真实痛点向外推导假设用户画像:面向18-25岁习惯自我规划、厌烦传统工具功能繁琐和带来自律焦虑特点,期待游戏化日程安排工具的群体,并通过竞品分析获得行业缺口洞察。
产出物
用户假设画像表格 · 竞品分析表 · 产品设计原则文档
以下为假设用户画像图
Phase 05
信息架构 & 交互设计
围绕"愿景灵感 → 当日任务 → 周任务拆解 → 月度复盘"四大tab搭建用户交互体验系统。
产出物
信息架构图 · 导航结构图 · 用户旅程地图 · 世界观词汇规范
以上为产品信息架构图
以上为用户旅程地图
Phase 06
代码撰写 & 功能迭代
我负责交互逻辑和功能需求描述、prompt撰写、功能漏洞检查;AI负责撰写网页代码和提出建议。
AI负责撰写网页代码和提出建议。每轮迭代遵循:发现问题→撰写提示词→实现优化→更新迭代记录。
产出物
提示词 · 网页代码 · 项目迭代记录
Phase 07
登录数据库 & 网页部署 & APK打包
登录数据库部署:AI指导下对比LocalStorage、Firebase、Leancloud,最终选用Supabase部署用户账户登录的数据库,实现邮箱注册登录、云端JSON数据存储等。
网页部署:并用Github和Cloudflare部署为独立网页;
移动端打包:使用Capacitor将网页封装、Andriod Studio构建APK安装包,并用github获取下载URL。
产出物
拥有登录系统的独立网页Demo · APK安装包 · APK下载直链
Phase 09
用户研究问卷设计 & 可用性测试规划
设计潜在需求调研问卷和产品用户体验反馈问卷,并设计用户跳转填写问卷的逻辑链路。
并设计后续可用性测试内容和迭代优先级。
产出物
两份问卷 · 可用性测试提纲 · 带用户问卷的宣传网页和产品
Phase 10
完善项目文档 & 项目复盘与反思
完整走完该产品项目从痛点挖掘与需求落地、用户画像假设、用户体验设计、AI协作代码落地到更新迭代、技术部署、产品宣传包装全链路,检查和完善项目文档,并进行项目复盘与反思总结。
产出物
项目文档
Self Review
Sessions
🎙️ 项目开发过程中的阶段性自我评审、复盘和安排的模拟会议,经 AI 提炼整理核心要点。
以下内容由模拟会议时的录音转写文本经 AI 智能总结生成,并提炼了项目迭代思考、技术决策与阶段性复盘过程的要点记录进该项目展示网页。
📌 项目管理规划
项目日志框架搭建→功能需求梳理(含数据库/登录系统)→网页部署→用户反馈收集→品牌宣传页制作→作品集整合。
⚠️ 任务优先级调整
原定深大一体化服务平台项目延后,当前聚焦需要更大板块时间的The First Night项目,后续可能同步推进Career OS项目原型图。
🔀 团队协作规范
日志框架搭建:需同步完成用户操作流程图与信息架构图设计,边开发边完善文档,每次迭代的提示词都要记录进文档迭代日志中。
🔎 工作经验复盘总结
1、提示词整合原则:同个功能所有需求需整合为完整提示词后统一提交AI,避免碎片化修改导致token浪费及记忆混乱。
2、任务拆分执行:禁止整体网页修改,采用每日聚焦单个功能模块迭代方式。
📌 项目日志文档收尾工作
今日下午需完成项目日志文档收尾工作,重点完成信息架构图、全局导航图、用户操作流程图、用户旅程图4个图的绘制,并搭建文档框架(预计耗时2小时以上,含AI辅助)。
❗ 当日任务要求
网页新增功能:开发团队需同步完成新增功能研究,包括任务设置、数据迁移、版本检查、隐私政策等模块,需形成第二版提示词文档并提交审核(截止时间:今日24:00前)。
🎯 下阶段工作安排
1、部署计划:HTML通过验收后需部署为独立页面,并启动离线APP打包工作。
2、宣传准备:需同步推进广告宣传网页制作、用户反馈调查问卷设计及可用性测试方案制定。
⚠️ 里程碑节点&最终交付物
今日工作为项目关键节点,需完成文档框架搭建、新增功能确认、提示词文档提交三项核心任务,直接影响后续HTML开发质量。
交付物:1、今日0点前:UX设计图完整的项目日志文档、包含完整设置功能的HTML文件;2、明日15:00前:开启部署独立网页工作准备。
📌 昨日项目工作总结
1、项目日志框架搭建:已完成项目日志中UX图框架的初步搭建,部分迭代日志等内容需后续自动填充。
2、功能迭代进展:HTML版本已迭代至第三版。
🎯 当日工作优先级&要求
1、HTML功能迭代收尾:核心功能优先:当日必须完成全部核心功能迭代,禁止新增非必要功能。计划于当日完成全部功能迭代,得到HTML最终版。
2、HTML增加开场动画设计原则:开场动画需控制在2-3秒内,仅新用户可见;禁止设计冗长新手教程。
3、成就系统搁置:因开发周期紧张,原定的成就勋章系统延期至后续版本。
🎯 下阶段工作安排
1、登录系统部署:计划完成HTML最终版本迭代后,次日搭建数据库与登录系统,该节点为项目里程碑,预计耗时较长。
2、调研问卷分工:由UX组负责设计,用户反馈问卷URL将嵌入APP,而需求调研问卷UR嵌入宣传网页,所以反馈问卷嵌入后再部署apk版本。
Retrospective
Review
复盘与反思,记录成长轨迹与下一步方向。
项目收获与能力提升
- ● 用户体验研究和设计 — 提升了用户画像推导和假设能力,从用户痛点出发进行信息架构设计
- ● 用户调研落地 — 设计并回收两份结构化问卷,将数据驱动决策融入开发流程
- ● 视觉系统统一搭建 — 完成产品 + 官网两套视觉体系的设计与一致性维护
- ● 完整闭环产品迭代思维 — 从调研到上线全链路独立交付,建立版本管理意识
- ● BaaS 后端部署 — 首次独立完成 Supabase 认证体系与数据库 schema 设计
- ● WebView 跨端打包 — 掌握 Capacitor + Android Studio 完整 APK 打包流程
项目现存局限与不足
- ○最开始未先进行用户调研再进行用户体验设计,仅从假设用户画像出发设计该产品
- ○真实用户样本量有限,调研结论需更大规模验证
- ○AI生成网页代码时仅提供提示词,未先用figma进行原型图设计
- ○WebView 方案存在部分原生能力缺失(如系统级推送通知、后台常驻)
- ○账号安全机制尚不完善,缺少双因素认证与异常登录检测
- ○My Kingdom 母系统尚未开发,当前 TFK 作为独立子系统运行
后续迭代优化规划
- ▸使用小红书、即刻进行产品宣传
- ▸启动可用性测试并扩大用户调研规模,收集真实使用反馈驱动 v3.0 功能迭代
- ▸启动 My Kingdom 母系统开发,TFK 作为子系统嵌入统一世界观
Designer
About
关于这个项目与设计者。
琳琳
Product Designer & Developer
深圳大学 网络与新媒体专业在读,专注于用户体验设计与产品管理方向。热爱将创意落地为可交互的数字产品,相信好的设计源于对用户的真实理解。
About This Project
The First Knight 是我独立完成的第一个从 0 到 1 的完整产品项目。它不仅是一个任务管理工具,更是我探索"叙事化产品体验"的起点——如何让功能性产品拥有情感温度,让用户在完成任务的同时感受到成长的仪式感。
这个项目帮助我建立了完整的产品思维框架:从发现痛点、定义需求、设计方案、技术选型、开发迭代到上线运营,每一个环节都让我对"做一个产品"这件事有了更深的理解。