AI-DRIVEN PRODUCT PIPELINE

SWIMLINE MCP

Dal ticket Jira all’MVP React su Vercel. 8 tool MCP per automatizzare il flusso product-to-dev con Claude AI.

https://swimline.fortunato.dev/mcp

Il flusso end-to-end

Dalla richiesta di mercato al branch di sviluppo, AI-assisted end-to-end.

01 Origine Richiesta dal mercato GOVERNANCE
02 Discovery & MVP Analisi, brief, MVP AI ✦ AI · PRODUCT
03 Gate 1 Approvazione stakeholder GATE
04 Design Figma AI → WCAG → Brand ✦ AI · DESIGN
05 Gate 2 Approvazione tavole finali GATE
06 Development Branch / Scaffold AI-driven ✦ AI · DEV
Governance
& Stakeholder
Tavolo origine

CdA, Steering Committee, Sales e Mercato esprimono la richiesta di feature

Confluence Slack
✓ Validation Gate 1

CdA e Steering validano MVP e Feature Brief. Approvazione o feedback loop a Phase 2.

✓ Validation Gate 2

Prodotto + Stakeholder validano le tavole Figma finali. Approvazione o re-design loop.

Product
Raccolta requisiti

Prodotto ascolta, affina e struttura la richiesta. Identifica potenziale e scope.

Jira Confluence
Feature Brief

Brief strutturato con User Stories e Acceptance Criteria da Jira + Confluence

✦ AI
read_jira_issue read_confluence_page generate_feature_brief
MVP testabile

Scaffold Vite+React su GitHub; Claude genera App.tsx come artifact in chat

✦ AI
generate_mvp push_mvp_changes
Presenta MVP

Prodotto presenta Feature Brief e MVP agli stakeholder. Raccoglie feedback e gestisce approvazione.

Requisiti per Design

Genera Jira ticket puntuali con contesto, vincoli normativi e dettagli UX per il team Design

✦ AI
create_jira_epic
Review tavole Figma

Prodotto valida le tavole rispetto ai requisiti originali e ai criteri di accettazione.

Revisione requisiti dev

Aggiorna i requisiti con contesto da MVP, tavole approvate e feedback Gate 2

✦ AI
Jira Confluence
Design
Sketch Figma AI

Dal ticket Jira + MVP, genera tavole Figma abbozzate via AI. Prima iterazione visiva.

✦ AI
create_figma_draft
Refinement WCAG + Brand

Design applica WCAG 2.2, Design System, best practice UI/UX e brand identity.

Figma Storybook
Consegna tavole finali

Design presenta tavole complete, annotate e handoff-ready per stakeholder e Dev.

Figma Dev Mode
Supporto Dev

Design risponde a dubbi implementativi e verifica la fedeltà UI durante lo sviluppo.

Figma Dev Mode Jira
Development
Stima e planning

Dev riceve tavole + requisiti revisionati. Stima effort e pianifica sprint.

✦ AI
Jira Claude Code
Feature branch / Scaffold

AI genera il branch partendo dall’intera documentazione accumulata nel flusso.

✦ AI
Claude Code GitHub
PR + Code Review AI

PR aperta su feature branch. AI assiste nella code review e verifica la compliance ai requisiti.

✦ AI
GitHub Actions Claude Code
Handoff
Feature Request
Feature Brief + MVP
Gate 1 OK + Brief validato
Jira ticket + Figma sketch
Gate 2 OK + Tavole finali
Req. revisionati + Figma + MVP
01 Origine Richiesta dal mercato

Governance & Stakeholder

Tavolo origine

CdA, Steering, Sales, Mercato esprimono la richiesta

Confluence Slack

Product

Raccolta requisiti

Prodotto affina e struttura la richiesta

Jira Confluence

Design

Nessuna attività in questa fase

Development

Nessuna attività in questa fase

Handoff: Feature Request
02 Discovery & MVP Analisi, brief, MVP AI

Governance & Stakeholder

Nessuna attività in questa fase

Product

Feature Brief

Brief strutturato con User Stories e AC

✦ AI
read_jira_issue generate_feature_brief
MVP testabile

Scaffold Vite+React su GitHub; Claude genera App.tsx

✦ AI
generate_mvp push_mvp_changes

Design / Development

Nessuna attività in questa fase

Handoff: Feature Brief + MVP
03 Validation Gate 1 Approvazione stakeholder

Governance & Stakeholder

✓ Validation Gate 1

CdA e Steering validano MVP e Feature Brief. Approvazione o feedback loop.

Product

Presenta MVP

Prodotto presenta Brief e MVP, raccoglie feedback

Design / Development

Nessuna attività in questa fase

