01
界面不再只是结果：A2UI 如何重写智能体交互
当模型可以持续更新界面，产品设计的基本单位会从“页面”变成什么？
阅读全文 ↗AI CINEMATIC NOTES / SHOT 001
在墨色里，重写智能与界面的故事。
我是蔡基培，一名以前端工程化为优势、具备 Java 后端交付能力的全栈开发工程师。这里记录企业 AI 应用、复杂业务系统与多端工程化实践，也保留每一次从需求到可交付产品的推演过程。
CAI/LAB
01 / 04
让智能体输出可信、可交互、可持续更新的界面。
NOW SCREENING
正在放映
02
React 状态与 Effect：让一次交互只有一条数据路径
从可计算状态、事件处理到异步竞态，建立 React 组件的数据流。
阅读全文 ↗03
Vue 组合式函数：复用逻辑之前，先划清状态归属
用搜索请求说明 ref、computed、watch 与 composable 的职责和生命周期。
阅读全文 ↗A2UI 落地：从声明式消息到可恢复的交互表面
把协议适配、组件目录、数据绑定和 Action 回传拆开，避免生成界面变成任意代码执行器。
阅读全文 ↗05
LowCode Engine：把设计器、物料和运行时分开
从阿里低代码引擎的核心分工出发，梳理 Schema 发布、版本管理与业务扩展。
阅读全文 ↗06
Monorepo：共享代码之前，先设计依赖边界
以 pnpm workspace 为例，解释应用与包的边界、任务图、缓存和版本策略。
阅读全文 ↗07
前端工程化：让一次修改可以验证、发布和回退
从锁文件到产物验证，把类型检查、测试、构建和部署放到各自正确的位置。
阅读全文 ↗08
从 React 到 React Native：复用思路，重新理解平台
拆开原生组件、导航、列表性能和权限流程，建立 RN 项目的实际边界。
阅读全文 ↗09
小程序与跨端选型：先看入口，再选 Taro、uni-app 或 RN
从微信小程序的运行边界出发，对比 Web、小程序和原生应用的交付成本。
阅读全文 ↗10
Renderer 是信任边界，不只是渲染器
从组件注册表、Schema 到 Action allowlist，拆开一条安全的生成式 UI 链路。
阅读全文 ↗11
一次点击，到底改变了什么？
用一条真实调用链，理解 Vue 局部状态如何穿过组件与运行时。
阅读全文 ↗12
把未完成写下来
一份关于公开构建、技术写作与保留问题感的短札记。
阅读全文 ↗共 12 篇文章
CAPABILITY CONSTELLATION
能力地图
从前端体验到后端服务，从业务平台到 AI 链路，把问题推进到可交付结果。
AI 应用全栈
把 React 界面、Spring Boot 服务、向量检索与大模型生成链路连接成可部署的企业 AI 应用。
前端工程
面向复杂中后台、H5、小程序与 Hybrid App，建立稳定、可维护的多端体验与组件资产。
平台与架构
用低代码、Monorepo、多租户与权限体系承接政企及教育场景的长期迭代与定制需求。
交付与业务
覆盖 RESTful API、数据库与缓存、支付链路、容器化部署，把完整业务闭环落到生产环境。
BEHIND THE SCENES
项目档案
三段来自独立产品与个人生活现场的代表性实践。
01
以移动端月历为核心，把每日事项直接放进日期格；使用令牌指纹隔离不同身份的数据，并接入浏览器通知完成本地提醒。
可体验02
以匿名令牌隔离每个人的本地衣橱，覆盖单品归档、分类搜索、穿着记录与今日搭配，让衣物管理成为可持续的日常习惯。
可体验03
每枚个人令牌打开一本独立食谱；菜谱资料留在服务器、照片写入私有 S3，并支持搜索分类、随机挑菜、照片压缩与在线编辑。
可体验SELECTED WORK · 独立产品与日常生活工具
FIELD INSTRUMENTS
工具箱
按工作阶段整理的常用器物。这里会逐步补上配置、范式与使用笔记。
01 / EDITORIAL02 / PROTOCOL03 / REDUCTION04 / TRANSCODE05 / PHOTO LAB06 / CONTACT SHEET07 / LOCAL MEDIA08 / PRIVATE ACCESS09 / DOMESTIC MEDIA10 / WALLPAPER INDEX
简历制作
选择模板，把经历编辑成一页可打印的个人档案。
VLESS 转 config.yaml
将分享链接整理为可下载的 Mihomo / Clash 配置。
图片压缩
用画质、尺寸与格式三个旋钮，减去图片的重量。
图片格式转换
在 PNG、JPEG 与 WebP 之间干净地转换图片。
证件照换底
识别纯色背景，细调边缘后换成蓝、白、红或自定义底色。
图片拼接
拖入多张图片，按顺序生成纵向、横向或网格拼图。
视频转换 / 音频提取
在本地浏览器中转换视频格式，或将视频导出为音频。
YouTube 视频下载
仅供个人获授权内容使用，进入前需要密码验证。
Bilibili 视频下载
在境内部署节点处理公开或已获授权的视频与音频。
高清壁纸
从多个开放图片源随机取景，按主题搜索手机或电脑壁纸。
AFTER THE CUT
镜头之外，
仍在发生。
没有剪成长片的观察，也值得保留一个镜头。
好的生成式界面不是“模型画页面”，而是让不确定性在一套可靠约束里逐渐显形。
# A2UI解释代码时，架构图不是起点。先让一次点击真的发生，再沿调用链往回走。
# EXPLANATION复用组件的价值，不只是少写代码；更重要的是复用已经被验证过的交互契约。
# DESIGN SYSTEMABOUT THE AUTHOR
把复杂业务，做成可维护的产品。
我有 5 年前端开发经验，长期参与复杂中后台、低代码平台、多端工程化与性能优化。当前持续拓展 Java / Spring Boot 全栈能力，能够协同完成从 React 页面、RESTful API、关系型数据库与 Redis，到 Docker / Nginx 部署的完整链路。
我曾参与汽车、电商支付、仓储、政务和教育等业务系统的从 0 到 1 建设与迭代。这个网站是我的公开工作台：记录可复用的工程经验，也记录企业 AI 应用和 RAG 架构的长期实践。
5 年经验前端工程化Java 全栈企业 AI 应用