跳到主要内容
WCX王成旭

未定 · 移动端

全部作品
SELECTED WORK / CONNECTED OBJECTS2026

未定 · 移动端

Fable H5 · 手机端随时查看

物联网 / H5 / 移动端
未定 · 移动端首屏
命运未定,答案在路上。FILM

01 / THE CONTEXT

未定 · 移动端

「命运未定,答案在路上」——上班激励计划的移动端形态。桌面工作台的三块能力收进手机浏览器:逐秒收入激励随身可看,今日命理观察随手翻阅(「命书 · 命理数字伙伴」:四柱排盘、六种命理技能对话、纪念日管理),桌面日历的同步状态实时可查;H5 排版为手机场景重新组织,与主工程保持同一套视觉语言。

我的角色

独立开发 / 移动端体验设计 / 双端部署

交付范围

  • Fable H5 移动端(fableh5.chengxvblog.top)
  • 移动端收入激励与命理观察排版
  • 「命书 · 命理数字伙伴」:四柱排盘 / 命理技能 / 纪念日管理
  • 桌面日历同步状态移动端查看
  • 与桌面工作台一致的视觉语言

技术与工具

H5 / 移动端适配 / MQTT / grok 模型 / 历法计算

移动端

手机浏览器即开即用

同视觉

与桌面工作台一致

ESP32-S3

桌面日历同步可查

LIVE / 在线演示

亲自体验这个项目。

Fable H5 移动端fableh5.chengxvblog.top
打开网站

线上生产环境,手机浏览器直接访问体验移动端排版;桌面端见「上班激励计划 · 未定」项目卡片。

查看界面预览 2 张

02 / INSIDE THE PROJECT

项目的关键设计与实现。

01Mobile

移动端即入口:登录即见收入激励与今日观察。

H5 首屏把「登录开始 / 创建账号」与产品主张放在一起,往下依次是实时收入激励、命理文化观察与桌面日历同步三项能力,手机端单手可读、滚动即达。

  • 首屏直接进入登录/注册,降低移动端使用门槛。
  • 三大能力按手机场景重新排序,滚动即达。
  • 免责声明在页内完整保留,产品边界不因移动端缩水。

02Sync

与桌面日历同频:移动端看状态,桌面屏看节奏。

H5 端与 ESP32-S3 桌面日历共用同一套 MQTT 链路:手机查看今日观察与收入估算,桌面日历展示宜忌与每日观察,两端各司其职。

  • 与桌面工作台共用同一 MQTT 数据链路。
  • 手机端可查桌面日历同步状态。
  • 桌面日历的完整产品叙事见「未定」项目。
工作收入、黄历宜忌与每日观察,手机与桌面同频。

03命书 · 命理数字伙伴

命书不是算命,是把「今日观察」做成可随身翻阅的数字伙伴。

移动端的命理能力以「命书」独立呈现:四柱排盘按年柱、月柱、日柱、时柱输出确定性历法结果;塔罗、奇门遁甲、梅花易数等六种命理技能以对话方式展开;纪念日与桌面日历联动管理。模型层接入 OneLinkAI · grok 实时推理,Key 加密存储,观察保留输入精度带来的不确定性,只作文化参考。

  • 四柱排盘输出年柱、月柱、日柱、时柱,历法结果确定性可查。
  • 塔罗、奇门遁甲、梅花易数等六种命理技能对话。
  • 纪念日与桌面日历联动;OneLinkAI · grok 实时推理。

09:16 / 移动端图文

在手机上,也自然好用。

把桌面端的三块能力重排成手机竖屏版式:收入激励随身可看、命理观察随手翻阅、同步状态实时可查。每一屏都按 9:16 重新组织,不是桌面页面的简单缩放。

未定 · 移动端 AI 模型配置01
AI 模型配置:OneLinkAI · grok 实时推理,Key 加密存储。
未定 · 移动端纪念日02
命书 · 纪念日倒计时:重要日子放在看得见的地方。
未定 · 移动端生成一份观察03
命书 · 生成观察:四柱排盘,保留输入精度带来的不确定性。
未定 · 移动端命理技能04
命书 · 命理技能:大六壬、梅花易数、奇门遁甲等六种方法。
未定 · 移动端命书目录05
命书目录:命理技能、四象观察、节气月令分章收录。

03 / THE OUTCOME

最终,留下什么。

  1. 01

    桌面工作台的能力完整落到手机场景,随时查看收入估算与今日观察。

  2. 02

    命理观察以「命书」独立成应用:排盘、技能对话与纪念日一屏完成。

  3. 03

    H5 排版为手机端重新组织,而不是桌面页面的简单缩放。

  4. 04

    与「未定」形成桌面 + 移动双入口。

浏览完整项目图库02 张影像

04 / THE JOURNEY

每一步,都算数。

  1. 01

    移动端重构

    把桌面工作台的三块能力按手机场景重新组织,信息密度与触控目标适配移动端。

  2. 02

    视觉统一

    保持与主工程一致的视觉语言,手机端体验不脱离整体产品气质。

  3. 03

    与桌面联动

    桌面日历的同步状态在移动端可查,双端互相补位。

CONTINUE EXPLORING

上一个项目
下一个项目 / 2026

Claude 桌面情绪伴侣

状态提醒 · 今日任务 · 联网时钟 · 番茄钟