用“魔法”创建“魔法” · KBITAI FIELD NOTE

SS · 26.08.03 · 01 / 21

AI DEVELOPMENT · 代码素人实战复盘

用"魔法"创建"魔法"
Magic TO Magic

代码素人用 AI 创建 AI 应用——以“首席图像架构师（Chief Image Architect）”的开发过程为例，复盘 AI 时代应用开发的流程、步骤与心法。

匡形无界 · 啄之堂 · 刘珂 · 2026.08

→ swipe / arrow keys

HOOK · 一个反差

02 / 21

我不会写代码。
但我上线了
一个 AI 应用。

KBITAI · 首席图像架构师 · 内测中

WHO · 分享者

NO CS DEGREE

来自建筑设计行业，没有计算机科班背景，也没有系统学过一门编程语言。

2025–2026，一个人 + 几款 AI 工具
走完需求、前端、后端、云服务器部署全过程
应用上线，进入邀请制内测

这场分享，就是把全过程拆开给你看——每一步怎么做，坑在哪里。

首席图像架构师

CHIEF IMAGE ARCHITECT

CASE · 这个应用长什么样

03 / 21

一款面向建筑师、艺术家、创意工作者的 AI 图像应用：草图、模型、照片进去，方案级效果图出来，对话咨询，Web Search，图片生成和编辑，动漫生成，多模态能力。

手写代码

0 行

每一行代码都由 AI 生成，我负责描述需求与验收结果

测试与修 Bug 占比

90%

雏形分钟级生成，绝大部分时间花在测试与修 Bug 上

开发团队

1 人

一个人 + 几款 AI 工具，完成全栈开发与上线

SYSTEM · 注册与运维

04 / 21

From Invite to Admin · 从邀请码到后台管理，一应俱全

注册流程 + 后台管理，全链路闭环

界面均为本应用实录 · 数据库定期备份，改崩了也能回滚

CAPABILITY · 多模态能力矩阵

05 / 21

Multimodal · 以下对话、成图与视频均为本应用实录

对话 · 图像 · 视频，三种模态一体

— 01 · 对话 CHAT

对话咨询问答
图片解析 · 反推提示词 · 反推 JSON
Web Search 联网搜索

— 02 · 图像生成 IMAGE

场域感知：结合文脉与气候生成的方案 — **场域感知**文脉 · 气候 · 环境

— 03 · 视频生成 VIDEO

内置多种视频模型图生视频 · 一键成片

对话、成图与视频均为本应用实际生成 · 底图类素材由用户提供

MODEL MATRIX · 模型矩阵

06 / 21

Model Matrix · 功能模块映射 · 每个功能背后，都有最合适的模型

不是一个模型，是一张矩阵

功能模块	商业模式 · WellAI 网关	开发模式 · Google 官方
图片解析 / 视觉分析	gemini-3.1-flash-lite	gemini-3-flash-preview
图像分析 + 关键词	gemini-3.1-flash	gemini-1.5-flash
反推提示词	gemini-3-flash-preview	gemini-3-pro-preview
深度对话	deepseek-v3.2	gemini-1.5-flash
图片生成	gemini-3.1-flash-image-preview	同左
视频生成	SeeDance-* 系列	同左

开发期用 Google 官方模型快速调通，上线后切到 WellAI 网关控制成本与稳定——模型可随时替换，功能不受影响

PROCESS · 全流程总览

07 / 21

Six Steps · 全程 AI 协作

六步，从一句话到一个上线应用

STEP 01对话生成开发文本提需求，AI 写 PRD

STEP 02AI 工具生成应用AI Studio / KIMI

STEP 03人机互动迭代判断 · 取舍 · 商量

STEP 04测试与修 Bug90% 的工作量

STEP 05前端本地运行雏形完整演示

STEP 06后端与部署上线云服务器 · 真实访问

STEP 01–04 发生在对话框里 · STEP 05–06 走向真实世界

STEP 01 · 与 AI 对话，创建开发文本

08 / 21

Requirement · 用户提需求，AI 写开发文本

先设定角色，再谈功能

01

角色定位

让 AI 把你设定为公司的“首席图像架构师”——明确这个角色的职位、使命与话语权。

02

权限边界

这个角色能调用什么模型、能决定什么、不能碰什么，一开始就说清楚。

03

核心功能

初步确定应用的主要功能清单：草图生方案、模型生方案、风格迁移……

04

技术路线

前端框架、图像模型接口、部署方式——让 AI 给出选型建议，你来做判断。

