Prompt Pet花园
一、Demo 简介
是什么： 一个单文件 HTML 桌面宠物应用，监听剪贴板文字，自动将其生成为一朵参数唯一的程序化花朵，在桌面角落悄然绽放。
面向谁： 每天在各类软件中产出大量碎片化文字的普通用户——设计师、作家、产品经理、学生，以及任何觉得"随手打出的只言片语也值得被看见"的人。
核心功能：
剪贴板自动播种 — 授权后，在任何软件中复制文字即可触发一朵花绽放，无需切换回本应用。生长过程约 3 秒：种子入土 → 茎叶伸展 → 花瓣层层打开，即时视觉正反馈。
桌面宠物 + 花园双模式 — Pet 模式以毛玻璃小卡片常驻桌面，同时呈现最新 7 朵花，悬停查看原文；Garden 模式一键展开全屏花田，支持搜索、点击查看详情（花型品种、色相参数、原始文字、播种时间）、复制与删除。
确定性花朵生成 — 10 种色调（玫瑰、珊瑚、蜜桃、薰衣草等）× 4 种花瓣形态（圆瓣/尖瓣/杯状/层叠），花瓣数量、层数、茎高、弯曲度等全部由输入文字的哈希值映射，同一段文字永远开出同一朵花。
此处插入 1-2 张产品截图（Pet 模式 + Garden 模式）
二、创作思路
灵感来源： 在 AI 时代，人们每天在各类软件中打出大量文字——一段灵感、一句诗、一条备忘——但这些零碎表达稍纵即逝，从未被赋予可见的形态。
想解决的问题： 现有的笔记和灵感收集工具过于"正式"——需要打开 App、找到入口、手动粘贴，无形的摩擦让大量有价值的碎片化表达消失在数字洪流中。AI 创造力的门槛不应只属于专业玩家，普通人随手打出的文字同样值得被「看见」和「留存」。
为什么做这个方向： 我希望找到一种轻量化、无侵入、自然而然的方式。桌面宠物是一个被证明有效的"低注意力成本"载体——它安静地待在角落，不打扰工作流，却在你需要时提供情绪价值。将"文字 → 花"的映射做成一个确定性算法，让每段话都有唯一视觉身份，既保留了收集的功能性，又赋予了美学和陪伴感。技术上选择纯 Canvas 2D + 零依赖单文件，确保"打开即用、无需安装"的极致轻量体验。
此处插入 1 张创作过程截图（如 TRAE 对话中描述核心需求的界面）
三、Demo 体验地址
此处上传 HTML 文件的 Zip 包，或填写部署后的公开体验链接
文件说明：单个 HTML 文件，浏览器直接打开即可体验，无需服务器、无外部依赖。
四、TRAE 实践过程
本项目全程使用 TRAE 完成，从零开始迭代到可体验的完整 Demo。以下是核心开发流程：
步骤 1：需求梳理与架构设计
在 TRAE 中描述产品概念和核心交互流程，AI 辅助梳理出"单文件 HTML + Canvas 2D + 双模式渲染"的技术方案，确定了花朵生成算法的核心思路（哈希映射参数空间）。
此处插入截图 1：TRAE 对话中需求梳理阶段 Session ID: 在此粘贴
步骤 2：花朵生成算法开发
通过 TRAE 实现 Flower 类——基于贝塞尔曲线的花瓣绘制、径向渐变花心、正弦波草叶摇曳、HSL 调色板体系。反复调整参数范围，确保 10 种色调 × 4 种形态在视觉上既统一又有足够区分度。同一输入始终输出同一朵花的确定性哈希映射在这一阶段完成。
此处插入截图 2：花朵算法调参阶段的 TRAE 对话 Session ID: 在此粘贴
步骤 3：双模式交互与剪贴板集成
实现 Pet 模式（居中卡片）和 Garden 模式（全屏花田）的 CSS 类切换渲染，集成 Navigator Clipboard API 实现 2 秒间隔的静默监听与去重逻辑，完成花园的搜索、详情面板、localStorage 持久化等功能。在 TRAE 的迭代过程中，多次通过描述交互预期让 AI 辅助调试布局和事件处理。
此处插入截图 3：交互功能开发阶段的 TRAE 对话 Session ID: 在此粘贴
步骤 4：视觉增强与体验打磨
通过 TRAE 完成欢迎引导页、萤火虫粒子系统、黄昏天空渲染、帮助模态框、呼吸光晕动画等视觉增强，将 Demo 从"功能可用"提升到"第一眼就有吸引力"的参赛状态。
PromptPet花园.html (66.0 KB)