PawList
让宠物航空出行的准备工作，变成一份可以逐项打勾的清单。
PawList 是一款轻量移动应用。用户填写行程与宠物信息后，App 会生成个性化的出行清单——预订、证件、承运箱、疫苗——并以准备度进度实时追踪， 把分散在航司政策与检疫规定里的信息，整理成有时间线的行动项。
角色
产品设计 · UI
类型
移动端 App
工具
Figma · Vibe Designing
时间
2026
02 · WHY I BUILT PAWLIST
这是我自己经历过的问题。
宠物航空出行的难点，不在于某一件事有多复杂，而在于信息散落在各处。
带宠物坐飞机，主人需要同时应对航司政策、目的地入境要求、疫苗记录、健康证明、申请材料， 以及一堆彼此不同的时间节点。
这些信息分散在不同来源，没有一个统一的地方告诉你「现在该做什么」—— 于是漏掉一个关键步骤变得非常容易。
一切从把我自己的猫带回家开始。
毕业准备回国的时候，我同时要为我的宠物安排一次跨国出行。
那段时间还夹着毕业、搬家、打包和离境准备。原本以为只是「订个票、办点手续」， 结果变成了一长串预约、文件、申请和反复确认。
4×
次兽医就诊
1×
份文件翻译
2×
项申请提交
以及数不清的、在航司政策、健康文件和入境要求之间来回的核对。
我真正的旅行搭子 →
Fanta —— PawList 开始的原因。
03 · AI-ASSISTED PRODUCT DEVELOPMENT
我用 AI 加快速度，而不是让它替我做决定。
PawList 是在产品思考、视觉探索与 AI 辅助开发之间反复迭代出来的。
我负责定义产品方向、用户流程、功能边界、交互逻辑与视觉标准；AI 负责快速探索备选方案、把规格翻译成界面，并实现一个可运行的移动端原型。
MY ROLE · 我的角色
定义问题、做出产品决策、设定约束、评估产出，并决定什么可以上线。
AI'S ROLE · AI 的角色
加速探索、生成、实现与迭代。
把一个个人痛点，收敛成一个聚焦的产品
我先定义了 PawList 最简单的那条主线：行程信息 + 航空公司 + 宠物 → 个性化清单 → 追踪准备度。 我用 AI 对话去挑战范围、确认必要输入，并把概念整理成结构化的 PRD。
- 生成一份有用的清单，究竟需要哪些信息？
- 用户在创建行程前，是否必须先登录？
- 哪些功能是核心出行准备旅程真正需要的？
- 哪些功能会让 PawList 不必要地膨胀成一个宠物平台？
EARLY PRODUCT LOGIC
↓
↓
↓
↓
↓
KEY PRODUCT DECISION · 关键产品决策
PawList 保持为一个轻量的出行准备工具，不加入机票预订、宠物社区、商城等与核心任务无关的功能。
Early AI collaboration — defining PawList’s product scope and core flow
在确定方案之前，先把视觉方向探索一遍
我从一个视觉参考出发：柔和的马卡龙色、有机几何形状、强烈的黑色字体。 通过多轮 AI 生成的界面探索，我测试了同一个产品可以有哪些不同的结构表达。
Variant A — Readiness Ring
Selected以 Travel Readiness 环形进度作为核心视觉，结合行程信息、宠物信息和 Checklist Preview，形成清晰的一屏任务总览。
Variant B — Progress Card
大尺寸清单卡片与横向进度条。
Variant C — Modular Dashboard
行程、宠物、清单信息拆成模块卡片。
Variant D — Pet-first Exploration
尝试以大型宠物照片作为主要入口，并通过点击进入宠物对应的 Checklist。这个方向增强了宠物中心化的情感体验，但最终未作为主方案。
WHAT I KEPT · 我保留的
- ✓Travel Readiness 作为核心视觉指标
- ✓宠物中心化的产品身份
- ✓马卡龙分类配色系统
- ✓圆角功能卡片
- ✓简单直接的 Checklist 交互
WHAT I CHANGED · 我调整的
- →减少不必要的装饰元素
- →简化信息层级
- →提升行程信息的可读性
- →调整 Checklist 密度和任务结构
- →在后续探索中测试 Pet-first 交互，但未替代 Readiness Ring 主结构
最终我选择了 Variant A — Readiness Ring 作为 PawList 的核心视觉方向。
Travel Readiness 环形进度能够把 Trip Details、Pet Profile、Airline、Documents 和 Carrier Prep 等准备状态集中在一个视觉中心，让用户无需进入详细任务页，也能快速理解当前行程准备程度。
后续我仍继续探索了 Pet-first 等交互方向，但最终产品保留了 Variant A 的核心结构，并在实现过程中进一步简化信息层级和 Checklist 展示。
AI 生成可能性；我把它们放回产品目标里比较，只留下真正提升清晰度的部分。
把视觉偏好，翻译成明确的设计约束
AI 生成界面最大的问题之一是「视觉漂移」：每一轮迭代都会悄悄偏离原来的风格。 与其每次都用自然语言重新描述一遍，我把选定的视觉方向写成一份可复用的 Style.md， 转化成具体的设计规则。
# Style.md
## COLOR
## TYPOGRAPHY
Bold rounded headings
Highly readable body typography
Large numeric emphasis for readiness & progress
## SPACING
4pt base grid · 8pt layout rhythm
24px screen padding · 16–24px card spacing
## RADIUS
10px small · 16px input · 20px card
24px hero card · 999px pill
COMPONENT RULES
- 黑色主要 CTA
- 马卡龙分类图标
- 细边框
- 极少的阴影
- 大圆角卡片
- 一致的清单状态
Style.md 成为设计意图与 AI 实现之间的桥梁。
Style.md 截图 · 色彩 token · 字体 token · 组件示例
从规格说明，到一个可运行的移动端原型
在产品流程与视觉体系确定之后，我用 Codex 作为编码代理，把产品需求翻译成一个可运行的 React Native / Expo 应用。它承担了大部分实现工作，而我以产品负责人和设计师的双重身份审阅结果。
I PROVIDED · 我提供
- PRD
- 用户流程
- 交互规则
- 视觉参考
- 设计约束
- 反馈
CODEX IMPLEMENTED · Codex 实现
- React Native / Expo
- 页面结构
- 可复用 UI 组件
- 导航
- 清单交互
- 状态更新
「能跑起来」并不等于「可以交付」。每一次实现，仍然要回到产品意图上被检查一遍。
ITERATION · 从视觉方向到可运行界面
通过迭代，把想法收敛成更清晰的界面
第一版实现并不会完全贴合预期，因此我通过对照设计参考图与实际运行界面， 持续识别问题并迭代优化，直到界面层级、信息可读性和任务结构更清晰。
TARGET · 参考方向
Variant A — Readiness Ring
以 Travel Readiness 环形进度为核心视觉，形成一屏任务总览。
ITERATION WORK · 本轮主要优化
01调整圆环区域信息层级
- ·调整字体大小与间距
- ·避免圆环周围的信息标签互相重叠
- ·让环形进度及周边标签分布更均匀、更居中
02强化上方核心信息
- ·让宠物信息卡更显眼
- ·让航班 / 航线信息更容易被快速识别
- ·提升首页顶部信息的视觉优先级
03提升 Checklist 可读性
- ·让下方 checklist 的标题与说明文字更清晰
- ·优化字号、行距与层级
- ·让用户更容易快速扫描任务内容
REFINED UI · 迭代后结果
Home — 迭代后实现
根据设计目标与实际实现差异，持续调整后的界面版本。
圆环更清晰
Travel Readiness 环形结构更加居中，标签不再重叠，信息分布更稳定。
顶部信息更突出
宠物卡与航班信息成为更明确的第一视觉层级。
Checklist 更易扫读
任务标题、说明与状态的可读性更高，用户更容易理解下一步行动。
并不是每一个探索方向都会进入最终结果，真正保留下来的，是那些同时提升清晰度与可用性的部分。
FINAL PRODUCT
最终成品
经过多轮产品、视觉与实现迭代，PawList 最终形成了一套可以实际运行的移动端原型。
Final screens · 点击图片可放大
AI COLLABORATION SUMMARY
AI 缩短了「一个想法」到「一个我能真正测试的东西」之间的距离。
最大的变化并不是界面生成得更快，而是当产品规格、视觉约束、编码代理、截图反馈与反复评估结合起来之后， 我可以在下面这个循环里持续移动，而不必把设计与实现当成两个割裂的阶段。
ChatGPT
产品思考 · PRD · 设计探索
Claude
产品逻辑 · 备选方案探索
Codex
React Native / Expo 实现
Figma / 视觉参考
设计评估与界面方向