AmCham Spain
29/03/2026
Uso Interno

Prompt de Implementación: Generador de Artefactos HTML Autocontenidos

INSTRUCCIÓN PRINCIPAL

Prompt de Implementación: Generador de Artefactos HTML Autocontenidos

Para usar en: Nueva instancia de Claude Code con contexto fresco Modo de trabajo: Director de proyecto + equipo de agentes Fecha de creación: 29/03/2026

INSTRUCCIÓN PRINCIPAL

Necesito implementar una nueva capacidad para AmCham Spain OS: generación de artefactos HTML autocontenidos — archivos .html únicos que se abren en cualquier navegador sin servidor, con gráficos interactivos, branding corporativo y datos embebidos.

Trabaja como Director de Proyecto. En cada fase:

  1. Delega la implementación a agentes especializados (en paralelo cuando sea posible)
  2. Audita el resultado de cada agente antes de pasar a la siguiente fase
  3. Verifica que el código cumple los estándares del repositorio
  4. No avances a la fase siguiente hasta que la actual esté validada

CONTEXTO DEL REPOSITORIO

Qué es AmCham Spain OS

Sistema operativo digital de la Cámara de Comercio de EE.UU. en España. Genera documentos ejecutivos, investigaciones, briefings y visualizaciones de datos para 5 comités temáticos.

Recursos existentes que DEBEN reutilizarse

Recurso Ruta Qué aprovechar
CSS corporativo lib/pdf_generator.py → variable CORPORATE_CSS (~120 líneas) Colores, tipografías, estilos base
Dashboard HTML existente src/investigative/dashboard.py Patrón de generación HTML con datos embebidos
Motor de plantillas lib/template_engine.py Sustitución de variables
Guía visual config/GUIA_ESTILO_VISUAL.md Paleta oficial, tipografías, reglas de marca
Regla de estilo visual .claude/rules/00-core/visual-style.md Colores HEX exactos, reglas obligatorias

Identidad corporativa (obligatoria)

Colores:
  Azul Marino:     #00247D (Pantone 280) — títulos, headers, fondos principales
  Rojo Corporativo: #D1232A (Pantone 186) — acentos, CTAs, alertas
  Azul Claro:      #8FACD0 (Pantone 2717) — elementos decorativos
  Negro:           #000000 — cuerpo de texto
  Gris Claro:      #D3D3D3 — fondos secundarios
  Blanco:          #FFFFFF — fondos principales

Semánticos (gráficos):
  Positivo: #27ae60    Negativo: #e74c3c    Alerta: #f39c12

Tipografías:
  Títulos: Playfair Display (serif) — Google Fonts
  Cuerpo:  DM Sans (sans-serif) — Google Fonts

Formato numérico: español (1.234,56 — punto miles, coma decimal)

Estructura de directorios relevante

amchamspain-os-main/
├── lib/                      # Bibliotecas Python
│   ├── pdf_generator.py      # CORPORATE_CSS aquí
│   ├── template_engine.py    # Motor 
│   ├── datawrapper_client.py # Referencia de cómo se generan gráficos
│   └── html_artifact.py      # ← CREAR AQUÍ
├── templates/
│   ├── html-artifact/        # ← CREAR AQUÍ (plantillas)
│   └── briefing-ejecutivo/   # Referencia de estructura template
├── .claude/
│   ├── skills/               # Skills conversacionales
│   ├── commands/             # Comandos /slash
│   └── rules/               # Reglas del sistema
├── outputs/
│   └── html/                 # ← CREAR AQUÍ (directorio de salida)
├── config/
│   └── GUIA_ESTILO_VISUAL.md # Biblia visual
└── CLAUDE.md                 # Hub de navegación del sistema

ESPECIFICACIÓN TÉCNICA

Archivo principal: lib/html_artifact.py

Clase HtmlArtifact con estos métodos públicos:

class HtmlArtifact:
    """Genera archivos HTML autocontenidos con branding AmCham Spain."""

    ARTIFACT_TYPES = ["dashboard", "report", "infographic", "chart", "brief"]

    def generate(
        self,
        content: str,              # Markdown o HTML del cuerpo
        artifact_type: str,        # Uno de ARTIFACT_TYPES
        title: str,                # Título del documento
        subtitle: str = "",        # Subtítulo opcional
        data: dict | None = None,  # Datos para Chart.js {charts: [...]}
        sources: list[str] = [],   # Fuentes citadas
        classification: str = "Uso Interno",
        auto_open: bool = True,    # Abrir en navegador
        output_dir: str = "outputs/html",
    ) -> Path:
        """Genera .html y retorna la ruta del archivo creado."""

    def generate_from_markdown(
        self,
        md_path: str,              # Ruta a archivo .md existente
        artifact_type: str = "report",
        data: dict | None = None,
        auto_open: bool = True,
    ) -> Path:
        """Convierte un .md existente del repo en HTML interactivo."""

Estructura del dict data para gráficos:

data = {
    "kpis": [
        {"label": "Exportaciones", "value": "16.800M EUR", "change": "+5,2%", "trend": "up"},
        {"label": "Importaciones", "value": "12.340M EUR", "change": "+3,1%", "trend": "up"},
    ],
    "charts": [
        {
            "id": "chart-1",
            "type": "bar",          # bar | line | doughnut | radar | polarArea
            "title": "Top 10 Productos",
            "labels": ["Automóviles", "Maquinaria", ...],
            "datasets": [
                {"label": "2024", "data": [3200, 2800, ...], "color": "#00247D"},
                {"label": "2023", "data": [2900, 2600, ...], "color": "#8FACD0"},
            ]
        },
        {
            "id": "chart-2",
            "type": "line",
            "title": "Evolución 2020-2024",
            "labels": ["2020", "2021", "2022", "2023", "2024"],
            "datasets": [
                {"label": "Exportaciones", "data": [14200, 14800, 15300, 16000, 16800], "color": "#00247D"},
                {"label": "Importaciones", "data": [10500, 11200, 11800, 12000, 12340], "color": "#D1232A"},
            ]
        }
    ],
    "tables": [
        {
            "id": "table-1",
            "title": "Detalle por Sector",
            "headers": ["Sector", "Exportaciones", "Importaciones", "Balanza"],
            "rows": [
                ["Automóvil", "3.200M", "1.800M", "+1.400M"],
                ["Maquinaria", "2.800M", "2.100M", "+700M"],
            ]
        }
    ]
}

CDNs (sin dependencias locales)

<!-- Tailwind CSS Play CDN — layout y utilidades -->
<script src="https://cdn.tailwindcss.com"></script>

<!-- Chart.js 4 — gráficos interactivos (SOLO si data.charts existe) -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@4"></script>

<!-- Google Fonts — tipografías corporativas -->
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=DM+Sans:wght@400;500;700&display=swap" rel="stylesheet">

Plantillas HTML: templates/html-artifact/

6 archivos con marcadores que el generador sustituye:

Archivo Variables clave Componentes visuales
base.html , , , , , 29/03/2026, Uso Interno Header, footer, estructura base
dashboard.html Hereda base + , , Grid de KPIs, gráficos Chart.js, tablas con hover
report.html Hereda base + ,

Prompt de Implementación: Generador de Artefactos HTML Autocontenidos

Para usar en: Nueva instancia de Claude Code con contexto fresco Modo de trabajo: Director de proyecto + equipo de agentes Fecha de creación: 29/03/2026

INSTRUCCIÓN PRINCIPAL

Necesito implementar una nueva capacidad para AmCham Spain OS: generación de artefactos HTML autocontenidos — archivos .html únicos que se abren en cualquier navegador sin servidor, con gráficos interactivos, branding corporativo y datos embebidos.

Trabaja como Director de Proyecto. En cada fase:

  1. Delega la implementación a agentes especializados (en paralelo cuando sea posible)
  2. Audita el resultado de cada agente antes de pasar a la siguiente fase
  3. Verifica que el código cumple los estándares del repositorio
  4. No avances a la fase siguiente hasta que la actual esté validada

CONTEXTO DEL REPOSITORIO

Qué es AmCham Spain OS

Sistema operativo digital de la Cámara de Comercio de EE.UU. en España. Genera documentos ejecutivos, investigaciones, briefings y visualizaciones de datos para 5 comités temáticos.

Recursos existentes que DEBEN reutilizarse

Recurso Ruta Qué aprovechar
CSS corporativo lib/pdf_generator.py → variable CORPORATE_CSS (~120 líneas) Colores, tipografías, estilos base
Dashboard HTML existente src/investigative/dashboard.py Patrón de generación HTML con datos embebidos
Motor de plantillas lib/template_engine.py Sustitución de variables
Guía visual config/GUIA_ESTILO_VISUAL.md Paleta oficial, tipografías, reglas de marca
Regla de estilo visual .claude/rules/00-core/visual-style.md Colores HEX exactos, reglas obligatorias

Identidad corporativa (obligatoria)

Colores:
  Azul Marino:     #00247D (Pantone 280) — títulos, headers, fondos principales
  Rojo Corporativo: #D1232A (Pantone 186) — acentos, CTAs, alertas
  Azul Claro:      #8FACD0 (Pantone 2717) — elementos decorativos
  Negro:           #000000 — cuerpo de texto
  Gris Claro:      #D3D3D3 — fondos secundarios
  Blanco:          #FFFFFF — fondos principales

Semánticos (gráficos):
  Positivo: #27ae60    Negativo: #e74c3c    Alerta: #f39c12

Tipografías:
  Títulos: Playfair Display (serif) — Google Fonts
  Cuerpo:  DM Sans (sans-serif) — Google Fonts

Formato numérico: español (1.234,56 — punto miles, coma decimal)

Estructura de directorios relevante

amchamspain-os-main/
├── lib/                      # Bibliotecas Python
│   ├── pdf_generator.py      # CORPORATE_CSS aquí
│   ├── template_engine.py    # Motor 
│   ├── datawrapper_client.py # Referencia de cómo se generan gráficos
│   └── html_artifact.py      # ← CREAR AQUÍ
├── templates/
│   ├── html-artifact/        # ← CREAR AQUÍ (plantillas)
│   └── briefing-ejecutivo/   # Referencia de estructura template
├── .claude/
│   ├── skills/               # Skills conversacionales
│   ├── commands/             # Comandos /slash
│   └── rules/               # Reglas del sistema
├── outputs/
│   └── html/                 # ← CREAR AQUÍ (directorio de salida)
├── config/
│   └── GUIA_ESTILO_VISUAL.md # Biblia visual
└── CLAUDE.md                 # Hub de navegación del sistema

ESPECIFICACIÓN TÉCNICA

Archivo principal: lib/html_artifact.py

Clase HtmlArtifact con estos métodos públicos:

class HtmlArtifact:
    """Genera archivos HTML autocontenidos con branding AmCham Spain."""

    ARTIFACT_TYPES = ["dashboard", "report", "infographic", "chart", "brief"]

    def generate(
        self,
        content: str,              # Markdown o HTML del cuerpo
        artifact_type: str,        # Uno de ARTIFACT_TYPES
        title: str,                # Título del documento
        subtitle: str = "",        # Subtítulo opcional
        data: dict | None = None,  # Datos para Chart.js {charts: [...]}
        sources: list[str] = [],   # Fuentes citadas
        classification: str = "Uso Interno",
        auto_open: bool = True,    # Abrir en navegador
        output_dir: str = "outputs/html",
    ) -> Path:
        """Genera .html y retorna la ruta del archivo creado."""

    def generate_from_markdown(
        self,
        md_path: str,              # Ruta a archivo .md existente
        artifact_type: str = "report",
        data: dict | None = None,
        auto_open: bool = True,
    ) -> Path:
        """Convierte un .md existente del repo en HTML interactivo."""

Estructura del dict data para gráficos:

data = {
    "kpis": [
        {"label": "Exportaciones", "value": "16.800M EUR", "change": "+5,2%", "trend": "up"},
        {"label": "Importaciones", "value": "12.340M EUR", "change": "+3,1%", "trend": "up"},
    ],
    "charts": [
        {
            "id": "chart-1",
            "type": "bar",          # bar | line | doughnut | radar | polarArea
            "title": "Top 10 Productos",
            "labels": ["Automóviles", "Maquinaria", ...],
            "datasets": [
                {"label": "2024", "data": [3200, 2800, ...], "color": "#00247D"},
                {"label": "2023", "data": [2900, 2600, ...], "color": "#8FACD0"},
            ]
        },
        {
            "id": "chart-2",
            "type": "line",
            "title": "Evolución 2020-2024",
            "labels": ["2020", "2021", "2022", "2023", "2024"],
            "datasets": [
                {"label": "Exportaciones", "data": [14200, 14800, 15300, 16000, 16800], "color": "#00247D"},
                {"label": "Importaciones", "data": [10500, 11200, 11800, 12000, 12340], "color": "#D1232A"},
            ]
        }
    ],
    "tables": [
        {
            "id": "table-1",
            "title": "Detalle por Sector",
            "headers": ["Sector", "Exportaciones", "Importaciones", "Balanza"],
            "rows": [
                ["Automóvil", "3.200M", "1.800M", "+1.400M"],
                ["Maquinaria", "2.800M", "2.100M", "+700M"],
            ]
        }
    ]
}

CDNs (sin dependencias locales)

<!-- Tailwind CSS Play CDN — layout y utilidades -->
<script src="https://cdn.tailwindcss.com"></script>

<!-- Chart.js 4 — gráficos interactivos (SOLO si data.charts existe) -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@4"></script>

<!-- Google Fonts — tipografías corporativas -->
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=DM+Sans:wght@400;500;700&display=swap" rel="stylesheet">

Plantillas HTML: templates/html-artifact/

6 archivos con marcadores que el generador sustituye:

Archivo Variables clave Componentes visuales
base.html , , , , , , Header, footer, estructura base
dashboard.html Hereda base + , , Grid de KPIs, gráficos Chart.js, tablas con hover
report.html Hereda base + , TOC clickable, secciones colapsables con toggle
chart.html Hereda base + Layout de gráficos 1-col o 2-col responsive
brief.html Hereda base +

Prompt de Implementación: Generador de Artefactos HTML Autocontenidos

Para usar en: Nueva instancia de Claude Code con contexto fresco Modo de trabajo: Director de proyecto + equipo de agentes Fecha de creación: 29/03/2026

INSTRUCCIÓN PRINCIPAL

Necesito implementar una nueva capacidad para AmCham Spain OS: generación de artefactos HTML autocontenidos — archivos .html únicos que se abren en cualquier navegador sin servidor, con gráficos interactivos, branding corporativo y datos embebidos.

Trabaja como Director de Proyecto. En cada fase:

  1. Delega la implementación a agentes especializados (en paralelo cuando sea posible)
  2. Audita el resultado de cada agente antes de pasar a la siguiente fase
  3. Verifica que el código cumple los estándares del repositorio
  4. No avances a la fase siguiente hasta que la actual esté validada

CONTEXTO DEL REPOSITORIO

Qué es AmCham Spain OS

Sistema operativo digital de la Cámara de Comercio de EE.UU. en España. Genera documentos ejecutivos, investigaciones, briefings y visualizaciones de datos para 5 comités temáticos.

Recursos existentes que DEBEN reutilizarse

Recurso Ruta Qué aprovechar
CSS corporativo lib/pdf_generator.py → variable CORPORATE_CSS (~120 líneas) Colores, tipografías, estilos base
Dashboard HTML existente src/investigative/dashboard.py Patrón de generación HTML con datos embebidos
Motor de plantillas lib/template_engine.py Sustitución de variables
Guía visual config/GUIA_ESTILO_VISUAL.md Paleta oficial, tipografías, reglas de marca
Regla de estilo visual .claude/rules/00-core/visual-style.md Colores HEX exactos, reglas obligatorias

