方塘草缸景观 APP 作品封面

02 / 精选项目

草缸社区生态
应用开发:方塘

团队项目 | 2026.6-2026.7 | Vibe Coding 作品

团队:LING DAI、ZEDAN ZHENG、JIONGTAO ZENG

开发工具与技术栈:Codex + Three.js + React

项目内容

01 / 项目概述

一个面向草缸爱好者的
设计、购买、社区与养护管理
一体化 App。

产品类型:
爱好者平台 | 服务设计
产出内容:
UI-Figma原型、IOS原型、智能养护概念
产出时间:
一个月
方塘草缸景观 APP 首页界面展示在苔藓景观中

02 / 产品机会

将草缸从一次性搭建,转化为
持续设计、购买、管理和分享
的服务体验。

草缸造景石材搭建过程

协助造景

草缸新手不知道如何搭配底床、石材、沉木、水草。

草缸店铺中陈列的水草与设备

整合购买链路

购买链路分散,设计方案和材料设备清单没有打通。

使用设备观察草缸运行状态

实时观测

草缸搭建完成后,水温、光照、CO₂、pH、过滤、换水和修剪都需要长期管理。

用户在水族馆观察大型草缸

社区凝聚

现有社区更偏结果展示,缺少从案例复刻到设备管理的完整链路。

现有路径

现有路径 方案设计支持 购买链路整合 运行状态管理 社区参与激活 养护后期需求
花鸟市场
小米智能鱼缸
3D造景软件
(Scapeit、Rhino、Blender....)
内容社区平台
(小红书、Bilibili、抖音...)

03 / 用户与痛点

解决草缸用户在
方案搭配、材料购买、长期养护
和经验复用中的断点。

黑白岩石背景
用户类型1

新手用户

缺乏草缸搭建经验,需要从案例灵感、材料选择、设备配置到开缸流程获得清晰引导,降低从“想做草缸”到“完成搭建”的决策成本。

用户类型2

养护专家

已经拥有草缸并关注长期稳定运行,需要记录水温、pH、光照、CO2、换水、修剪和设备状态,通过数据与任务提醒提升养护效率。

用户类型3

设计达人

具备一定审美和设计能力,希望通过 3D 模拟、素材组合和案例发布表达个人风格,同时让自己的作品被收藏、复刻和讨论。

04 / 用户旅程

串联从灵感浏览、方案设计、
材料购买到日常养护和社区分享
的完整用户路径。

这个流程让模型不再只是一次性文件,而成为可以被验证、分享和再创作的参数化资产。

  1. 01

    打开APP

  2. 02

    浏览推荐作品 / 社区案例

  3. 03

    进入案例详情

  4. 04

    复制参数 / 保存清单

  5. 05

    进入草缸创建

  6. 06

    选择尺寸/风格/场景

  7. 07

    可视化编辑

  8. 08

    生成清单 / 保存样式

  9. 09

    管理草缸状态

  10. 10

    社区分享、交换

草坡地景

05 / 核心功能

组织内容精选、用户社区、
草缸设计、实时管理和个人中心
五个高频入口。

手机展示方塘 APP,旁边摆放着水草缸
01

应用首页

首页作为用户进入方塘的灵感入口,汇集 IAPLC 大赛作品、设计师作品与用户精选案例,并通过风格标签和搜索帮助用户快速筛选内容。同时接入草缸百科,让用户在浏览作品的同时了解水草、鱼虾、底床和设备知识,为后续方案创建与案例复刻提供参考。

方塘应用首页手机界面
02

在线设计

在线设计模块通过分步引导降低草缸创建门槛,用户先确认缸体尺寸、选择造景风格与摆放场景,再进入可视化编辑器。编辑器将底床、石材、植物、沉木、鱼虾等素材分类呈现,支持视角切换、素材添加与方案保存,帮助用户从灵感快速转化为可执行的草缸方案。

方塘在线设计的缸体尺寸、造景风格与营造场景选择流程
方塘在线草缸设计主界面
03

实时管理

实时监测模块将草缸运行状态转化为清晰的可视化面板,集中展示水温、pH、光照时长、CO₂、水位、滤芯等关键指标。用户可以快速判断草缸是否处于稳定状态,并通过异常提醒、养护任务和设备状态查看,持续管理开缸后的长期维护过程。当前阶段以 UI/UX 概念原型为主,未来可接入真实传感器与智能设备数据。

草缸灯具与水草造景照片
方塘实时管理数据面板 UI
04

用户社区

用户社区模块以草缸案例为核心,展示用户作品、设计师作品与不同风格的造景方案。

方塘社区作品流界面 方塘社区作品详情界面
05

个人中心

个人中心模块用于沉淀用户在方塘中的创作与管理资产,包括已保存方案、收藏案例、购买清单、草缸档案和养护记录。用户可以回看自己的设计过程,继续编辑未完成方案,也可以管理已搭建草缸的状态数据与历史任务。该模块将浏览、设计、复刻和管理行为统一归档,形成持续使用的个人草缸空间。

方塘个人中心 UI
水草缸摆放在桌面上的室内场景

06 / UI、UX设计

用柔和的自然视觉、卡片化
信息层级和移动端编辑器构建草缸场景体验。

02.版式、字体及颜色

/LAYOUT DESIGN

方塘首页版式网格标注 方塘版式示例界面一 方塘版式示例界面二

/ICON SET

方塘图标组

/TYPOGRAPHY

01 Microsoft JhengHei UI
微软正黑体
02 Microsoft YaHei
微软雅黑
03 Microsoft PhagsPa
微软八思巴

/COLORS

EAE2D8
696F64
49503B
D9D9D9
060606

03.品牌设计

方塘品牌视觉场景
方塘草缸品牌调性场景

07 / 产品后续迭代

当前项目重点完成 UI / UX 原型,
智能硬件联网和真实购买链路仍
处于概念阶段。

01. 编辑器升级

方塘编辑器升级方向展示

02. 3D资产录入

方塘 3D 造景资产录入概念

03. 智能管理接入

方塘智能管理接入流程图

04. 接入商城

方塘商城接入界面一
方塘商城接入界面二
方塘商城接入界面三

THANKS FOR YOUR WACTHING