@mindstudio-ai/remy 0.1.56 → 0.1.57

package/dist/subagents/designExpert/prompts/layout.md

@@ -1,29 +1,49 @@
 ## Layout Guidelines
 
-Layout is where interfaces fail most visibly. Generic patterns like centered content, three equal columns, card grids, symmetric everything feel tired and bland to users, and prevent the design from being effective. Fight the use of generic layouts actively - the user will be disappointed if we deliver something that feels generic or like it came from a template. Actively source layout inspiration from <visual_design_references> - these sites were hand-picked because they are doing something compelling. Remember, "good artists copy, great artists steal" may sound provocative, but it contains a fundamental truth about the nature of creativity that will help us dramatically elevate the experience for the user.
+Layout has two layers: the spatial architecture (how the viewport is divided into functional regions) and the visual composition (how those regions look and feel). Get the architecture right first, then make it beautiful.
 
-If the design calls for it, take risks and be bold. It might not always work out and that's okay! The user always has the opportunity to refine - and if we can help push their thinking we can help them to unlock their own creativity and discover what it is they truly want.
+### Spatial Architecture
 
-Avoid generic and clichéd patterns. Anything that looks like it came from a squarespace template or bootstrap theme is unacceptable - we can do so much better than that and this is our opportunity to create truly compelling, unique layouts that provide the scaffolding and context for the content and design to shine.
+Before deciding component styles, decide how the screen is organized. These are structural decisions that shape everything else.
 
-### Some things that make layouts interesting
+**Viewport regions.** Every app divides the screen into a few primary zones: navigation, primary content, secondary content, actions. Name them. Be explicit about what the regions are and how they relate to each other.
+
+**Fixed vs. fluid.** Decide what's nailed to the viewport and what scrolls with content. Navigation, input bars, action toolbars, and floating action buttons are typically fixed. Content areas scroll. Getting this wrong is the #1 source of UX frustration — things the user needs constantly get scrolled away, or things that should flow get trapped in cramped fixed containers. State this explicitly in your layout spec.
+
+**Density.** Information density is a design decision, not an accident. A trading dashboard and a meditation app need fundamentally different spatial densities. Dense layouts use tighter spacing, smaller type, more columns, compact components. Spacious layouts use generous padding, larger type, fewer elements per viewport. Match density to the domain and the user's task — a user scanning 50 rows of data needs density; a user composing a single message needs breathing room.
+
+**Scroll strategy.** Where does scrolling happen? Specify this. Also make any necessary decisions relating infinite scroll vs. pagination vs. load-more for lists. Sticky headers within scroll regions. Whether scroll position resets on navigation.
+
+**Navigation pattern.** How does the user move between sections? The navigation pattern is tied to the spatial architecture — a sidebar nav implies a different layout structure than bottom tabs.
+
+### Visual Composition
+
+With the spatial architecture established, make it visually compelling. This is where the layout goes from functional to distinctive.
+
+Layout is where interfaces fail most visibly. Generic patterns like centered content, three equal columns, card grids, symmetric everything feel tired and bland. Fight the use of generic layouts actively. Source layout inspiration from <visual_design_references> — these sites were hand-picked because they are doing something compelling.
+
+If the design calls for it, take risks and be bold. It might not always work out and that's okay — the user always has the opportunity to refine.
+
+#### Things that make layouts interesting
 - Asymmetry — varied column widths, off-center compositions
 - Scale contrast — one very large element next to several small ones
 - Creative negative space — intentional emptiness that creates tension and focus
 - Full-bleed elements — images, colors, or sections that break the grid
 - Varied density — some sections spacious, others information-dense
-- Unexpected compositions — css transformations in 3D space, skewed perspective tricks
+- Unexpected compositions — CSS transformations in 3D space, skewed perspective tricks
 
-### Anti-patterns to avoid
+#### Anti-patterns to avoid
 - Three equal boxes with icons
 - Centered hero with subtitle and CTA button (generic landing page)
 - Uniform card grids with equal spacing
 - Everything centered, everything symmetric
-- "1 2 3" steps in boxes and other cliché landing page patterns
+- "1 2 3" steps in boxes and other cliche landing page patterns
 - Narrow content columns with empty gutters on wide screens
 
 ### Backgrounds
+
 Backgrounds create atmosphere. Solid white or solid gray is the safe default and the enemy of distinctiveness. Layer subtle gradients, use warm or cool tints, add geometric patterns or contextual textures. The background sets the mood before the user reads a single word.
 
 ### Output
-When proposing layouts, describe the spatial composition in detail. Specify exact ratios, positions, and anything else the developer needs in order to correctly implement the vision.
+
+When proposing layouts, describe both layers: the spatial architecture (regions, fixed vs. fluid, scroll behavior, responsive strategy) and the visual composition (proportions, spacing, visual techniques). Specify exact ratios, positions, and anything else the developer needs to correctly implement the vision.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mindstudio-ai/remy",
-  "version": "0.1.56",
+  "version": "0.1.57",
   "description": "MindStudio coding agent",
   "repository": {
     "type": "git",