Identidad corporativa (obligatoria)

Colores:
  Azul Marino:     #00247D (Pantone 280) — títulos, headers, fondos principales
  Rojo Corporativo: #D1232A (Pantone 186) — acentos, CTAs, alertas
  Azul Claro:      #8FACD0 (Pantone 2717) — elementos decorativos
  Negro:           #000000 — cuerpo de texto
  Gris Claro:      #D3D3D3 — fondos secundarios
  Blanco:          #FFFFFF — fondos principales

Semánticos (gráficos):
  Positivo: #27ae60    Negativo: #e74c3c    Alerta: #f39c12

Tipografías:
  Títulos: Playfair Display (serif) — Google Fonts
  Cuerpo:  DM Sans (sans-serif) — Google Fonts

Formato numérico: español (1.234,56 — punto miles, coma decimal)

Estructura de directorios relevante

amchamspain-os-main/
├── lib/                      # Bibliotecas Python
│   ├── pdf_generator.py      # CORPORATE_CSS aquí
│   ├── template_engine.py    # Motor 
│   ├── datawrapper_client.py # Referencia de cómo se generan gráficos
│   └── html_artifact.py      # ← CREAR AQUÍ
├── templates/
│   ├── html-artifact/        # ← CREAR AQUÍ (plantillas)
│   └── briefing-ejecutivo/   # Referencia de estructura template
├── .claude/
│   ├── skills/               # Skills conversacionales
│   ├── commands/             # Comandos /slash
│   └── rules/               # Reglas del sistema
├── outputs/
│   └── html/                 # ← CREAR AQUÍ (directorio de salida)
├── config/
│   └── GUIA_ESTILO_VISUAL.md # Biblia visual
└── CLAUDE.md                 # Hub de navegación del sistema

ESPECIFICACIÓN TÉCNICA

Archivo principal: lib/html_artifact.py

Clase HtmlArtifact con estos métodos públicos:

class HtmlArtifact:
    """Genera archivos HTML autocontenidos con branding AmCham Spain."""

    ARTIFACT_TYPES = ["dashboard", "report", "infographic", "chart", "brief"]

    def generate(
        self,
        content: str,              # Markdown o HTML del cuerpo
        artifact_type: str,        # Uno de ARTIFACT_TYPES
        title: str,                # Título del documento
        subtitle: str = "",        # Subtítulo opcional
        data: dict | None = None,  # Datos para Chart.js {charts: [...]}
        sources: list[str] = [],   # Fuentes citadas
        classification: str = "Uso Interno",
        auto_open: bool = True,    # Abrir en navegador
        output_dir: str = "outputs/html",
    ) -> Path:
        """Genera .html y retorna la ruta del archivo creado."""

    def generate_from_markdown(
        self,
        md_path: str,              # Ruta a archivo .md existente
        artifact_type: str = "report",
        data: dict | None = None,
        auto_open: bool = True,
    ) -> Path:
        """Convierte un .md existente del repo en HTML interactivo."""

Estructura del dict data para gráficos:

data = {
    "kpis": [
        {"label": "Exportaciones", "value": "16.800M EUR", "change": "+5,2%", "trend": "up"},
        {"label": "Importaciones", "value": "12.340M EUR", "change": "+3,1%", "trend": "up"},
    ],
    "charts": [
        {
            "id": "chart-1",
            "type": "bar",          # bar | line | doughnut | radar | polarArea
            "title": "Top 10 Productos",
            "labels": ["Automóviles", "Maquinaria", ...],
            "datasets": [
                {"label": "2024", "data": [3200, 2800, ...], "color": "#00247D"},
                {"label": "2023", "data": [2900, 2600, ...], "color": "#8FACD0"},
            ]
        },
        {
            "id": "chart-2",
            "type": "line",
            "title": "Evolución 2020-2024",
            "labels": ["2020", "2021", "2022", "2023", "2024"],
            "datasets": [
                {"label": "Exportaciones", "data": [14200, 14800, 15300, 16000, 16800], "color": "#00247D"},
                {"label": "Importaciones", "data": [10500, 11200, 11800, 12000, 12340], "color": "#D1232A"},
            ]
        }
    ],
    "tables": [
        {
            "id": "table-1",
            "title": "Detalle por Sector",
            "headers": ["Sector", "Exportaciones", "Importaciones", "Balanza"],
            "rows": [
                ["Automóvil", "3.200M", "1.800M", "+1.400M"],
                ["Maquinaria", "2.800M", "2.100M", "+700M"],
            ]
        }
    ]
}

CDNs (sin dependencias locales)

<!-- Tailwind CSS Play CDN — layout y utilidades -->
<script src="https://cdn.tailwindcss.com"></script>

<!-- Chart.js 4 — gráficos interactivos (SOLO si data.charts existe) -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@4"></script>

<!-- Google Fonts — tipografías corporativas -->
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=DM+Sans:wght@400;500;700&display=swap" rel="stylesheet">

Plantillas HTML: templates/html-artifact/

6 archivos con marcadores que el generador sustituye:

Archivo Variables clave Componentes visuales
base.html , , , , , , Header, footer, estructura base
dashboard.html Hereda base + , , Grid de KPIs, gráficos Chart.js, tablas con hover
report.html Hereda base + , TOC clickable, secciones colapsables con toggle
chart.html Hereda base + Layout de gráficos 1-col o 2-col responsive
brief.html Hereda base + , , Resumen ejecutivo, findings con iconos, timeline
infographic.html Hereda base +

Prompt de Implementación: Generador de Artefactos HTML Autocontenidos

Para usar en: Nueva instancia de Claude Code con contexto fresco Modo de trabajo: Director de proyecto + equipo de agentes Fecha de creación: 29/03/2026

INSTRUCCIÓN PRINCIPAL

Necesito implementar una nueva capacidad para AmCham Spain OS: generación de artefactos HTML autocontenidos — archivos .html únicos que se abren en cualquier navegador sin servidor, con gráficos interactivos, branding corporativo y datos embebidos.

Trabaja como Director de Proyecto. En cada fase:

  1. Delega la implementación a agentes especializados (en paralelo cuando sea posible)
  2. Audita el resultado de cada agente antes de pasar a la siguiente fase
  3. Verifica que el código cumple los estándares del repositorio
  4. No avances a la fase siguiente hasta que la actual esté validada

CONTEXTO DEL REPOSITORIO

Qué es AmCham Spain OS

Sistema operativo digital de la Cámara de Comercio de EE.UU. en España. Genera documentos ejecutivos, investigaciones, briefings y visualizaciones de datos para 5 comités temáticos.

Recursos existentes que DEBEN reutilizarse

Recurso Ruta Qué aprovechar
CSS corporativo lib/pdf_generator.py → variable CORPORATE_CSS (~120 líneas) Colores, tipografías, estilos base
Dashboard HTML existente src/investigative/dashboard.py Patrón de generación HTML con datos embebidos
Motor de plantillas lib/template_engine.py Sustitución de variables
Guía visual config/GUIA_ESTILO_VISUAL.md Paleta oficial, tipografías, reglas de marca
Regla de estilo visual .claude/rules/00-core/visual-style.md Colores HEX exactos, reglas obligatorias

Identidad corporativa (obligatoria)

Colores:
  Azul Marino:     #00247D (Pantone 280) — títulos, headers, fondos principales
  Rojo Corporativo: #D1232A (Pantone 186) — acentos, CTAs, alertas
  Azul Claro:      #8FACD0 (Pantone 2717) — elementos decorativos
  Negro:           #000000 — cuerpo de texto
  Gris Claro:      #D3D3D3 — fondos secundarios
  Blanco:          #FFFFFF — fondos principales

Semánticos (gráficos):
  Positivo: #27ae60    Negativo: #e74c3c    Alerta: #f39c12

Tipografías:
  Títulos: Playfair Display (serif) — Google Fonts
  Cuerpo:  DM Sans (sans-serif) — Google Fonts

Formato numérico: español (1.234,56 — punto miles, coma decimal)

Estructura de directorios relevante

amchamspain-os-main/
├── lib/                      # Bibliotecas Python
│   ├── pdf_generator.py      # CORPORATE_CSS aquí
│   ├── template_engine.py    # Motor 
│   ├── datawrapper_client.py # Referencia de cómo se generan gráficos
│   └── html_artifact.py      # ← CREAR AQUÍ
├── templates/
│   ├── html-artifact/        # ← CREAR AQUÍ (plantillas)
│   └── briefing-ejecutivo/   # Referencia de estructura template
├── .claude/
│   ├── skills/               # Skills conversacionales
│   ├── commands/             # Comandos /slash
│   └── rules/               # Reglas del sistema
├── outputs/
│   └── html/                 # ← CREAR AQUÍ (directorio de salida)
├── config/
│   └── GUIA_ESTILO_VISUAL.md # Biblia visual
└── CLAUDE.md                 # Hub de navegación del sistema

ESPECIFICACIÓN TÉCNICA

Archivo principal: lib/html_artifact.py

Clase HtmlArtifact con estos métodos públicos:

class HtmlArtifact:
    """Genera archivos HTML autocontenidos con branding AmCham Spain."""

    ARTIFACT_TYPES = ["dashboard", "report", "infographic", "chart", "brief"]

    def generate(
        self,
        content: str,              # Markdown o HTML del cuerpo
        artifact_type: str,        # Uno de ARTIFACT_TYPES
        title: str,                # Título del documento
        subtitle: str = "",        # Subtítulo opcional
        data: dict | None = None,  # Datos para Chart.js {charts: [...]}
        sources: list[str] = [],   # Fuentes citadas
        classification: str = "Uso Interno",
        auto_open: bool = True,    # Abrir en navegador
        output_dir: str = "outputs/html",
    ) -> Path:
        """Genera .html y retorna la ruta del archivo creado."""

    def generate_from_markdown(
        self,
        md_path: str,              # Ruta a archivo .md existente
        artifact_type: str = "report",
        data: dict | None = None,
        auto_open: bool = True,
    ) -> Path:
        """Convierte un .md existente del repo en HTML interactivo."""

Estructura del dict data para gráficos:

data = {
    "kpis": [
        {"label": "Exportaciones", "value": "16.800M EUR", "change": "+5,2%", "trend": "up"},
        {"label": "Importaciones", "value": "12.340M EUR", "change": "+3,1%", "trend": "up"},
    ],
    "charts": [
        {
            "id": "chart-1",
            "type": "bar",          # bar | line | doughnut | radar | polarArea
            "title": "Top 10 Productos",
            "labels": ["Automóviles", "Maquinaria", ...],
            "datasets": [
                {"label": "2024", "data": [3200, 2800, ...], "color": "#00247D"},
                {"label": "2023", "data": [2900, 2600, ...], "color": "#8FACD0"},
            ]
        },
        {
            "id": "chart-2",
            "type": "line",
            "title": "Evolución 2020-2024",
            "labels": ["2020", "2021", "2022", "2023", "2024"],
            "datasets": [
                {"label": "Exportaciones", "data": [14200, 14800, 15300, 16000, 16800], "color": "#00247D"},
                {"label": "Importaciones", "data": [10500, 11200, 11800, 12000, 12340], "color": "#D1232A"},
            ]
        }
    ],
    "tables": [
        {
            "id": "table-1",
            "title": "Detalle por Sector",
            "headers": ["Sector", "Exportaciones", "Importaciones", "Balanza"],
            "rows": [
                ["Automóvil", "3.200M", "1.800M", "+1.400M"],
                ["Maquinaria", "2.800M", "2.100M", "+700M"],
            ]
        }
    ]
}

CDNs (sin dependencias locales)

<!-- Tailwind CSS Play CDN — layout y utilidades -->
<script src="https://cdn.tailwindcss.com"></script>

<!-- Chart.js 4 — gráficos interactivos (SOLO si data.charts existe) -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@4"></script>

<!-- Google Fonts — tipografías corporativas -->
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=DM+Sans:wght@400;500;700&display=swap" rel="stylesheet">

Plantillas HTML: templates/html-artifact/

6 archivos con marcadores que el generador sustituye:

Archivo Variables clave Componentes visuales
base.html , , , , , , Header, footer, estructura base
dashboard.html Hereda base + , , Grid de KPIs, gráficos Chart.js, tablas con hover
report.html Hereda base + , TOC clickable, secciones colapsables con toggle
chart.html Hereda base + Layout de gráficos 1-col o 2-col responsive
brief.html Hereda base + , , Resumen ejecutivo, findings con iconos, timeline
infographic.html Hereda base + Bloques visuales con iconos, números grandes, paleta semántica

Requisitos de cada plantilla:

  • HTML5 válido y autocontenido (un solo archivo, sin imports locales)
  • Responsive: funciona en desktop (1200px+), tablet (768px), y móvil (375px)
  • Print-friendly: @media print limpia headers fijos, quita sombras, fuerza colores
  • Tailwind para layout, CSS custom para branding AmCham sobre Tailwind
  • Logo AmCham como SVG inline en el header (no como imagen externa)
  • Footer con: fuentes, fecha de generación, clasificación, "AmCham Spain OS"
  • Idioma: todo en español con tildes y eñes correctas

Skill: .claude/skills/html-artifact.md

# Skill: Generador de Artefactos HTML

## Activación
- "hazme un dashboard", "genera un HTML interactivo", "quiero ver esto en el navegador"
- "artefacto HTML", "visualización interactiva", "HTML con gráficos"
- /artifact [tipo] [tema]

## Tipos disponibles
- dashboard: KPIs + gráficos + tablas (para datos cuantitativos)
- report: Informe ejecutivo interactivo (para documentos largos)
- chart: Solo gráficos Chart.js (para visualización de datos pura)
- brief: Briefing 1-página (para resúmenes rápidos)
- infographic: Bloques visuales con datos (para comunicación visual)

## Flujo
1. Detectar tipo de artefacto según el contexto
2. Si hay datos: estructurarlos en formato {kpis, charts, tables}
3. Si es markdown existente: usar generate_from_markdown()
4. Generar HTML con lib/html_artifact.py
5. Abrir automáticamente en navegador
6. Informar: ruta del archivo + peso + tipo generado

## Integración
- Puede usarse tras /research para visualizar resultados
- Puede usarse tras /generate para versión HTML interactiva
- Los .html generados se catalogan automáticamente en Notion (rule catalog-sync)

## Módulo
lib/html_artifact.py

Comando: .claude/commands/artifact.md

Genera un artefacto HTML autocontenido e interactivo.

Uso: /artifact [tipo] [tema]

Tipos: dashboard | report | chart | brief | infographic

Ejemplos:
  /artifact dashboard "Comercio bilateral España-EEUU 2024"
  /artifact report    → convierte el último output .md en HTML interactivo
  /artifact chart "Evolución PIB España vs UE 2020-2024"
  /artifact brief "Resumen AI Act para comité Economía Digital"

El archivo se genera en outputs/html/ y se abre automáticamente en el navegador.

Demo CLI

El módulo debe ser ejecutable directamente para testing:

python lib/html_artifact.py --demo
# Genera outputs/html/demo_dashboard.html con datos de ejemplo y lo abre en el navegador

python lib/html_artifact.py --demo --type report
# Genera outputs/html/demo_report.html

python lib/html_artifact.py --demo --type chart
# etc.

FASES DE IMPLEMENTACIÓN

Fase 1: Módulo Core (lib/html_artifact.py)

