Examples
aindf — render
$ aindf render patterns/newsletter-subscribe
matching intent… "newsletter" → newsletter-subscribe
✓ resolves to section · base CTA
✓ 4 clarifying parameters · 0 gaps
✓ compose valid against slots + applicability
Patterns (3)
Live preview · newsletter-subscribe
┌─ newsletter-subscribe ──────────────┐
│ │
│ slot/header │
│ ▸ <prominent offer> │
│ ▸ <one line on why to subscribe> │
│ │
│ slot/body · preset inline-form │
│ [ your e-mail ] [ ↵ ] │
│ │
└───────────────────────────────────────┘
bg: gradient · shader: none · button: text
$ open patterns/starter.json ↗
A pattern is a parametrized recipe. It composes only declared components, so compose is valid by construction; the agent asks the clarifying parameters before assembling, and any gaps tell the design system what to build next.
1newsletter-subscribe
starter.json ↗
Produces a section built on CTA. Header slot holds a prominent offer heading + a muted description; the body slot holds an inline-form preset (icon Input + Button). Matches: subscribe · newsletter · mailing list · розсилка · підписка.
section CTA
├─ slot/header ─ Typography(offer-heading, prominent)
│ Typography(offer-desc, role=muted)
└─ slot/body ─── preset inline-form (Field-group)
├─ Input (icon, placeholder)
└─ Button ({param:btnStyle})
| parameter | asks | options | default |
|---|
btnStyle | Text or icon button? | text · icon | text |
bg | Section background? | flat · gradient · shader | gradient |
shader | Shader on background? | none · grain · mesh | none |
placeholder | Input placeholder text? | — | your e-mail |
2chat-interface
starter.json ↗
Produces a block built on Stack-layout: a body of date-separated message bubbles (each with an avatar + reaction-bar) and a fixed composer footer. Matches: chat · messages · messenger · чат.
block Stack-layout
├─ slot/body
│ ├─ Date-separator (repeat per-day)
│ └─ Message-bubble (repeat per-message)
│ ├─ Avatar ({param:avatarClickable})
│ └─ Reaction-bar (under-bubble)
└─ slot/footer
└─ Composer (fixed)
├─ Input · Button(upload) · Button(send)
| parameter | asks | options | default |
|---|
avatarClickable | Are avatars clickable (open profile)? | static · link | static |
gaps — components this pattern needs that the design system has not built yet: Message-bubble · Reaction-bar · Date-separator · Composer. The pattern therefore doubles as a build list.
3feature-grid
starter.json ↗
Produces a section built on Section: a header (title + muted subtitle) and a grid body of feature-preset cards repeated per feature. Matches: features · переваги · фічі · what you get.
section Section
├─ slot/header ─ section-header
│ ├─ Typography(title)
│ └─ Typography(subtitle, role=muted)
└─ slot/body ─── Grid-layout (cols={param:cols})
└─ Card preset=feature (repeat per-feature)
| parameter | asks | options | default |
|---|
cols | How many columns in the grid? | 2 · 3 · 4 | 3 |
cardInteraction | Is the card static or clickable? | static · link · button | static |