uiskill.sh

B2B SaaS Core Page Rules

Core design rules for create flows, list pages, and detail pages in enterprise modules.

Design Rules7 downloads

Complex create flow uses full page

warning

Use a dedicated page for complex creation flows.

create-flow
Condition: The form has more than five fields or contains dependent sections.
Constraint: Use a dedicated page instead of a modal.
Rationale: Reduce cognitive load and support clearer section grouping and validation.

✅ Customer creation opens as a full page with grouped sections.

❌ A 10-field contract form is shown in a modal.

List page primary identifier emphasis

warning

Emphasize the primary business identifier on drill-in lists.

list-page
Condition: The list page supports navigation to a detail page.
Constraint: Visually emphasize the main business identifier column.
Rationale: Help users scan records quickly and reduce navigation errors.

✅ The customer name column is bold and clickable.

❌ The identifier looks the same as secondary metadata.

Detail page standard header

error

Use a consistent header on detail pages.

detail-page
Condition: Always.
Constraint: Include a stable header with object title, identifier, status, primary actions, and no more than four key facts.
Rationale: Make the object state legible at a glance and preserve consistency across modules.

✅ The order detail page shows title, order number, status, actions, and four summary facts.

❌ Important metadata is scattered across the page body with no consistent header.