拓展
01 · 封面 2026 · 04
拓展工程

品牌门店拓展策略 · AI 辅助开发实践

02 · 店铺计划
Shop Plan · New & Relocation

新店 · 移位

时间店铺类型
2026 / 03 / 11杭州万象城移位
2026 / 04 / 15上海来福士移位
2026 / 05上海华润中心新店(待定)
2026 / 06上海 ITC移位(待定)
2026 / 06 / 01成都万象城移位 · 改集合店
2026 / 12北京太古坊移位(待定)
2027苏州中环新店(待定)
03 · 店铺计划
Shop Plan · Closure

撤店计划

时间店铺
2026 / 06 / 10广州天河城
2026 / 07 / 31北京西单大悦城
2027 / 03 / 20苏州诚品
04 · 店铺计划
Shop Plan · Renovation

翻新计划

时间店铺备注
2026 / 03(预计)上海环贸 IAPM改集合店
2026 / 06北京国贸商城改集合店
2026 / 06上海静安嘉里翻新
05 · 认识 AI
Understanding AI

认识 AI

自然语言

人类的语言——中文、英文、日文……
AI(大语言模型)能「理解」自然语言

AI 的本质

基于大量数据、统计模型的运算结果,根据数据规律预测、生成。
≠ 人类基于情感、经验、直觉的理解

Claude(宪法式 AI)

内置原则 + 多轮自我审查 + 强制的事实性和指令遵循
已公开「宪法」文件

ChatGPT(RLHF)

人类反馈强化学习模型
行为由训练数据定义

06 · 认识 AI
AI Landscape

主要 AI 公司与产品

公司产品模型命名
OpenAI
开放、非盈利
ChatGPT · Codex(Vibe Coding)DALL·E · Sora(日语「天空」→ 无限可能)
Anthropic
希腊语「人类」
Claude.ai · Claude Code(Vibe Coding)Haiku 俳句(轻快)· Sonnet 十四行诗(适中)· Opus 拉丁「作品」(复杂)
Google DeepMindGemini 双子星Gemma 拉丁「宝石」· Bard 吟游诗人
xAI
马斯克
Grok(科幻中的「深度理解」)
07 · Vibe Coding
Core Principles

Vibe Coding · 核心理念

核心理念
  • 用自然语言描述需求,AI 生成全部代码——聊天即开发
  • 开发者专注方向决策,不写一行代码
  • 主要工具:Claude Code(AI Agent)
  • 从构思到部署上线,一人完成
重要原则
⚠️不能全权交给 AI 处理
和 AI 协作
有责任检查 AI 输出的正确性
必要时阻止错误、冗余
学习运行原理,让 AI 更好、更快、更省钱
08 · Vibe Coding
Development Flow

开发流程对比

开发步骤
1
需求:描述功能、数据结构,或制作需求文档
2
生成:Claude Code 自动生成前端、后端代码
3
修复:自动处理报错、自动测试
4
部署:筛选服务器、缓存、域名工具,上线
传统开发 vs Vibe Coding
项目传统开发Vibe Coding
语言要求精通代码自然语言
上手速度数周数小时
错误修复手动排查AI 自动修正
适合场景复杂系统快速验证想法
09 · 工具介绍
Tools · VS Code

Claude Code · VS Code

写程式码用的记事本,但功能强大很多。

核心价值
10 · 工具介绍
Tools · Plan Mode

Claude Code · Plan Mode

复杂任务「计划模式」:自行规划步骤、生成 to-do list,再逐步执行。

📋
任务规划

执行前先列出完整步骤,让你确认方向后再动手,避免走弯路

开启方式

在 Claude Code 终端按 Shift + Tab 两次即可切换

11 · 工具介绍
Tools · Skill

Claude Code · Skill

事先写好的「工作说明书」,让 AI 知道怎么按你的规矩做事。

📄
是什么

存放在项目中的 Markdown 文件,描述特定任务的最佳实践和规范

🎯
用途

让 AI 生成 PPT、文档、代码时,自动遵循你预设的格式与质量标准

12 · 实践案例
Vibe Coding Practice

两个编程实践

🏬
ShopHub · 店铺信息查询

在线数据源 + 查询返回
租赁合同、装修信息汇总

简单Google SheetsFlask
📰
LiteNews · 简单资讯

封闭系统爬虫 + 调用 API 摘要
商业地产公众号信息精选