05

UI 风格

视觉语言、配色、交互基调一次定调，避免后期返工。

06

输出开发文本

最终得到一份完整 PRD——它是整个应用的“图纸”，后续所有生成以它为依据。开发文档可「细」可「粗」，不必追求「一次成型」；可以在后面过程与 AI 工具互动中，不断调整和完善。

对话的质量，决定开发文本的质量；开发文本的质量，决定应用的质量

STEP 02 · 把开发文本导入 AI 开发工具

09 / 21

Tools · 国外 / 国内各备一个

你负责提要求，其它交给会写代码的 AI

A国外 · OVERSEAS

Google AI Studio

Google 官方的 AI 开发平台，模型能力全面，适合快速把开发文本变成应用雏形。

Gemini 系列大模型驱动
内置 Nano Banana 图像模型，有免费额度
从文本到可运行原型，分钟级

B国内 · DOMESTIC

KIMI

国内可直接使用的 AI 助手，中文语境友好，长文本与代码能力同样能扛起生成任务。

中文需求理解与长文档处理强
代码生成、改写、解释一气呵成
网络直连，团队协作零门槛

文本贴进去，应用雏形就开始生长 →

STEP 03 · AI 不断与你互动，完善细节

10 / 21

Iteration Loop · 生成 → 判断 → 调整 → 再生成

AI 提案，你来裁决

01

AI 提案

AI 会不断提出功能建议与细节方案，主动推进应用完善。

02

你的判断

哪些建议采纳、哪些不采纳——你是唯一的决策者。

03

商量与生成

你有自己的想法，就提出来和 AI 商量，它负责生成与调整。

04

验证回流

试用每一个新版本，带着新问题回到第 01 步。

迭代

LOOP · 直到满意为止

STEP 04 · 雏形之后的真实工作量

11 / 21

Reality Check · 本项目实战估算

雏形很快，后面很慢

需求与开发文本

5%

与 AI 对话生成 PRD，一蹴而就

应用雏形生成

3%

AI 开发工具分钟级出原型

功能互动调整

2%

边用边改，顺手完成

测试与修 Bug

90%

AI 时代开发工作量的真正主体：逐功能测试、逐条报错、逐个修复

在 AI 开发的时代，测试与修改 Bug 约占开发工作量的 90% —— 耐心是新的核心竞争力

STEP 05 · 前端开发完成

12 / 21

前端完成，
本地跑通。

LOCALHOST · 它已经是一个真正的应用

BUT · 一道坎

GO ONLINE

至此，应用可以在你自己的电脑上完整运行、完整演示。

但 localhost 只有你自己能访问
真实用户需要域名、服务器与后端服务
于是进入下半场：后端与部署上线

上线，是另一场工程——同样由 AI 陪你走完。

STEP 06 · 后端开发工具

13 / 21

Backend Coding Agents · 可以轮流用

四个工具，轮流上阵

— 01 / OVERSEAS

Claude Code

Anthropic 出品的 Agent 式编程工具，擅长长任务与复杂工程改造。

— 02 / OVERSEAS

Codex

OpenAI 的编程助手，云端任务、代码审查与自动修复都很顺手。

— 03 / DOMESTIC · 本项目主力

Trae

本应用的后端主要用它开发——因为当时它是免费的。免费，就是最大的说服力。

— 04 / DOMESTIC

CodeBuddy

腾讯出品的编程助手，可直连 GLM 系列新模型，不用排队。

工具没有信仰，哪个顺手用哪个——轮流使用是 AI 开发的常态

STEP 07 · 云服务器租赁与配置

14 / 21

Cloud · 以阿里云为例

在云端，租一块自己的地

LAYER 01

选购与开通

以阿里云 ECS 为例：选择地域、实例配置与带宽，包年或按量付费，完成实名认证与开通。

ALIYUN ECS

LAYER 02

系统与安全

选择 Ubuntu 等系统镜像；
配置安全组，放行 80 / 443 与面板端口；
设置登录密钥，锁住大门。

SECURITY GROUP

LAYER 03

域名与解析

注册域名并完成备案；
在 DNS 控制台把域名解析到服务器 IP，为正式上线铺路。

DNS · ICP

配置不懂就问 AI：把控制台截图贴给它，它会告诉你每一项填什么

海外域名 + 免费服务器/托管，无需备案，即开即用

BONUS · 免备案建站

14+ / 21

Overseas · 免备案 · 免费方案

免备案建站全流程（10步）

STEP 01

注册海外域名