Agente: Desarrollador backend Python Entregable: lib/html_artifact.py funcional con clase HtmlArtifact Criterios de aceptación:

  • Importa y reutiliza CORPORATE_CSS de pdf_generator.py
  • Convierte Markdown a HTML (con markdown2 como en pdf_generator)
  • Genera HTML autocontenido con CDNs de Tailwind, Chart.js, Google Fonts
  • Soporta los 5 tipos de artefacto
  • Maneja data dict para KPIs, charts y tables
  • Genera Chart.js configs correctas embebidas en <script>
  • Nombre de archivo: {tipo}_{slug_titulo}_{YYYYMMDD}.html
  • auto_open=True abre el archivo con webbrowser.open()
  • Encoding UTF-8 correcto en Windows (sys.stdout.reconfigure)
  • Ejecutable como CLI: python lib/html_artifact.py --demo [--type TYPE]

Auditoría del Director:

  • Verificar que NO se reinventa CSS (debe importar de pdf_generator)
  • Verificar que el HTML generado es válido y autocontenido
  • Verificar que --demo genera y abre un HTML correcto

Fase 2: Plantillas HTML (templates/html-artifact/)

Agente: Desarrollador frontend / diseñador HTML Entregable: 6 archivos HTML en templates/html-artifact/ Criterios de aceptación:

  • base.html con estructura completa (head, header, body, footer)
  • Tailwind CSS via Play CDN para layout responsive
  • CSS custom sobre Tailwind para branding AmCham (colores exactos HEX)
  • Logo AmCham como SVG inline en header
  • Responsive: 3 breakpoints (desktop 1200px+, tablet 768px, móvil 375px)
  • @media print funcional (Ctrl+P produce output limpio)
  • Marcadores consistentes con lo que el módulo Python sustituye
  • dashboard.html: grid de KPIs + slots para Chart.js + tablas con hover
  • report.html: TOC clickable con smooth scroll + secciones colapsables
  • chart.html: layout de gráficos 1-col o grid 2-col
  • brief.html: resumen ejecutivo + key findings + timeline vertical
  • infographic.html: bloques visuales con números grandes y colores semánticos
  • Todas las plantillas usan Playfair Display (títulos) + DM Sans (cuerpo)

Auditoría del Director:

  • Abrir cada plantilla en Chrome y verificar rendering
  • Verificar responsive con DevTools (375px, 768px, 1200px)
  • Verificar print preview (Ctrl+P)
  • Verificar que los colores coinciden EXACTAMENTE con la guía visual

Fase 3: Skill + Comando + Directorio

Agente: Integrador de sistema Entregable: .claude/skills/html-artifact.md, .claude/commands/artifact.md, directorio outputs/html/ Criterios de aceptación:

  • Skill describe activación, tipos, flujo e integración
  • Comando /artifact con sintaxis y ejemplos
  • Directorio outputs/html/ creado (con .gitkeep)

Auditoría del Director:

  • Verificar coherencia entre skill, comando y módulo Python

Fase 4: Documentación y registro

Agente: Documentador Entregable: Actualizaciones a CLAUDE.md, commands-list.md, quick-references.md Archivos a modificar:

  • .claude/rules/20-reference/commands-list.md → añadir /artifact en sección de comandos
  • .claude/rules/20-reference/quick-references.md → añadir referencia a skill y módulo
  • CLAUDE.md → añadir sección "Artefactos HTML" en la documentación principal

Criterios de aceptación:

  • /artifact aparece en commands-list con descripción y tipos
  • quick-references incluye skill, módulo y plantillas
  • CLAUDE.md documenta la capacidad con routing table actualizada

Auditoría del Director:

  • Verificar que la documentación es consistente entre los 3 archivos

Fase 5: Test End-to-End

Agente: QA / Tester Entregable: Ejecución exitosa de --demo para los 5 tipos Tests:

# Test 1: Demo dashboard (caso principal)
python lib/html_artifact.py --demo --type dashboard

# Test 2: Demo report
python lib/html_artifact.py --demo --type report

# Test 3: Demo chart
python lib/html_artifact.py --demo --type chart

# Test 4: Demo brief
python lib/html_artifact.py --demo --type brief

# Test 5: Demo infographic
python lib/html_artifact.py --demo --type infographic

Verificaciones por cada HTML generado:

  • Se abre en el navegador sin errores de consola (F12)
  • Los gráficos Chart.js renderizan correctamente con tooltips
  • Los colores coinciden con la paleta corporativa
  • Las tipografías cargan (Playfair Display + DM Sans)
  • Es responsive (redimensionar ventana)
  • Print preview funciona (Ctrl+P)
  • El archivo pesa < 500KB
  • Formato numérico español (1.234,56)
  • Fuentes citadas en el footer
  • Fecha en formato DD/MM/YYYY

Auditoría del Director:

  • Abrir cada HTML generado y verificar todos los puntos
  • Si hay errores, devolver a la fase correspondiente para corrección

REGLAS CRÍTICAS PARA TODOS LOS AGENTES

  1. REUTILIZAR CORPORATE_CSS de lib/pdf_generator.py — no reinventar estilos
  2. NUNCA eliminar tildes o eñes del texto (ni siquiera "preventivamente")
  3. SIEMPRE python -X utf8 + sys.stdout.reconfigure(encoding='utf-8') en Windows
  4. SIEMPRE formato numérico español: 1.234,56 (punto miles, coma decimal)
  5. SIEMPRE colores HEX exactos de la paleta (no aproximados)
  6. NO crear dependencias locales — todo via CDN
  7. NO crear archivos innecesarios — ceñirse al plan
  8. NO modificar archivos existentes excepto los listados en Fase 4
  9. Leer config/GUIA_ESTILO_VISUAL.md antes de implementar cualquier visual
  10. Leer lib/pdf_generator.py antes de escribir CSS

RESULTADO ESPERADO

Al finalizar las 5 fases, el sistema debe poder:

Usuario: "Hazme un dashboard con datos de comercio España-EEUU"
    ↓
Claude: Recopila datos → genera HTML → abre en navegador
    ↓
Archivo: outputs/html/dashboard_comercio_espana_eeuu_20260329.html
    - 150-300KB, autocontenido
    - KPIs interactivos
    - Gráficos Chart.js con tooltips
    - Tablas con hover
    - Branding AmCham perfecto
    - Responsive + print-ready
Bloques visuales con iconos, números grandes, paleta semántica

Requisitos de cada plantilla:

  • HTML5 válido y autocontenido (un solo archivo, sin imports locales)
  • Responsive: funciona en desktop (1200px+), tablet (768px), y móvil (375px)
  • Print-friendly: @media print limpia headers fijos, quita sombras, fuerza colores
  • Tailwind para layout, CSS custom para branding AmCham sobre Tailwind
  • Logo AmCham como SVG inline en el header (no como imagen externa)
  • Footer con: fuentes, fecha de generación, clasificación, "AmCham Spain OS"
  • Idioma: todo en español con tildes y eñes correctas

Skill: .claude/skills/html-artifact.md

# Skill: Generador de Artefactos HTML

## Activación
- "hazme un dashboard", "genera un HTML interactivo", "quiero ver esto en el navegador"
- "artefacto HTML", "visualización interactiva", "HTML con gráficos"
- /artifact [tipo] [tema]

## Tipos disponibles
- dashboard: KPIs + gráficos + tablas (para datos cuantitativos)
- report: Informe ejecutivo interactivo (para documentos largos)
- chart: Solo gráficos Chart.js (para visualización de datos pura)
- brief: Briefing 1-página (para resúmenes rápidos)
- infographic: Bloques visuales con datos (para comunicación visual)

## Flujo
1. Detectar tipo de artefacto según el contexto
2. Si hay datos: estructurarlos en formato {kpis, charts, tables}
3. Si es markdown existente: usar generate_from_markdown()
4. Generar HTML con lib/html_artifact.py
5. Abrir automáticamente en navegador
6. Informar: ruta del archivo + peso + tipo generado

## Integración
- Puede usarse tras /research para visualizar resultados
- Puede usarse tras /generate para versión HTML interactiva
- Los .html generados se catalogan automáticamente en Notion (rule catalog-sync)

## Módulo
lib/html_artifact.py

Comando: .claude/commands/artifact.md

Genera un artefacto HTML autocontenido e interactivo.

Uso: /artifact [tipo] [tema]

Tipos: dashboard | report | chart | brief | infographic

Ejemplos:
  /artifact dashboard "Comercio bilateral España-EEUU 2024"
  /artifact report    → convierte el último output .md en HTML interactivo
  /artifact chart "Evolución PIB España vs UE 2020-2024"
  /artifact brief "Resumen AI Act para comité Economía Digital"

El archivo se genera en outputs/html/ y se abre automáticamente en el navegador.

Demo CLI

El módulo debe ser ejecutable directamente para testing:

python lib/html_artifact.py --demo
# Genera outputs/html/demo_dashboard.html con datos de ejemplo y lo abre en el navegador

python lib/html_artifact.py --demo --type report
# Genera outputs/html/demo_report.html

python lib/html_artifact.py --demo --type chart
# etc.

FASES DE IMPLEMENTACIÓN

Fase 1: Módulo Core (lib/html_artifact.py)

Agente: Desarrollador backend Python Entregable: lib/html_artifact.py funcional con clase HtmlArtifact Criterios de aceptación:

  • Importa y reutiliza CORPORATE_CSS de pdf_generator.py
  • Convierte Markdown a HTML (con markdown2 como en pdf_generator)
  • Genera HTML autocontenido con CDNs de Tailwind, Chart.js, Google Fonts
  • Soporta los 5 tipos de artefacto
  • Maneja data dict para KPIs, charts y tables
  • Genera Chart.js configs correctas embebidas en <script>
  • Nombre de archivo: {tipo}_{slug_titulo}_{YYYYMMDD}.html
  • auto_open=True abre el archivo con webbrowser.open()
  • Encoding UTF-8 correcto en Windows (sys.stdout.reconfigure)
  • Ejecutable como CLI: python lib/html_artifact.py --demo [--type TYPE]

Auditoría del Director:

  • Verificar que NO se reinventa CSS (debe importar de pdf_generator)
  • Verificar que el HTML generado es válido y autocontenido
  • Verificar que --demo genera y abre un HTML correcto

Fase 2: Plantillas HTML (templates/html-artifact/)

Agente: Desarrollador frontend / diseñador HTML Entregable: 6 archivos HTML en templates/html-artifact/ Criterios de aceptación:

  • base.html con estructura completa (head, header, body, footer)
  • Tailwind CSS via Play CDN para layout responsive
  • CSS custom sobre Tailwind para branding AmCham (colores exactos HEX)
  • Logo AmCham como SVG inline en header
  • Responsive: 3 breakpoints (desktop 1200px+, tablet 768px, móvil 375px)
  • @media print funcional (Ctrl+P produce output limpio)
  • Marcadores consistentes con lo que el módulo Python sustituye
  • dashboard.html: grid de KPIs + slots para Chart.js + tablas con hover
  • report.html: TOC clickable con smooth scroll + secciones colapsables
  • chart.html: layout de gráficos 1-col o grid 2-col
  • brief.html: resumen ejecutivo + key findings + timeline vertical
  • infographic.html: bloques visuales con números grandes y colores semánticos
  • Todas las plantillas usan Playfair Display (títulos) + DM Sans (cuerpo)

Auditoría del Director:

  • Abrir cada plantilla en Chrome y verificar rendering
  • Verificar responsive con DevTools (375px, 768px, 1200px)
  • Verificar print preview (Ctrl+P)
  • Verificar que los colores coinciden EXACTAMENTE con la guía visual

Fase 3: Skill + Comando + Directorio

Agente: Integrador de sistema Entregable: .claude/skills/html-artifact.md, .claude/commands/artifact.md, directorio outputs/html/ Criterios de aceptación:

  • Skill describe activación, tipos, flujo e integración
  • Comando /artifact con sintaxis y ejemplos
  • Directorio outputs/html/ creado (con .gitkeep)

Auditoría del Director:

  • Verificar coherencia entre skill, comando y módulo Python

Fase 4: Documentación y registro

Agente: Documentador Entregable: Actualizaciones a CLAUDE.md, commands-list.md, quick-references.md Archivos a modificar:

  • .claude/rules/20-reference/commands-list.md → añadir /artifact en sección de comandos
  • .claude/rules/20-reference/quick-references.md → añadir referencia a skill y módulo
  • CLAUDE.md → añadir sección "Artefactos HTML" en la documentación principal

Criterios de aceptación:

  • /artifact aparece en commands-list con descripción y tipos
  • quick-references incluye skill, módulo y plantillas
  • CLAUDE.md documenta la capacidad con routing table actualizada

Auditoría del Director:

  • Verificar que la documentación es consistente entre los 3 archivos

Fase 5: Test End-to-End

Agente: QA / Tester Entregable: Ejecución exitosa de --demo para los 5 tipos Tests:

# Test 1: Demo dashboard (caso principal)
python lib/html_artifact.py --demo --type dashboard

# Test 2: Demo report
python lib/html_artifact.py --demo --type report

# Test 3: Demo chart
python lib/html_artifact.py --demo --type chart

# Test 4: Demo brief
python lib/html_artifact.py --demo --type brief

# Test 5: Demo infographic
python lib/html_artifact.py --demo --type infographic

Verificaciones por cada HTML generado:

  • Se abre en el navegador sin errores de consola (F12)
  • Los gráficos Chart.js renderizan correctamente con tooltips
  • Los colores coinciden con la paleta corporativa
  • Las tipografías cargan (Playfair Display + DM Sans)
  • Es responsive (redimensionar ventana)
  • Print preview funciona (Ctrl+P)
  • El archivo pesa < 500KB
  • Formato numérico español (1.234,56)
  • Fuentes citadas en el footer
  • Fecha en formato DD/MM/YYYY

Auditoría del Director:

  • Abrir cada HTML generado y verificar todos los puntos
  • Si hay errores, devolver a la fase correspondiente para corrección

REGLAS CRÍTICAS PARA TODOS LOS AGENTES

  1. REUTILIZAR CORPORATE_CSS de lib/pdf_generator.py — no reinventar estilos
  2. NUNCA eliminar tildes o eñes del texto (ni siquiera "preventivamente")
  3. SIEMPRE python -X utf8 + sys.stdout.reconfigure(encoding='utf-8') en Windows
  4. SIEMPRE formato numérico español: 1.234,56 (punto miles, coma decimal)
  5. SIEMPRE colores HEX exactos de la paleta (no aproximados)
  6. NO crear dependencias locales — todo via CDN
  7. NO crear archivos innecesarios — ceñirse al plan
  8. NO modificar archivos existentes excepto los listados en Fase 4
  9. Leer config/GUIA_ESTILO_VISUAL.md antes de implementar cualquier visual
  10. Leer lib/pdf_generator.py antes de escribir CSS

RESULTADO ESPERADO

Al finalizar las 5 fases, el sistema debe poder:

Usuario: "Hazme un dashboard con datos de comercio España-EEUU"
    ↓
Claude: Recopila datos → genera HTML → abre en navegador
    ↓
Archivo: outputs/html/dashboard_comercio_espana_eeuu_20260329.html
    - 150-300KB, autocontenido
    - KPIs interactivos
    - Gráficos Chart.js con tooltips
    - Tablas con hover
    - Branding AmCham perfecto
    - Responsive + print-ready
, , 		Resumen ejecutivo, findings con iconos, timeline
infographic.html Hereda base +

Prompt de Implementación: Generador de Artefactos HTML Autocontenidos

Para usar en: Nueva instancia de Claude Code con contexto fresco Modo de trabajo: Director de proyecto + equipo de agentes Fecha de creación: 29/03/2026

INSTRUCCIÓN PRINCIPAL

Necesito implementar una nueva capacidad para AmCham Spain OS: generación de artefactos HTML autocontenidos — archivos .html únicos que se abren en cualquier navegador sin servidor, con gráficos interactivos, branding corporativo y datos embebidos.

