基于HTML设计稿的Flutter界面布局描述文档生成提示词

发表于 分类于
根据上个版本的提示词进行了调整，目前准确度大大提升

根据上个版本的提示词进行了调整，目前准确度大大提升。

提示词如下：

基于HTML设计稿的Flutter界面布局描述文档生成提示词

请基于提供的HTML设计稿文件，生成一个极其详细的Flutter界面布局描述文档，用于指导AI准确生成Flutter Widget代码。描述需要包含以下具体内容：

1. HTML设计稿分析

页面结构解析

  • 分析HTML的DOM结构和层级关系
  • 识别主要的布局容器（div、section、header、main、footer等）
  • 解析CSS样式表中的布局属性（display、position、flex、grid等）
  • 提取响应式设计的断点和媒体查询

视觉元素提取

  • 颜色方案（background-color、color、border-color等）
  • 字体样式（font-family、font-size、font-weight、line-height等）
  • 间距规范（margin、padding、gap等）
  • 尺寸规格（width、height、min/max尺寸等）
  • 边框和圆角（border、border-radius等）
  • 阴影效果（box-shadow、text-shadow等）

2. Flutter Scaffold架构映射

整体页面结构

  • 将HTML的页面布局映射到Flutter的Scaffold结构
  • AppBar配置（基于HTML的header或导航栏）
  • Body布局模式（根据HTML的主要内容区域确定Column、Row、Stack、ListView等）
  • BottomNavigationBar或FloatingActionButton（基于HTML的底部导航或悬浮按钮）
  • Drawer或EndDrawer侧边栏（基于HTML的侧边菜单）

布局容器转换

  • HTML的div容器 → Flutter的Container/Column/Row
  • CSS Flexbox → Flutter的Flex/Column/Row
  • CSS Grid → Flutter的GridView
  • CSS Position → Flutter的Stack/Positioned
  • HTML列表元素 → Flutter的ListView/GridView

3. Widget层级和嵌套关系

DOM到Widget树的映射

  • 从HTML的根元素到具体UI元素的完整Widget树
  • 基于CSS的盒模型确定Container、Padding、Margin的具体数值
  • 根据CSS的flex属性设置Expanded、Flexible的flex比例
  • 识别需要SafeArea、SingleChildScrollView等包装Widget的场景

布局Widget配置

  • 基于CSS的justify-content映射Column/Row的mainAxisAlignment
  • 基于CSS的align-items映射Column/Row的crossAxisAlignment
  • 根据CSS的z-index和position确定Stack的alignment和positioning
  • 基于CSS Grid的grid-template-columns确定GridView的crossAxisCount和spacing

4. 具体UI元素规格转换

文本组件映射

  • HTML文本元素（h1-h6、p、span等）→ Flutter Text Widget
  • CSS字体样式 → TextStyle配置（fontSize、fontWeight、color等）
  • CSS文本对齐 → textAlign属性
  • CSS文本溢出处理 → overflow、maxLines等属性

按钮组件转换

  • HTML按钮元素（button、input[type=”button”]等）→ Flutter按钮组件
  • CSS按钮样式 → ButtonStyle配置（backgroundColor、foregroundColor、elevation）
  • CSS尺寸属性 → 按钮的minimumSize、padding
  • HTML事件处理 → onPressed回调函数说明

输入组件映射

  • HTML表单元素（input、textarea、select等）→ Flutter输入组件
  • HTML属性（placeholder、required等）→ InputDecoration配置
  • CSS样式 → TextField的decoration属性
  • HTML表单验证 → Flutter验证逻辑

图片和图标转换

  • HTML img元素 → Flutter Image Widget
  • CSS background-image → Container的decoration
  • HTML图标字体或SVG → Flutter Icon或自定义图标
  • CSS图片样式（object-fit等）→ Flutter的fit、alignment属性

卡片和容器映射

  • HTML卡片式布局 → Flutter Card组件
  • CSS盒模型 → Container的decoration（BoxDecoration配置）
  • CSS颜色值 → Flutter颜色（Colors.xxx或Color(0xFFxxxxxx)）
  • CSS边框样式 → Border.all、BorderRadius.circular
  • CSS阴影效果 → boxShadow配置

列表和网格转换

  • HTML列表元素（ul、ol、li）→ Flutter ListView
  • CSS Grid布局 → Flutter GridView
  • HTML表格 → Flutter Table或DataTable
  • CSS列表样式 → ListTile配置

5. 主题和样式系统

CSS变量到Flutter主题

  • CSS自定义属性（–primary-color等）→ Flutter ThemeData
  • CSS颜色方案 → Flutter ColorScheme
  • CSS字体系统 → Flutter TextTheme
  • CSS间距系统 → Flutter标准间距值

响应式设计转换

  • CSS媒体查询 → Flutter MediaQuery和LayoutBuilder
  • CSS断点 → Flutter屏幕尺寸适配
  • CSS Flexbox的响应式 → Flutter Expanded和Flexible
  • CSS Grid的响应式 → Flutter GridView的动态配置

6. 交互和状态管理

HTML事件到Flutter手势

  • HTML点击事件 → Flutter GestureDetector的onTap
  • HTML悬停效果 → Flutter InkWell的点击效果
  • HTML表单交互 → Flutter状态管理
  • CSS伪类（:hover、:active等）→ Flutter交互状态

动态内容处理

  • HTML动态内容 → Flutter StatefulWidget
  • JavaScript状态管理 → Flutter setState或状态管理方案
  • HTML表单验证 → Flutter表单验证逻辑

7. 性能和优化考虑

HTML到Flutter的性能映射

  • CSS动画 → Flutter Animation系统
  • HTML懒加载 → Flutter ListView.builder
  • CSS优化 → Flutter Widget优化（const构造函数等）
  • HTML缓存策略 → Flutter图片缓存和Widget复用

描述要求

描述要足够详细和准确，使得Flutter开发者仅凭HTML设计稿分析和文字描述就能完全还原界面设计。请按照以下顺序组织内容：

  1. HTML结构分析：先分析HTML的整体结构和CSS样式
  2. Flutter架构映射：将HTML结构映射到Flutter的Widget体系
  3. 详细组件转换：逐个分析HTML元素到Flutter Widget的转换
  4. 样式和主题：将CSS样式系统转换为Flutter主题系统
  5. 交互和状态：分析HTML/JavaScript交互并转换为Flutter状态管理
  6. 响应式适配：将CSS响应式设计转换为Flutter适配方案

代码组织建议

文件结构规划

  • 基于HTML页面结构规划Flutter文件组织
  • 根据CSS模块化程度确定Widget拆分策略
  • 样式常量和主题的统一管理

开发优先级

  • 先实现静态布局，再添加交互功能
  • 优先完成核心页面结构，再优化细节样式
  • 分阶段实现响应式适配

质量保证

  • 像素级还原HTML设计稿的视觉效果
  • 保持与原HTML相同的交互体验
  • 确保Flutter代码的性能和可维护性

通过以上详细的HTML到Flutter转换分析，开发者可以准确理解设计稿意图，并使用Flutter框架高效实现界面效果。