我的AI驯服记：从7640px大屏的惨败，到总结出一套高效协作SOP
摘要： 本文记录了我尝试用AI辅助开发一个7640×1080像素复杂大屏的完整过程。从一开始直接丢截图的血本无归，到发现问题核心在于"人机语言不通"，最终通过总结，复测形成了六个步骤，与AI建立了高效协作流程。这是一次典型的从失败中学习，并将经验固化为可复用方法的实践，最终静态页面大约花费4天时间完成，包含echarts图。
那些年，我被大屏折磨的日子
最近在做一个数据大屏项目，三列布局、10+ 个组件、各种尺寸和间距。起初直接写代码，结果：
- 想着直接丢给claude或者gemini进行还原，发现效果根本不行
- 尺寸对不上设计稿
- 图形被各种简化，内容被压缩成了1920*1080少了很多
- 调试时找不到区块边界
- 改一个地方，其他地方跟着被改动
后来总结了一套 SOP，把问题拆解成 6 个步骤，效率提升明显。今天分享这套方法。
核心方法论：六步开发法
第一步：原型分析（别急着写代码）
先看设计文档，理清模块尺寸、区块数量、布局方式。用 ASCII 草图标注位置关系，或用红色框线让 AI 理解结构。
scss
+----------+----------+----------------------+
| block-1 | block-3 | block-5 | block-7 |
+----------+ +----------------------+
| | | block-6 | block-8 |
| block-2 +----------+----------------------+
| | block-4 | block-9 |
+----------+----------+----------------------+第二步：区块占位与尺寸标注
在 ModuleX.vue 中创建区块容器，设置：
- 纯色半透明背景（便于区分）
- 虚线边框占位（
border: 2px dashed） - 固定宽高（按设计文档）
- 使用
gap设置间距 - 在 DOM 中显示尺寸标注（如：
区块 - 第一列 (880×860)） - 设置
box-sizing: border-box
第三步：嵌套区块与组件拆分
细化区块内部结构，为每个组件设置：
- 虚线占位框（
border: 1px dashed） - 固定宽高
- 使用
gap设置间距 - 尺寸标注
box-sizing: border-box
第四步：填充真实内容
按区块组件开发 SOP 创建组件：
- 创建目录：
src/components/moduleX/block-X/component-X/ - 复制静态资源到
assets/ - 创建
index.vue，实现内容 - 在
ModuleX.vue中引入并使用
第五步：去除调试样式
- 去掉纯色调试背景
- 去掉虚线占位框
- 去掉尺寸标注文字
- 用真实内容撑起高度（移除固定高度，改为
auto）
个人理解：为什么这套方法有效
1. 先占位再填充，避免返工
先搭框架，再填内容，减少后期大改。
2. 尺寸标注可视化，减少沟通成本
在页面上直接显示尺寸，便于对齐与检查。
3. 调试样式分层，问题定位更快
纯色背景和虚线边框能快速定位边界和重叠。
4. 统一使用 gap，避免 margin 陷阱
用 gap 统一间距，避免 margin 叠加导致的布局问题。
实战建议：三个关键技巧
技巧一：ASCII 草图先行
在写代码前，先用 ASCII 草图确认布局理解，避免返工。
技巧二：调试样式分层管理
- 区块：
border: 2px dashed+ 半透明背景 - 组件：
border: 1px dashed+ 半透明背景 - 完成后统一清理
技巧三：尺寸标注标准化
格式：层级名称 - 描述 (宽×高)
- 区块：
区块 - 第一列 (880×860) - 组件：
组件1 - 按市场区域分布及占比情况 (880×347)
写在最后
这套方法的核心是：先规划、再占位、后填充、最后优化。把复杂问题拆解成可执行的步骤，每一步都有明确的输出和验证标准。
如果你也在做大屏开发，建议：
- 先画 ASCII 草图确认布局
- 用调试样式可视化结构
- 统一使用
gap和box-sizing: border-box - 完成后统一清理调试样式
希望这套方法能帮你减少布局调试的困扰。如果你有更好的实践，欢迎分享。
P.S. 这套 SOP 来自实际项目总结，已在实际项目中验证。如果你在实践过程中遇到问题，欢迎交流讨论。