Create isometric design assets and illustrations

Isometric Design is a design-style child skill ('the architect's view - a parallel projection where depth is constant and parallel lines never converge'), part of the design-it family and not meant to be triggered directly. Three core principles: Parallel Lines (unlike true 3D, isometric projection has no vanishing point - everything is viewed from an exact 30-degree angle), Top-Down Angled View (the classic "SimCity" perspective), and Blocky Architecture (UI elements often look like city blocks or stacked tiles).

Use it when the user's request matches this parallel-projection, model-like aesthetic - game UI, architectural visualization, or product illustrations that want a stylized, technical-drawing feel rather than realistic perspective. As a design sub-style, it's selected by the parent design-it skill's routing rather than invoked on its own.

Visual DNA leans on Warm Tech or Earth-Grounded Elegance with slightly muted, realistic colors since isometric designs often read as physical models, text kept flat to the screen or mapped precisely to isometric planes (top, left, right), and hard, long drop shadows cast at an exact -45 or 45 degree angle. The web implementation combines rotateX(60deg) rotateZ(-45deg) on a container to establish the isometric grid, then builds each 3D-looking block from a single flat element plus two pseudo-elements: ::before skewed vertically to form the darker left/side face, and ::after skewed horizontally to form the lighter top/bottom face - three shades of one color family simulating three lit faces of a physical cube from a single 2D element. Hovering lifts a block along the Z-axis while nudging it up-left, reinforcing the parallel-projection depth illusion.

.isometric-grid { transform: rotateX(60deg) rotateZ(-45deg); }
.iso-block::before { transform: skewY(-45deg); } /* darker side face */
.iso-block::after { transform: skewX(-45deg); }  /* lighter top face */

SwiftUI reproduces the same exact projection angles by chaining .rotationEffect(.degrees(-45)) with .rotation3DEffect(.degrees(60), axis: (x: 1, y: 0, z: 0)) on a stacked VStack of a colored top face plus a darker shadow-simulating rectangle beneath it - the same two-angle rotation math as the web's rotateX/rotateZ combination, applied to native shape composition instead of CSS pseudo-elements.

Designers and developers building game UI, architectural visualizations, or product illustrations that want a stylized, technical parallel-projection look - blocky, model-like, with no vanishing point - rather than realistic perspective rendering. The flat, consistent projection is what makes a whole dashboard or scene of isometric elements read as one coherent physical space.