AI 作品集排版自动布局之前先定义作品之间的关系一、作品集不是瀑布流排序本身就在表达判断AI 作品集生成器很容易从模板开始。选择封面、网格、卡片尺寸再把作品塞进去。这样做能快速得到一个页面却不一定能讲清楚作品的价值。作品集的核心不是“看起来整齐”而是让浏览者理解每个作品在整体叙事中的位置。自动排版之前系统需要先识别作品关系。哪些是主作品哪些是过程稿哪些体现探索哪些体现稳定产出哪些需要大图哪些只适合做补充证据。如果没有这个关系层布局算法只会根据图片比例和时间排序做决定。视觉上可能平衡语义上却平。二、把作品关系建成图再让布局消费图一个实用的模型是先把作品抽象成节点再用边表达关系。边可以是“同一项目”“前后版本”“风格相近”“支撑案例”。布局层只消费图上的权重而不是直接从文件夹读图片。graph TD A[主作品 A] --|版本演进| B[过程稿 B] A --|同一项目| C[细节图 C] A --|支撑说明| D[文案 D] E[主作品 E] --|风格对比| A F[实验稿 F] --|低权重补充| E G[布局引擎] -- A G -- E这种做法会让排版更慢一步但结果更稳定。主作品拥有更高权重过程稿自动靠近对应作品风格对比可以被放在同一屏。用户后续拖拽调整时系统也能理解这是在改变叙事而不是单纯移动卡片。三、布局引擎要输出约束而不是一次性 HTML自动布局适合输出结构约束例如区域大小、排序和关联组。最终渲染仍应由前端组件完成。这样可以保持响应式能力也能让用户手动微调。type Work { id: string; kind: hero | process | detail; ratio: number; weight: number }; type LayoutBlock { workId: string; colSpan: number; rowSpan: number; groupId?: string }; export function buildPortfolioLayout(items: Work[]): LayoutBlock[] { if (items.length 0) throw new Error(empty portfolio); return items .slice() .sort((a, b) b.weight - a.weight) .map((item) ({ workId: item.id, colSpan: item.kind hero ? 2 : 1, rowSpan: item.ratio 1.4 ? 1 : 2, groupId: item.kind process ? process : undefined, })); }这个例子没有复杂算法但它保留了一个重要分层算法只决定布局意图组件负责具体呈现。生产环境里可以进一步加入断点规则、最小高度和懒加载策略避免大图导致首屏加载过慢。四、自动排版要保留留白也要允许破坏规则作品集排版的一个误区是让算法尽量填满空间。留白不是浪费它能让重要作品获得呼吸感。尤其是创意类作品信息密度过高会削弱判断。布局引擎应该允许空槽存在而不是把每一块都塞满。但规则也不能太硬。用户可能希望某个实验稿占据更大区域因为它代表一个新的方向。系统应该允许“提升权重”或“固定位置”。自动化的目标不是替代审美判断而是减少重复劳动。最好的交互是先给一个合理初稿再让用户用少量动作表达取舍。还有一个边界是版权和来源。AI 作品集可能混入参考图、生成图和后期编辑图。排版前应标记来源类型并在导出时保留必要说明。作品之间的关系图也可以服务这个需求避免把参考素材误当成最终作品展示。五、总结AI 作品集排版要先解决作品关系再谈布局算法。工程上可以用图结构表达版本、项目和支撑关系再让布局引擎输出约束。产品上要保留留白、允许用户破坏规则并标清素材来源。自动排版真正有价值的地方不是把页面填满而是帮助作品更准确地被理解。