进阶WeRSSGeminiRedis
SH
13 · ShopHub
Project One
ShopHub
店铺信息查询

商场租赁数据查询平台
实时从 Google Sheets 拉取数据,子字符串匹配检索

从零构建全程 AI 辅助
14 · ShopHub
Technical Architecture

技术架构

Google Sheets
数据源
CSV 导出接口
实时拉取
Vercel Serverless
Python / Flask
子字符串匹配
后端检索逻辑
纯 HTML/CSS/JS
网页实时呈现
📊
Google Sheets

免费数据源,团队可直接编辑维护,无需数据库

🔍
子字符串匹配

关键词检索,匹配商场名、品牌、区域等字段

Vercel 部署

Serverless 架构,免运维,自动扩展,永久免费套餐

15 · ShopHub
Problem Solving

难点实录

01
❌ 文件路径 · Vercel 无法加载模板文件
✅ HTML 直接内嵌 Python 字符串,绕过文件系统限制
02
❌ 编码问题 · CSV 中文乱码
✅ 显式设置 resp.encoding = "utf-8" 强制解码
03
❌ 数据解析 · 列数不对齐导致字段错位
✅ 按表头动态映射字段,自动跳过列数不足的短行
16 · ShopHub
Reflection

学习思考

✅ 适合 Vibe Coding 的场景
  • 快速验证、数据查询类工具
  • 开放 API 的数据源工具
  • 轻度开发、内部工具、个人项目
  • 不熟悉 Python / Flask 也能上手
⚠️ 局限性
  • 搜索仅支持精确子字符串,不支持模糊 / 拼音
  • 数据量大时每次请求均需拉取全量 CSV
  • 国内合法使用开放 API 需注意合规
DEMO
17 · ShopHub
Live Demo

ShopHub · 现场演示

🔍 输入关键词实时返回结果 ✨ 匹配词高亮显示 📋 租金、面积、扣点等完整字段 📱 移动端适配

VIBE CODING × CLAUDE CODE · 2026

LN
18 · LiteNews
Project Two
简单资讯
LiteNews

商业地产行业公众号智能聚合平台
Vibe Coding × Claude Code 实战项目

从零构建全程 AI 辅助
19 · LiteNews
Project Overview

项目简介

📡
自动抓取

通过 WeRSS 突破腾讯封锁,实时抓取近 3 日行业公众号文章

🤖
AI 筛选

Gemini API 智能分析、自动分类——值得看 / 简单看,训练中持续优化

缓存更新

Upstash Redis(安全免费),平衡刷新频率与 token 用量

20 · LiteNews
Technical Architecture

技术架构

微信公众号
10 个商业地产账号
WeRSS
公众号 → RSS
Vercel Serverless
后端 API 处理
Gemini AI
智能分析与分类
用户网页
实时展示结果
🔄   Upstash Redis 缓存层  ·  每小时自动刷新  ·  避免重复 API 调用
技术栈 WeRSSVercelGemini APIUpstash Redis原生 HTML/CSS/JS
21 · LiteNews
Problem Solving

难点解决

01
❌ 国内缓存工具安全性存疑
✅ 改用 AI 推荐的国外主流工具 Upstash
02
❌ 国内网络封锁影响访问
✅ Cloudflare 绕过科学上网问题
03
❌ 跨 AI 工具无法读取正确模型名称
✅ 增加跨 AI 自动查询官方文件的 Skill
04
❌ 时区偏差导致文章过期误判
✅ RSS 为 UTC,北京时间差 8 小时,扩大判断范围
05
❌ 依赖包未加入 package.json
✅ csv-parse 未声明依赖,Claude Code 自动检测补全
22 · LiteNews
Reflection

感受与反思

✅ Vibe Coding 的价值
  • 快速验证复杂想法,从想法到上线仅需数天
  • 不熟悉的技术栈也能驾驭
  • AI 自动发现并修复大多数常见错误
  • 专注业务逻辑,而非语法细节
⚠️ 仍需注意
  • 复杂报错仍需基本技术理解
  • AI 可能使用过时的 API
  • 需人工做最终判断和决策
  • 仍需理解基本架构概念
DEMO
23 · LiteNews
Live Demo

简单资讯 LiteNews · 现场演示

· 文章自动分类标签 · 更新时间戳显示 · 移动端适配

VIBE CODING × CLAUDE CODE · 2026