MickerBook
麦客书 · Agent 社区
围绕真实帖子、回复与 Agent 资料组织社区阅读，兼顾内容展示、交互与页面元信息。
01 / 公开网站项目范围
页面与组件开发、主题与布局迭代、业务 API 对接、技术 SEO 与发布维护。
Next.js App Router 负责页面组织；服务端读取首屏内容，交互组件处理筛选与操作。设计采用 Warm Ink 色彩系统，强调真实信息流。
访问网站
⊢ CREATIVE TECHNOLOGY STUDIO
MAKE IDEAS
COME ALIVE.
麦克 · 产品设计与全栈开发
专注于 Web、App、AI 与 3D 的创意开发，
用技术与美学，将想法变成可触摸的真实体验。
TECHNOLOGY
CREATIVITY
PEOPLE.
A MORE VIVID WORLD.
CREATIVITY
PEOPLE.
A MORE VIVID WORLD.
想象を、
つくる力に。
つくる力に。
让想象，
成为改变现实的力量。
⊢ IDEAS
CODE
A BRIGHTER TOMORROW.
以内容站为例
CODE
A BRIGHTER TOMORROW.
SELECTED WORK / 代表作品
FROM IDEAS TO EXPERIENCES.
HerLove
铸魂 · 角色交互产品
将角色定制、聊天、记忆和剧情界面放进同一产品，延伸到手机与桌面使用入口。
02 / Web / App 工程项目范围
React 界面与主题、聊天交互、模型及工具接口、PWA/Android/桌面工程。
旧网站与新版 App 合并为同一产品归属。新工程采用 React/Vite、Express 与独立 worker；移动和桌面交付按版本分别验证。
查看产品入口照影台
摄影素材与修图工作台
从素材浏览、参数预览到配方和原尺寸导出，为摄影工作建立可重复的处理流程。
03 / 本机业务工具项目范围
摄影工作台设计、前后端交互、调色/修图算子接入、CLI 批处理与导出一致性。
原片独立保留；网页与批处理使用同一份配方。输出效果按真实素材校准。页面展示现有测试样片的工程截图；本次素材只用于本地预览。
看视频
下载 · 转写 · 精读
连接视频获取、逐句转写、画面与笔记，让媒体资料能定位、校对和导出。
04 / 本机媒体工具项目范围
媒体工具界面、任务队列、取消与重试、播放器同步、资料包导出。
复用已有下载服务，转写与资料管理按任务落盘。网页关闭后任务由服务端管理；GPU 与 CPU 路径按设备确认。
声间
Micker Music · 聆听与创作
以唱片、歌词和创作札记组织音乐体验，连接本机试听与生成任务。
05 / 本机交互作品项目范围
多方向视觉探索、响应式页面、播放进度与歌词交互、音乐生成流程接入。
前端使用原生网页，Node 标准库提供本地服务；生成通过 MiniMax CLI 接入。作品页未宣称该本机服务已公开上线。
三维与场景
麦式引擎 · 绮梦中央站
从浏览器场景到编辑工作台，连接材质、灯光、相机、交互与场景数据。
06 / 编辑器 / 场景作品项目范围
三维场景实现、编辑器面板、资源与场景接口、实时画面和性能检查。
麦式引擎采用 React/Three.js 与 CLI/MCP；绮梦中央站含直接 Three.js 制作版本。场景美术与编辑器工程分别呈现。
以上为现有项目的真实界面；点击查看对应版本、技术与工作范围。
02 / START WITH YOUR PROJECT
先看要做什么，再选技术。
点击一种项目，看看我们
会怎样组织它。
让内容可读，也方便持续更新。
适合有内容结构、公开页面与搜索需求的品牌站、社区或产品网站。
页面需要公开阅读时，优先规划首屏内容、元信息与缓存，再接表单或业务系统。
对应作品 MickerBook界面层Next.js · React · Tailwind
服务层Node.js · 业务 API
交付层服务端 / 静态部署 · HTTPS
03 / THE STACK, EXPLAINED
每一个选择，
都说得清理由。
适合什么，优势在哪里，
还有项目中要做的取舍。
01Next.js内容站、社区与公开产品页
需要被找到，也需要被读懂。
- 为什么选
- 服务端渲染、静态生成与缓存可按页面组合，适合需要首屏内容和技术 SEO 的公开站点。
- 带来的优势
- 把路由、页面元信息和前后端边界放在同一工程，持续增加内容页更有章法。
- 项目中的取舍
- 缓存与登录态要分别设计；排名还取决于内容与运营。
用在：MickerBook官方文档 ↗
02React聊天、编辑器和多状态工作台
复杂交互，从可复用组件开始。
- 为什么选
- 把消息、面板和表单拆成组件，让同一套交互能在不同页面持续复用。
- 带来的优势
- 状态与界面关联清晰，适合逐步扩充功能和长期维护。
- 项目中的取舍
- 组件边界与状态管理需要控制；简单展示页可以选择更轻的实现。
用在：HerLove · 铸魂、麦式审美台官方文档 ↗
03Vite交互应用、本地工具和三维项目
给应用一条轻量的构建路线。
- 为什么选
- 开发与生产构建围绕同一套现代模块工程组织，适合前后端分开的应用。
- 带来的优势
- 便于快速预览修改、组织资源和输出可部署文件。
- 项目中的取舍
- 搜索型内容站仍需单独规划预渲染或服务端方案。
用在：铸魂、麦式 Three.js 引擎官方文档 ↗
04TypeScript长期迭代的前后端与多人协作工程
在接口改动时，早点发现错配。
- 为什么选
- 用类型描述组件参数、接口与数据结构，减少改动后才在页面发现字段不一致的情况。
- 带来的优势
- 重构和代码导航更明确，共享合同更易维护。
- 项目中的取舍
- 类型检查之外，外部数据仍要做运行时校验和业务测试。
用在：MickerBook、铸魂、Browser Copilot官方文档 ↗
05Tailwind CSS响应式网页和组件化界面
让设计规则跟着组件走。
- 为什么选
- 用统一的间距、颜色和响应式规则实现页面，适合在持续改版中维持一致性。
- 带来的优势
- 局部调整直接，设计变量和多屏适配易于复用。
- 项目中的取舍
- 视觉方向仍需设计；复杂页面要提炼组件，控制样式重复。
用在：MickerBook、Browser Copilot官方文档 ↗
06shadcn/ui · Radix表单、菜单、对话框和产品后台
基础交互可靠，视觉保留自主权。
- 为什么选
- 以可修改的组件代码为基础，复用基础交互，再按产品设计调整外观。
- 带来的优势
- 可保留自己的品牌语言，减少从零实现通用控件的工作。
- 项目中的取舍
- 接入后仍需验证键盘、焦点、主题与项目自身的可访问性。
用在：MickerBook官方文档 ↗
07HTML · CSS · JavaScript作品页、轻工具和已有多页网站
页面简单，就让交付保持简单。
- 为什么选
- 内容与交互规模可控时，直接用浏览器原生能力，减少依赖和构建环节。
- 带来的优势
- 文件易交接，静态部署方便，适合持续修改既有网页。
- 项目中的取舍
- 复杂状态与大型团队项目需要额外组织；按规模判断是否引入框架。
用在：出片计划、照影台、声间、一刻官方文档 ↗
08Node.jsAPI、任务编排与工具接入
前后端用同一种语言沟通。
- 为什么选
- 服务接口与网页同用 JavaScript/TypeScript，适合共享数据合同和接入 Web 生态。
- 带来的优势
- 整合模型、浏览器和外部工具时，能减少语言切换。
- 项目中的取舍
- 计算密集任务应考虑独立进程、队列或专用计算服务。
用在：铸魂、MickerBook、声间官方文档 ↗
09Express · Fastify业务 API、登录与自动化服务
按业务复杂度选择服务骨架。
- 为什么选
- Express 用于已有业务路由与中间件；Fastify 用于独立 runner 等服务，按项目生态选用。
- 带来的优势
- 路由职责清晰，可分别组织验证、限流、日志与错误响应。
- 项目中的取舍
- 框架选择之外，权限、幂等和任务恢复仍要逐项实现。
用在：铸魂 / Express；Browser Copilot / Fastify官方文档 ↗
10Python模型、图像、音视频与自动化
把 AI 和媒体处理接到产品里。
- 为什么选
- 已有算法与推理生态集中在 Python，把计算放在服务端，由网页提供易用入口。
- 带来的优势
- 能复用成熟库，将实验能力逐步接成可操作的工具。
- 项目中的取舍
- 模型速度与资源消耗取决于具体链路；长任务需隔离和排队。
用在：照影台、看视频、mbdeck官方文档 ↗
11Flask摄影工具、鉴权和适中规模业务站
让已有业务与算法，先有清晰入口。
- 为什么选
- 轻量服务骨架便于连接既有 Python 代码，并按实际需要增加业务模块。
- 带来的优势
- 适合逐步迁移旧站、复用算法和维护明确的接口。
- 项目中的取舍
- 生产部署、身份验证和并发任务需要配套设计。
用在：出片计划、照影台、Micker Auth官方文档 ↗
12FastAPI模型 API、媒体任务与管理工作台
让数据合同与接口文档一起维护。
- 为什么选
- 利用类型定义和数据校验组织接口，适合模型及自动化服务的输入输出约束。
- 带来的优势
- 自动接口文档便于对接，校验能把格式错误挡在业务入口。
- 项目中的取舍
- 异步接口与 GPU 计算是不同层；耗时任务仍需 worker 或进程隔离。
用在：看视频、mbdeck、RSI、暮映官方文档 ↗
13SQLite · 文件存储单机应用、小型业务和任务回执
按数据关系和使用规模落地。
- 为什么选
- 需要事务与查询时用 SQLite；独立任务与导出回执可用版本化 JSON 和媒体文件。
- 带来的优势
- 部署与备份路径直观，适合本地工具和规模明确的早期产品。
- 项目中的取舍
- 多机并发、大量写入和复杂检索需重新评估存储架构。
用在：Micker Auth、暮映、视频工作台官方文档 ↗
14Three.js产品展示、场景、编辑器和浏览器游戏
让三维内容直接在网页里交互。
- 为什么选
- 将相机、材质、灯光与动画组织成可编辑场景，方便在浏览器展示和交付。
- 带来的优势
- 可与网页界面联动，适合无需单独安装客户端的三维体验。
- 项目中的取舍
- 画面质量要结合模型、灯光与实测帧率，移动设备另做预算。
用在：麦式 Three.js 引擎、绮梦中央站官方文档 ↗
15Rapier实时三维与可交互场景
把碰撞与物理交给专用引擎。
- 为什么选
- 在 Three.js 场景中接入刚体与碰撞，让渲染和物理各自承担职责。
- 带来的优势
- 复用现成物理能力，便于设计可操作场景。
- 项目中的取舍
- 物理与视觉对象需同步；步长、碰撞体和性能要在实际场景验证。
用在：麦式 Three.js 引擎官方文档 ↗
16Godot · GDScript独立游戏、角色世界和单机模拟
游戏逻辑，留在游戏引擎里。
- 为什么选
- 用场景、节点与脚本组织角色、地图和玩法，更适合需要持续扩充的游戏工程。
- 带来的优势
- 编辑器与运行时配套，方便管理场景、资源和游戏状态。
- 项目中的取舍
- AI 角色服务、资源制作与最终设备性能仍需独立联调。
用在：AI 小镇官方文档 ↗
17PixiJS · Live2D角色陪伴、立绘互动与表现层
让角色成为界面的一部分。
- 为什么选
- 用二维渲染与 Live2D 模型接入表情、动作和交互，保留角色美术表现。
- 带来的优势
- 能与聊天、语音和界面状态连接，形成角色化体验。
- 项目中的取舍
- 拆层、绑定、音频口型与授权素材要分别验证。
用在：铸魂、AutoLive2d 工作台官方文档 ↗
18ElectronWindows 工具、工作台和桌面入口
把网页工具带到桌面上。
- 为什么选
- 复用网页界面，接入窗口、菜单、文件与本机执行能力，适合已有 Web 应用。
- 带来的优势
- 可独立启动和打包交付，减少为桌面端重写界面的工作。
- 项目中的取舍
- 安装体积、资源占用、更新与主进程边界需要专门处理。
用在：铸魂桌面端、A2S 工作台官方文档 ↗
19Capacitor · PWA已有网页应用的手机与安装体验
让同一产品有多个使用入口。
- 为什么选
- PWA 提供浏览器安装入口；Capacitor 连接 Web 界面与移动原生能力。
- 带来的优势
- 适合复用已有前端，同时逐步增加手机端能力。
- 项目中的取舍
- APK 构建、设备安装、登录和原生插件需真机验证；iOS 单独评估。
用在：HerLove · 铸魂官方文档 ↗
20Nginx · PM2 · Caddy自管服务器、静态页和 API 服务
把上线与后续维护一起考虑。
- 为什么选
- 按应用拆分静态资源、反向代理和进程管理，为域名、HTTPS 与服务更新建立清晰路径。
- 带来的优势
- 能按现有服务器环境部署，并保留备份、日志和回滚方式。
- 项目中的取舍
- 这些工具各司其职；可用性仍依赖监控、容量和实际发布验证。
用在：MickerBook、出片计划官方文档 ↗
21Docker · Compose多服务应用与可复现部署
让服务组合有明确的运行说明。
- 为什么选
- 把依赖和启动关系放进配置，方便交接、迁移与在不同机器准备环境。
- 带来的优势
- 减少口头环境说明，便于维护同一套服务组合。
- 项目中的取舍
- 镜像、持久化目录与资源限额需维护；有配置文件的项目仍要验证部署。
用在：暮映、毒舌 PM 的部署配置官方文档 ↗
22大模型 API · 工具接入聊天、审查、生成与自动化工具
把模型接成可以完成任务的功能。
- 为什么选
- 围绕真实任务组织模型输入、工具调用、流式响应与错误处理，避免只有聊天框。
- 带来的优势
- 可复用业务上下文，连接既有数据和操作流程。
- 项目中的取舍
- 模型费用、延迟、权限与失败恢复按 provider 和使用场景确认。
用在：铸魂、mbdeck、毒舌 PM官方文档 ↗
23NumPy · Pillow · SciPy摄影修图、素材处理和批量导出
让预览与导出共享同一条图像链路。
- 为什么选
- 将配方与算子服务化，让网页调参、CLI 批处理与正式输出使用可追踪的参数。
- 带来的优势
- 利于复用处理逻辑、保留原片并核对每次输出。
- 项目中的取舍
- 视觉效果需看真实照片与原尺寸导出，单图结果不外推所有素材。
用在：照影台官方文档 ↗
24FFmpeg · faster-whisper视频资料库、字幕与内容工作流
把媒体变成能检索和编辑的资料。
- 为什么选
- 用媒体工具提取音轨和帧，再做本地转写，连接逐句播放、笔记和导出。
- 带来的优势
- 素材、字幕与资料包可以连成一条可重复操作的流程。
- 项目中的取舍
- 识别准确度和速度取决于声音、语言、模型及设备，保留人工校对入口。
用在：麦式 CC 看视频官方文档 ↗
25Playwright · Vitest浏览器交互、接口与回归检查
交付前，验证看得见的结果。
- 为什么选
- 用真实浏览器检查关键路径与多视口，用单元/集成测试保护业务合同。
- 带来的优势
- 改需求后可重复核对已有功能，问题能留下可复查的证据。
- 项目中的取舍
- 测试通过与客户满意分别确认；真机、模型和生产链路按范围补验。
用在：MickerBook、Browser Copilot、铸魂官方文档 ↗
暂时没有匹配的技术。
换个关键词，或者查看全部选择。
04 / HOW WE BUILD
从第一版想法，
到可以交接的工程。
视觉、功能与运行结果，
都在交付范围里说清。
把问题说具体
明确用户、页面与关键操作，核对设计稿、旧系统和内容材料，形成范围与验收项。
交付：需求范围 / 页面清单把方向看得见
根据品牌和任务研究参考，确定视觉方向、页面层级、组件与手机布局。
交付：视觉方向 / 设计规范把一条流程做通
先完成可操作切片，再连接业务接口、数据和模型；加载、空态与失败一起处理。
交付：可运行页面 / 业务功能把后续维护留好
核对目标视口和关键路径，按约定部署或打包，交接源码、配置说明与后续事项。
交付：工程 / 部署 / 使用说明05 / LET’S MAKE IT REAL
带上你的想法，
我们聊聊怎么做。
新网站、产品改版、业务工具，或一段需要接起来的 AI 流程。
先有明确范围，再谈排期与费用。