推荐 Namecheap / Cloudflare / GoDaddy。搜索域名 → 加购 → 开启 Whois 隐私保护 → 用信用卡/PayPal/支付宝付款 → 完成邮箱验证。海外域名无需实名，即买即用。

NAMECHEAP · CF · GODADDY

STEP 02

购买海外服务器/VPS

Vultr / DigitalOcean / Linode $5/月起，新加坡/东京/洛杉矶节点国内访问快。纯静态站可用 Cloudflare Pages / Vercel / Netlify / GitHub Pages，完全免费。

VULTR · DO · FREE

STEP 03

获取服务器登录信息

进入控制台 → 点击实例 → 记录 IP 地址、用户名（Ubuntu 默认 root）、密码（点击 View Password 查看）。

IP · ROOT · PASSWORD

STEP 04

连接服务器（SSH）

Windows 用 PuTTY 或 Windows Terminal；Mac/Linux 直接终端输入 ssh root@你的服务器IP，输入密码登录（输入时不显示，直接回车）。

SSH · PUTTY · TERMINAL

STEP 05

初始化服务器环境

apt update && apt upgrade -y 更新系统，安装宝塔面板。安装完成后终端会显示宝塔登录地址、用户名、密码。不想用宝塔可手动安装 LNMP 或 Node.js。

APT · BT PANEL · LNMP

STEP 06

开放服务器端口

Vultr 控制台 Firewall 放行 TCP 22(SSH)、80(HTTP)、443(HTTPS)、8888(宝塔)。或用 UFW 命令：ufw allow 22/80/443/8888 && ufw enable。

FIREWALL · UFW · PORTS

STEP 07

域名解析到服务器

域名注册商 DNS 管理 → 添加 A 记录：@ 和 www → 服务器 IP。推荐用 Cloudflare DNS，解析更快，免费 CDN + DDoS 防护。通常几分钟到几小时生效。

DNS · A RECORD · CDN

STEP 08

宝塔面板建站

宝塔 → 安装 LNMP 套件 → 添加站点（填域名）→ 创建 MySQL 数据库 → 上传文件或部署 WordPress。SSH 下载 WordPress 并配置权限即可运行。

LNMP · WORDPRESS · MYSQL

STEP 09

配置SSL证书（HTTPS）

宝塔 → 网站 → 站点设置 → SSL → Let's Encrypt → 勾选域名 → 申请。免费、自动续期。开启「强制 HTTPS」，地址栏显示小锁图标。

FREE SSL · HTTPS

STEP 10

测试上线 + 日常维护

浏览器输入域名确认正常打开 → 检查 HTTPS 小锁 → 手机测试 → 宝塔设置自动备份 → 修改 SSH 端口、禁用 root 登录、安装 Fail2ban 提升安全。

LIVE · BACKUP · SECURITY

BONUS

纯静态站 · 零成本方案

只需展示型网站？Cloudflare Pages / Vercel / Netlify / GitHub Pages 完全免费。GitHub 上传代码 → 连接仓库 → 自动构建部署 → 绑定域名。无需买服务器。

100% FREE · AUTO DEPLOY

⚠️ 海外域名 + 海外服务器 = 无需 ICP 备案，即开即用。静态站可完全免费，动态站约 $5/月。

STEP 08 · 前后端打包与部署

15 / 21

Deploy · 以宝塔面板为例

五步走，把应用送上服务器

STEP 01

打包——前端 build 产物 + 后端服务代码，整理成可上传的部署包

STEP 02

上传——通过宝塔面板或 SCP，把部署包传到服务器指定目录

STEP 03

建站——在宝塔面板创建站点、绑定域名，配置运行目录与运行环境

STEP 04

反代——Nginx 反向代理：前端静态托管，API 请求转发到后端服务

STEP 05

启动——后端进程常驻（如 PM2），打开域名访问验证

本项目演示环境 · 宝塔面板 https://47.93.210.248:55555/71487f9b · 账号 kbitai · 密码于现场演示时提供

STEP 09 · SSL · 数据库 · 其他注意

16 / 21

Field Notes · 上线之后，这些细节决定能不能跑得久

六条实战经验

MOD

代码模块拆分

模块尽量拆小，一个模块一段代码；让 AI 每次只读必要的上下文，生成更精准、维护更轻松。

GIT

GitHub 版本管理

每次大改先 commit，改崩了随时回滚；新想法放到分支里做实验。

API

中间站

聚合多家模型的 API 中转站：一个 Key 调多个模型，省去逐个开通与排队。

