family-grid-product

name	family-grid-product
description	This skill should be used for SaaS, AI tools, dashboards, bento layouts, modular marketing pages, and other scan-friendly product-first interfaces.

Family Grid Product

Use when the interface must explain product value fast through modular structure, clear grouping, and practical conversion-oriented clarity.

Handle these jobs

• design feature-heavy landing pages
• structure SaaS or AI explainers
• review whether modular blocks scan well
• convert atmospheric or quiet layouts into more practical product marketing

Family thesis

Organize information into strong, readable modules. Keep density high enough to be useful and low enough to stay legible.

Use this family when

• the brief mentions SaaS, AI, dashboard, feature overview, or fast scanning
• the page must balance product explanation and conversion
• clarity matters more than spectacle

Avoid this family when

• the core value is brand statement over product explanation
• the page should feel poetic, cinematic, or deliberately disruptive
• the design needs strong softness or tactile material language

Always cover

• module hierarchy
• tile sizing and grouping
• proof and CTA placement
• density control
• which repeated card patterns to simplify

Output contract

Return:

1. family thesis
2. structure and grouping language
3. typography and proof treatment
4. component directives
5. avoid list
6. review or conversion moves

Guardrails

• Do not make every card equal.
• Encode priority through scale, placement, and grouping.
• Keep trust signals and CTA connected to the narrative.
• Avoid decorative noise that weakens scanning.

Resources

• references/doctrine.md
• references/recipes.md