AI编程 UI 还原协作通用指南

新闻

作者：微信文章

本文档总结在 AI编程 中还原任意页面 UI 设计稿时的沟通方式与实现原则，用于后续新页面快速还原、减少逐像素口述、提高与 AI 的协作效率。

---

一、目标与适用范围

目标：通过「页面 UI 说明文档 + 统一实现约定」，让 AI 在不逐条报 top/left/margin 的前提下，较完整地还原设计稿，并兼顾后续功能扩展与数据维护。适用范围：本项目中所有需要按设计稿还原的页面（如首页、租赁列表、商品详情、个人中心等）；技术栈为 uni-app + Vue 3 + <script setup> + SCSS，设计稿宽度 750，单位 rpx。

---

二、沟通方式：如何对 AI 描述设计

2.1 先给「全局信息」，再展开模块


每次对新页面或大改版时，第一段话应包含：

技术栈与单位：uni-app、Vue 3、SCSS、rpx、设计稿宽度 750。布局原则（见下节）：常规用 flex，仅悬浮/固定用 absolute/fixed；坐标只对定位元素给出。页面模块划分：用 1、2、3… 列出自上而下的模块名称（如：顶部导航、搜索栏、分类 Tab、列表区、底部 TabBar）。

这样 AI 会默认按 flex 排布、只在必要时用绝对定位，无需你每个元素都说明「用 margin 还是 absolute」。
2.2 按「模块 → 模式 → 关键数值」描述，不逐 CSS 属性

模块：先说明这块是什么（如「顶部轮播区」「功能宫格」「两列商品列表」）。模式：说明布局方式（如「横向 flex，图标+文字，垂直居中」「横向滚动 scroll-view，内部 flex」），不要一开始就写 position: absolute 或具体 margin 值。关键数值：只对影响布局或还原度的尺寸/间距/颜色给出（如容器宽高、与屏幕/轮播的边距、主色、圆角）。内部子元素用「与设计稿一致」「约 8rpx 间距」等语义化描述即可，由 AI 用 flex + margin/padding 推导。

需要精确给坐标的场景：仅当元素悬浮在别的内容之上或固定在屏幕某一角时，才明确「参照系 + top/left/right/bottom」（例如：浮在轮播上的门店条、距内容区左上角 104rpx/24rpx）。
2.3 绝对定位 vs Flex：一条判断线

优先 flex + margin/padding：图标+文字、按钮内文案、卡片内多行信息、宫格、列表项。这些不要用 absolute 逐个摆，只需说明「水平/垂直居中」「间距约多少」。必须 absolute/fixed：整块浮在轮播/背景图上、角标、关闭按钮盖在图片上、吸顶/吸底栏。此时才给出「以谁为参照、距上/左/右/下多少」。

---

三、实现原则：布局、组件库与数据

3.1 布局原则（与文档一致）

常规排布：使用 flex + margin/padding/gap，不滥用 position: absolute。定位元素：仅对悬浮、吸顶/吸底、角标等使用 absolute 或 fixed，并在文档中写明参照系与数值。内部子元素：在定位容器内仍优先 flex（如门店选择条内：图标 + 文字用 flex 水平排列、垂直居中），避免整块内部再逐项 absolute。

3.2 组件库 vs 原生：如何选择


每做一个页面或一块区域时，同时考虑两点：

UI 还原度：设计稿是否有非常规形态（如条形轮播点、强定制卡片）？组件库默认样式能否通过 props/样式覆盖达到？若难以无损还原，则用原生。功能与数据维护：该区域是否有列表分页、加载更多、空态、表单校验等？若组件库（如 uview-plus 的 u-loadmore、uni-ui 的 uni-grid）能直接提供状态与事件，且还原度可接受，则优先用组件，便于后续接接口。

本项目已有能力：uni_modules 内具备 uni-ui（如 uni-grid、uni-swiper-dot）与 uview-plus（如 u-swiper、u-loadmore、u-grid、u-popup 等）。其他页面已有使用 u-popup、uni-datetime-picker 等。

建议（与首页实践一致）：

宫格类：用 uni-grid（或 uview u-grid），column 与 slot 自定义，数据由 composable 提供；还原度与可维护性兼顾。列表底部加载/空态：可选 u-loadmore，配合 onReachBottom 与 composable 中的 loadMore 方法，便于后续分页接口。轮播指示器：若设计稿为条形（如 12×6rpx / 30×6rpx），组件库多为圆点或线型，保持原生更易 100% 还原。强定制区块：如门店选择条、服务保障条、推荐门店卡片、各 section 标题行等，用 原生 view + flex 实现。

3.3 数据层约定

数据集中管理：页面所需列表与单条数据建议由 composable（如 useHomePageData、useLeasePageData）统一提供，页面只做引用与绑定。与组件库解耦：是否用组件库不改变数据来源；composable 内可后续将 ref 改为接口请求结果，并增加 loading、noMore、loadMore 等状态，供 u-loadmore 等组件使用。

---

四、页面 UI 说明文档应包含的章节


每个需要还原的页面，建议有一份对应的 docs/xxx-ui-spec.md（如 homepage-ui-spec.md、lease-ui-spec.md），结构可参考：

章节	内容要点
一、整体说明	技术栈、设计稿宽度、布局原则（flex 优先、仅悬浮用 absolute）、模块划分列表、组件与数据约定（数据由哪个 composable 提供、哪些模块用组件库、哪些用原生）。
二、三、…	按模块编号逐块说明：位置、容器尺寸/背景、内部布局模式、关键样式（字号、颜色、圆角）、若用组件则写明组件名与 props。
末章	：一段可直接复制给 AI 的指令，指明「请阅读 docs/xxx-ui-spec.md，按模块 1～N 还原 pages/xxx/index.vue，遵守文档中的布局原则与组件/数据约定」。

这样 AI 只需阅读该文档即可按模块实现，无需你口头补充大量坐标与属性。

---

五、给 AI 的指令模板（可复制修改）

5.1 整页还原


「请先阅读 docs/[页面]-ui-spec.md。然后按文档中的模块 1～N 还原 pages/[路径]/index.vue：实现各模块的布局与样式，数据从文档中约定的 composable（如 useXxxData）获取并绑定。布局原则：常规排布用 flex，仅悬浮/吸顶/吸底用 absolute 或 fixed；若文档中某模块建议使用组件库（如 uni-grid、u-loadmore），则按文档使用。暂时可用 mock 数据，保持与文档中 mock 结构一致。」
5.2 只改某一模块


「请阅读 docs/[页面]-ui-spec.md 中的模块 X，在 pages/[路径]/index.vue 中按该描述调整/实现该模块，遵守文档中的布局原则（flex 优先，仅定位元素用 absolute）。」
5.3 强调布局方式


「实现时请遵守 docs/AI-ui-restore-guide.md 中的布局原则：常规用 flex + margin/padding，不要用 absolute 排布普通列表或图标+文字；只有悬浮在轮播上、角标、吸顶栏等才用 absolute。」

---

六、小结

沟通：先全局（技术栈、布局原则、模块划分），再按「模块 → 模式 → 关键数值」描述；坐标只给悬浮/固定元素。实现：flex 优先，absolute 仅用于悬浮/固定；组件库与原生按「UI 还原度 + 功能/数据维护」分模块选择；数据由 composable 统一提供。文档：每页一份 xxx-ui-spec.md，含整体说明（含组件与数据约定）、各模块说明、与 AI 的指令示例；配合本指南，即可在后续页面中让 AI 快速、一致地还原 UI 设计。