原始标题: 258 | How I Built an AI Website + Editor from Scratch with Claude & Replit (And Zero Developers)
发布日期: 2026-01-13 | 来源频道: @leveraging-ai
📝 深度摘要
1. 播客概览与访谈元数据
嘉宾画像与 AI 背景：Isar Maitis | Multiply（AI 教育与咨询公司）创始人兼 CEO / Databreeze（AI 智能对账与凭证核验产品）联合创始人。拥有超过 20 年软件公司运营经验，2023 年 4 月起开设 AI 商业转型课程，累计培训时长近三年。
主题与行业坐标：AI 原生应用开发全流程实战——从零构建网站及可视化编辑器。颠覆传统网站开发依赖第三方平台（Wix/WordPress）或外包开发者（Upwork/Fiverr）的模式，演示如何仅用 Claude + Replit 两大 AI 工具，在无需任何程序员介入的前提下，完成品牌设计、原型开发、生产部署及自定义编辑器搭建。
深层结构性痛点：传统网站开发存在三重摩擦——（1）时间成本：自行搭建需学习复杂工具；（2）金钱成本：外包开发费用数千至上万美元不等；（3）迭代效率：每次微小修改（如改两字、换图片）均需撰写冗长 Prompt 或重新沟通需求。主持人旨在验证：AI 时代是否可以将「想法→产品」的完整链条压缩至个人可掌控的范围内。
核心结论 (TL;DR)：通过四步工作流（深度研究→需求定义→AI 原型→Vibe Coding 生产）可实现零代码基础搭建专业级网站。使用 Claude 处理设计创意与品牌规范，利用 Replit 的 Agent 能力构建可交互编辑器，整体开发成本仅 $100-120（两周内完成），时间投入约 30-35 小时。核心洞察在于：与其直接使用通用工具，不如基于自身工作流定制专属编辑器，从而实现「点击即改」的高效迭代体验。
2. 核心工作流拆解
2.1 痛点与背景
传统网站开发面临三条路径选择：（1）自主使用 Wix、Elementor 等拖拽式平台——功能受限、定制化程度低；（2）雇佣 Upwork/Fiverr 外包开发者——金钱成本高（数千至数万美元）、沟通成本高、迭代周期长；（3）自学代码——时间投入巨大。主持人作为拥有 20 年软件背景的从业者，决定验证 AI 是否能彻底颠覆这一流程，实现真正的「一人开发」模式。
2.2 AI 解决方案与架构
工具链组合：
| 阶段 | 使用工具 | 核心功能 | 输出产物 |
|---|---|---|---|
| 深度研究 | Claude（Deep Research） | 研究目标受众、竞品、API/MCP 工具生态 | 市场洞察报告 |
| 品牌定义 | Claude（Brand Guidelines Skill） | 从 Logo 提取色彩、定义品牌个性与视觉规范 | 完整品牌指南（五页文档） |
| 原型开发 | Claude（Artifact/Canvas） | 快速渲染网页原型、迭代视觉与交互效果 | 可交互 HTML 原型 |
| 生产开发 | Replit（Vibe Coding） | 代码结构化、版本控制、可视化编辑器构建 | 可部署网站 + 自定义编辑器 |
| 成本优化 | Replit + Cloud Code | 在 Replit 内部调用 Anthropic API | 月成本从 $60/周降至固定 $100/月 |
技术架构要点：Replit 承担后端逻辑与部署能力，支持连接第三方服务（如日历预订、动态定价模型），同时内置 Git 版本控制，可回滚至任意历史版本。编辑器的核心设计思路是：将网站每个元素（图片、文字、按钮）注册为可单独选中、编辑、属性调整的组件，并通过右侧菜单暴露控制面板。
2.3 工作流对比地图
传统模式 (Linear/Manual)：
- 环节 1：确定需求 → 手动撰写需求文档（耗时 1-2 天）
- 环节 2：设计稿确认 → 依赖设计师输出（金钱成本 $500-5000）
- 环节 3：前端开发 → 编写 HTML/CSS/JS（技术门槛高）
- 环节 4：后端集成 → 接入数据库、第三方 API（需程序员）
- 环节 5：测试部署 → 手动上传服务器、配置域名
- 反馈回路：每次修改需重新沟通 → 设计师/开发者排期 → 等待交付（周期 3-7 天/次）
AI 赋能模式 (Agentic/Automated)：
- 环节 1：深度研究 → AI 自动抓取竞品官网、分析行业趋势（10 分钟）
- 环节 2：品牌规范 → AI 从 Logo 提取色彩、生成完整品牌指南（5 分钟）
- 环节 3：原型迭代 → Claude 实时渲染网页、可视化调整配色/动效（30 分钟/版本）
- 环节 4：Vibe Coding → Replit Agent 承接完整代码、构建可编辑界面（持续迭代）
- 反馈回路：点击元素直接修改 → 自动保存版本 → 一键回滚（实时）
2.4 像素级执行步骤/SOP
步骤 1：深度研究（Deep Research）
- 工具：Claude Deep Research / ChatGPT Research / Gemini
- 操作：输入研究目标（如「会计软件行业独特网站设计」），获取竞品网站列表、独特动效案例
- 输出：收集 5-10 个参考网站链接，重点关注滚动动效、横向切换、视差滚动等交互模式
步骤 2：品牌规范定义（Brand Guidelines）
- 工具：Claude（Brand Guidelines Skill）
- Prompt 示例：「这是一款面向会计软件的 AI 智能对账产品，品牌叫 Databreeze。Logo 包含青绿色波浪图标。请基于此设计完整品牌指南，传递『新鲜感、前沿科技、快速高效、简洁平静、专业可信』的品牌感受。」
- 核心输出：主色/辅色色板、字体层级（H1/H2/H3/正文/ caption）、品牌个性描述
步骤 3：原型开发（Prototype in Canvas/Artifact）
- 工具：Claude Artifact / ChatGPT Canvas / Gemini Artifact
- 动作 A：上传参考网站视频（展示动效），要求 AI 分析并提取可复用的动效类型（横向滚动、分屏色彩切换、3D 悬浮、视差滚动等）
- 动作 B：创建多套配色方案并排对比，每套方案附带基础首页渲染，直观感受色彩在实际页面中的表现
- 动作 C：添加主题切换下拉菜单，一次性渲染三套配色，通过下拉选择动态切换整个网站的颜色配置
- 迭代逻辑：每轮迭代聚焦一个维度（动效→配色→布局→文案），避免一次性要求过多变更
步骤 4：生产开发与编辑器构建（Vibe Coding in Replit）
- 工具：Replit + Cloud Code（Anthropic API）
- 迁移动作：将 Claude 生成的 HTML 代码复制到 Replit，要求 Replit 承接并增强以下能力：
- （1）组件化注册：每个图片、文字块、按钮均可单独选中
- （2）右侧编辑面板：点击组件弹出属性菜单（字体、颜色、大小、对齐、链接）
- （3）多端适配：自动生成大屏/平板/手机三套布局，编辑时可选择修改范围
- （4）版本控制：Save 按钮保存网站快照，记录变更说明；支持历史回滚
- （5）编辑器迭代：独立保存编辑器本身的版本，单独回滚
步骤 5：成本优化配置
- 配置路径：Replit → 点击「+」→ 选择「Shell」
- 安装 Cloud Code：在 Shell 中运行 Cloud 官方提供的一行安装命令
- 订阅选择：Anthropic Cloud 订阅（$100/月）vs 按量付费（$40-60/周高强度使用）
- 结论：订阅制更稳定，月成本上限 $120（Replit $20 + Cloud $100），显著低于按量计费周均 $60 的波动成本
2.5 关键工具能力对照
| 工具 | 核心优势 | 适用场景 | 局限性 |
|---|---|---|---|
| Claude | 设计理解力强、Brand Guidelines Skill、Artifact 快速渲染 | 品牌定义、原型迭代、动效探索 | 无后端、无版本控制 |
| ChatGPT | 生态系统成熟、Canvas 能力均衡 | 通用原型、文案生成 | 设计理解略弱于 Claude |
| Gemini | 多模态能力强 | 复杂研究任务 | 原型渲染能力一般 |
| Cursor | 代码编写能力顶级、技术人员首选 | 深度定制开发 | 学习曲线较陡 |
| Replit | Agent 能力完整、内置数据库/部署、版本控制 | 生产级应用开发、非技术人员友好 | 深度定制需学习 Shell |
| Lovable | 简单易用 | 快速原型验证 | 功能深度有限 |
| Base44 | 移动端优化 | 移动应用场景 | 社区生态较小 |
3. 关键洞察与商业启示
洞察 1：定制化编辑器的「点击 vs Prompt」效率鸿沟。在原型阶段，每次修改需撰写数行 Prompt 描述需求（如「把图片放大 10%、颜色调亮」），反复调试消耗大量时间。自建编辑器的核心价值在于：把「写 Prompt」转化为「点选组件→调整参数」的直观操作，将修改效率提升一个数量级。这是 AI 开发工作流中的关键跃迁点——从「与 AI 对话」到「直接操控产出物」。
洞察 2：Vibe Coding 工具的选择逻辑——「最匹配」优于「最强」。主持人明确指出 Cursor、Replit、Lovable、Base44 均为顶级工具，但无绝对优劣。技术背景强的人倾向 Cursor（可直接写代码），非技术背景者倾向 Lovable（全 Agent 托管），而 Replit 居于中间——既可通过 Agent 全自动完成，也支持通过 Cloud Code 获取精细控制权。选择工具的本质是选择「工作流控制权的让渡程度」。
洞察 3：成本结构的范式转移。传统开发模式下，开发者的薪酬是最大成本（时薪 $50-200+）；AI 开发模式下，最大成本转化为「Token 消耗」与「时间调试」。通过 Cloud Code 订阅制，主持人将周均 $60 的波动成本固化为 $120/月的固定成本，实现了可预测的预算管理。这对创业者与小型团队的现金流管理具有直接参考价值。
洞察 4：「开发工具」本身就是一种产品。主持人将编辑器与网站视为两个独立产品分别迭代：编辑器负责「如何修改网站」，网站负责「网站长什么样」。这种分离设计使得编辑器可以复用于其他项目（一次开发、多次复用），也使得网站的迭代速度不受编辑器的功能演进限制。这是典型的高级产品思维——工具层与应用层解耦。
洞察 5：非技术人员的 AI 开发路径已完全可行。主持人以自身实践（30-35 小时总投入、$120 总成本）证明：无需编写代码、无需理解数据库与 API，即可完成专业级网站及配套工具的开发。这一结论直接挑战了「AI 开发仍需技术人员」的旧叙事，为业务决策者提供了「一人即团队」的可行性佐证。
4. 决策者行动指南
切入点战略 (Beachhead Strategy)：从「单页静态网站」或「内部工具」切入。优先选择业务价值明确、迭代需求频繁但技术实现简单的场景——例如：产品介绍页、客户案例展示、内部数据看板、报名表单收集页。此类场景容错率高、验证周期短，可快速积累 AI 开发经验后再扩展至复杂应用。
资源配置清单：
| 资源类型 | 推荐配置 | 关键理由 |
|---|---|---|
| AI 原型工具 | Claude（推荐）或 ChatGPT Canvas | Claude 对设计意图的理解更精准，适合视觉导向项目 |
| Vibe Coding 平台 | Replit（推荐）、Lovable、Cursor 任选其一 | Replit 在自动化与精细控制间取得最佳平衡 |
| AI 订阅 | Anthropic Cloud Pro（$100/月） | 相比按量付费更稳定，避免周均 $60 的成本波动 |
| 基础技能 | Prompt 编写、PRD 撰写、迭代沟通 | 无需写代码，但需清晰表达需求意图 |
| 时间投入预期 | 首项目 30-40 小时（含调试与学习曲线） | 包含原型迭代、编辑器构建、版本控制熟悉 |
团队配置建议：
- 个人创业者/小型团队（1-2 人）：直接使用上述工具链，无需额外配置
- 中型企业（5 人以上）：可安排一名「AI 开发协调人」角色，负责将业务需求转化为 Prompt 与 AI 工具操作，输出物由业务方直接验收
- 关键原则：先跑通最小可行产品（MVP），再考虑引入专职开发者——AI 已可将 80% 的基础开发工作自动化
风险提示：主持人坦诚提及，因 Prompt 表述不当导致的功能故障与回滚情况在实际开发中时有发生。建议每次 Save 操作都附带清晰的版本说明，便于后续精准回滚。此外，复杂动效与跨浏览器兼容性仍需人工验收。
5. 经典金句
“The bottom line is you can now develop any solution you need, whether it’s basic applications, advanced applications, entire websites, segments of the websites, all by using simple English, all by following the steps that I described to you in the episode today.”
「底线是：你现在可以通过简单的英文指令，按照本期节目描述的步骤，开发任何解决方案——无论是基础应用、复杂应用、完整网站，还是网站的任意模块。」
“I literally build my own tools based on my exact specific needs and they work exactly as I need them.”
「我根据自己确切的需求定制开发专属工具，这些工具完全按我的方式工作。」
本篇摘要基于 2026 年 1 月 13 日《Leveraging AI》播客第 258 期内容整理，完整还原主持人 Isar Maitis 从零构建 AI 网站与可视化编辑器的完整工作流。
📺 播客地址
播客时长: 39分钟