卡片式布局 · Card-based Layout
英文：Card-based Layout
页面布局难度：入门 ★
🗣️一句话大白话
把内容拆成一张张独立卡片，每张承载一个项目、文章、服务或一组信息。把内容拆成一张张独立卡片，每张卡片承载一个项目、一篇文章、一项服务或一组信息。卡片之间边界清楚，浏览速度快，也是 AI 最容易稳定实现的布局之一。
🎬真实场景
作品集、博客列表、功能介绍、工具导航、商品列表、个人主页
📮你可以这样说
「为 Punk 的个人网站创建一个响应式卡片式布局， 项目区展示 6 张独立卡片，每张卡片包含项目封面、项目名称、两行简介、技术标签和“查看项目”按钮； 桌面端三列，平板端两列，手机端单列； 使用米白背景、深绿色强调色、细边框、克制圆角和轻微阴影。」
通过 AI绘图 工作台生成（模型 API 额度由此消耗）；未配置模型密钥时会提示失败原因。
⚠️边界与常见误解
- ▸误解：卡片越多越整齐。实际信息量少时强行分卡反而割裂，卡片应承载独立可扫读的信息单元
🚫什么时候别用
- ✗需要连续叙事或长文沉浸阅读的内容
🧩常见变体
纯图片卡片带头图+标签的富卡片
💡小贴士
- ✦卡片之间用一致的圆角、间距和阴影，避免每个卡片风格不一
🕸️知识关系图
这个词条与相关术语、AI绘图 知识的连接关系