Trabaja como Director de Proyecto. En cada fase:

  1. Delega la implementación a agentes especializados (en paralelo cuando sea posible)
  2. Audita el resultado de cada agente antes de pasar a la siguiente fase
  3. Verifica que el código cumple los estándares del repositorio
  4. No avances a la fase siguiente hasta que la actual esté validada

CONTEXTO DEL REPOSITORIO

Qué es AmCham Spain OS

Sistema operativo digital de la Cámara de Comercio de EE.UU. en España. Genera documentos ejecutivos, investigaciones, briefings y visualizaciones de datos para 5 comités temáticos.

Recursos existentes que DEBEN reutilizarse

Recurso Ruta Qué aprovechar
CSS corporativo lib/pdf_generator.py → variable CORPORATE_CSS (~120 líneas) Colores, tipografías, estilos base
Dashboard HTML existente src/investigative/dashboard.py Patrón de generación HTML con datos embebidos
Motor de plantillas lib/template_engine.py Sustitución de variables
Guía visual config/GUIA_ESTILO_VISUAL.md Paleta oficial, tipografías, reglas de marca
Regla de estilo visual .claude/rules/00-core/visual-style.md Colores HEX exactos, reglas obligatorias

Identidad corporativa (obligatoria)

Colores:
  Azul Marino:     #00247D (Pantone 280) — títulos, headers, fondos principales
  Rojo Corporativo: #D1232A (Pantone 186) — acentos, CTAs, alertas
  Azul Claro:      #8FACD0 (Pantone 2717) — elementos decorativos
  Negro:           #000000 — cuerpo de texto
  Gris Claro:      #D3D3D3 — fondos secundarios
  Blanco:          #FFFFFF — fondos principales

Semánticos (gráficos):
  Positivo: #27ae60    Negativo: #e74c3c    Alerta: #f39c12

Tipografías:
  Títulos: Playfair Display (serif) — Google Fonts
  Cuerpo:  DM Sans (sans-serif) — Google Fonts

Formato numérico: español (1.234,56 — punto miles, coma decimal)

Estructura de directorios relevante

amchamspain-os-main/
├── lib/                      # Bibliotecas Python
│   ├── pdf_generator.py      # CORPORATE_CSS aquí
│   ├── template_engine.py    # Motor 
│   ├── datawrapper_client.py # Referencia de cómo se generan gráficos
│   └── html_artifact.py      # ← CREAR AQUÍ
├── templates/
│   ├── html-artifact/        # ← CREAR AQUÍ (plantillas)
│   └── briefing-ejecutivo/   # Referencia de estructura template
├── .claude/
│   ├── skills/               # Skills conversacionales
│   ├── commands/             # Comandos /slash
│   └── rules/               # Reglas del sistema
├── outputs/
│   └── html/                 # ← CREAR AQUÍ (directorio de salida)
├── config/
│   └── GUIA_ESTILO_VISUAL.md # Biblia visual
└── CLAUDE.md                 # Hub de navegación del sistema

ESPECIFICACIÓN TÉCNICA

Archivo principal: lib/html_artifact.py

Clase HtmlArtifact con estos métodos públicos:

class HtmlArtifact:
    """Genera archivos HTML autocontenidos con branding AmCham Spain."""

    ARTIFACT_TYPES = ["dashboard", "report", "infographic", "chart", "brief"]

    def generate(
        self,
        content: str,              # Markdown o HTML del cuerpo
        artifact_type: str,        # Uno de ARTIFACT_TYPES
        title: str,                # Título del documento
        subtitle: str = "",        # Subtítulo opcional
        data: dict | None = None,  # Datos para Chart.js {charts: [...]}
        sources: list[str] = [],   # Fuentes citadas
        classification: str = "Uso Interno",
        auto_open: bool = True,    # Abrir en navegador
        output_dir: str = "outputs/html",
    ) -> Path:
        """Genera .html y retorna la ruta del archivo creado."""

    def generate_from_markdown(
        self,
        md_path: str,              # Ruta a archivo .md existente
        artifact_type: str = "report",
        data: dict | None = None,
        auto_open: bool = True,
    ) -> Path:
        """Convierte un .md existente del repo en HTML interactivo."""

Estructura del dict data para gráficos:

data = {
    "kpis": [
        {"label": "Exportaciones", "value": "16.800M EUR", "change": "+5,2%", "trend": "up"},
        {"label": "Importaciones", "value": "12.340M EUR", "change": "+3,1%", "trend": "up"},
    ],
    "charts": [
        {
            "id": "chart-1",
            "type": "bar",          # bar | line | doughnut | radar | polarArea
            "title": "Top 10 Productos",
            "labels": ["Automóviles", "Maquinaria", ...],
            "datasets": [
                {"label": "2024", "data": [3200, 2800, ...], "color": "#00247D"},
                {"label": "2023", "data": [2900, 2600, ...], "color": "#8FACD0"},
            ]
        },
        {
            "id": "chart-2",
            "type": "line",
            "title": "Evolución 2020-2024",
            "labels": ["2020", "2021", "2022", "2023", "2024"],
            "datasets": [
                {"label": "Exportaciones", "data": [14200, 14800, 15300, 16000, 16800], "color": "#00247D"},
                {"label": "Importaciones", "data": [10500, 11200, 11800, 12000, 12340], "color": "#D1232A"},
            ]
        }
    ],
    "tables": [
        {
            "id": "table-1",
            "title": "Detalle por Sector",
            "headers": ["Sector", "Exportaciones", "Importaciones", "Balanza"],
            "rows": [
                ["Automóvil", "3.200M", "1.800M", "+1.400M"],
                ["Maquinaria", "2.800M", "2.100M", "+700M"],
            ]
        }
    ]
}

CDNs (sin dependencias locales)

<!-- Tailwind CSS Play CDN — layout y utilidades -->
<script src="https://cdn.tailwindcss.com"></script>

<!-- Chart.js 4 — gráficos interactivos (SOLO si data.charts existe) -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@4"></script>

<!-- Google Fonts — tipografías corporativas -->
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=DM+Sans:wght@400;500;700&display=swap" rel="stylesheet">

Plantillas HTML: templates/html-artifact/

6 archivos con marcadores que el generador sustituye:

Archivo Variables clave Componentes visuales
base.html , , , , , , Header, footer, estructura base
dashboard.html Hereda base + , , Grid de KPIs, gráficos Chart.js, tablas con hover
report.html Hereda base + , TOC clickable, secciones colapsables con toggle
chart.html Hereda base + Layout de gráficos 1-col o 2-col responsive
brief.html Hereda base + , , Resumen ejecutivo, findings con iconos, timeline
infographic.html Hereda base + Bloques visuales con iconos, números grandes, paleta semántica

Requisitos de cada plantilla:

  • HTML5 válido y autocontenido (un solo archivo, sin imports locales)
  • Responsive: funciona en desktop (1200px+), tablet (768px), y móvil (375px)
  • Print-friendly: @media print limpia headers fijos, quita sombras, fuerza colores
  • Tailwind para layout, CSS custom para branding AmCham sobre Tailwind
  • Logo AmCham como SVG inline en el header (no como imagen externa)
  • Footer con: fuentes, fecha de generación, clasificación, "AmCham Spain OS"
  • Idioma: todo en español con tildes y eñes correctas

Skill: .claude/skills/html-artifact.md

# Skill: Generador de Artefactos HTML

## Activación
- "hazme un dashboard", "genera un HTML interactivo", "quiero ver esto en el navegador"
- "artefacto HTML", "visualización interactiva", "HTML con gráficos"
- /artifact [tipo] [tema]

## Tipos disponibles
- dashboard: KPIs + gráficos + tablas (para datos cuantitativos)
- report: Informe ejecutivo interactivo (para documentos largos)
- chart: Solo gráficos Chart.js (para visualización de datos pura)
- brief: Briefing 1-página (para resúmenes rápidos)
- infographic: Bloques visuales con datos (para comunicación visual)

## Flujo
1. Detectar tipo de artefacto según el contexto
2. Si hay datos: estructurarlos en formato {kpis, charts, tables}
3. Si es markdown existente: usar generate_from_markdown()
4. Generar HTML con lib/html_artifact.py
5. Abrir automáticamente en navegador
6. Informar: ruta del archivo + peso + tipo generado

## Integración
- Puede usarse tras /research para visualizar resultados
- Puede usarse tras /generate para versión HTML interactiva
- Los .html generados se catalogan automáticamente en Notion (rule catalog-sync)

## Módulo
lib/html_artifact.py

Comando: .claude/commands/artifact.md

Genera un artefacto HTML autocontenido e interactivo.

Uso: /artifact [tipo] [tema]

Tipos: dashboard | report | chart | brief | infographic

Ejemplos:
  /artifact dashboard "Comercio bilateral España-EEUU 2024"
  /artifact report    → convierte el último output .md en HTML interactivo
  /artifact chart "Evolución PIB España vs UE 2020-2024"
  /artifact brief "Resumen AI Act para comité Economía Digital"

El archivo se genera en outputs/html/ y se abre automáticamente en el navegador.

Demo CLI

El módulo debe ser ejecutable directamente para testing:

python lib/html_artifact.py --demo
# Genera outputs/html/demo_dashboard.html con datos de ejemplo y lo abre en el navegador

python lib/html_artifact.py --demo --type report
# Genera outputs/html/demo_report.html

python lib/html_artifact.py --demo --type chart
# etc.

FASES DE IMPLEMENTACIÓN

Fase 1: Módulo Core (lib/html_artifact.py)

Agente: Desarrollador backend Python Entregable: lib/html_artifact.py funcional con clase HtmlArtifact Criterios de aceptación:

  • Importa y reutiliza CORPORATE_CSS de pdf_generator.py
  • Convierte Markdown a HTML (con markdown2 como en pdf_generator)
  • Genera HTML autocontenido con CDNs de Tailwind, Chart.js, Google Fonts
  • Soporta los 5 tipos de artefacto
  • Maneja data dict para KPIs, charts y tables
  • Genera Chart.js configs correctas embebidas en <script>
  • Nombre de archivo: {tipo}_{slug_titulo}_{YYYYMMDD}.html
  • auto_open=True abre el archivo con webbrowser.open()
  • Encoding UTF-8 correcto en Windows (sys.stdout.reconfigure)
  • Ejecutable como CLI: python lib/html_artifact.py --demo [--type TYPE]

Auditoría del Director:

  • Verificar que NO se reinventa CSS (debe importar de pdf_generator)
  • Verificar que el HTML generado es válido y autocontenido
  • Verificar que --demo genera y abre un HTML correcto

Fase 2: Plantillas HTML (templates/html-artifact/)

Agente: Desarrollador frontend / diseñador HTML Entregable: 6 archivos HTML en templates/html-artifact/ Criterios de aceptación:

  • base.html con estructura completa (head, header, body, footer)
  • Tailwind CSS via Play CDN para layout responsive
  • CSS custom sobre Tailwind para branding AmCham (colores exactos HEX)
  • Logo AmCham como SVG inline en header
  • Responsive: 3 breakpoints (desktop 1200px+, tablet 768px, móvil 375px)
  • @media print funcional (Ctrl+P produce output limpio)
  • Marcadores consistentes con lo que el módulo Python sustituye
  • dashboard.html: grid de KPIs + slots para Chart.js + tablas con hover
  • report.html: TOC clickable con smooth scroll + secciones colapsables
  • chart.html: layout de gráficos 1-col o grid 2-col
  • brief.html: resumen ejecutivo + key findings + timeline vertical
  • infographic.html: bloques visuales con números grandes y colores semánticos
  • Todas las plantillas usan Playfair Display (títulos) + DM Sans (cuerpo)

Auditoría del Director:

  • Abrir cada plantilla en Chrome y verificar rendering
  • Verificar responsive con DevTools (375px, 768px, 1200px)
  • Verificar print preview (Ctrl+P)
  • Verificar que los colores coinciden EXACTAMENTE con la guía visual

Fase 3: Skill + Comando + Directorio

Agente: Integrador de sistema Entregable: .claude/skills/html-artifact.md, .claude/commands/artifact.md, directorio outputs/html/ Criterios de aceptación:

  • Skill describe activación, tipos, flujo e integración
  • Comando /artifact con sintaxis y ejemplos
  • Directorio outputs/html/ creado (con .gitkeep)

Auditoría del Director:

  • Verificar coherencia entre skill, comando y módulo Python

Fase 4: Documentación y registro

Agente: Documentador Entregable: Actualizaciones a CLAUDE.md, commands-list.md, quick-references.md Archivos a modificar:

  • .claude/rules/20-reference/commands-list.md → añadir /artifact en sección de comandos
  • .claude/rules/20-reference/quick-references.md → añadir referencia a skill y módulo
  • CLAUDE.md → añadir sección "Artefactos HTML" en la documentación principal

Criterios de aceptación:

  • /artifact aparece en commands-list con descripción y tipos
  • quick-references incluye skill, módulo y plantillas
  • CLAUDE.md documenta la capacidad con routing table actualizada

Auditoría del Director:

  • Verificar que la documentación es consistente entre los 3 archivos

Fase 5: Test End-to-End

Agente: QA / Tester Entregable: Ejecución exitosa de --demo para los 5 tipos Tests:

# Test 1: Demo dashboard (caso principal)
python lib/html_artifact.py --demo --type dashboard

# Test 2: Demo report
python lib/html_artifact.py --demo --type report

# Test 3: Demo chart
python lib/html_artifact.py --demo --type chart

# Test 4: Demo brief
python lib/html_artifact.py --demo --type brief

# Test 5: Demo infographic
python lib/html_artifact.py --demo --type infographic

Verificaciones por cada HTML generado:

  • Se abre en el navegador sin errores de consola (F12)
  • Los gráficos Chart.js renderizan correctamente con tooltips
  • Los colores coinciden con la paleta corporativa
  • Las tipografías cargan (Playfair Display + DM Sans)
  • Es responsive (redimensionar ventana)
  • Print preview funciona (Ctrl+P)
  • El archivo pesa < 500KB
  • Formato numérico español (1.234,56)
  • Fuentes citadas en el footer
  • Fecha en formato DD/MM/YYYY

Auditoría del Director:

  • Abrir cada HTML generado y verificar todos los puntos
  • Si hay errores, devolver a la fase correspondiente para corrección

REGLAS CRÍTICAS PARA TODOS LOS AGENTES

  1. REUTILIZAR CORPORATE_CSS de lib/pdf_generator.py — no reinventar estilos
  2. NUNCA eliminar tildes o eñes del texto (ni siquiera "preventivamente")
  3. SIEMPRE python -X utf8 + sys.stdout.reconfigure(encoding='utf-8') en Windows
  4. SIEMPRE formato numérico español: 1.234,56 (punto miles, coma decimal)
  5. SIEMPRE colores HEX exactos de la paleta (no aproximados)
  6. NO crear dependencias locales — todo via CDN
  7. NO crear archivos innecesarios — ceñirse al plan
  8. NO modificar archivos existentes excepto los listados en Fase 4
  9. Leer config/GUIA_ESTILO_VISUAL.md antes de implementar cualquier visual
  10. Leer lib/pdf_generator.py antes de escribir CSS

RESULTADO ESPERADO

Al finalizar las 5 fases, el sistema debe poder:

Usuario: "Hazme un dashboard con datos de comercio España-EEUU"
    ↓
Claude: Recopila datos → genera HTML → abre en navegador
    ↓
Archivo: outputs/html/dashboard_comercio_espana_eeuu_20260329.html
    - 150-300KB, autocontenido
    - KPIs interactivos
    - Gráficos Chart.js con tooltips
    - Tablas con hover
    - Branding AmCham perfecto
    - Responsive + print-ready
Bloques visuales con iconos, números grandes, paleta semántica

