--- title: "Agent Skill to Isometric Design" platform: "Promptally" canonical_url: "https://app.promptally.dev/p/skill-isometric-design" modality: "SKILL" category: "Anti-AI-Slop Design Discipline" compatible_models: [Universal / Model Agnostic] access_tier: "Free Public Artifact (No Auth Required)" license: "MIT" --- # Agent Skill to Isometric Design **Summary:** Agent Skill to Isometric Design is a verified SKILL blueprint on Promptally in Anti-AI-Slop Design Discipline optimized for leading AI models. Web and App implementation guide for Isometric Design. Trigger when user wants angled 3D appearances without vanishing points, often used for technical illustrations. Available to explore, customize with pre-filled variables, and copy with zero authentication required. ## Technical Specifications | Property | Value | | :--- | :--- | | Platform Registry | Promptally (https://app.promptally.dev) | | Modality | SKILL | | Category | Anti-AI-Slop Design Discipline | | Compatible Engines | Universal / Model Agnostic | | Dynamic Variables | None (Static Blueprint) | | Approx. Token Length | 1,881 | | Access Tier | Free Public Artifact (No Auth Required) | | License | MIT | ### Pre-Filled Template & Production Source ````md --- name: isometric-design description: Web and App implementation guide for Isometric Design. Trigger when user wants angled 3D appearances without vanishing points, often used for technical illustrations. date_added: "2026-06-17" risk: safe source: self source_type: self --- # Isometric Design > "The architect's view. A parallel projection where depth is constant and parallel lines never converge." ## When to Use Use this sub-style when the user's request matches the aesthetic described above. This is a child reference of the `design-it` skill and is not meant to be triggered directly. ## Core Principles 1. **Parallel Lines**: Unlike true 3D, isometric projection has no vanishing point. Everything is viewed from an exact 30-degree angle. 2. **Top-Down, Angled View**: The classic "SimCity" perspective. 3. **Blocky Architecture**: UI elements often look like city blocks or stacked tiles. ## Visual DNA - **Colors**: **Warm Tech** or **Earth-Grounded Elegance**. Isometric designs often look like physical models, so slightly muted, realistic colors work well. - **Typography**: Keep text flat to the screen, or map it perfectly to the isometric planes (top, left, right). - **Shadows**: Hard, long drop shadows cast at an exact angle (usually -45 or 45 degrees). ## Web Implementation - CSS transforms are perfect for this. Combine `rotateX(60deg)` and `rotateZ(-45deg)`. - **CSS Example**: ```css .isometric-grid { /* The foundation */ transform-style: preserve-3d; transform: rotateX(60deg) rotateZ(-45deg); } .iso-block { width: 100px; height: 100px; background-color: var(--secondary-base); position: relative; transition: transform 0.3s; } /* Creating the 3D block with pseudo-elements */ .iso-block::before { content: ''; position: absolute; width: 20px; /* Depth */ height: 100%; background-color: var(--primary-text); /* Darker shade for side */ right: 100%; transform-origin: right; transform: skewY(-45deg); } .iso-block::after { content: ''; position: absolute; width: 100%; height: 20px; /* Depth */ background-color: var(--cta-highlight); /* Lightest shade for top/bottom */ top: 100%; transform-origin: top; transform: skewX(-45deg); } .iso-block:hover { transform: translateZ(20px) translate(-10px, -10px); } ``` ## App Implementation ### SwiftUI ```swift struct IsometricView: View { var body: some View { ZStack { Color.white.ignoresSafeArea() // Isometric Stack VStack(spacing: 0) { // Top layer Rectangle() .fill(Color.blue) .frame(width: 150, height: 150) .overlay(Text("TOP").foregroundColor(.white)) // Shadow simulation Rectangle() .fill(Color.black.opacity(0.2)) .frame(width: 150, height: 20) } // The exact 3D transformations for Isometric projection .rotationEffect(.degrees(-45)) .rotation3DEffect(.degrees(60), axis: (x: 1, y: 0, z: 0)) } } } ``` - SwiftUI's `.rotation3DEffect` makes this surprisingly easy. Rotate Z by -45 degrees first (via `.rotationEffect`), then rotate X by 60 degrees. - You can stack multiple views along the Z-axis (or simulate it with Y offsets before the 3D rotation) to create towering isometric city blocks. ### Flutter ```dart import 'dart:math'; class IsometricScreen extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( backgroundColor: Colors.white, body: Center( child: Transform( // The Isometric Matrix Math alignment: FractionalOffset.center, transform: Matrix4.identity() ..setEntry(3, 2, 0.001) // perspective ..rotateX(pi / 3) // 60 degrees ..rotateZ(-pi / 4), // -45 degrees child: Container( width: 150, height: 150, decoration: BoxDecoration( color: Colors.blue, boxShadow: [ // Hard isometric drop shadow BoxShadow( color: Colors.black.withOpacity(0.3), offset: const Offset(20, 20), blurRadius: 0, // No blur for isometric ), ], ), child: const Center(child: Text('ISO BLOCK', style: TextStyle(color: Colors.white))), ), ), ), ); } } ``` - `Transform` with `Matrix4` is required in Flutter. Applying `rotateX` and `rotateZ` yields the classic isometric grid. - Isometric shadows are usually completely hard (0 `blurRadius`) and offset perfectly along the grid axes. ### React Native ```jsx const IsometricScreen = () => { return ( ISO BLOCK ); }; ``` - The `transform` array processes in order. Apply `rotateX` then `rotateZ`. - Hard shadows (`shadowRadius: 0`) sell the illustration look. ### Jetpack Compose ```kotlin @Composable fun IsometricScreen() { Box( modifier = Modifier.fillMaxSize().background(Color.White), contentAlignment = Alignment.Center ) { Box( modifier = Modifier .graphicsLayer { // Isometric Transforms rotationX = 60f rotationZ = -45f // Add subtle scale if it gets clipped scaleX = 0.8f scaleY = 0.8f } .size(150.dp) // Draw a hard shadow behind the box .drawBehind { drawRect( color = Color.Black.copy(alpha = 0.3f), topLeft = Offset(40f, 40f), // Isometric offset size = size ) } .background(Color(0xFF2196F3)), contentAlignment = Alignment.Center ) { Text("ISO BLOCK", color = Color.White, fontWeight = FontWeight.Bold) } } } ``` - Use `Modifier.graphicsLayer` to apply `rotationX` and `rotationZ`. - To get a true hard isometric drop shadow in Compose without elevation blurring, use `Modifier.drawBehind` to manually draw a dark rectangle offset from the main content. ## Do's and Don'ts - **DO**: Use it for infographics, feature diagrams, or hero sections. - **DON'T**: Build your entire app's functional UI in isometric projection. It's too hard to interact with. ## Limitations - This is a styling reference and does not replace environment-specific validation, accessibility testing, or expert review. - Ensure appropriate contrast ratios and responsive behaviors are verified separately. ```` ## Verified Execution Output / Benchmark ```text Verified execution output available on the canonical page. ``` ## Related Blueprints on Promptally - [Agent Skill to Api Design](https://app.promptally.dev/p/skill-api-design) - [Agent Skill to Loop Design Check](https://app.promptally.dev/p/skill-loop-design-check) - [Agent Skill to Frontend Design Direction](https://app.promptally.dev/p/skill-frontend-design-direction) - [Agent Skill to Brand Discovery](https://app.promptally.dev/p/skill-brand-discovery) - [Agent Skill to Design System](https://app.promptally.dev/p/skill-design-system) - [Agent Skill to Brand Voice](https://app.promptally.dev/p/skill-brand-voice) - [Agent Skill to Architecture Designer](https://app.promptally.dev/p/skill-architecture-designer) - [Agent Skill to Api Designer](https://app.promptally.dev/p/skill-api-designer)