AI辅助设计图转代码开发规范

AI辅助设计图转代码开发规范

第一章：开发原则

1.1 基本原则

1. 渐进式开发：采用"整体→模块→细节"的递进式开发路径
2. 可视化验证：每个阶段需配合设计截图进行双向确认
3. 语义化标注：所有产出需包含人类可读的功能说明

第二章：标准开发流程

2.1 框架分析阶段

示例说明：

[示例截图] + 框架说明：
这是一个电商商品详情页，包含以下主要模块：
- 顶部导航栏（固定定位）
- 商品图片轮播区（占宽100%，圆角12px）
- 商品信息区（包含价格标签、促销标识）
- 底部操作栏（加入购物车按钮为主CTA）

2.2 模块分解阶段

示例说明：

选定模块：商品图片轮播区
[模块特写截图] + 结构分析：
该组件为横向滑动容器，包含：
① 主图展示区（当前显示图片尺寸375×375）
   - 背景色：线性渐变(#FFFFFF, #F5F5F5)
   - 图片阴影：x=0, y=2, blur=8, rgba(0,0,0,0.1)
② 页码指示器（位于底部居中）
   - 未激活状态：○ 直径8px，#CCCCCC
   - 激活状态：● 直径8px，#FF4444

2.3 细节实现阶段

2.3.1 静态结构构建

<div class="carousel">
  <div class="slide active">
    <img src="product_1.jpg" alt="商品主图">
  </div>
  <div class="indicators">
    <span class="dot active"></span>
    <span class="dot"></span>
  </div>
</div>

2.3.2 动态逻辑添加

// 轮播控制逻辑
const nextSlide = () => {
  // 这里添加滑动动画实现...
}

第三章：AI协作指南

3.1 AI适用场景

1. 处理清晰定义的独立模块（建议<200行代码）
2. 基于视觉特征明确的截图进行开发
3. 需要明确的样式规范输入（如提供色值、间距等）

3.2 避免事项

1. 直接要求"实现整个页面"
2. 模糊的表述如"做成好看的效果"

第四章：质量保障措施

4.1 基本措施

1. 分段验证：每个模块完成后请求人工确认
2. 差异标注：代码与设计稿的差异需特别说明
3. 版本回溯：保留各迭代版本的代码快照

4.2 复杂模块处理建议

对于复杂模块，建议采用"分析→实现→复核"的循环模式，每个循环周期控制在30分钟以内。