Requisitos de cada plantilla:

  • HTML5 válido y autocontenido (un solo archivo, sin imports locales)
  • Responsive: funciona en desktop (1200px+), tablet (768px), y móvil (375px)
  • Print-friendly: @media print limpia headers fijos, quita sombras, fuerza colores
  • Tailwind para layout, CSS custom para branding AmCham sobre Tailwind
  • Logo AmCham como SVG inline en el header (no como imagen externa)
  • Footer con: fuentes, fecha de generación, clasificación, "AmCham Spain OS"
  • Idioma: todo en español con tildes y eñes correctas

Skill: .claude/skills/html-artifact.md

# Skill: Generador de Artefactos HTML

## Activación
- "hazme un dashboard", "genera un HTML interactivo", "quiero ver esto en el navegador"
- "artefacto HTML", "visualización interactiva", "HTML con gráficos"
- /artifact [tipo] [tema]

## Tipos disponibles
- dashboard: KPIs + gráficos + tablas (para datos cuantitativos)
- report: Informe ejecutivo interactivo (para documentos largos)
- chart: Solo gráficos Chart.js (para visualización de datos pura)
- brief: Briefing 1-página (para resúmenes rápidos)
- infographic: Bloques visuales con datos (para comunicación visual)

## Flujo
1. Detectar tipo de artefacto según el contexto
2. Si hay datos: estructurarlos en formato {kpis, charts, tables}
3. Si es markdown existente: usar generate_from_markdown()
4. Generar HTML con lib/html_artifact.py
5. Abrir automáticamente en navegador
6. Informar: ruta del archivo + peso + tipo generado

## Integración
- Puede usarse tras /research para visualizar resultados
- Puede usarse tras /generate para versión HTML interactiva
- Los .html generados se catalogan automáticamente en Notion (rule catalog-sync)

## Módulo
lib/html_artifact.py

Comando: .claude/commands/artifact.md

Genera un artefacto HTML autocontenido e interactivo.

Uso: /artifact [tipo] [tema]

Tipos: dashboard | report | chart | brief | infographic

Ejemplos:
  /artifact dashboard "Comercio bilateral España-EEUU 2024"
  /artifact report    → convierte el último output .md en HTML interactivo
  /artifact chart "Evolución PIB España vs UE 2020-2024"
  /artifact brief "Resumen AI Act para comité Economía Digital"

El archivo se genera en outputs/html/ y se abre automáticamente en el navegador.

Demo CLI

El módulo debe ser ejecutable directamente para testing:

python lib/html_artifact.py --demo
# Genera outputs/html/demo_dashboard.html con datos de ejemplo y lo abre en el navegador

python lib/html_artifact.py --demo --type report
# Genera outputs/html/demo_report.html

python lib/html_artifact.py --demo --type chart
# etc.

FASES DE IMPLEMENTACIÓN

Fase 1: Módulo Core (lib/html_artifact.py)

Agente: Desarrollador backend Python Entregable: lib/html_artifact.py funcional con clase HtmlArtifact Criterios de aceptación:

  • Importa y reutiliza CORPORATE_CSS de pdf_generator.py
  • Convierte Markdown a HTML (con markdown2 como en pdf_generator)
  • Genera HTML autocontenido con CDNs de Tailwind, Chart.js, Google Fonts
  • Soporta los 5 tipos de artefacto
  • Maneja data dict para KPIs, charts y tables
  • Genera Chart.js configs correctas embebidas en <script>
  • Nombre de archivo: {tipo}_{slug_titulo}_{YYYYMMDD}.html
  • auto_open=True abre el archivo con webbrowser.open()
  • Encoding UTF-8 correcto en Windows (sys.stdout.reconfigure)
  • Ejecutable como CLI: python lib/html_artifact.py --demo [--type TYPE]

Auditoría del Director:

  • Verificar que NO se reinventa CSS (debe importar de pdf_generator)
  • Verificar que el HTML generado es válido y autocontenido
  • Verificar que --demo genera y abre un HTML correcto

Fase 2: Plantillas HTML (templates/html-artifact/)

Agente: Desarrollador frontend / diseñador HTML Entregable: 6 archivos HTML en templates/html-artifact/ Criterios de aceptación:

  • base.html con estructura completa (head, header, body, footer)
  • Tailwind CSS via Play CDN para layout responsive
  • CSS custom sobre Tailwind para branding AmCham (colores exactos HEX)
  • Logo AmCham como SVG inline en header
  • Responsive: 3 breakpoints (desktop 1200px+, tablet 768px, móvil 375px)
  • @media print funcional (Ctrl+P produce output limpio)
  • Marcadores consistentes con lo que el módulo Python sustituye
  • dashboard.html: grid de KPIs + slots para Chart.js + tablas con hover
  • report.html: TOC clickable con smooth scroll + secciones colapsables
  • chart.html: layout de gráficos 1-col o grid 2-col
  • brief.html: resumen ejecutivo + key findings + timeline vertical
  • infographic.html: bloques visuales con números grandes y colores semánticos
  • Todas las plantillas usan Playfair Display (títulos) + DM Sans (cuerpo)

Auditoría del Director:

  • Abrir cada plantilla en Chrome y verificar rendering
  • Verificar responsive con DevTools (375px, 768px, 1200px)
  • Verificar print preview (Ctrl+P)
  • Verificar que los colores coinciden EXACTAMENTE con la guía visual

Fase 3: Skill + Comando + Directorio

Agente: Integrador de sistema Entregable: .claude/skills/html-artifact.md, .claude/commands/artifact.md, directorio outputs/html/ Criterios de aceptación:

  • Skill describe activación, tipos, flujo e integración
  • Comando /artifact con sintaxis y ejemplos
  • Directorio outputs/html/ creado (con .gitkeep)

Auditoría del Director:

  • Verificar coherencia entre skill, comando y módulo Python

Fase 4: Documentación y registro

Agente: Documentador Entregable: Actualizaciones a CLAUDE.md, commands-list.md, quick-references.md Archivos a modificar:

  • .claude/rules/20-reference/commands-list.md → añadir /artifact en sección de comandos
  • .claude/rules/20-reference/quick-references.md → añadir referencia a skill y módulo
  • CLAUDE.md → añadir sección "Artefactos HTML" en la documentación principal

Criterios de aceptación:

  • /artifact aparece en commands-list con descripción y tipos
  • quick-references incluye skill, módulo y plantillas
  • CLAUDE.md documenta la capacidad con routing table actualizada

Auditoría del Director:

  • Verificar que la documentación es consistente entre los 3 archivos

Fase 5: Test End-to-End

Agente: QA / Tester Entregable: Ejecución exitosa de --demo para los 5 tipos Tests:

# Test 1: Demo dashboard (caso principal)
python lib/html_artifact.py --demo --type dashboard

# Test 2: Demo report
python lib/html_artifact.py --demo --type report

# Test 3: Demo chart
python lib/html_artifact.py --demo --type chart

# Test 4: Demo brief
python lib/html_artifact.py --demo --type brief

# Test 5: Demo infographic
python lib/html_artifact.py --demo --type infographic

Verificaciones por cada HTML generado:

  • Se abre en el navegador sin errores de consola (F12)
  • Los gráficos Chart.js renderizan correctamente con tooltips
  • Los colores coinciden con la paleta corporativa
  • Las tipografías cargan (Playfair Display + DM Sans)
  • Es responsive (redimensionar ventana)
  • Print preview funciona (Ctrl+P)
  • El archivo pesa < 500KB
  • Formato numérico español (1.234,56)
  • Fuentes citadas en el footer
  • Fecha en formato DD/MM/YYYY

Auditoría del Director:

  • Abrir cada HTML generado y verificar todos los puntos
  • Si hay errores, devolver a la fase correspondiente para corrección

REGLAS CRÍTICAS PARA TODOS LOS AGENTES

  1. REUTILIZAR CORPORATE_CSS de lib/pdf_generator.py — no reinventar estilos
  2. NUNCA eliminar tildes o eñes del texto (ni siquiera "preventivamente")
  3. SIEMPRE python -X utf8 + sys.stdout.reconfigure(encoding='utf-8') en Windows
  4. SIEMPRE formato numérico español: 1.234,56 (punto miles, coma decimal)
  5. SIEMPRE colores HEX exactos de la paleta (no aproximados)
  6. NO crear dependencias locales — todo via CDN
  7. NO crear archivos innecesarios — ceñirse al plan
  8. NO modificar archivos existentes excepto los listados en Fase 4
  9. Leer config/GUIA_ESTILO_VISUAL.md antes de implementar cualquier visual
  10. Leer lib/pdf_generator.py antes de escribir CSS

RESULTADO ESPERADO

Al finalizar las 5 fases, el sistema debe poder:

Usuario: "Hazme un dashboard con datos de comercio España-EEUU"
    ↓
Claude: Recopila datos → genera HTML → abre en navegador
    ↓
Archivo: outputs/html/dashboard_comercio_espana_eeuu_20260329.html
    - 150-300KB, autocontenido
    - KPIs interactivos
    - Gráficos Chart.js con tooltips
    - Tablas con hover
    - Branding AmCham perfecto
    - Responsive + print-ready
TOC clickable, secciones colapsables con toggle
chart.html Hereda base + Layout de gráficos 1-col o 2-col responsive
brief.html Hereda base +

Prompt de Implementación: Generador de Artefactos HTML Autocontenidos

Para usar en: Nueva instancia de Claude Code con contexto fresco Modo de trabajo: Director de proyecto + equipo de agentes Fecha de creación: 29/03/2026

INSTRUCCIÓN PRINCIPAL

Necesito implementar una nueva capacidad para AmCham Spain OS: generación de artefactos HTML autocontenidos — archivos .html únicos que se abren en cualquier navegador sin servidor, con gráficos interactivos, branding corporativo y datos embebidos.

Trabaja como Director de Proyecto. En cada fase:

  1. Delega la implementación a agentes especializados (en paralelo cuando sea posible)
  2. Audita el resultado de cada agente antes de pasar a la siguiente fase
  3. Verifica que el código cumple los estándares del repositorio
  4. No avances a la fase siguiente hasta que la actual esté validada

CONTEXTO DEL REPOSITORIO

Qué es AmCham Spain OS

Sistema operativo digital de la Cámara de Comercio de EE.UU. en España. Genera documentos ejecutivos, investigaciones, briefings y visualizaciones de datos para 5 comités temáticos.

Recursos existentes que DEBEN reutilizarse

Recurso Ruta Qué aprovechar
CSS corporativo lib/pdf_generator.py → variable CORPORATE_CSS (~120 líneas) Colores, tipografías, estilos base
Dashboard HTML existente src/investigative/dashboard.py Patrón de generación HTML con datos embebidos
Motor de plantillas lib/template_engine.py Sustitución de variables
Guía visual config/GUIA_ESTILO_VISUAL.md Paleta oficial, tipografías, reglas de marca
Regla de estilo visual .claude/rules/00-core/visual-style.md Colores HEX exactos, reglas obligatorias

Identidad corporativa (obligatoria)

Colores:
  Azul Marino:     #00247D (Pantone 280) — títulos, headers, fondos principales
  Rojo Corporativo: #D1232A (Pantone 186) — acentos, CTAs, alertas
  Azul Claro:      #8FACD0 (Pantone 2717) — elementos decorativos
  Negro:           #000000 — cuerpo de texto
  Gris Claro:      #D3D3D3 — fondos secundarios
  Blanco:          #FFFFFF — fondos principales

Semánticos (gráficos):
  Positivo: #27ae60    Negativo: #e74c3c    Alerta: #f39c12

Tipografías:
  Títulos: Playfair Display (serif) — Google Fonts
  Cuerpo:  DM Sans (sans-serif) — Google Fonts

Formato numérico: español (1.234,56 — punto miles, coma decimal)

Estructura de directorios relevante

amchamspain-os-main/
├── lib/                      # Bibliotecas Python
│   ├── pdf_generator.py      # CORPORATE_CSS aquí
│   ├── template_engine.py    # Motor 
│   ├── datawrapper_client.py # Referencia de cómo se generan gráficos
│   └── html_artifact.py      # ← CREAR AQUÍ
├── templates/
│   ├── html-artifact/        # ← CREAR AQUÍ (plantillas)
│   └── briefing-ejecutivo/   # Referencia de estructura template
├── .claude/
│   ├── skills/               # Skills conversacionales
│   ├── commands/             # Comandos /slash
│   └── rules/               # Reglas del sistema
├── outputs/
│   └── html/                 # ← CREAR AQUÍ (directorio de salida)
├── config/
│   └── GUIA_ESTILO_VISUAL.md # Biblia visual
└── CLAUDE.md                 # Hub de navegación del sistema

ESPECIFICACIÓN TÉCNICA

Archivo principal: lib/html_artifact.py

Clase HtmlArtifact con estos métodos públicos:

class HtmlArtifact:
    """Genera archivos HTML autocontenidos con branding AmCham Spain."""

    ARTIFACT_TYPES = ["dashboard", "report", "infographic", "chart", "brief"]

    def generate(
        self,
        content: str,              # Markdown o HTML del cuerpo
        artifact_type: str,        # Uno de ARTIFACT_TYPES
        title: str,                # Título del documento
        subtitle: str = "",        # Subtítulo opcional
        data: dict | None = None,  # Datos para Chart.js {charts: [...]}
        sources: list[str] = [],   # Fuentes citadas
        classification: str = "Uso Interno",
        auto_open: bool = True,    # Abrir en navegador
        output_dir: str = "outputs/html",
    ) -> Path:
        """Genera .html y retorna la ruta del archivo creado."""

    def generate_from_markdown(
        self,
        md_path: str,              # Ruta a archivo .md existente
        artifact_type: str = "report",
        data: dict | None = None,
        auto_open: bool = True,
    ) -> Path:
        """Convierte un .md existente del repo en HTML interactivo."""

Estructura del dict data para gráficos:

data = {
    "kpis": [
        {"label": "Exportaciones", "value": "16.800M EUR", "change": "+5,2%", "trend": "up"},
        {"label": "Importaciones", "value": "12.340M EUR", "change": "+3,1%", "trend": "up"},
    ],
    "charts": [
        {
            "id": "chart-1",
            "type": "bar",          # bar | line | doughnut | radar | polarArea
            "title": "Top 10 Productos",
            "labels": ["Automóviles", "Maquinaria", ...],
            "datasets": [
                {"label": "2024", "data": [3200, 2800, ...], "color": "#00247D"},
                {"label": "2023", "data": [2900, 2600, ...], "color": "#8FACD0"},
            ]
        },
        {
            "id": "chart-2",
            "type": "line",
            "title": "Evolución 2020-2024",
            "labels": ["2020", "2021", "2022", "2023", "2024"],
            "datasets": [
                {"label": "Exportaciones", "data": [14200, 14800, 15300, 16000, 16800], "color": "#00247D"},
                {"label": "Importaciones", "data": [10500, 11200, 11800, 12000, 12340], "color": "#D1232A"},
            ]
        }
    ],
    "tables": [
        {
            "id": "table-1",
            "title": "Detalle por Sector",
            "headers": ["Sector", "Exportaciones", "Importaciones", "Balanza"],
            "rows": [
                ["Automóvil", "3.200M", "1.800M", "+1.400M"],
                ["Maquinaria", "2.800M", "2.100M", "+700M"],
            ]
        }
    ]
}

CDNs (sin dependencias locales)

<!-- Tailwind CSS Play CDN — layout y utilidades -->
<script src="https://cdn.tailwindcss.com"></script>

<!-- Chart.js 4 — gráficos interactivos (SOLO si data.charts existe) -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@4"></script>

<!-- Google Fonts — tipografías corporativas -->
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=DM+Sans:wght@400;500;700&display=swap" rel="stylesheet">

Plantillas HTML: templates/html-artifact/

6 archivos con marcadores que el generador sustituye:

