等距设计（Isometric Design）是一份 Web 与 App 的样式实现指南，用于呈现没有消失点的斜向 3D 外观。文档将其概括为“建筑师的视角”：一种平行投影，深度保持恒定，平行线永不汇聚。该样式常用于技术图解、信息图、功能示意图或首屏（Hero）区域。文档说明它是 design-it 技能的子级参考，不应被直接触发，而是在用户请求匹配上述美学时使用。
核心原则
等距投影是一种正交 3D 投影，各轴等比例缩短，投影轴之间相隔 120 度，因此不需要透视。典型视角是自上而下的斜角视图，类似经典模拟城市类游戏的视角。界面元素常被组织成街区或层叠瓦片式的块状结构。
视觉基因
色彩方面可采用温暖科技感或大地色系的沉稳优雅风格；由于等距设计看起来像实体模型，略为柔和、接近真实的颜色通常效果较好。文字应保持与屏幕平贴，或精确映射到等距平面（顶面、左面、右面）。阴影为硬边、较长，并以固定角度投射，常见为 -45 度或 45 度。
Web 实现
文档推荐使用 CSS 变换。示例通过 transform-style: preserve-3d 与 rotateX(60deg) rotateZ(-45deg) 建立等距网格基础，再配合伪元素（::before 生成侧面、::after 生成顶/底面）构建具有深度的立方块，并用 hover 状态下的 translateZ 与平移制造浮起效果。文档明确指出，示例中的 60°/-45° 属于风格化斜切瓦片，并非严格的数学等距投影；若要获得各轴等比例缩短的效果，应使用对齐到 (1,1,1) 方向的正交相机。
App 实现
文档分别给出 SwiftUI、Flutter、React Native 与 Jetpack Compose 的示例。SwiftUI 使用 rotationEffect(-45°) 配合 rotation3DEffect(60°)；文档提醒在需要严格平行投影时应关闭默认透视，并且先绕 Z 轴旋转 -45 度，再绕 X 轴旋转 60 度，可通过沿 Z 轴堆叠视图来模拟高耸的等距街区。Flutter 使用 Matrix4 依次执行 rotateX(pi/3) 与 rotateZ(-pi/4)，并说明平行投影不应包含透视项，阴影使用零模糊半径的硬阴影。React Native 在 transform 数组中依次应用 rotateX('60deg') 与 rotateZ('-45deg')，并以 shadowRadius: 0 表现硬边阴影。Jetpack Compose 通过 Modifier.graphicsLayer 设置 rotationX 与 rotationZ，并建议用 Modifier.drawBehind 手动绘制偏移的深色矩形，以避免高度阴影带来的模糊。
使用建议与限制
适合用于信息图、功能图与首屏视觉；不建议把整个应用的功能性界面都做成等距投影，因为交互难度过高。文档强调，该内容只是样式参考，不能替代针对具体环境的验证、无障碍测试或专家评审；对比度比例与响应式行为需要另行核验。