FOOTER & SHELL
应用骨架App Shell
左侧窄图标导轨 + 顶部条 + 内容区的经典后台骨架。图标导航比文字导航省空间，适合功能多的产品。
效果预览
◧◫◈✳
项目总览
适合用在哪
后台管理、开发者控制台、工具类 Web App 的主界面框架。
容易踩的坑
- 纯图标导轨不配 tooltip 和 aria-label，新用户靠猜，读屏只念「按钮」。
- 整页用 100vh 撑高，移动端地址栏伸缩时底部内容被遮挡或出现双滚动条。
- 内容区缺少 min-width:0，宽表格把整个骨架撑出横向滚动。
设计提示词 · Prompt
应用骨架（App Shell）：整块 flex 布局、圆角 11px、overflow:hidden。左侧是 44-64px 宽的深色图标导轨，纵向排 4-6 个 20px 圆角图标位，当前项用品牌渐变底高亮，底部可放头像。右侧是 flex 列：顶部条高 34-44px，左侧是当前页标题（10.5px 加粗）+ 右侧若干操作图标；下面内容区用网格铺卡片。要点：导轨宽度固定、内容区 min-width:0 防止溢出；移动端导轨收起为汉堡菜单，或整块换成底部标签栏。
App Shell: the whole block uses a flex layout, 11px radius, overflow:hidden. On the left, a 44-64px-wide dark icon rail with 4-6 vertically stacked 20px rounded icon slots; the active item is highlighted with a brand gradient background, and an avatar can sit at the bottom. On the right, a flex column: a 34-44px top bar with the current page title on the left (10.5px bold) + several action icons on the right; below it, the content area lays out cards in a grid. Key points: fixed rail width, min-width:0 on the content area to prevent overflow; on mobile, collapse the rail into a hamburger menu or replace it entirely with a bottom tab bar.
常见搭配
同一页面里经常和「应用骨架」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="sh-app">
<div class="sh-app__side"><i class="is-on">◧</i><i>◫</i><i>◈</i><i>✳</i></div>
<div class="sh-app__main">
<div class="sh-app__top"><b>项目总览</b><i></i><i></i></div>
<div class="sh-app__bd"><div class="sh-app__w"></div><div class="sh-app__w"></div><div class="sh-app__w"></div><div class="sh-app__w"></div></div>
</div>
</div>