Archivo Variables clave Componentes visuales
base.html , , , , , , Header, footer, estructura base
dashboard.html Hereda base + , , Grid de KPIs, gráficos Chart.js, tablas con hover
report.html Hereda base + , TOC clickable, secciones colapsables con toggle
chart.html Hereda base + Layout de gráficos 1-col o 2-col responsive
brief.html Hereda base + , , Resumen ejecutivo, findings con iconos, timeline
infographic.html Hereda base +

Prompt de Implementación: Generador de Artefactos HTML Autocontenidos

Para usar en: Nueva instancia de Claude Code con contexto fresco Modo de trabajo: Director de proyecto + equipo de agentes Fecha de creación: 29/03/2026

INSTRUCCIÓN PRINCIPAL

Necesito implementar una nueva capacidad para AmCham Spain OS: generación de artefactos HTML autocontenidos — archivos .html únicos que se abren en cualquier navegador sin servidor, con gráficos interactivos, branding corporativo y datos embebidos.

Trabaja como Director de Proyecto. En cada fase:

  1. Delega la implementación a agentes especializados (en paralelo cuando sea posible)
  2. Audita el resultado de cada agente antes de pasar a la siguiente fase
  3. Verifica que el código cumple los estándares del repositorio
  4. No avances a la fase siguiente hasta que la actual esté validada

CONTEXTO DEL REPOSITORIO

Qué es AmCham Spain OS

Sistema operativo digital de la Cámara de Comercio de EE.UU. en España. Genera documentos ejecutivos, investigaciones, briefings y visualizaciones de datos para 5 comités temáticos.

Recursos existentes que DEBEN reutilizarse

Recurso Ruta Qué aprovechar
CSS corporativo lib/pdf_generator.py → variable CORPORATE_CSS (~120 líneas) Colores, tipografías, estilos base
Dashboard HTML existente src/investigative/dashboard.py Patrón de generación HTML con datos embebidos
Motor de plantillas lib/template_engine.py Sustitución de variables
Guía visual config/GUIA_ESTILO_VISUAL.md Paleta oficial, tipografías, reglas de marca
Regla de estilo visual .claude/rules/00-core/visual-style.md Colores HEX exactos, reglas obligatorias

Identidad corporativa (obligatoria)

Colores:
  Azul Marino:     #00247D (Pantone 280) — títulos, headers, fondos principales
  Rojo Corporativo: #D1232A (Pantone 186) — acentos, CTAs, alertas
  Azul Claro:      #8FACD0 (Pantone 2717) — elementos decorativos
  Negro:           #000000 — cuerpo de texto
  Gris Claro:      #D3D3D3 — fondos secundarios
  Blanco:          #FFFFFF — fondos principales

Semánticos (gráficos):
  Positivo: #27ae60    Negativo: #e74c3c    Alerta: #f39c12

Tipografías:
  Títulos: Playfair Display (serif) — Google Fonts
  Cuerpo:  DM Sans (sans-serif) — Google Fonts

Formato numérico: español (1.234,56 — punto miles, coma decimal)

Estructura de directorios relevante

amchamspain-os-main/
├── lib/                      # Bibliotecas Python
│   ├── pdf_generator.py      # CORPORATE_CSS aquí
│   ├── template_engine.py    # Motor 
│   ├── datawrapper_client.py # Referencia de cómo se generan gráficos
│   └── html_artifact.py      # ← CREAR AQUÍ
├── templates/
│   ├── html-artifact/        # ← CREAR AQUÍ (plantillas)
│   └── briefing-ejecutivo/   # Referencia de estructura template
├── .claude/
│   ├── skills/               # Skills conversacionales
│   ├── commands/             # Comandos /slash
│   └── rules/               # Reglas del sistema
├── outputs/
│   └── html/                 # ← CREAR AQUÍ (directorio de salida)
├── config/
│   └── GUIA_ESTILO_VISUAL.md # Biblia visual
└── CLAUDE.md                 # Hub de navegación del sistema

ESPECIFICACIÓN TÉCNICA

Archivo principal: lib/html_artifact.py

Clase HtmlArtifact con estos métodos públicos:

class HtmlArtifact:
    """Genera archivos HTML autocontenidos con branding AmCham Spain."""

    ARTIFACT_TYPES = ["dashboard", "report", "infographic", "chart", "brief"]

    def generate(
        self,
        content: str,              # Markdown o HTML del cuerpo
        artifact_type: str,        # Uno de ARTIFACT_TYPES
        title: str,                # Título del documento
        subtitle: str = "",        # Subtítulo opcional
        data: dict | None = None,  # Datos para Chart.js {charts: [...]}
        sources: list[str] = [],   # Fuentes citadas
        classification: str = "Uso Interno",
        auto_open: bool = True,    # Abrir en navegador
        output_dir: str = "outputs/html",
    ) -> Path:
        """Genera .html y retorna la ruta del archivo creado."""

    def generate_from_markdown(
        self,
        md_path: str,              # Ruta a archivo .md existente
        artifact_type: str = "report",
        data: dict | None = None,
        auto_open: bool = True,
    ) -> Path:
        """Convierte un .md existente del repo en HTML interactivo."""

Estructura del dict data para gráficos:

data = {
    "kpis": [
        {"label": "Exportaciones", "value": "16.800M EUR", "change": "+5,2%", "trend": "up"},
        {"label": "Importaciones", "value": "12.340M EUR", "change": "+3,1%", "trend": "up"},
    ],
    "charts": [
        {
            "id": "chart-1",
            "type": "bar",          # bar | line | doughnut | radar | polarArea
            "title": "Top 10 Productos",
            "labels": ["Automóviles", "Maquinaria", ...],
            "datasets": [
                {"label": "2024", "data": [3200, 2800, ...], "color": "#00247D"},
                {"label": "2023", "data": [2900, 2600, ...], "color": "#8FACD0"},
            ]
        },
        {
            "id": "chart-2",
            "type": "line",
            "title": "Evolución 2020-2024",
            "labels": ["2020", "2021", "2022", "2023", "2024"],
            "datasets": [
                {"label": "Exportaciones", "data": [14200, 14800, 15300, 16000, 16800], "color": "#00247D"},
                {"label": "Importaciones", "data": [10500, 11200, 11800, 12000, 12340], "color": "#D1232A"},
            ]
        }
    ],
    "tables": [
        {
            "id": "table-1",
            "title": "Detalle por Sector",
            "headers": ["Sector", "Exportaciones", "Importaciones", "Balanza"],
            "rows": [
                ["Automóvil", "3.200M", "1.800M", "+1.400M"],
                ["Maquinaria", "2.800M", "2.100M", "+700M"],
            ]
        }
    ]
}

CDNs (sin dependencias locales)

<!-- Tailwind CSS Play CDN — layout y utilidades -->
<script src="https://cdn.tailwindcss.com"></script>

<!-- Chart.js 4 — gráficos interactivos (SOLO si data.charts existe) -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@4"></script>

<!-- Google Fonts — tipografías corporativas -->
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=DM+Sans:wght@400;500;700&display=swap" rel="stylesheet">

Plantillas HTML: templates/html-artifact/

6 archivos con marcadores que el generador sustituye:

Archivo Variables clave Componentes visuales
base.html , , , , , , Header, footer, estructura base
dashboard.html Hereda base + , , Grid de KPIs, gráficos Chart.js, tablas con hover
report.html Hereda base + , TOC clickable, secciones colapsables con toggle
chart.html Hereda base + Layout de gráficos 1-col o 2-col responsive
brief.html Hereda base + , , Resumen ejecutivo, findings con iconos, timeline
infographic.html Hereda base + Bloques visuales con iconos, números grandes, paleta semántica

Requisitos de cada plantilla:

  • HTML5 válido y autocontenido (un solo archivo, sin imports locales)
  • Responsive: funciona en desktop (1200px+), tablet (768px), y móvil (375px)
  • Print-friendly: @media print limpia headers fijos, quita sombras, fuerza colores
  • Tailwind para layout, CSS custom para branding AmCham sobre Tailwind
  • Logo AmCham como SVG inline en el header (no como imagen externa)
  • Footer con: fuentes, fecha de generación, clasificación, "AmCham Spain OS"
  • Idioma: todo en español con tildes y eñes correctas

Skill: .claude/skills/html-artifact.md

# Skill: Generador de Artefactos HTML

## Activación
- "hazme un dashboard", "genera un HTML interactivo", "quiero ver esto en el navegador"
- "artefacto HTML", "visualización interactiva", "HTML con gráficos"
- /artifact [tipo] [tema]

## Tipos disponibles
- dashboard: KPIs + gráficos + tablas (para datos cuantitativos)
- report: Informe ejecutivo interactivo (para documentos largos)
- chart: Solo gráficos Chart.js (para visualización de datos pura)
- brief: Briefing 1-página (para resúmenes rápidos)
- infographic: Bloques visuales con datos (para comunicación visual)

## Flujo
1. Detectar tipo de artefacto según el contexto
2. Si hay datos: estructurarlos en formato {kpis, charts, tables}
3. Si es markdown existente: usar generate_from_markdown()
4. Generar HTML con lib/html_artifact.py
5. Abrir automáticamente en navegador
6. Informar: ruta del archivo + peso + tipo generado

## Integración
- Puede usarse tras /research para visualizar resultados
- Puede usarse tras /generate para versión HTML interactiva
- Los .html generados se catalogan automáticamente en Notion (rule catalog-sync)

## Módulo
lib/html_artifact.py

Comando: .claude/commands/artifact.md

Genera un artefacto HTML autocontenido e interactivo.

Uso: /artifact [tipo] [tema]

Tipos: dashboard | report | chart | brief | infographic

Ejemplos:
  /artifact dashboard "Comercio bilateral España-EEUU 2024"
  /artifact report    → convierte el último output .md en HTML interactivo
  /artifact chart "Evolución PIB España vs UE 2020-2024"
  /artifact brief "Resumen AI Act para comité Economía Digital"

El archivo se genera en outputs/html/ y se abre automáticamente en el navegador.

Demo CLI

El módulo debe ser ejecutable directamente para testing:

python lib/html_artifact.py --demo
# Genera outputs/html/demo_dashboard.html con datos de ejemplo y lo abre en el navegador

python lib/html_artifact.py --demo --type report
# Genera outputs/html/demo_report.html

python lib/html_artifact.py --demo --type chart
# etc.

FASES DE IMPLEMENTACIÓN

Fase 1: Módulo Core (lib/html_artifact.py)

Agente: Desarrollador backend Python Entregable: lib/html_artifact.py funcional con clase HtmlArtifact Criterios de aceptación:

  • Importa y reutiliza CORPORATE_CSS de pdf_generator.py
  • Convierte Markdown a HTML (con markdown2 como en pdf_generator)
  • Genera HTML autocontenido con CDNs de Tailwind, Chart.js, Google Fonts
  • Soporta los 5 tipos de artefacto
  • Maneja data dict para KPIs, charts y tables
  • Genera Chart.js configs correctas embebidas en <script>
  • Nombre de archivo: {tipo}_{slug_titulo}_{YYYYMMDD}.html
  • auto_open=True abre el archivo con webbrowser.open()
  • Encoding UTF-8 correcto en Windows (sys.stdout.reconfigure)
  • Ejecutable como CLI: python lib/html_artifact.py --demo [--type TYPE]

Auditoría del Director:

  • Verificar que NO se reinventa CSS (debe importar de pdf_generator)
  • Verificar que el HTML generado es válido y autocontenido
  • Verificar que --demo genera y abre un HTML correcto

Fase 2: Plantillas HTML (templates/html-artifact/)

Agente: Desarrollador frontend / diseñador HTML Entregable: 6 archivos HTML en templates/html-artifact/ Criterios de aceptación:

  • base.html con estructura completa (head, header, body, footer)
  • Tailwind CSS via Play CDN para layout responsive
  • CSS custom sobre Tailwind para branding AmCham (colores exactos HEX)
  • Logo AmCham como SVG inline en header
  • Responsive: 3 breakpoints (desktop 1200px+, tablet 768px, móvil 375px)
  • @media print funcional (Ctrl+P produce output limpio)
  • Marcadores consistentes con lo que el módulo Python sustituye
  • dashboard.html: grid de KPIs + slots para Chart.js + tablas con hover
  • report.html: TOC clickable con smooth scroll + secciones colapsables
  • chart.html: layout de gráficos 1-col o grid 2-col
  • brief.html: resumen ejecutivo + key findings + timeline vertical
  • infographic.html: bloques visuales con números grandes y colores semánticos
  • Todas las plantillas usan Playfair Display (títulos) + DM Sans (cuerpo)

Auditoría del Director:

  • Abrir cada plantilla en Chrome y verificar rendering
  • Verificar responsive con DevTools (375px, 768px, 1200px)
  • Verificar print preview (Ctrl+P)
  • Verificar que los colores coinciden EXACTAMENTE con la guía visual

Fase 3: Skill + Comando + Directorio

Agente: Integrador de sistema Entregable: .claude/skills/html-artifact.md, .claude/commands/artifact.md, directorio outputs/html/ Criterios de aceptación:

  • Skill describe activación, tipos, flujo e integración
  • Comando /artifact con sintaxis y ejemplos
  • Directorio outputs/html/ creado (con .gitkeep)

Auditoría del Director:

  • Verificar coherencia entre skill, comando y módulo Python

Fase 4: Documentación y registro

Agente: Documentador Entregable: Actualizaciones a CLAUDE.md, commands-list.md, quick-references.md Archivos a modificar:

  • .claude/rules/20-reference/commands-list.md → añadir /artifact en sección de comandos
  • .claude/rules/20-reference/quick-references.md → añadir referencia a skill y módulo
  • CLAUDE.md → añadir sección "Artefactos HTML" en la documentación principal

Criterios de aceptación:

  • /artifact aparece en commands-list con descripción y tipos
  • quick-references incluye skill, módulo y plantillas
  • CLAUDE.md documenta la capacidad con routing table actualizada

Auditoría del Director:

  • Verificar que la documentación es consistente entre los 3 archivos

Fase 5: Test End-to-End

Agente: QA / Tester Entregable: Ejecución exitosa de --demo para los 5 tipos Tests:

# Test 1: Demo dashboard (caso principal)
python lib/html_artifact.py --demo --type dashboard

# Test 2: Demo report
python lib/html_artifact.py --demo --type report

# Test 3: Demo chart
python lib/html_artifact.py --demo --type chart

# Test 4: Demo brief
python lib/html_artifact.py --demo --type brief

# Test 5: Demo infographic
python lib/html_artifact.py --demo --type infographic

Verificaciones por cada HTML generado:

  • Se abre en el navegador sin errores de consola (F12)
  • Los gráficos Chart.js renderizan correctamente con tooltips
  • Los colores coinciden con la paleta corporativa
  • Las tipografías cargan (Playfair Display + DM Sans)
  • Es responsive (redimensionar ventana)
  • Print preview funciona (Ctrl+P)
  • El archivo pesa < 500KB
  • Formato numérico español (1.234,56)
  • Fuentes citadas en el footer
  • Fecha en formato DD/MM/YYYY

Auditoría del Director:

  • Abrir cada HTML generado y verificar todos los puntos
  • Si hay errores, devolver a la fase correspondiente para corrección

REGLAS CRÍTICAS PARA TODOS LOS AGENTES

  1. REUTILIZAR CORPORATE_CSS de lib/pdf_generator.py — no reinventar estilos
  2. NUNCA eliminar tildes o eñes del texto (ni siquiera "preventivamente")
  3. SIEMPRE python -X utf8 + sys.stdout.reconfigure(encoding='utf-8') en Windows
  4. SIEMPRE formato numérico español: 1.234,56 (punto miles, coma decimal)
  5. SIEMPRE colores HEX exactos de la paleta (no aproximados)
  6. NO crear dependencias locales — todo via CDN
  7. NO crear archivos innecesarios — ceñirse al plan
  8. NO modificar archivos existentes excepto los listados en Fase 4
  9. Leer config/GUIA_ESTILO_VISUAL.md antes de implementar cualquier visual
  10. Leer lib/pdf_generator.py antes de escribir CSS

