---
name: jjb-image-layout-constraint
description: 定义基于图片生成代码时的布局约束规范。在根据用户上传的图片生成代码、还原页面布局或分析设计稿时使用。要求严格分析并执行图片中的布局结构，不得自行调整或优化。
---

# 技术栈与基础

## 图片布局约束

- **图片生成代码规范**：当用户上传图片并根据图片生成代码时，**必须** 严格执行图片中的布局结构。

- **布局分析要求**：

  - **仔细分析**：必须仔细分析图片中的布局结构，包括但不限于：

    - 组件的位置关系（上下、左右、嵌套等）

    - 组件的尺寸比例和间距

    - 组件的对齐方式

    - 组件的排列顺序

    - 组件的视觉层次

  - **严格执行**：生成的代码必须严格按照图片中的布局结构实现，不得自行调整或优化布局。

  - **布局还原**：确保生成的页面布局与图片中的布局结构完全一致。