TAVELLA
AI Full-Pipeline Travel PlatformAI 全管线旅行平台
One designer, one AI team, one complete product. I built seven specialized AI roles, a memory system, version controls and quality guardrails — orchestrating the full pipeline from market research, PRD, data, AI imagery, stickers, brand to merch.一名设计师、一支 AI 团队、一个完整产品。我搭建了七个专业分工的 AI 角色、记忆系统、版本基线与质量护栏——统筹从市场调研、PRD、数据、AI 影像、表情包、品牌到周边的完整管线。
Not "made a few images with AI" —
ran an entire product pipeline with an AI team.不是“用 AI 画了几张图”——
而是带着一支 AI 团队跑完了整条产品管线。
Every stage has a real deliverable, and each deliverable feeds the next: research grounds the brief, the PRD defines the system, data powers recommendations, media and stickers build emotional resonance, brand and merch crystallise the IP. Underpinning all of it is an AI collaboration infrastructure I built from scratch.每个阶段都有真实交付物，且环环相扣：调研夯实需求，PRD 定义系统，数据驱动推荐，影像与表情建立情感共鸣，品牌与周边把 IP 结晶成型。支撑这一切的，是我从零搭建的一套 AI 协作基础设施。
Designer + AI Workflow Architect设计师 + AI 工作流架构师
I didn't just make this product —
I designed the way it got made.我不只是做出了这个产品——
我设计了它被做出来的方式。
The traditional approach takes at least four people — designer, frontend, backend, product manager — over several weeks. My approach: treat the AI collaboration workflow itself as a design object — deciding which tasks go to which AI role, how to enforce quality guardrails, and how to automate repetitive work.传统做法至少需要设计、前端、后端、产品四个人干上几周。我的做法：把 AI 协作工作流本身当作设计对象——决定哪类任务交给哪个 AI 角色、如何强制执行质量护栏、如何把重复劳动自动化。
Orchestrate统筹
Built a seven-person AI team with Claude Code Subagents — each with an independent context and specialisation, auto-delegated and coordinated by task type.用 Claude Code Subagents 组建七人 AI 团队——各自拥有独立上下文与专长，按任务类型自动分派与协同。
Guardrail护栏
Used Hooks to establish deterministic quality gates: every code edit auto-triggers a syntax check, blocking bad code on the spot — no relying on memory.用 Hooks 建立确定性质量门：每次代码修改自动触发语法检查，坏代码当场拦截——不靠人的记性。
Judge判断
When to accept an AI suggestion, when to push back, which features deserve polish — judgment is the irreplaceable core.何时采纳 AI 的建议、何时驳回、哪些功能值得打磨——判断力是不可替代的内核。
How this AI pipeline actually runs这条 AI 管线究竟怎么运转
Seven AI roles and three infrastructure layers, tightened into a repeatable, guardrailed operating loop in real development. Every feature iteration follows these six steps strictly — this mechanism is why "end-to-end solo delivery" actually holds.七个 AI 角色与三层基础设施，在真实开发中被拧成一条可重复、有护栏的运转回路。每次功能迭代都严格走这六步——正是这套机制，让“一个人端到端交付”真正成立。
Brief下达Brief
I give a role one plain-language instruction — "Yangxin, add a nearby-picks module to the Explore page", "Yanyan, compress this sticker batch to under 95 KB". No code written — just intent and acceptance criteria.我用一句大白话给角色下指令——“杨昕，给探索页加一个周边推荐模块”“炎炎，把这批表情压到 95 KB 以内”。不写一行代码——只给意图和验收标准。
Delegate分派Delegate
Claude Code routes by task type to the right Subagent, executed in an isolated context. Side-branch intermediaries — research, compression, code edits — stay quarantined; only results return to the main thread, keeping the primary conversation clean.Claude Code 按任务类型路由给合适的 Subagent，在隔离上下文中执行。调研、压缩、改码等旁支过程被隔离在外；只有结果回到主线程，主对话始终干净。
Discipline纪律Discipline
All edits to the 3,442-line single file follow a fixed protocol: Python str_replace with a count assertion (guarantees a unique hit) → extract three <script> blocks and run node --check on each → sync to TAVELLA_final/index.html. Human error is almost entirely absorbed by process.对这份 3,442 行单文件的所有修改都走固定流程：Python str_replace 配计数断言（保证唯一命中）→ 抽出三个 <script> 块逐一跑 node --check → 同步到 TAVELLA_final/index.html。人为失误几乎全部被流程吸收。
Guard拦截Guard
The PostToolUse Hook auto-fires a syntax check after every file write. A SyntaxError triggers immediate exit 2, blocking and reverting bad code on the spot — it never reaches the file. The quality gate is deterministic, not memory-dependent.PostToolUse Hook 在每次写文件后自动触发语法检查。一旦出现 SyntaxError 立即 exit 2，当场拦截并回退坏代码——它根本到不了文件里。质量门是确定性的，不依赖记性。
Judge判断Judge
Above the machine checks comes a QA pass: Yibing tests complex filter combinations and payment-flow edge cases honestly, without softening results for speed. Once it passes, I make the human call: does the interaction feel right, is the visual good enough, should this be scrapped and restarted. Accept / iterate / discard — the decisions AI cannot make for me.机器检查之上还有一道 QA：一冰如实测试复杂筛选组合与支付流程的边界情况，不为赶进度而美化结果。通过之后由我做人的裁决：交互手感对不对、视觉够不够好、要不要推倒重来。采纳 / 迭代 / 废弃——这些是 AI 无法替我做的决定。
Ship交付Ship
The reviewed version is repackaged into a deployable zip, committed as the new baseline, and the loop begins again. Cowork scans changed files on a schedule and generates a weekly progress report, keeping long-cycle projects always traceable.评审通过的版本重新打成可部署 zip，提交为新基线，回路再次开始。Cowork 定时扫描变更文件并生成周报，让长周期项目始终可追溯。
Not one person using AI —
an AI team collaborating.不是一个人在用 AI——
是一支 AI 团队在协作。
Built on the Claude Code Subagents system, I assembled seven AI roles each with a distinct specialisation. Every role has an independent context window, dedicated skills, and full memory of the TAVELLA project. Deployed globally, reusable across projects — the core engine of the entire workflow.基于 Claude Code Subagents 体系，我组建了七个各有专长的 AI 角色。每个角色拥有独立上下文窗口、专属技能，以及对 TAVELLA 项目的完整记忆。全局部署、跨项目复用——是整个工作流的核心引擎。
Each role is a .claude/agents/*.md file defining identity, skills, and project context. When I say "Yangxin, fix this bug" or "Yanyan, compress this batch", Claude Code handles it through that role's specialisation — and will auto-delegate to the best fit based on task type.每个角色都是一份 .claude/agents/*.md 文件，定义身份、技能与项目上下文。当我说“杨昕，修这个 bug”或“炎炎，压这批图”，Claude Code 会调用该角色的专长处理——也会按任务类型自动分派给最合适的角色。
Research first — lay the foundation调研先行——打地基Research · Foundation
Led by AI product manager Anqi, using AI for market and competitive research and audience insight — distilling the vague ambition of "build a Singapore travel product" into clear persona profiles and core pain points, which became the shared foundation for the PRD, data, and recommendation logic.由 AI 产品经理安琪主导，用 AI 做市场与竞品调研、受众洞察——把“做一个新加坡旅行产品”的模糊愿望，提炼成清晰的人群画像与核心痛点，成为 PRD、数据与推荐逻辑的共同地基。
Persona · 5 Traveller Segments人群画像 · 5 类旅行者
Pain Points · Core FIT Friction痛点 · 自由行核心摩擦
- 01High decision cost: scattered attraction info leads to cross-district detours and time conflicts.决策成本高：景点信息零散，导致跨区绕路与时间冲突。
- 02No personalisation: recommendations sorted only by popularity or price, not matched to traveller type.没有个性化：推荐只按热度或价格排序，不匹配旅行者类型。
- 03No itinerary view: users get a list of attractions, not an actionable timetable.没有行程视图：用户拿到的是景点清单，而不是可执行的时间表。
- 04Ignores weather: afternoon downpours are common; plans that don't account for rain hurt the experience.忽视天气：午后暴雨常见；不考虑下雨的计划会毁掉体验。
Turning ideas into a system with AI用 AI 把想法变成系统PRD · Product Definition
Anqi produced two paired PRDs: the Product PRD maps the full loop of "scroll-scene narrative → select attractions → AI itinerary → add to cart → checkout"; the TAVELLA Intelligent Recommendation System defines an explainable, tunable recommendation engine (collect → recall → score → arrange → rain adaptation → feedback).安琪产出两份配套 PRD：产品 PRD 描绘“滚动场景叙事 → 选景点 → AI 行程 → 加购 → 结账”的完整闭环；TAVELLA 智能推荐系统则定义了一个可解释、可调参的推荐引擎（收集 → 召回 → 打分 → 编排 → 雨天适配 → 反馈）。
Feeding accurate data to filters and recommendations给筛选与推荐喂准数据Data · Single Source of Truth
Backend engineer Qibing built the attraction master data table: 45 attractions × 32 fields — district, coordinates, suitable personas, time slots, indoor/outdoor, ticket price, rating, recommendation score, rain sensitivity and alternatives… every column directly serves filter accuracy and recommendation scoring.后端工程师祁冰建起景点主数据表：45 个景点 × 32 个字段——区域、坐标、适配人群、时段、室内外、票价、评分、推荐分、雨天敏感度与替代方案……每一列都直接服务于筛选准确性与推荐打分。
| Attraction景点 | District区域 | Best For适合人群 | Price S$票价 S$ | Score推荐分 | Rain Risk雨天风险 |
|---|---|---|---|---|---|
| Fantasy Garden梦幻花园 | City市区 | Couples · Families · Friends情侣 · 家庭 · 好友 | 12 | 88 | Low低 |
| Gardens by the Bay滨海湾花园 | City市区 | Couples · Families · Business情侣 · 家庭 · 商务 | 32 | 96 | Med中 |
| SkyPark Infinity Pool金沙空中无边泳池 | City市区 | Couples · Friends · Business情侣 · 好友 · 商务 | 39 | 93 | Med中 |
| ArtScience Museum艺术科学博物馆 | City市区 | Couples · Friends · Business情侣 · 好友 · 商务 | 35 | 94 | Low低 |
| National Gallery SG新加坡国家美术馆 | Civic政务区 | Couples · Friends · Business情侣 · 好友 · 商务 | 20 | 90 | Low低 |
An AI media system that "swaps the protagonist"一套会“换主角”的 AI 影像系统Persona-Adaptive Media
Creative designer Yanyan systematically generated video and image prompts for 16 attractions × 5 personas, producing 279 video + 205 image prompts. The key innovation: the site auto-matches video protagonists to the user's selected persona — pick "Families" and you see family scenes; switch to "Couples" and the shot changes — giving the planning stage a sense of personal immersion.创意设计师炎炎为 16 个景点 × 5 类人群系统化生成视频与图片提示词，产出 279 条视频 + 205 条图片提示词。关键创新：网站会按用户选择的人群自动匹配视频主角——选“家庭”看到的是全家场景；切到“情侣”镜头随之改变——让规划阶段就有身临其境的代入感。
Let Claude build the design in Figma,
then let Claude turn the design into a website让 Claude 在 Figma 里搭设计，
再让 Claude 把设计变成网站
Designer Luqi used Claude-driven Figma (MCP) to build page structure, components, and design specs — prototype, grid, and design tokens produced in one pass. The design was then handed back to Claude to deliver as real, working website code. Design and implementation run on the same AI pipeline. Most recently: the four time-of-day sky colour schemes (dawn / day / dusk / night) were built by Claude in Figma as a 17-variable Variable Collection — code and design file now share a single source of truth, bidirectionally in sync.设计师璐琪用 Claude 驱动的 Figma（MCP）搭建页面结构、组件与设计规范——原型、栅格、设计令牌一次产出。设计再交回 Claude，交付为真实可运行的网站代码。设计与实现跑在同一条 AI 管线上。最近一步：四套时段天空配色（晨/昼/暮/夜）由 Claude 在 Figma 建成 17 变量的 Variable Collection——代码与设计稿共享同一事实源，双向同步。
Drive Figma to generate real page structure, components and design specs (prototype + design tokens).驱动 Figma 生成真实页面结构、组件与设计规范（原型 + 设计令牌）。
From design spec, Claude delivers deployable, production-ready website code.从设计规范出发，Claude 交付可部署、可上线的网站代码。
Every pipeline, converging into one working product所有管线，汇聚成一个能用的产品
Implemented by frontend engineer Yangxin as a self-contained single-file SPA (~3,442 lines): scroll-scene homepage, explore filters, attraction detail ticketing, must-visit list with off-platform nearby picks, AI itinerary generation, AI travel concierge, AI Keepsake, shopping cart and PayNow payment — bilingual, multi-currency, zero backend, zero build step.由前端工程师杨昕实现为自包含单文件 SPA（约 3,442 行）：滚动场景首页、探索筛选、景点详情购票、带站外周边推荐的必去清单、AI 行程生成、AI 旅行管家、AI 纪念页、购物车与 PayNow 支付——双语、多币种，零后端、零构建。
Turning a mascot into shareable animated stickers把吉祥物做成可分享的动态表情
Yanyan produced 31 stickers · 4 batches · five scene categories: shown here is the travel review pack for the official site (WAIT IS TOO LONG / PICTURESQUE / STUNNING! / GUIDE REQUESTED? …), with separate Singlish mood packs, WeChat daily-life and "pampered transfer" series. The pipeline is standardised: AI short clip → frame extraction → square crop → corner-fill background removal → colour grade & compression — fully reproducible and WeChat-compliant (GIF 240×240 ≤95 KB).炎炎产出 31 枚表情 · 4 个批次 · 五类场景：这里展示的是官网旅行点评包（WAIT IS TOO LONG / PICTURESQUE / STUNNING! / GUIDE REQUESTED? ……），另有 Singlish 情绪包、微信日常与“宠溺接送”系列。管线已标准化：AI 短片 → 抽帧 → 方形裁切 → 角点填充去底 → 调色与压缩——完全可复现，且符合微信规范（GIF 240×240 ≤95 KB）。
One Merlion,
carrying an entire brand一只鱼尾狮，
扛起一整个品牌Tavella · Merlion IP
Original mascot Tavella is modelled on Singapore's Merlion: a fluffy red-orange mane, round lion face, teal-gradient fish tail — chibi proportions, big head, rosy cheeks, expressive personality — still legible at 50 px. One colour palette, one rounded typeface, one consistent ink stroke, running through logo, stickers, website and merch. Slogan: Journeys that inspire.原创吉祥物 Tavella 以新加坡鱼尾狮为原型：蓬松的红橙鬃毛、圆圆的狮子脸、青绿渐变鱼尾——Q 版比例、大头、腮红、表情丰富——缩到 50 px 依然清晰可辨。一套色板、一款圆体、一致的描边笔触，贯穿标志、表情、网站与周边。口号：Journeys that inspire。
From IP to physical merch从 IP 到实体周边Merch · IP Extension
Extending Tavella into a POPMART-style blind-box figure: the Tavella Merlion — Singapore Adventures series, with city-themed variants — MBS Splash, Gardens Bloom, Sentosa Wave, Jewel Vortex — where even the packaging, hang tags and box illustration are AI-generated product visuals, validating that this IP can grow into a commercially viable product line.把 Tavella 延展成 POPMART 风格盲盒手办：Tavella Merlion——Singapore Adventures 系列，含城市主题变体——MBS Splash、Gardens Bloom、Sentosa Wave、Jewel Vortex——连包装、吊牌与盒绘都是 AI 生成的产品视觉，验证这个 IP 能长成具备商业可行性的产品线。
Tavella Merlion · Blind-Box Concept Visuals (plush charms + desk figures · POPMART-style series)Tavella Merlion · 盲盒概念视觉（毛绒挂件 + 桌面手办 · POPMART 风格系列）
Three infrastructure layers supporting the team支撑团队的三层基础设施
Upgrading "using AI" to "engineering AI collaboration" takes three things I built myself. This is also the line between designer and AI workflow architect.把“会用 AI”升级为“把 AI 协作工程化”，靠的是我亲手搭的三样东西。这也是设计师与 AI 工作流架构师的分界线。
Deterministic Quality Gate确定性质量门
Configured a PostToolUse Hook: after every edit to index.html, it auto-extracts three script blocks and runs node --check on each. A syntax error immediately triggers exit 2 and blocks the write — bad code never reaches the file.配置 PostToolUse Hook：每次修改 index.html 后自动抽取三个 script 块并逐一运行 node --check。语法错误立即触发 exit 2 并拦截写入——坏代码永远进不了文件。
Seven-Person AI Team七人 AI 团队
Seven AI roles with independent contexts, each owning their domain. Side-branch intermediaries are quarantined inside sub-agents; only results return to the main thread, keeping the primary conversation clean. Globally deployed, universally reusable.七个 AI 角色各有独立上下文、各管一摊。旁支过程被隔离在子代理内部；只有结果回到主线程，主对话始终干净。全局部署，处处可复用。
Repetitive Work, Automated重复劳动，自动化
Using Claude Cowork to auto-organise project files, sort assets by type, and generate weekly progress reports on a schedule. Frees human attention from tedious file ops — back to creative decisions.用 Claude Cowork 自动整理项目文件、按类型归档素材，并定时生成进度周报。把人的注意力从琐碎文件操作中解放出来——回到创造性决策。
Making an AI team
"remember" an entire project across sessions让一支 AI 团队
跨会话“记住”整个项目
Directing AI in a single session is easy. The hard part: keeping seven roles — across dozens of sessions — still knowing where things were left off, and why decisions were made. I didn't stop at "knowing how to use agents"; I treated their memory mechanisms, version baselines, and cross-platform delivery specs as real infrastructure to build and maintain — the key step from "fun" to "sustainable" AI collaboration.单次会话里指挥 AI 很容易。难的是让七个角色跨越几十个会话，依然知道事情做到哪了、决策为什么这么定。我没有停留在“会用 agents”；而是把它们的记忆机制、版本基线与跨平台交付规范当作真正的基础设施来建设和维护——这是 AI 协作从“好玩”走向“可持续”的关键一步。
Reverse-engineering and hardening the memory architecture逆向摸清并加固记忆架构
Empirically mapped Claude Code's real memory model: not one memory per agent, but a project-level shared memory store (MEMORY.md index + state files that grow on demand), kept in a directory named by encoded launch path. Designed a two-layer architecture from this: team-wide norms go into CLAUDE.md; each role's working state goes into separate memory files.实证摸清了 Claude Code 的真实记忆模型：不是每个 agent 一份记忆，而是项目级共享记忆库（MEMORY.md 索引 + 按需增长的状态文件），存放在以编码启动路径命名的目录里。据此设计出两层架构：团队级规范进 CLAUDE.md；各角色的工作状态进独立记忆文件。
Diagnosing and fixing a misaligned repository layer诊断并修复错位的版本仓库层
Traced a subtle issue: Claude Code's launch directory was one level above the real git repo, causing version protection to silently fail while stale file copies accumulated outside. After locating the root cause, aligned launch directory = repository root, restored the automatic git guardrail, and migrated the team's memory to the new path with zero data loss.追查到一个隐蔽问题：Claude Code 的启动目录比真实 git 仓库高了一层，导致版本保护静默失效，过期文件副本在仓库外越积越多。定位根因后，把启动目录对齐到仓库根，恢复了自动 git 护栏，并把团队记忆零丢失迁移到新路径。
Turning one-off solutions into reusable team skills把一次性解法沉淀成可复用的团队技能
Every resolved problem class becomes a reusable skill document — not lost in chat history: cross-platform sticker submission specs (WeChat/LINE/Telegram/WhatsApp, officially verified), attraction master-data vocabulary governance (45 attractions, filter dimensions converged), background image generation methodology. Defined once, reused everywhere.每类解决过的问题都沉淀为可复用的技能文档——不再散失在聊天记录里：跨平台表情投稿规范（微信/LINE/Telegram/WhatsApp，官方核实）、景点主数据词表治理（45 个景点，筛选维度收敛）、背景图生成方法论。定义一次，处处复用。
This layer makes the case most clearly: I managed the AI team the same way I'd manage a real one — defining each person's responsibilities and memory, establishing version baselines and quality guardrails for collaboration, and turning hard-won lessons into norms that won't be repeated. Tools will change; the ability to engineer chaotic collaboration into a disciplined system is the genuinely scarce skill for designers in the AI era.这一层最能说明问题：我管理 AI 团队的方式，和管理真人团队一样——定义每个人的职责与记忆，为协作建立版本基线与质量护栏，把踩坑换来的教训写成不再重犯的规范。工具会变；把混乱协作工程化为有纪律的系统，才是 AI 时代设计师真正稀缺的能力。
One AI productivity pipeline, start to finish一条 AI 生产力管线，从头到尾
The right AI tool chosen for each stage, orchestrated, quality-gated, and connected end-to-end by the designer — which is exactly the capability this project sets out to demonstrate.每个阶段选对 AI 工具，由设计师统筹、设质量门、端到端串联——这正是本项目要证明的能力。
Not the output of one tool —
a coordinated orchestra of a dozen AI platforms不是某一个工具的产出——
而是十余个 AI 平台的协奏。
The real workbench: Claude Code for primary coding and infrastructure; Codex for collaborative bug fixing; Midjourney / Lovart / LibTV for imagery and brand visuals; Cowork for automated file workflows. I decide which tool handles each stage and how to chain them together — that's the AI workflow architect's daily practice.真实的工作台：Claude Code 负责主力编码与基础设施；Codex 协作修 bug；Midjourney / Lovart / LibTV 负责影像与品牌视觉；Cowork 负责文件自动化。每个阶段用什么工具、如何串联，由我决定——这就是 AI 工作流架构师的日常。
The designer's value in the AI eraAI 时代设计师的价值
Seven AI roles can execute — write code, produce documents, process files, generate images — but they cannot decide what to do, why to do it, or what a good result looks like.七个 AI 角色都能执行——写代码、出文档、处理文件、生成图像——但它们无法决定做什么、为什么做、好的结果长什么样。
The time I spent designing went beyond the interface — it went into this AI collaboration system: which tasks to each role, how to store memory so it persists across sessions, how to align the launch directory so version protection works, how to write lessons learned into reusable skills. An engineered workflow is more valuable than any single design file — and considerably harder to replace.我花在“设计”上的时间不止于界面——更花在这套 AI 协作系统上：哪类任务交给哪个角色、记忆怎么存才能跨会话延续、启动目录怎么对齐才能让版本保护生效、踩过的坑怎么写成可复用的技能。一套被工程化的工作流，比任何单个设计文件都更有价值——也更难被取代。
When to accept an AI suggestion and when to start over; which feature deserves polish and which to skip — these calls happen every day, and they are the core of my value as the person responsible for this project.何时采纳 AI 的建议、何时推倒重来；哪个功能值得打磨、哪个可以放过——这些抉择每天都在发生，它们正是我作为这个项目负责人的价值内核。