RESULTADO ESPERADO

Al finalizar las 5 fases, el sistema debe poder:

Usuario: "Hazme un dashboard con datos de comercio España-EEUU"
    ↓
Claude: Recopila datos → genera HTML → abre en navegador
    ↓
Archivo: outputs/html/dashboard_comercio_espana_eeuu_20260329.html
    - 150-300KB, autocontenido
    - KPIs interactivos
    - Gráficos Chart.js con tooltips
    - Tablas con hover
    - Branding AmCham perfecto
    - Responsive + print-ready
Bloques visuales con iconos, números grandes, paleta semántica

Requisitos de cada plantilla:

  • HTML5 válido y autocontenido (un solo archivo, sin imports locales)
  • Responsive: funciona en desktop (1200px+), tablet (768px), y móvil (375px)
  • Print-friendly: @media print limpia headers fijos, quita sombras, fuerza colores
  • Tailwind para layout, CSS custom para branding AmCham sobre Tailwind
  • Logo AmCham como SVG inline en el header (no como imagen externa)
  • Footer con: fuentes, fecha de generación, clasificación, "AmCham Spain OS"
  • Idioma: todo en español con tildes y eñes correctas

Skill: .claude/skills/html-artifact.md

# Skill: Generador de Artefactos HTML

## Activación
- "hazme un dashboard", "genera un HTML interactivo", "quiero ver esto en el navegador"
- "artefacto HTML", "visualización interactiva", "HTML con gráficos"
- /artifact [tipo] [tema]

## Tipos disponibles
- dashboard: KPIs + gráficos + tablas (para datos cuantitativos)
- report: Informe ejecutivo interactivo (para documentos largos)
- chart: Solo gráficos Chart.js (para visualización de datos pura)
- brief: Briefing 1-página (para resúmenes rápidos)
- infographic: Bloques visuales con datos (para comunicación visual)

## Flujo
1. Detectar tipo de artefacto según el contexto
2. Si hay datos: estructurarlos en formato {kpis, charts, tables}
3. Si es markdown existente: usar generate_from_markdown()
4. Generar HTML con lib/html_artifact.py
5. Abrir automáticamente en navegador
6. Informar: ruta del archivo + peso + tipo generado

## Integración
- Puede usarse tras /research para visualizar resultados
- Puede usarse tras /generate para versión HTML interactiva
- Los .html generados se catalogan automáticamente en Notion (rule catalog-sync)

## Módulo
lib/html_artifact.py

Comando: .claude/commands/artifact.md

Genera un artefacto HTML autocontenido e interactivo.

Uso: /artifact [tipo] [tema]

Tipos: dashboard | report | chart | brief | infographic

Ejemplos:
  /artifact dashboard "Comercio bilateral España-EEUU 2024"
  /artifact report    → convierte el último output .md en HTML interactivo
  /artifact chart "Evolución PIB España vs UE 2020-2024"
  /artifact brief "Resumen AI Act para comité Economía Digital"

El archivo se genera en outputs/html/ y se abre automáticamente en el navegador.

Demo CLI

El módulo debe ser ejecutable directamente para testing:

python lib/html_artifact.py --demo
# Genera outputs/html/demo_dashboard.html con datos de ejemplo y lo abre en el navegador

python lib/html_artifact.py --demo --type report
# Genera outputs/html/demo_report.html

python lib/html_artifact.py --demo --type chart
# etc.

FASES DE IMPLEMENTACIÓN

Fase 1: Módulo Core (lib/html_artifact.py)

Agente: Desarrollador backend Python Entregable: lib/html_artifact.py funcional con clase HtmlArtifact Criterios de aceptación:

  • Importa y reutiliza CORPORATE_CSS de pdf_generator.py
  • Convierte Markdown a HTML (con markdown2 como en pdf_generator)
  • Genera HTML autocontenido con CDNs de Tailwind, Chart.js, Google Fonts
  • Soporta los 5 tipos de artefacto
  • Maneja data dict para KPIs, charts y tables
  • Genera Chart.js configs correctas embebidas en <script>
  • Nombre de archivo: {tipo}_{slug_titulo}_{YYYYMMDD}.html
  • auto_open=True abre el archivo con webbrowser.open()
  • Encoding UTF-8 correcto en Windows (sys.stdout.reconfigure)
  • Ejecutable como CLI: python lib/html_artifact.py --demo [--type TYPE]

Auditoría del Director:

  • Verificar que NO se reinventa CSS (debe importar de pdf_generator)
  • Verificar que el HTML generado es válido y autocontenido
  • Verificar que --demo genera y abre un HTML correcto

Fase 2: Plantillas HTML (templates/html-artifact/)

Agente: Desarrollador frontend / diseñador HTML Entregable: 6 archivos HTML en templates/html-artifact/ Criterios de aceptación:

  • base.html con estructura completa (head, header, body, footer)
  • Tailwind CSS via Play CDN para layout responsive
  • CSS custom sobre Tailwind para branding AmCham (colores exactos HEX)
  • Logo AmCham como SVG inline en header
  • Responsive: 3 breakpoints (desktop 1200px+, tablet 768px, móvil 375px)
  • @media print funcional (Ctrl+P produce output limpio)
  • Marcadores consistentes con lo que el módulo Python sustituye
  • dashboard.html: grid de KPIs + slots para Chart.js + tablas con hover
  • report.html: TOC clickable con smooth scroll + secciones colapsables
  • chart.html: layout de gráficos 1-col o grid 2-col
  • brief.html: resumen ejecutivo + key findings + timeline vertical
  • infographic.html: bloques visuales con números grandes y colores semánticos
  • Todas las plantillas usan Playfair Display (títulos) + DM Sans (cuerpo)

Auditoría del Director:

  • Abrir cada plantilla en Chrome y verificar rendering
  • Verificar responsive con DevTools (375px, 768px, 1200px)
  • Verificar print preview (Ctrl+P)
  • Verificar que los colores coinciden EXACTAMENTE con la guía visual

Fase 3: Skill + Comando + Directorio

Agente: Integrador de sistema Entregable: .claude/skills/html-artifact.md, .claude/commands/artifact.md, directorio outputs/html/ Criterios de aceptación:

  • Skill describe activación, tipos, flujo e integración
  • Comando /artifact con sintaxis y ejemplos
  • Directorio outputs/html/ creado (con .gitkeep)

Auditoría del Director:

  • Verificar coherencia entre skill, comando y módulo Python

Fase 4: Documentación y registro

Agente: Documentador Entregable: Actualizaciones a CLAUDE.md, commands-list.md, quick-references.md Archivos a modificar:

  • .claude/rules/20-reference/commands-list.md → añadir /artifact en sección de comandos
  • .claude/rules/20-reference/quick-references.md → añadir referencia a skill y módulo
  • CLAUDE.md → añadir sección "Artefactos HTML" en la documentación principal

Criterios de aceptación:

  • /artifact aparece en commands-list con descripción y tipos
  • quick-references incluye skill, módulo y plantillas
  • CLAUDE.md documenta la capacidad con routing table actualizada

Auditoría del Director:

  • Verificar que la documentación es consistente entre los 3 archivos

Fase 5: Test End-to-End

Agente: QA / Tester Entregable: Ejecución exitosa de --demo para los 5 tipos Tests:

# Test 1: Demo dashboard (caso principal)
python lib/html_artifact.py --demo --type dashboard

# Test 2: Demo report
python lib/html_artifact.py --demo --type report

# Test 3: Demo chart
python lib/html_artifact.py --demo --type chart

# Test 4: Demo brief
python lib/html_artifact.py --demo --type brief

# Test 5: Demo infographic
python lib/html_artifact.py --demo --type infographic

Verificaciones por cada HTML generado:

  • Se abre en el navegador sin errores de consola (F12)
  • Los gráficos Chart.js renderizan correctamente con tooltips
  • Los colores coinciden con la paleta corporativa
  • Las tipografías cargan (Playfair Display + DM Sans)
  • Es responsive (redimensionar ventana)
  • Print preview funciona (Ctrl+P)
  • El archivo pesa < 500KB
  • Formato numérico español (1.234,56)
  • Fuentes citadas en el footer
  • Fecha en formato DD/MM/YYYY

Auditoría del Director:

  • Abrir cada HTML generado y verificar todos los puntos
  • Si hay errores, devolver a la fase correspondiente para corrección

REGLAS CRÍTICAS PARA TODOS LOS AGENTES

  1. REUTILIZAR CORPORATE_CSS de lib/pdf_generator.py — no reinventar estilos
  2. NUNCA eliminar tildes o eñes del texto (ni siquiera "preventivamente")
  3. SIEMPRE python -X utf8 + sys.stdout.reconfigure(encoding='utf-8') en Windows
  4. SIEMPRE formato numérico español: 1.234,56 (punto miles, coma decimal)
  5. SIEMPRE colores HEX exactos de la paleta (no aproximados)
  6. NO crear dependencias locales — todo via CDN
  7. NO crear archivos innecesarios — ceñirse al plan
  8. NO modificar archivos existentes excepto los listados en Fase 4
  9. Leer config/GUIA_ESTILO_VISUAL.md antes de implementar cualquier visual
  10. Leer lib/pdf_generator.py antes de escribir CSS

RESULTADO ESPERADO

Al finalizar las 5 fases, el sistema debe poder:

Usuario: "Hazme un dashboard con datos de comercio España-EEUU"
    ↓
Claude: Recopila datos → genera HTML → abre en navegador
    ↓
Archivo: outputs/html/dashboard_comercio_espana_eeuu_20260329.html
    - 150-300KB, autocontenido
    - KPIs interactivos
    - Gráficos Chart.js con tooltips
    - Tablas con hover
    - Branding AmCham perfecto
    - Responsive + print-ready
, , 		Resumen ejecutivo, findings con iconos, timeline
infographic.html Hereda base +

Prompt de Implementación: Generador de Artefactos HTML Autocontenidos

Para usar en: Nueva instancia de Claude Code con contexto fresco Modo de trabajo: Director de proyecto + equipo de agentes Fecha de creación: 29/03/2026

INSTRUCCIÓN PRINCIPAL

Necesito implementar una nueva capacidad para AmCham Spain OS: generación de artefactos HTML autocontenidos — archivos .html únicos que se abren en cualquier navegador sin servidor, con gráficos interactivos, branding corporativo y datos embebidos.

Trabaja como Director de Proyecto. En cada fase:

  1. Delega la implementación a agentes especializados (en paralelo cuando sea posible)
  2. Audita el resultado de cada agente antes de pasar a la siguiente fase
  3. Verifica que el código cumple los estándares del repositorio
  4. No avances a la fase siguiente hasta que la actual esté validada

CONTEXTO DEL REPOSITORIO

Qué es AmCham Spain OS

Sistema operativo digital de la Cámara de Comercio de EE.UU. en España. Genera documentos ejecutivos, investigaciones, briefings y visualizaciones de datos para 5 comités temáticos.

Recursos existentes que DEBEN reutilizarse

Recurso Ruta Qué aprovechar
CSS corporativo lib/pdf_generator.py → variable CORPORATE_CSS (~120 líneas) Colores, tipografías, estilos base
Dashboard HTML existente src/investigative/dashboard.py Patrón de generación HTML con datos embebidos
Motor de plantillas lib/template_engine.py Sustitución de variables
Guía visual config/GUIA_ESTILO_VISUAL.md Paleta oficial, tipografías, reglas de marca
Regla de estilo visual .claude/rules/00-core/visual-style.md Colores HEX exactos, reglas obligatorias

Identidad corporativa (obligatoria)

Colores:
  Azul Marino:     #00247D (Pantone 280) — títulos, headers, fondos principales
  Rojo Corporativo: #D1232A (Pantone 186) — acentos, CTAs, alertas
  Azul Claro:      #8FACD0 (Pantone 2717) — elementos decorativos
  Negro:           #000000 — cuerpo de texto
  Gris Claro:      #D3D3D3 — fondos secundarios
  Blanco:          #FFFFFF — fondos principales

Semánticos (gráficos):
  Positivo: #27ae60    Negativo: #e74c3c    Alerta: #f39c12

Tipografías:
  Títulos: Playfair Display (serif) — Google Fonts
  Cuerpo:  DM Sans (sans-serif) — Google Fonts

Formato numérico: español (1.234,56 — punto miles, coma decimal)

Estructura de directorios relevante

amchamspain-os-main/
├── lib/                      # Bibliotecas Python
│   ├── pdf_generator.py      # CORPORATE_CSS aquí
│   ├── template_engine.py    # Motor 
│   ├── datawrapper_client.py # Referencia de cómo se generan gráficos
│   └── html_artifact.py      # ← CREAR AQUÍ
├── templates/
│   ├── html-artifact/        # ← CREAR AQUÍ (plantillas)
│   └── briefing-ejecutivo/   # Referencia de estructura template
├── .claude/
│   ├── skills/               # Skills conversacionales
│   ├── commands/             # Comandos /slash
│   └── rules/               # Reglas del sistema
├── outputs/
│   └── html/                 # ← CREAR AQUÍ (directorio de salida)
├── config/
│   └── GUIA_ESTILO_VISUAL.md # Biblia visual
└── CLAUDE.md                 # Hub de navegación del sistema

ESPECIFICACIÓN TÉCNICA

Archivo principal: lib/html_artifact.py

Clase HtmlArtifact con estos métodos públicos:

class HtmlArtifact:
    """Genera archivos HTML autocontenidos con branding AmCham Spain."""

    ARTIFACT_TYPES = ["dashboard", "report", "infographic", "chart", "brief"]

    def generate(
        self,
        content: str,              # Markdown o HTML del cuerpo
        artifact_type: str,        # Uno de ARTIFACT_TYPES
        title: str,                # Título del documento
        subtitle: str = "",        # Subtítulo opcional
        data: dict | None = None,  # Datos para Chart.js {charts: [...]}
        sources: list[str] = [],   # Fuentes citadas
        classification: str = "Uso Interno",
        auto_open: bool = True,    # Abrir en navegador
        output_dir: str = "outputs/html",
    ) -> Path:
        """Genera .html y retorna la ruta del archivo creado."""

    def generate_from_markdown(
        self,
        md_path: str,              # Ruta a archivo .md existente
        artifact_type: str = "report",
        data: dict | None = None,
        auto_open: bool = True,
    ) -> Path:
        """Convierte un .md existente del repo en HTML interactivo."""

Estructura del dict data para gráficos:

data = {
    "kpis": [
        {"label": "Exportaciones", "value": "16.800M EUR", "change": "+5,2%", "trend": "up"},
        {"label": "Importaciones", "value": "12.340M EUR", "change": "+3,1%", "trend": "up"},
    ],
    "charts": [
        {
            "id": "chart-1",
            "type": "bar",          # bar | line | doughnut | radar | polarArea
            "title": "Top 10 Productos",
            "labels": ["Automóviles", "Maquinaria", ...],
            "datasets": [
                {"label": "2024", "data": [3200, 2800, ...], "color": "#00247D"},
                {"label": "2023", "data": [2900, 2600, ...], "color": "#8FACD0"},
            ]
        },
        {
            "id": "chart-2",
            "type": "line",
            "title": "Evolución 2020-2024",
            "labels": ["2020", "2021", "2022", "2023", "2024"],
            "datasets": [
                {"label": "Exportaciones", "data": [14200, 14800, 15300, 16000, 16800], "color": "#00247D"},
                {"label": "Importaciones", "data": [10500, 11200, 11800, 12000, 12340], "color": "#D1232A"},
            ]
        }
    ],
    "tables": [
        {
            "id": "table-1",
            "title": "Detalle por Sector",
            "headers": ["Sector", "Exportaciones", "Importaciones", "Balanza"],
            "rows": [
                ["Automóvil", "3.200M", "1.800M", "+1.400M"],
                ["Maquinaria", "2.800M", "2.100M", "+700M"],
            ]
        }
    ]
}

