integrations tools ecosystem logos grid platforms partnerships integrations tools platforms ecosystem logos GitHub Slack Figma integrations section showing supported tools works with section with platform logos and descriptions
Integrations Grid
Fetch pattern JSON:
curl https://webspire.de/patterns/integrations/grid.json grid.html
<section class="ws-integrations bg-[var(--ws-integrations-bg)] py-20">
<div class="mx-auto max-w-6xl px-6">
<!-- Header -->
<div class="mb-12 text-center">
<p class="mb-2 text-sm font-semibold uppercase tracking-[0.2em] text-[var(--ws-integrations-accent)]">Integrations</p>
<h2 class="text-3xl font-bold tracking-tight text-[var(--ws-integrations-text)] md:text-4xl">
In every tool, at every step
</h2>
<p class="mx-auto mt-4 max-w-xl text-base text-[var(--ws-integrations-text-soft)]">
Works where your team already works — no context switching, no separate tabs.
</p>
</div>
<!-- Grid -->
<div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
<!-- GitHub -->
<div class="group flex flex-col gap-4 rounded-2xl border border-[var(--ws-integrations-border)] bg-[var(--ws-integrations-card-bg)] p-6 transition-shadow hover:shadow-md">
<div class="flex items-center gap-3">
<div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl border border-[var(--ws-integrations-border)] bg-[var(--ws-integrations-icon-bg)]">
<svg class="h-5 w-5 text-[var(--ws-integrations-icon-color)]" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"/>
</svg>
</div>
<div>
<p class="font-semibold text-[var(--ws-integrations-text)]">GitHub</p>
<p class="text-xs text-[var(--ws-integrations-text-muted)]">Code review & PRs</p>
</div>
</div>
<p class="text-sm leading-relaxed text-[var(--ws-integrations-text-soft)]">
Review pull requests, suggest improvements and auto-fix issues directly from your repository — without leaving your workflow.
</p>
</div>
<!-- Slack -->
<div class="group flex flex-col gap-4 rounded-2xl border border-[var(--ws-integrations-border)] bg-[var(--ws-integrations-card-bg)] p-6 transition-shadow hover:shadow-md">
<div class="flex items-center gap-3">
<div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl border border-[var(--ws-integrations-border)] bg-[var(--ws-integrations-icon-bg)]">
<svg class="h-5 w-5 text-[var(--ws-integrations-icon-color)]" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M5.042 15.165a2.528 2.528 0 01-2.52 2.523A2.528 2.528 0 010 15.165a2.527 2.527 0 012.522-2.52h2.52v2.52zm1.271 0a2.527 2.527 0 012.521-2.52 2.527 2.527 0 012.521 2.52v6.313A2.528 2.528 0 018.834 24a2.528 2.528 0 01-2.521-2.522v-6.313zM8.834 5.042a2.528 2.528 0 01-2.521-2.52A2.528 2.528 0 018.834 0a2.528 2.528 0 012.521 2.522v2.52H8.834zm0 1.271a2.528 2.528 0 012.521 2.521 2.528 2.528 0 01-2.521 2.521H2.522A2.528 2.528 0 010 8.834a2.528 2.528 0 012.522-2.521h6.312zm10.122 2.521a2.528 2.528 0 012.522-2.521A2.528 2.528 0 0124 8.834a2.528 2.528 0 01-2.522 2.521h-2.522V8.834zm-1.268 0a2.528 2.528 0 01-2.523 2.521 2.527 2.527 0 01-2.52-2.521V2.522A2.527 2.527 0 0115.165 0a2.528 2.528 0 012.523 2.522v6.312zm-2.523 10.122a2.528 2.528 0 012.523 2.522A2.528 2.528 0 0115.165 24a2.527 2.527 0 01-2.52-2.522v-2.522h2.52zm0-1.268a2.527 2.527 0 01-2.52-2.523 2.526 2.526 0 012.52-2.52h6.313A2.527 2.527 0 0124 15.165a2.528 2.528 0 01-2.522 2.523h-6.313z"/>
</svg>
</div>
<div>
<p class="font-semibold text-[var(--ws-integrations-text)]">Slack</p>
<p class="text-xs text-[var(--ws-integrations-text-muted)]">Team collaboration</p>
</div>
</div>
<p class="text-sm leading-relaxed text-[var(--ws-integrations-text-soft)]">
Assign tasks, get status updates and trigger agent runs directly from Slack threads. Your team stays in the loop without switching context.
</p>
</div>
<!-- Terminal / CLI -->
<div class="group flex flex-col gap-4 rounded-2xl border border-[var(--ws-integrations-border)] bg-[var(--ws-integrations-card-bg)] p-6 transition-shadow hover:shadow-md">
<div class="flex items-center gap-3">
<div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl border border-[var(--ws-integrations-border)] bg-[var(--ws-integrations-icon-bg)]">
<svg class="h-5 w-5 text-[var(--ws-integrations-icon-color)]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.7" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M6.75 7.5l3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0021 18V6a2.25 2.25 0 00-2.25-2.25H5.25A2.25 2.25 0 003 6v12a2.25 2.25 0 002.25 2.25z"/>
</svg>
</div>
<div>
<p class="font-semibold text-[var(--ws-integrations-text)]">Terminal</p>
<p class="text-xs text-[var(--ws-integrations-text-muted)]">CLI & shell integration</p>
</div>
</div>
<p class="text-sm leading-relaxed text-[var(--ws-integrations-text-soft)]">
Run commands, watch test output and iterate on scripts with full shell awareness. The AI understands your terminal history and context.
</p>
</div>
<!-- Linear -->
<div class="group flex flex-col gap-4 rounded-2xl border border-[var(--ws-integrations-border)] bg-[var(--ws-integrations-card-bg)] p-6 transition-shadow hover:shadow-md">
<div class="flex items-center gap-3">
<div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl border border-[var(--ws-integrations-border)] bg-[var(--ws-integrations-icon-bg)]">
<svg class="h-5 w-5 text-[var(--ws-integrations-icon-color)]" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M2.12 15.362a10.01 10.01 0 006.519 6.519L2.12 15.36zm-.948-2.274l9.741 9.741a10.016 10.016 0 01-9.741-9.741zM21.44 5.1l-2.557 2.558a.75.75 0 01-1.061-1.06L20.38 4.04A9.94 9.94 0 0121.44 5.1zM12 2c.47 0 .933.034 1.388.097l-9.291 9.291A10.014 10.014 0 0112 2zm7.963 2.12a10 10 0 01-7.86 17.77l7.86-17.77zm-1.19-1.19L11.11 21.878A10 10 0 0118.773 2.93z"/>
</svg>
</div>
<div>
<p class="font-semibold text-[var(--ws-integrations-text)]">Linear</p>
<p class="text-xs text-[var(--ws-integrations-text-muted)]">Issue tracking</p>
</div>
</div>
<p class="text-sm leading-relaxed text-[var(--ws-integrations-text-soft)]">
Link issues to code changes, auto-update ticket status on merge and generate commit messages from issue titles — no manual updates needed.
</p>
</div>
<!-- Figma -->
<div class="group flex flex-col gap-4 rounded-2xl border border-[var(--ws-integrations-border)] bg-[var(--ws-integrations-card-bg)] p-6 transition-shadow hover:shadow-md">
<div class="flex items-center gap-3">
<div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl border border-[var(--ws-integrations-border)] bg-[var(--ws-integrations-icon-bg)]">
<svg class="h-5 w-5 text-[var(--ws-integrations-icon-color)]" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M8 24c2.208 0 4-1.792 4-4v-4H8c-2.208 0-4 1.792-4 4s1.792 4 4 4zm0-20H4C1.792 4 0 5.792 0 8s1.792 4 4 4h4V4zM12 0H8C5.792 0 4 1.792 4 4h8V0zm0 12H8c-2.208 0-4 1.792-4 4s1.792 4 4 4h4V12zm4-12c-2.208 0-4 1.792-4 4v4h4c2.208 0 4-1.792 4-4S18.208 0 16 0zm0 8h-4v8h4c2.208 0 4-1.792 4-4s-1.792-4-4-4z"/>
</svg>
</div>
<div>
<p class="font-semibold text-[var(--ws-integrations-text)]">Figma</p>
<p class="text-xs text-[var(--ws-integrations-text-muted)]">Design handoff</p>
</div>
</div>
<p class="text-sm leading-relaxed text-[var(--ws-integrations-text-soft)]">
Import component specs directly from Figma files. The AI generates matching code structures with correct spacing, typography and token values.
</p>
</div>
<!-- Vercel -->
<div class="group flex flex-col gap-4 rounded-2xl border border-[var(--ws-integrations-border)] bg-[var(--ws-integrations-card-bg)] p-6 transition-shadow hover:shadow-md">
<div class="flex items-center gap-3">
<div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl border border-[var(--ws-integrations-border)] bg-[var(--ws-integrations-icon-bg)]">
<svg class="h-5 w-5 text-[var(--ws-integrations-icon-color)]" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M24 22.525H0l12-21.05 12 21.05z"/>
</svg>
</div>
<div>
<p class="font-semibold text-[var(--ws-integrations-text)]">Vercel</p>
<p class="text-xs text-[var(--ws-integrations-text-muted)]">Deploy previews</p>
</div>
</div>
<p class="text-sm leading-relaxed text-[var(--ws-integrations-text-soft)]">
Trigger preview deployments, check build logs and get AI-assisted diagnosis for deployment errors — all without leaving your editor.
</p>
</div>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
integrationstoolsecosystemlogosgridplatformspartnerships
Slots
| Name | Required | Description |
|---|---|---|
| icon | Yes | SVG-Logo der Integration in einem Icon-Container. |
| name | Yes | Name der Integration (z.B. GitHub, Slack). |
| category | Yes | Kurzkategorie unter dem Namen (z.B. Code review & PRs). |
| description | Yes | 1–2 Satz Beschreibung des Mehrwerts dieser Integration. |
3-spaltiges Integrations-Grid mit Icon-Container, Name, Kategorie-Label und Beschreibung pro Card. Jede Karte hat einen subtilen Hover-Shadow. Die SVG-Icons sind inline für volle Farb- und Theme-Kontrolle. Responsiv: 1 → 2 → 3 Spalten.