SSL

SSL 认证

宝塔面板一键申请 Let's Encrypt 证书，全站开启 HTTPS，浏览器不再提示“不安全”。

SQL

数据库

MySQL 建库建表、定期备份；SQL 语句同样可以让 AI 写，你只需描述数据结构。主要客户管理和数据信息生成网页端后台管理页面。直观、方便。

ASK

有问题问 AI

学会看浏览器F12，控制台（Console）、网络（Network)报错信息；报错信息直接贴给 AI——它既是你的开发者，也是 24 小时在线的技术顾问。

遇到的所有问题，AI 几乎都见过——你缺的不是答案，是开口问

CHEATSHEET · Git 命令

16+ / 21

Version Control · 版本管理必备命令

Git 常用命令速查

基础本地版本控制

git init # 初始化仓库 git add . # 添加所有改动到暂存区 git commit -m "描述" # 提交更改 git status # 查看文件状态 git log # 查看提交历史 git diff # 查看改动内容

INIT · ADD · COMMIT

分支分支管理

git branch dev # 创建 dev 分支 git checkout dev # 切换到 dev 分支 git checkout -b dev # 创建并切换（合并上面两步） git merge dev # 合并 dev 到当前分支 git branch -d dev # 删除 dev 分支

BRANCH · MERGE

回退撤销与回滚

git restore . # 撤销未提交的改动 git reset --soft HEAD~1 # 撤销最近1次commit（保留改动） git reset --hard HEAD~1 # 彻底回退到上个版本 git stash # 临时保存改动 git stash pop # 恢复临时保存的改动

RESET · STASH

GitHub 上传 GitHub（国外）

git remote add origin https://github.com/用户名/仓库.git git branch -M main git push -u origin main # 首次推送 git push # 后续推送 git pull # 拉取远程更新 git clone https://github.com/... # 克隆仓库

GITHUB · PUSH · PULL

Gitee 上传 Gitee（国内）

# 国内访问更快，操作与 GitHub 相同 git remote add gitee https://gitee.com/用户名/仓库.git git push gitee main # 推送到 Gitee # 同时推送到 GitHub + Gitee git push origin main git push gitee main

GITEE.COM · 国内镜像

Tip 实用技巧

git config --global user.name "你的名字" git config --global user.email "你的邮箱" # 忽略文件（创建 .gitignore） echo "node_modules/" >> .gitignore echo ".env" >> .gitignore # 查看远程地址 git remote -v

CONFIG · IGNORE

💡 建议：GitHub 做主力仓库，Gitee 做国内镜像，两者同步推送，国内访问速度更快

SUMMARY · 总结

17 / 21

What Changes · 三个判断

AI 时代，什么在改变

THREE SHIFTS

壁垒在拆除
学习在加速
能力在迁移

KBITAI · FIELD NOTE

01

专业壁垒在拆除，信息差被填平

不会写代码不再是门槛——懂业务、会提问的人，可以直接抵达产品。

02

学习的成本在降低

随时学、根据需要学——不必先学完再动手，缺什么就在做中学什么。

03

核心能力在迁移

定义问题、分解问题、判断与决策——AI 负责“怎么做”，你负责“做什么、对不对”。

STATEMENT · 一句共勉

18 / 21

代码交给 AI，判断力留给自己。
Code to AI, judgment to yourself.

— 与诸位共勉 · KBITAI FIELD NOTE · 2026.08

19 / 21

CLOSING

KUANFORM · 匡形无界

设计有形
科技无界

FINITE FORM INFINITE TECH

从代码素人到全栈上线，隔着的不是技术，而是开始。欢迎亲手试试这个应用。

天津匡形无界智能科技有限公司

Tianjin Kuanform Intelligent Technology CO,LTD

26.08.03

ENTRANCES · 三个入口

CLICK TO OPEN

01

公司主页 ↗

匡形无界 · 了解我们在做什么 —— kbitai.com.cn
02

作品集 ↗

移动优先的双语建筑作品集 —— kbitai.com.cn/Portfolio/
03

AI 工具 · 首席图像架构师 ↗

申请内测，亲手试试“魔法” —— kbitai.com.cn/architect/

RESOURCES · 参考资源

https://www.namecheap.com/ 注册域名
https://pages.cloudflare.com 域名托管
https://gitee.com/help/articles/4136 Gitee Pages 部署

→ 完 · END OF FIELD NOTE

用"魔法"创建"魔法"Magic TO Magic

我不会写代码。但我上线了一个 AI 应用。