CDNs (sin dependencias locales)

<!-- Tailwind CSS Play CDN — layout y utilidades -->
<script src="https://cdn.tailwindcss.com"></script>

<!-- Chart.js 4 — gráficos interactivos (SOLO si data.charts existe) -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@4"></script>

<!-- Google Fonts — tipografías corporativas -->
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=DM+Sans:wght@400;500;700&display=swap" rel="stylesheet">

Plantillas HTML: templates/html-artifact/

6 archivos con marcadores que el generador sustituye:

Archivo Variables clave Componentes visuales
base.html , , , , , , Header, footer, estructura base
dashboard.html Hereda base + , , Grid de KPIs, gráficos Chart.js, tablas con hover
report.html Hereda base + , TOC clickable, secciones colapsables con toggle
chart.html Hereda base + Layout de gráficos 1-col o 2-col responsive
brief.html Hereda base + , , Resumen ejecutivo, findings con iconos, timeline
infographic.html Hereda base + Bloques visuales con iconos, números grandes, paleta semántica

Requisitos de cada plantilla:

  • HTML5 válido y autocontenido (un solo archivo, sin imports locales)
  • Responsive: funciona en desktop (1200px+), tablet (768px), y móvil (375px)
  • Print-friendly: @media print limpia headers fijos, quita sombras, fuerza colores
  • Tailwind para layout, CSS custom para branding AmCham sobre Tailwind
  • Logo AmCham como SVG inline en el header (no como imagen externa)
  • Footer con: fuentes, fecha de generación, clasificación, "AmCham Spain OS"
  • Idioma: todo en español con tildes y eñes correctas

Skill: .claude/skills/html-artifact.md

# Skill: Generador de Artefactos HTML

## Activación
- "hazme un dashboard", "genera un HTML interactivo", "quiero ver esto en el navegador"
- "artefacto HTML", "visualización interactiva", "HTML con gráficos"
- /artifact [tipo] [tema]

## Tipos disponibles
- dashboard: KPIs + gráficos + tablas (para datos cuantitativos)
- report: Informe ejecutivo interactivo (para documentos largos)
- chart: Solo gráficos Chart.js (para visualización de datos pura)
- brief: Briefing 1-página (para resúmenes rápidos)
- infographic: Bloques visuales con datos (para comunicación visual)

## Flujo
1. Detectar tipo de artefacto según el contexto
2. Si hay datos: estructurarlos en formato {kpis, charts, tables}
3. Si es markdown existente: usar generate_from_markdown()
4. Generar HTML con lib/html_artifact.py
5. Abrir automáticamente en navegador
6. Informar: ruta del archivo + peso + tipo generado

## Integración
- Puede usarse tras /research para visualizar resultados
- Puede usarse tras /generate para versión HTML interactiva
- Los .html generados se catalogan automáticamente en Notion (rule catalog-sync)

## Módulo
lib/html_artifact.py

Comando: .claude/commands/artifact.md

Genera un artefacto HTML autocontenido e interactivo.

Uso: /artifact [tipo] [tema]

Tipos: dashboard | report | chart | brief | infographic

Ejemplos:
  /artifact dashboard "Comercio bilateral España-EEUU 2024"
  /artifact report    → convierte el último output .md en HTML interactivo
  /artifact chart "Evolución PIB España vs UE 2020-2024"
  /artifact brief "Resumen AI Act para comité Economía Digital"

El archivo se genera en outputs/html/ y se abre automáticamente en el navegador.

Demo CLI

El módulo debe ser ejecutable directamente para testing:

python lib/html_artifact.py --demo
# Genera outputs/html/demo_dashboard.html con datos de ejemplo y lo abre en el navegador

python lib/html_artifact.py --demo --type report
# Genera outputs/html/demo_report.html

python lib/html_artifact.py --demo --type chart
# etc.

FASES DE IMPLEMENTACIÓN

Fase 1: Módulo Core (lib/html_artifact.py)

Agente: Desarrollador backend Python Entregable: lib/html_artifact.py funcional con clase HtmlArtifact Criterios de aceptación:

  • Importa y reutiliza CORPORATE_CSS de pdf_generator.py
  • Convierte Markdown a HTML (con markdown2 como en pdf_generator)
  • Genera HTML autocontenido con CDNs de Tailwind, Chart.js, Google Fonts
  • Soporta los 5 tipos de artefacto
  • Maneja data dict para KPIs, charts y tables
  • Genera Chart.js configs correctas embebidas en <script>
  • Nombre de archivo: {tipo}_{slug_titulo}_{YYYYMMDD}.html
  • auto_open=True abre el archivo con webbrowser.open()
  • Encoding UTF-8 correcto en Windows (sys.stdout.reconfigure)
  • Ejecutable como CLI: python lib/html_artifact.py --demo [--type TYPE]

Auditoría del Director:

  • Verificar que NO se reinventa CSS (debe importar de pdf_generator)
  • Verificar que el HTML generado es válido y autocontenido
  • Verificar que --demo genera y abre un HTML correcto

Fase 2: Plantillas HTML (templates/html-artifact/)

Agente: Desarrollador frontend / diseñador HTML Entregable: 6 archivos HTML en templates/html-artifact/ Criterios de aceptación:

  • base.html con estructura completa (head, header, body, footer)
  • Tailwind CSS via Play CDN para layout responsive
  • CSS custom sobre Tailwind para branding AmCham (colores exactos HEX)
  • Logo AmCham como SVG inline en header
  • Responsive: 3 breakpoints (desktop 1200px+, tablet 768px, móvil 375px)
  • @media print funcional (Ctrl+P produce output limpio)
  • Marcadores consistentes con lo que el módulo Python sustituye
  • dashboard.html: grid de KPIs + slots para Chart.js + tablas con hover
  • report.html: TOC clickable con smooth scroll + secciones colapsables
  • chart.html: layout de gráficos 1-col o grid 2-col
  • brief.html: resumen ejecutivo + key findings + timeline vertical
  • infographic.html: bloques visuales con números grandes y colores semánticos
  • Todas las plantillas usan Playfair Display (títulos) + DM Sans (cuerpo)

Auditoría del Director:

  • Abrir cada plantilla en Chrome y verificar rendering
  • Verificar responsive con DevTools (375px, 768px, 1200px)
  • Verificar print preview (Ctrl+P)
  • Verificar que los colores coinciden EXACTAMENTE con la guía visual

Fase 3: Skill + Comando + Directorio

Agente: Integrador de sistema Entregable: .claude/skills/html-artifact.md, .claude/commands/artifact.md, directorio outputs/html/ Criterios de aceptación:

  • Skill describe activación, tipos, flujo e integración
  • Comando /artifact con sintaxis y ejemplos
  • Directorio outputs/html/ creado (con .gitkeep)

Auditoría del Director:

  • Verificar coherencia entre skill, comando y módulo Python

Fase 4: Documentación y registro

Agente: Documentador Entregable: Actualizaciones a CLAUDE.md, commands-list.md, quick-references.md Archivos a modificar:

  • .claude/rules/20-reference/commands-list.md → añadir /artifact en sección de comandos
  • .claude/rules/20-reference/quick-references.md → añadir referencia a skill y módulo
  • CLAUDE.md → añadir sección "Artefactos HTML" en la documentación principal

Criterios de aceptación:

  • /artifact aparece en commands-list con descripción y tipos
  • quick-references incluye skill, módulo y plantillas
  • CLAUDE.md documenta la capacidad con routing table actualizada

Auditoría del Director:

  • Verificar que la documentación es consistente entre los 3 archivos

Fase 5: Test End-to-End

Agente: QA / Tester Entregable: Ejecución exitosa de --demo para los 5 tipos Tests:

# Test 1: Demo dashboard (caso principal)
python lib/html_artifact.py --demo --type dashboard

# Test 2: Demo report
python lib/html_artifact.py --demo --type report

# Test 3: Demo chart
python lib/html_artifact.py --demo --type chart

# Test 4: Demo brief
python lib/html_artifact.py --demo --type brief

# Test 5: Demo infographic
python lib/html_artifact.py --demo --type infographic

Verificaciones por cada HTML generado:

  • Se abre en el navegador sin errores de consola (F12)
  • Los gráficos Chart.js renderizan correctamente con tooltips
  • Los colores coinciden con la paleta corporativa
  • Las tipografías cargan (Playfair Display + DM Sans)
  • Es responsive (redimensionar ventana)
  • Print preview funciona (Ctrl+P)
  • El archivo pesa < 500KB
  • Formato numérico español (1.234,56)
  • Fuentes citadas en el footer
  • Fecha en formato DD/MM/YYYY

Auditoría del Director:

  • Abrir cada HTML generado y verificar todos los puntos
  • Si hay errores, devolver a la fase correspondiente para corrección

REGLAS CRÍTICAS PARA TODOS LOS AGENTES

  1. REUTILIZAR CORPORATE_CSS de lib/pdf_generator.py — no reinventar estilos
  2. NUNCA eliminar tildes o eñes del texto (ni siquiera "preventivamente")
  3. SIEMPRE python -X utf8 + sys.stdout.reconfigure(encoding='utf-8') en Windows
  4. SIEMPRE formato numérico español: 1.234,56 (punto miles, coma decimal)
  5. SIEMPRE colores HEX exactos de la paleta (no aproximados)
  6. NO crear dependencias locales — todo via CDN
  7. NO crear archivos innecesarios — ceñirse al plan
  8. NO modificar archivos existentes excepto los listados en Fase 4
  9. Leer config/GUIA_ESTILO_VISUAL.md antes de implementar cualquier visual
  10. Leer lib/pdf_generator.py antes de escribir CSS

RESULTADO ESPERADO

Al finalizar las 5 fases, el sistema debe poder:

Usuario: "Hazme un dashboard con datos de comercio España-EEUU"
    ↓
Claude: Recopila datos → genera HTML → abre en navegador
    ↓
Archivo: outputs/html/dashboard_comercio_espana_eeuu_20260329.html
    - 150-300KB, autocontenido
    - KPIs interactivos
    - Gráficos Chart.js con tooltips
    - Tablas con hover
    - Branding AmCham perfecto
    - Responsive + print-ready
Bloques visuales con iconos, números grandes, paleta semántica

Requisitos de cada plantilla:

Skill: .claude/skills/html-artifact.md

# Skill: Generador de Artefactos HTML

## Activación
- "hazme un dashboard", "genera un HTML interactivo", "quiero ver esto en el navegador"
- "artefacto HTML", "visualización interactiva", "HTML con gráficos"
- /artifact [tipo] [tema]

## Tipos disponibles
- dashboard: KPIs + gráficos + tablas (para datos cuantitativos)
- report: Informe ejecutivo interactivo (para documentos largos)
- chart: Solo gráficos Chart.js (para visualización de datos pura)
- brief: Briefing 1-página (para resúmenes rápidos)
- infographic: Bloques visuales con datos (para comunicación visual)

## Flujo
1. Detectar tipo de artefacto según el contexto
2. Si hay datos: estructurarlos en formato {kpis, charts, tables}
3. Si es markdown existente: usar generate_from_markdown()
4. Generar HTML con lib/html_artifact.py
5. Abrir automáticamente en navegador
6. Informar: ruta del archivo + peso + tipo generado

## Integración
- Puede usarse tras /research para visualizar resultados
- Puede usarse tras /generate para versión HTML interactiva
- Los .html generados se catalogan automáticamente en Notion (rule catalog-sync)

## Módulo
lib/html_artifact.py

Comando: .claude/commands/artifact.md

Genera un artefacto HTML autocontenido e interactivo.

Uso: /artifact [tipo] [tema]

Tipos: dashboard | report | chart | brief | infographic

Ejemplos:
  /artifact dashboard "Comercio bilateral España-EEUU 2024"
  /artifact report    → convierte el último output .md en HTML interactivo
  /artifact chart "Evolución PIB España vs UE 2020-2024"
  /artifact brief "Resumen AI Act para comité Economía Digital"

El archivo se genera en outputs/html/ y se abre automáticamente en el navegador.

Demo CLI

El módulo debe ser ejecutable directamente para testing:

python lib/html_artifact.py --demo
# Genera outputs/html/demo_dashboard.html con datos de ejemplo y lo abre en el navegador

python lib/html_artifact.py --demo --type report
# Genera outputs/html/demo_report.html

python lib/html_artifact.py --demo --type chart
# etc.

FASES DE IMPLEMENTACIÓN

Fase 1: Módulo Core (lib/html_artifact.py)

Agente: Desarrollador backend Python Entregable: lib/html_artifact.py funcional con clase HtmlArtifact Criterios de aceptación:

Auditoría del Director:

Fase 2: Plantillas HTML (templates/html-artifact/)

Agente: Desarrollador frontend / diseñador HTML Entregable: 6 archivos HTML en templates/html-artifact/ Criterios de aceptación:

Auditoría del Director:

Fase 3: Skill + Comando + Directorio

Agente: Integrador de sistema Entregable: .claude/skills/html-artifact.md, .claude/commands/artifact.md, directorio outputs/html/ Criterios de aceptación:

Auditoría del Director:

Fase 4: Documentación y registro

Agente: Documentador Entregable: Actualizaciones a CLAUDE.md, commands-list.md, quick-references.md Archivos a modificar:

Criterios de aceptación:

Auditoría del Director:

Fase 5: Test End-to-End

Agente: QA / Tester Entregable: Ejecución exitosa de --demo para los 5 tipos Tests:

# Test 1: Demo dashboard (caso principal)
python lib/html_artifact.py --demo --type dashboard

# Test 2: Demo report
python lib/html_artifact.py --demo --type report

# Test 3: Demo chart
python lib/html_artifact.py --demo --type chart

# Test 4: Demo brief
python lib/html_artifact.py --demo --type brief

# Test 5: Demo infographic
python lib/html_artifact.py --demo --type infographic

Verificaciones por cada HTML generado:

Auditoría del Director:

REGLAS CRÍTICAS PARA TODOS LOS AGENTES

  1. REUTILIZAR CORPORATE_CSS de lib/pdf_generator.py — no reinventar estilos
  2. NUNCA eliminar tildes o eñes del texto (ni siquiera "preventivamente")
  3. SIEMPRE python -X utf8 + sys.stdout.reconfigure(encoding='utf-8') en Windows
  4. SIEMPRE formato numérico español: 1.234,56 (punto miles, coma decimal)
  5. SIEMPRE colores HEX exactos de la paleta (no aproximados)
  6. NO crear dependencias locales — todo via CDN
  7. NO crear archivos innecesarios — ceñirse al plan
  8. NO modificar archivos existentes excepto los listados en Fase 4
  9. Leer config/GUIA_ESTILO_VISUAL.md antes de implementar cualquier visual
  10. Leer lib/pdf_generator.py antes de escribir CSS

RESULTADO ESPERADO

Al finalizar las 5 fases, el sistema debe poder:

Usuario: "Hazme un dashboard con datos de comercio España-EEUU"
    ↓
Claude: Recopila datos → genera HTML → abre en navegador
    ↓
Archivo: outputs/html/dashboard_comercio_espana_eeuu_20260329.html
    - 150-300KB, autocontenido
    - KPIs interactivos
    - Gráficos Chart.js con tooltips
    - Tablas con hover
    - Branding AmCham perfecto
    - Responsive + print-ready