M4RKYU.SYSEdition 2027
Skip to content
LOCZH/安大略 · 加拿大/▸work · bloomprint待机OK/--:--:--EST
M4M4RK_YUportfolio
  • 创作创作
    创作Overview
    • 作品精选案例与项目记录
    • 游戏可玩原型与游戏开发日志
  • 影像影像
    影像Overview
    • 照片影像合集与视觉实验
    • 商店印刷品、海报和限量物件
  • 写作写作
    写作Overview
    • 博客长篇开发日志与现场笔记
    • 笔记短观察、链接与代码片段
  • 资源资源
    资源Overview
    • 工具38 款浏览器内开发工具
    • 链接每日使用的开发与设计书签
  • 关于关于
  • 联系联系
EN
← 项目档案
Web 应用 · 2026就绪

Bloomprint

把庭院灵感变成可执行的方案——买什么、买多少、需要哪些工具、按什么顺序、可能会出什么问题。

关键信息

角色
Solo developer: planning engine, product UI, local-first storage, and optional cloud sync.
周期
2026 · active development
平台
Responsive web · Local-first planning
在线源码

本页导航

  • >这是什么
  • >界面一览
  • >技术栈
  • >亮点功能
  • >工程实现
  • >实现细节
  • >结果
  • >规划与心得
Bloomprint home page offering buildable yard plans for real homes
Fig. 01 — Bloomprint
01

这是什么

#

问题

改造庭院让人无从下手:一张灵感照片说不清材料、数量、工具和步骤,也说不清哪里会出错——而多数工具只会像聊天机器人一样给出自信的猜测。

方案

这是一个结构化的规划应用,而不是聊天机器人:确定性引擎才是真正的依据,完全离线、无需 AI 密钥和照片也能工作——AI 只负责润色已生成的方案。每份方案都基于区域化目录(以安大略为先)、价格区间而非虚假精确价、在未测量时自动放宽的用料计算,以及分阶段的操作指南。

02

界面一览

#
  • Planning engineThe demo exposes the deterministic stages before the result: intake, regional scoring, quantities, risk checks, and packaging.
03

技术栈

#

Frontend

  • Next.js
  • React 19
  • TypeScript
  • Tailwind CSS
  • Konva

Backend

  • Supabase
  • Zod

ML

  • TensorFlow.js
04

亮点功能

#
  • Deterministic planning engine as the source of truth
  • Local-first storage with optional Supabase cross-device sync
  • Free/Open Data Mode — works with no paid API
  • Region-aware retailer links and honest price bands
  • Optional AI presentation (Claude) with silent fallback
  • On-device photo segmentation (TensorFlow.js)
05

工程实现

#
  1. 过程 01

    Make the planner deterministic before adding AI

    背景
    Material quantities, sequencing, and regional suitability cannot depend on a model improvising plausible advice.
    方法
    Let a rules-based engine own the plan and restrict Claude to rephrasing facts that are already set.
    结果
    Plans remain inspectable and work without AI, while expanding capability requires catalog and rule work rather than prompt changes.
  2. 过程 02

    Represent uncertainty instead of hiding it

    背景
    Users may not have measurements, retailer inventory changes, and Ontario-first data does not generalize everywhere.
    方法
    Return ranges, confidence labels, sources, last-checked dates, and explicit verify-before-buying notes.
    结果
    The output is less magically precise but more trustworthy and actionable.
06

实现细节

#

架构笔记

  • The deterministic engine owns the truth; AI and live data only enrich, never override.
  • Local-first by design — the plan never waits on the network; cloud sync sits behind the local layer.
  • Every live fact carries a source, a confidence tag, and a 'last checked' time.

挑战

  • Producing useful material ranges when users have not measured their yard without disguising uncertainty as precision.
  • Keeping AI, live-data adapters, and optional cloud sync additive so the core planner still works when every external service is absent.
  • The current catalog is Ontario-first; recommendations outside that region need broader data before they can claim the same grounding.
07

结果

#
“
A working local-first planning app live at bloomprint.online that chooses honest grounding — sourced facts, confidence tags, price ranges — over confident AI guesswork.
08

规划与心得

#

复盘

  1. 01Deterministic-first earns trust a chatbot-first tool can't.
  2. 02Honest hedging — ranges, 'verify before buying' — reads as more credible than false precision.
  3. 03Local-first changes every assumption about state, sync, and failure.

下一步

  1. 01Expand the catalog beyond Ontario
  2. 02Connect and evaluate live-data providers
  3. 03Add collaborative plan review

相关案例

Web 应用

Nimbus

A passwordless cloud workspace for organizing, sharing, beaming, and asking questions about your files.

Web 应用

M4rketView

A free, no-key crypto dashboard with live prices, resilient public-data fallbacks, local portfolios, alerts, and comparison tools.

上一篇M4rketViewA free, no-key crypto dashboard with live prices, resilient public-data fallbacks, local portfolios, alerts, and comparison tools.
返回全部作品
下一篇PolitiLensA political news intelligence dashboard for comparing how outlets across the spectrum frame the same story.
返回档案
M4RKYUM4RKYUM4RKYUM4RKYUM4RKYUM4RKYUM4RKYUM4RKYU
始于 2024
ZhenXiao Mark YuZhenXiao Mark Yu
联系

看到什么有意思的?和我聊聊。

这是一个作品集,不是服务 · 但每一条留言我都会看 — 如果哪里让你有所触动,或者只想打个招呼,欢迎写信过来。

开启对话
频道开放

随时打个招呼 · 2026

--:--:--EST加拿大 安大略
  • 邮件
  • GitHub
  • dev.to
  • 领英
  • 推特 / X
  • Instagram
  • Facebook
  • YouTube
  • CodePen
  • Spotify
  • Snapchat

订阅

偶尔收到一封简讯

来自 m4rkyu.com 的笔记与日志——简短、标注日期、没有杂音。随时可退订。

作品

线上发布、游戏作品与视觉档案。

  • 项目
  • 游戏
  • 档案
  • 日志

资源

每日好用的工具与个人收藏的链接库。

  • 搜索
  • 最新
  • 工具
  • 链接
  • 笔记
  • 主题
  • 商店
RSSJSON Feed

工作室

背景、联系方式以及合作渠道。

  • 关于
  • 联系
  • 更新日志
  • 技术说明
  • 简历筹备中

社交

在常去的平台上找到我。

  • GitHub
  • dev.to
  • 领英
  • 推特 / X
  • Instagram
  • Facebook
  • YouTube
  • CodePen
  • Spotify
  • Snapchat
  • 邮件
© 2026 ZhenXiao Mark Yumarkyu0615@gmail.com
  • 邮件
  • GitHub
  • dev.to
  • 领英
  • 推特 / X
  • Instagram
  • Facebook
  • YouTube
  • CodePen
  • Spotify
  • Snapchat
隐私条款由 Next.js 16 · React 19 · Tailwind 4 构建