---
tags: [wechat, article, claude, openai]
title: "tmall ai coding practice team knowledge base npm"
type: raw
url: https://mp.weixin.qq.com/s/iRkxznDYhE-kXjbIHlrnNA
ingested: 2026-05-08
sha256: afdb4cc2e4b2f967e7e56dab684df725a35bd40aaec4ba8924777ce62112176a
review_value: 7
review_confidence: 7
review_stars: 3
review_product: 49
review_recommendation: STRONG
source: 天猫新品团队（阿里巴巴）
published: ~2026-05
created: 2026-05-10
updated: 2026-05-10
---
# 天猫新品团队 AI 编码实战指南（下）
**来源：** 天猫新品营销技术团队内部实践
**定位：** AI 辅助编码全链路实战指南（下篇），含团队建设 + 实用技巧
## 上篇核心框架回顾
| 三大核心思想 | 全流程优化 |
|------------|----------|
| 最大化复用 | 前置准备 → 开发前 → 开发中 → 完成后 |
| 自然语言第一 | |
| 二八定律 | |
**需求分类：**
- 需求驱动型 → 小二端工作台（低代码质量要求）
- 工程主导型 → C 端复杂业务（高代码质量 + 视觉还原要求）
## 团队建设经验
### 小二端 — AI 主导的对话生码
**特点：** 无视觉还原度要求，页面间独立性强，后端同学主要通过 AI 完成全部需求实现。
#### 初期：统一生成方案
- 小二端开发培训（规范）
- 页面间完全解耦结构
- 高频页面提供代码模板
#### 中期：补齐前端经验短板
**问题：后端同学无法精准描述需求**（缺乏前端术语概念）
解法：
- 「AI 案例实践中心」：B 端常见页面 → 标准化 prompt 模板
- MCP 速查工具「天猫新品业务编码助手」：输入需求 → 输出标准化页面 PRD → 喂给 AI
- **图片生成提示词工具**（Gemini 3.0 多模态）：参考页面 → 系统化结构化描述词 → 比直接传图给编程工具有更好的页面还原效果
**问题：垂类场景 / 复杂问题没有经验**
解法：
- 生码沉淀：详细记录实现过程与踩坑心得
- 案例分两类：新增型需求 / 更新型需求
- 每份案例包含：需求背景、实践步骤、功能自测、错误提示
#### 后期：轻量级团队知识库（无感辅助）
核心思路：用 **npm 包**作为知识库资源承载 + 版本管理工具，**以类 Skill 形式封装**：
```
git 仓库管理文档
    ↓
npm 包作为资源承载 + 版本管理
    ↓
Skill 形式封装团队规范 + 代码模板
    ↓
AI 通过 curl 直接读取 npm cdn 资源（不依赖具体编码工具）
    ↓
编辑器 Rules 配置接入
```
**关键优势：**
- 及时更新（git → npm publish）
- 不依赖编码工具（curl 读取）
- 支持 AI 问答（CodeWiki 集成）
- 统一收口团队基础开发方案
### C 端 — 全栈开发模式下的 AI 辅助
**挑战：**
- 代码质量要求高，业务隐含逻辑多，无法纯 AI 完成
- 链路长，涉及仓库多（前后端 + 组件库 + 工具库）
- 高频高耗时节点需要分析与优化
**主要 Action：**
1. 代码结构与公共组件设计 → 提高生码效率
2. 高频 workflow 标准化沉淀
3. 基础团队知识库（统一读取方案）
4. 让 AI 基于知识库产出技术方案 + 人工审核
5. 开发流程工具辅助（走查辅助 / 接口查询 / 页面检查 MCP）
**未来方向：**
- 知识库自动生成与更新
- 更 AI 友好的代码架构
- 整条链路 AI 串联
## 实用技巧集锦
### 严苛程度分级表
| 严苛程度 | 典型场景 | 错误容忍 | 视觉还原 |
|---------|---------|---------|---------|
| ★★★★★ 最严苛 | C 端频道 | 0容忍 | 高要求 |
| ★★★★ 较严苛 | B 端商家平台 | 0容忍 | 中要求 |
| ★★★ 普通 | 小二端工作台 | 0容忍 | 低要求 |
| ★★ 较低 | 研发自用工具 | hack绕过则0容忍 | 无要求 |
| ★ 不严苛 | 研发 DEMO | 能意会则容忍 | 无要求 |
### UI 布局重构
让 AI 解释旧布局 → 区块划分与标记 → 构思新布局 + 迁移方向 → AI 理解布局结构进行重构
### 复杂 Prompt 构建
**核心思路：让 AI 操作 AI，开发者只思考需求是什么**
案例：neko 智能参数调试面板
- 需求：生成一个能理解 HTTP GET/POST 参数、字段业务语义、重构表单面板（原生 JS 无构建过程）、iframe 联动（postMessage 实时同步）
- 技巧：让 AI 先理解朴素诉求，再让 AI 自己生成对应复杂 prompt
### 数据转换
- 给出原始数据格式 + 目标数据格式（尽量全，覆盖所有字段）
- 端到端边缘 case 测试
- 让 AI 负责协议转换，人只负责验收
### 多方案选优
```
对不熟悉的项目
    ↓
让 AI 给出多种方案（附带优劣分析）
    ↓
人工选出倾向方案
    ↓
确认方案对当前项目的改动大小
    ↓
开始实施
```
### 文档生成
从功能代码反推使用文档（AI 生成，人只审核）
### 页面信息总结
基于 MCP 或内置工具访问页面 → AI 总结 + 举一反三多语言转义
## 未来待解决问题
1. 精细化微调无法达到效果 → AI 对话场景下难以完成精细化页面操作
2. 开放式场景如何保证统一 → 未枚举页面的视觉一致性无法保证
---
*评审：Value 7 × Confidence 7 = 49 | ★★★ | 边界通过，入库原因：知识库 npm 包管理 + 类 Skill 封装模式有参考价值*