UI Pattern Generator

UI Pattern Generator

Registry-first artifact boundary

When .styleseed/​project.json and .styleseed/​artifacts/​index.json exist, resolve the requested artifact ID first, then read only .styleseed/​bundles/<artifact-id>.md and .styleseed/​manifests/<artifact-id>.json. Never fall back to the global legacy bundle for a registry project. Legacy projects may use .styleseed/​effective-rules.md only when no registry exists.

When NOT to use

• For a single primitive component → use /​ss-component
• For a full mobile screen → use /​ss-page
• For an entire multi-page user flow → use /​ss-flow
• For design tokens and color/​spacing decisions → use /​ss-tokens

Pattern type: $0 Description: $ARGUMENTS

Available Pattern Types

Layout Patterns

• focal-summary: one dominant state, briefing, artifact, or decision
• panel-section: aligned workbench panel with related controls and evidence
• flat-step: public-service task step with explicit labels, help, and recovery
• reading-section: bounded prose, figure, caption, quote, or source group without app cards
• resource-collection: rows, table, grid, or sequence selected by the recipe and user job
• canvas-tools: focused artifact/​canvas with quiet supporting tool groups

Data Display Patterns

• data-table: Table with header and rows
• detail-card: Key-value pair display
• chart-card: Card wrapper for a Recharts chart
• ranking-list: Numbered ranking with highlight

Interactive Patterns

• action-sheet: Bottom sheet with action buttons
• filter-bar: Horizontal filter/​tab bar
• search-header: Search input in header area

Instructions

1. Read .styleseed/​effective-rules.md and .styleseed/​manifest.json. Resolve first when stale. Then inspect:

   • components/​ui/ for available primitives
   • components/​patterns/ for existing patterns

2. Compose the pattern from existing components — DO NOT recreate primitives.

3. Follow the selected recipe rather than one default card language:

   • Use ss-pattern-surface only when containment is earned.
   • Use ss-page-gutter or ss-page-padding instead of hardcoded universal gutters.
   • Use ss-pattern-inset, ss-pattern-control, and ss-pattern-icon for recipe-aware shape.
   • Public-service and editorial recipes usually prefer flat flow, rules, and whitespace.
   • Enterprise/​developer recipes prefer aligned panels, rows, tables, and compact controls.
   • Calm-consumer may use soft groups; expressive-brand must add a product-specific composition.

4. Use semantic tokens for all visual properties.

5. Make the pattern a reusable component with props for dynamic content.

6. Run /​ss-score and verify that the pattern has a functional relationship to its page instead of being an isolated pretty card.