Handoff: Gate 1 OK + Brief validato
04 Design & Refinement Figma AI → WCAG → Brand

Governance

Nessuna attività in questa fase

Product

Requisiti per Design

Genera ticket Jira con contesto e vincoli normativi

✦ AI
create_jira_epic

Design

Sketch Figma AI

Tavole Figma abbozzate via AI dal ticket + MVP

✦ AI
create_figma_draft
Refinement WCAG + Brand

WCAG 2.2, Design System, brand identity

Development

Nessuna attività in questa fase

Handoff: Jira ticket + Figma sketch
05 Validation Gate 2 Approvazione tavole finali

Governance & Stakeholder

✓ Validation Gate 2

Prodotto + Stakeholder validano le tavole Figma finali. Approvazione o re-design loop.

Product

Review tavole Figma

Valida le tavole rispetto ai requisiti originali

Design

Consegna tavole finali

Tavole complete, annotate e handoff-ready

Figma Dev Mode

Development

Stima e planning

Effort estimation e pianificazione sprint

✦ AI
Handoff: Gate 2 OK + Tavole finali
06 Development Branch / Scaffold AI-driven

Governance

Nessuna attività in questa fase

Product

Revisione requisiti dev

Aggiorna requisiti con contesto da MVP e tavole approvate

✦ AI

Design

Supporto Dev

Risponde a dubbi implementativi, verifica fedeltà UI

Development

Feature branch / Scaffold

AI genera il branch dall’intera documentazione accumulata

✦ AI
Claude Code GitHub
PR + Code Review AI

PR su feature branch, code review assistita da AI

✦ AI
Handoff: Req. revisionati + Figma + MVP
AI-assisted Gate umano (meeting) Handoff automatico

I tool disponibili

Usa questi tool da Claude.ai dopo aver connesso il server.

Input

read_jira_issue

Legge un issue Jira per chiave. Restituisce summary, description, status, priority e labels.

Parametri

  • issue_key req string
Input

read_confluence_page

Legge una pagina Confluence per ID o URL, restituisce titolo e testo estratto.

Parametri

  • page_id opt string
  • page_url opt string
Brief

generate_feature_brief

Genera Feature Brief strutturato con User Stories e AC da Jira + Confluence via Claude.

Parametri

  • jira_issue_key req string
  • confluence_page_id opt string
MVP

generate_mvp

Pusha scaffold Vite+React+Tailwind su GitHub e restituisce le istruzioni di generazione per Claude in chat.

Parametri

  • feature_brief req string
  • issue_key opt string
  • project_name opt string
Deploy

push_mvp_changes

Pusha l’artifact App.tsx su GitHub. Vercel rileva il push e auto-deploya.

Parametri

  • slug opt string
  • app_tsx opt string
  • app_dir opt string
  • message opt string
Deploy

deploy_to_vercel

Deploy su Vercel via CLI. Richiede esecuzione locale con Vercel token.

Parametri

  • project_dir req string
  • project_name opt string
Jira

create_jira_epic

Crea Epic + User Stories su Jira da Feature Brief via Claude. Prerequisito: gate umano MVP approvato.

Parametri

  • project_key req string
  • feature_brief req string
  • deployment_url opt string
Figma

create_figma_draft

Genera specifiche frame Figma (layout, componenti, dimensioni) via Claude. Opzionalmente posta commento sul file Figma.

Parametri

  • feature_brief req string
  • epic_key opt string
  • figma_file_key opt string

Connetti il server

Claude.ai (web)

  1. Vai su claude.ai → Settings → Integrations
  2. Aggiungi connettore: https://swimline.fortunato.dev/mcp
  3. Completa il flusso OAuth — inserisci la tua API key nel form
  4. Gli 8 tool sono disponibili in ogni chat
Apri Integrazioni Claude.ai (apre in nuova scheda)
Server URL MCP
https://swimline.fortunato.dev/mcp

Claude Desktop / Cursor (locale)

Aggiungi questa configurazione al file claude_desktop_config.json o al tuo mcp.json.

claude_desktop_config.json JSON
{
  "mcpServers": {
    "swimline": {
      "command": "node",
      "args": ["/path/to/mcp-server/dist/main.js", "--mcp"],
      "env": {
        "ANTHROPIC_API_KEY": "sk-ant-...",
        "VALID_API_KEYS": "admin:swl_yourkey",
        "JIRA_BASE_URL": "https://yourcompany.atlassian.net",
        "JIRA_API_TOKEN": "...",
        "GITHUB_TOKEN": "ghp_...",
        "GITHUB_OWNER": "your-org",
        "GITHUB_REPO": "swimline-mvps"
      }
    }
  }
}