@bacano/sdk 1.1.9 → 1.1.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CONTENT_TYPE_MANAGEMENT.md +192 -0
- package/README.md +53 -0
- package/content-management.cjs +135 -0
- package/content-management.d.ts +144 -0
- package/content-management.js +114 -0
- package/package.json +7 -1
- package/skills/bacano-figma-web/SKILL.md +145 -0
- package/skills/bacano-figma-web/agents/openai.yaml +4 -0
- package/skills/bacano-figma-web/references/bacano-mapping.md +38 -0
- package/skills/bacano-figma-web/references/connection-desktop-bridge.md +45 -0
- package/skills/bacano-figma-web/references/connection-official.md +127 -0
- package/skills/bacano-figma-web/references/connection-rest-api.md +35 -0
- package/skills/bacano-figma-web/references/content-workflow.md +169 -0
- package/skills/bacano-figma-web/references/extraction-contract.md +102 -0
- package/skills/bacano-figma-web/references/visual-validation.md +39 -0
- package/skills/bacano-figma-web/scripts/cli.mjs +309 -0
- package/skills/bacano-figma-web/scripts/snapshot.mjs +139 -0
- package/skills/bacano-web/scripts/postinstall.mjs +4 -0
|
@@ -0,0 +1,145 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: bacano-figma-web
|
|
3
|
+
description: Convierte diseños de Figma en webs y tiendas construidas con @bacano/sdk, preservando el cascarón, contratos, Static First y comportamiento oficial de Bacano. Usar al implementar una web desde enlaces, frames o archivos Figma; configurar o diagnosticar Figma MCP, Figma Desktop MCP, Desktop Bridge o REST; extraer un diseño por páginas; mapearlo a Content y componentes; o comparar visualmente la implementación con Figma.
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# Bacano Figma Web
|
|
7
|
+
|
|
8
|
+
Implementar Figma como fuente visual y Bacano como fuente funcional. No copiar
|
|
9
|
+
una captura como HTML aislado ni reconstruir catálogo, carrito, checkout,
|
|
10
|
+
autenticación, marketing o Content por fuera de `@bacano/sdk`.
|
|
11
|
+
|
|
12
|
+
## 1. Confirmar el alcance
|
|
13
|
+
|
|
14
|
+
Antes de extraer el diseño, identificar:
|
|
15
|
+
|
|
16
|
+
- Web informativa o tienda virtual.
|
|
17
|
+
- Enlace al archivo, página, sección o frame de Figma.
|
|
18
|
+
- Rutas que se implementarán y sus frames desktop/mobile.
|
|
19
|
+
- Repositorio y cascarón Bacano que se reutilizarán.
|
|
20
|
+
- Fuente Figma disponible y política de fallback.
|
|
21
|
+
|
|
22
|
+
Si falta una decisión que cambie materialmente el resultado, hacer una sola
|
|
23
|
+
pregunta corta. No solicitar un token por chat ni pedir que se guarde en el
|
|
24
|
+
repositorio.
|
|
25
|
+
|
|
26
|
+
## 2. Resolver la conexión con Figma
|
|
27
|
+
|
|
28
|
+
Ejecutar primero:
|
|
29
|
+
|
|
30
|
+
```bash
|
|
31
|
+
pnpm exec bacano-figma-web doctor
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
Leer [references/connection-official.md](references/connection-official.md) si
|
|
35
|
+
falta instalar o autenticar el MCP oficial. Usar este orden:
|
|
36
|
+
|
|
37
|
+
1. MCP remoto oficial de Figma.
|
|
38
|
+
2. MCP local oficial de Figma Desktop.
|
|
39
|
+
3. Desktop Bridge comunitario, local y con versión revisada/fijada.
|
|
40
|
+
4. Snapshot mediante REST, únicamente con autorización explícita.
|
|
41
|
+
|
|
42
|
+
No cambiar silenciosamente de fuente. Si la fuente seleccionada se agota,
|
|
43
|
+
responde `429` o no expone una capacidad necesaria, conservar el avance y pedir
|
|
44
|
+
permiso antes del fallback, salvo que el usuario haya aprobado modo automático.
|
|
45
|
+
Leer la guía específica únicamente cuando se elija
|
|
46
|
+
[Desktop Bridge](references/connection-desktop-bridge.md) o
|
|
47
|
+
[REST](references/connection-rest-api.md).
|
|
48
|
+
|
|
49
|
+
## 3. Extraer una vez y normalizar
|
|
50
|
+
|
|
51
|
+
Leer [references/extraction-contract.md](references/extraction-contract.md).
|
|
52
|
+
Crear o reutilizar un snapshot normalizado en `.bacano/designs/<proyecto>/`.
|
|
53
|
+
No consultar cada sección por separado si una lectura de página/frame entrega
|
|
54
|
+
el contexto suficiente.
|
|
55
|
+
|
|
56
|
+
Evaluar y registrar como `DISPONIBLE`, `PARCIAL` o `AUSENTE`:
|
|
57
|
+
|
|
58
|
+
- Variables y estilos.
|
|
59
|
+
- Componentes y variantes.
|
|
60
|
+
- Auto Layout, constraints y geometría.
|
|
61
|
+
- Nombres de capas.
|
|
62
|
+
- Frames desktop/mobile.
|
|
63
|
+
- Estados e interacciones.
|
|
64
|
+
|
|
65
|
+
La ausencia de variables o componentes no bloquea por sí sola. Inferir desde
|
|
66
|
+
geometría y evidencia visual, pero registrar cada inferencia. Nunca incluir PAT,
|
|
67
|
+
cookies, secretos, correos privados ni contenido no necesario en el snapshot.
|
|
68
|
+
|
|
69
|
+
Validar el manifiesto:
|
|
70
|
+
|
|
71
|
+
```bash
|
|
72
|
+
pnpm exec bacano-figma-web validate-snapshot .bacano/designs/<proyecto>/manifest.json
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
## 4. Mapear a Bacano antes de programar
|
|
76
|
+
|
|
77
|
+
Leer [references/bacano-mapping.md](references/bacano-mapping.md) y
|
|
78
|
+
[references/content-workflow.md](references/content-workflow.md). Preparar una
|
|
79
|
+
matriz ruta → frame → componente → fuente de datos → estado responsive y
|
|
80
|
+
determinar si el trabajo comienza desde Figma, desde Bacano Content o desde
|
|
81
|
+
ambas fuentes.
|
|
82
|
+
|
|
83
|
+
- Reutilizar el starter, tokens y componentes existentes.
|
|
84
|
+
- Consumir Bacano y Content mediante `@bacano/sdk`.
|
|
85
|
+
- Mantener un solo `BacanoProvider` y un solo cliente por árbol.
|
|
86
|
+
- Preservar Static First: estructura estática y estado comercial vivo mediante
|
|
87
|
+
los contratos específicos del SDK.
|
|
88
|
+
- No usar GraphQL directo, endpoints internos ni lógica comercial duplicada.
|
|
89
|
+
- No codificar textos editables si pertenecen a Bacano Content.
|
|
90
|
+
- No alterar Baby Rex u otra referencia salvo que ese sea el proyecto indicado.
|
|
91
|
+
|
|
92
|
+
Si Content todavía no existe, generar un blueprint de entrega y fixtures
|
|
93
|
+
temporales fieles al contenido visible de Figma. Los fixtures deben usar el
|
|
94
|
+
mismo view model que consumen los componentes y entrar por un único adaptador;
|
|
95
|
+
nunca repartir datos de prueba dentro de la UI. Si Content ya existe, mapearlo
|
|
96
|
+
sin sobrescribir estructuras o entradas. Si el usuario pide materializar el
|
|
97
|
+
blueprint, leer la sección de automatización de
|
|
98
|
+
[references/content-workflow.md](references/content-workflow.md) y el contrato
|
|
99
|
+
`CONTENT_TYPE_MANAGEMENT.md` incluido en `@bacano/sdk`. Solo crear o modificar
|
|
100
|
+
tipos y componentes mediante el acceso temporal oficial; las entradas y media
|
|
101
|
+
permanecen en el backoffice.
|
|
102
|
+
|
|
103
|
+
Antes de modificar código, indicar brevemente qué rutas y componentes se
|
|
104
|
+
implementarán y qué decisiones de diseño son inferidas.
|
|
105
|
+
|
|
106
|
+
## 5. Implementar por cortes verificables
|
|
107
|
+
|
|
108
|
+
Trabajar por página o conjunto pequeño de secciones:
|
|
109
|
+
|
|
110
|
+
1. Estructura semántica y responsive.
|
|
111
|
+
2. Tokens, tipografía, espacios y media.
|
|
112
|
+
3. Estados interactivos y accesibilidad.
|
|
113
|
+
4. Integración Bacano real.
|
|
114
|
+
5. Comparación visual y correcciones.
|
|
115
|
+
|
|
116
|
+
No añadir paquetes, fuentes, iconos o assets si el proyecto ya ofrece un
|
|
117
|
+
equivalente. Descargar assets mediante la fuente Figma autorizada; no incrustar
|
|
118
|
+
URLs temporales ni construir transformaciones de Storage manualmente.
|
|
119
|
+
|
|
120
|
+
## 6. Validar diseño y contrato
|
|
121
|
+
|
|
122
|
+
Leer [references/visual-validation.md](references/visual-validation.md).
|
|
123
|
+
Comparar con evidencia desktop y mobile, incluyendo viewport, captura y
|
|
124
|
+
diferencias relevantes. Probar además typecheck, lint, tests y build del
|
|
125
|
+
proyecto.
|
|
126
|
+
|
|
127
|
+
Antes de aprobar producción, comprobar que la fuente editorial efectiva sea
|
|
128
|
+
Bacano Content. Un fixture, placeholder o fallback temporal accesible en el
|
|
129
|
+
build de producción es un bloqueo, aunque visualmente coincida con Figma.
|
|
130
|
+
|
|
131
|
+
Al finalizar, invocar `$bacano-web` si está disponible para la auditoría de
|
|
132
|
+
producción completa. Esta skill valida fidelidad y correcta integración desde
|
|
133
|
+
Figma; `bacano-web` valida que el sitio pueda publicarse profesionalmente.
|
|
134
|
+
|
|
135
|
+
## 7. Entregar un cierre claro
|
|
136
|
+
|
|
137
|
+
Reportar:
|
|
138
|
+
|
|
139
|
+
- Fuente Figma y fallback usados.
|
|
140
|
+
- Páginas/frames extraídos e implementados.
|
|
141
|
+
- Snapshot y versión/fecha de extracción.
|
|
142
|
+
- Componentes Bacano reutilizados.
|
|
143
|
+
- Inferencias y diferencias aprobadas.
|
|
144
|
+
- Validaciones ejecutadas y pendientes reales.
|
|
145
|
+
- Brechas del SDK, sin workarounds directos a API o GraphQL.
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
# Mapeo de Figma a Bacano
|
|
2
|
+
|
|
3
|
+
Figma decide presentación. Bacano decide datos, permisos, estados y reglas de
|
|
4
|
+
negocio.
|
|
5
|
+
|
|
6
|
+
## Matriz obligatoria
|
|
7
|
+
|
|
8
|
+
Antes de programar, registrar por ruta:
|
|
9
|
+
|
|
10
|
+
| Ruta | Frame | Componente | Fuente | Responsive | Estado |
|
|
11
|
+
| --- | --- | --- | --- | --- | --- |
|
|
12
|
+
| `/` | Home desktop/mobile | `Hero` | Content | 2 frames | pendiente |
|
|
13
|
+
|
|
14
|
+
Fuentes posibles: Content, catálogo estático, live state, public config,
|
|
15
|
+
checkout, auth u otra operación documentada del SDK.
|
|
16
|
+
|
|
17
|
+
## Reglas
|
|
18
|
+
|
|
19
|
+
- Usar componentes y tokens existentes antes de crear otros.
|
|
20
|
+
- Mapear textos/imágenes editoriales a Content cuando deban ser administrables.
|
|
21
|
+
- Si el equipo de Content y desarrollo trabajan en tiempos distintos, seguir
|
|
22
|
+
[content-workflow.md](content-workflow.md) y mantener un único contrato de
|
|
23
|
+
datos entre fixtures temporales y Bacano real.
|
|
24
|
+
- Usar `responsiveSources` y helpers oficiales para media; no construir URLs de
|
|
25
|
+
Storage manualmente.
|
|
26
|
+
- Mantener HTML semántico, canonical, metadata, JSON-LD y sitemap.
|
|
27
|
+
- En tiendas, conservar rutas de producto y `product_variant_id` definidos por
|
|
28
|
+
el contrato del SDK.
|
|
29
|
+
- La estructura del catálogo puede venir del build; precio, disponibilidad y
|
|
30
|
+
límites se actualizan con live state/cart oficial.
|
|
31
|
+
- Montar proveedores globales una sola vez.
|
|
32
|
+
- Preview reutiliza los mismos componentes y cliente; no crear un storefront
|
|
33
|
+
paralelo para “parecerse” a Figma.
|
|
34
|
+
- Marketing se emite mediante el runtime/hook oficial, nunca desde clicks
|
|
35
|
+
duplicados escritos solo para una página.
|
|
36
|
+
|
|
37
|
+
Si el SDK no ofrece una capacidad, documentar la brecha. No llamar GraphQL o
|
|
38
|
+
endpoints internos como workaround.
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
# Desktop Bridge comunitario
|
|
2
|
+
|
|
3
|
+
“Figma Desktop Bridge” no es el MCP local oficial de Figma. Esta guía se refiere
|
|
4
|
+
al bridge incluido por el proyecto comunitario `southleft/figma-console-mcp`,
|
|
5
|
+
que conecta un plugin de Figma Desktop con su servidor MCP.
|
|
6
|
+
|
|
7
|
+
Usarlo solo cuando el MCP oficial no exponga datos locales necesarios, por
|
|
8
|
+
ejemplo determinadas variables o descripciones accesibles mediante Plugin API.
|
|
9
|
+
|
|
10
|
+
## Reglas de seguridad
|
|
11
|
+
|
|
12
|
+
- Preferir modo local.
|
|
13
|
+
- Revisar el repositorio y fijar una versión o commit aprobado; no depender de
|
|
14
|
+
`@latest` en automatizaciones reproducibles.
|
|
15
|
+
- Mantener Figma Desktop abierto y el plugin activo durante la extracción.
|
|
16
|
+
- No exponer ni redirigir a Internet los puertos locales `9223`–`9232`.
|
|
17
|
+
- Guardar el PAT en el almacén de secretos o entorno del cliente MCP, nunca en
|
|
18
|
+
`.mcp.json`, el repositorio, el snapshot o los logs.
|
|
19
|
+
- No habilitar cloud relay o escritura sin autorización explícita.
|
|
20
|
+
|
|
21
|
+
## Instalación orientativa
|
|
22
|
+
|
|
23
|
+
El proyecto upstream publica instrucciones actualizadas en:
|
|
24
|
+
|
|
25
|
+
- https://github.com/southleft/figma-console-mcp
|
|
26
|
+
- https://github.com/southleft/figma-console-mcp/blob/main/figma-desktop-bridge/README.md
|
|
27
|
+
|
|
28
|
+
Seguir la versión revisada de esas instrucciones para:
|
|
29
|
+
|
|
30
|
+
1. Instalar/configurar el servidor MCP comunitario.
|
|
31
|
+
2. Importar el manifest del plugin generado por el servidor.
|
|
32
|
+
3. Abrir el plugin dentro del archivo Figma.
|
|
33
|
+
4. Confirmar la conexión local del bridge.
|
|
34
|
+
5. Ejecutar una lectura mínima antes de extraer todas las páginas.
|
|
35
|
+
|
|
36
|
+
El comando `pnpm exec bacano-figma-web doctor` solo detecta puertos locales
|
|
37
|
+
compatibles. No demuestra que el plugin esté conectado, que el archivo sea el
|
|
38
|
+
correcto ni que el servidor sea confiable; esas tres condiciones deben
|
|
39
|
+
verificarse dentro del agente.
|
|
40
|
+
|
|
41
|
+
## Salida esperada
|
|
42
|
+
|
|
43
|
+
Normalizar la respuesta del bridge al mismo manifiesto definido en
|
|
44
|
+
`extraction-contract.md`. No permitir que detalles propios del bridge se filtren
|
|
45
|
+
a los componentes React ni a los contratos públicos de Bacano.
|
|
@@ -0,0 +1,127 @@
|
|
|
1
|
+
# Conexión oficial con Figma
|
|
2
|
+
|
|
3
|
+
Elegir preferiblemente el MCP remoto oficial. Requiere autorización de la
|
|
4
|
+
cuenta Figma, pero no mantener Figma Desktop abierto.
|
|
5
|
+
|
|
6
|
+
## MCP remoto oficial
|
|
7
|
+
|
|
8
|
+
Endpoint oficial:
|
|
9
|
+
|
|
10
|
+
```text
|
|
11
|
+
https://mcp.figma.com/mcp
|
|
12
|
+
```
|
|
13
|
+
|
|
14
|
+
### Codex CLI
|
|
15
|
+
|
|
16
|
+
```bash
|
|
17
|
+
codex mcp add figma --url https://mcp.figma.com/mcp
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
Completar OAuth cuando Codex lo solicite. En la aplicación Codex también puede
|
|
21
|
+
instalarse/conectarse el plugin oficial de Figma desde Plugins.
|
|
22
|
+
|
|
23
|
+
### Claude Code
|
|
24
|
+
|
|
25
|
+
Figma recomienda primero su plugin oficial:
|
|
26
|
+
|
|
27
|
+
```bash
|
|
28
|
+
claude plugin install figma@claude-plugins-official
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
Configuración manual equivalente:
|
|
32
|
+
|
|
33
|
+
```bash
|
|
34
|
+
claude mcp add --transport http figma https://mcp.figma.com/mcp
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
Usar `--scope user` únicamente si la conexión debe estar disponible en todos
|
|
38
|
+
los proyectos de ese usuario.
|
|
39
|
+
|
|
40
|
+
### VS Code y clientes MCP compatibles
|
|
41
|
+
|
|
42
|
+
```json
|
|
43
|
+
{
|
|
44
|
+
"inputs": [],
|
|
45
|
+
"servers": {
|
|
46
|
+
"figma": {
|
|
47
|
+
"url": "https://mcp.figma.com/mcp",
|
|
48
|
+
"type": "http"
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
No copiar tokens dentro del archivo. El cliente debe realizar OAuth.
|
|
55
|
+
|
|
56
|
+
### Cursor
|
|
57
|
+
|
|
58
|
+
Figma recomienda instalar su plugin oficial desde el chat del agente:
|
|
59
|
+
|
|
60
|
+
```text
|
|
61
|
+
/add-plugin figma
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
En otros agentes, comprobar primero que aparezcan en el catálogo de clientes
|
|
65
|
+
admitidos por Figma. No asumir que cualquier cliente MCP puede completar el
|
|
66
|
+
OAuth del servidor remoto.
|
|
67
|
+
|
|
68
|
+
## MCP local oficial de Figma Desktop
|
|
69
|
+
|
|
70
|
+
Usarlo cuando se necesite trabajar con la selección actual del archivo o el MCP
|
|
71
|
+
remoto no sea apropiado para la organización.
|
|
72
|
+
|
|
73
|
+
1. Actualizar y abrir Figma Desktop.
|
|
74
|
+
2. Abrir un archivo Design.
|
|
75
|
+
3. Activar Dev Mode con `Shift+D`.
|
|
76
|
+
4. En el panel Inspect, habilitar Desktop MCP.
|
|
77
|
+
5. Mantener Figma Desktop y el archivo abiertos.
|
|
78
|
+
|
|
79
|
+
Endpoint local:
|
|
80
|
+
|
|
81
|
+
```text
|
|
82
|
+
http://127.0.0.1:3845/mcp
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
Claude Code:
|
|
86
|
+
|
|
87
|
+
```bash
|
|
88
|
+
claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
Configuración genérica:
|
|
92
|
+
|
|
93
|
+
```json
|
|
94
|
+
{
|
|
95
|
+
"servers": {
|
|
96
|
+
"figma-desktop": {
|
|
97
|
+
"url": "http://127.0.0.1:3845/mcp",
|
|
98
|
+
"type": "http"
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
## Verificación dentro del agente
|
|
105
|
+
|
|
106
|
+
La CLI de Bacano no puede inspeccionar el registro MCP ni el OAuth privado de
|
|
107
|
+
todos los agentes. Dentro de la conversación, comprobar:
|
|
108
|
+
|
|
109
|
+
1. Que exista una herramienta Figma disponible.
|
|
110
|
+
2. Ejecutar `whoami` cuando el servidor la exponga.
|
|
111
|
+
3. Leer un frame pequeño mediante su enlace exacto.
|
|
112
|
+
4. Confirmar que el agente recibe contexto de diseño, no solo una captura.
|
|
113
|
+
|
|
114
|
+
El servidor remoto trabaja mediante un enlace exacto al frame/capa. La
|
|
115
|
+
selección actual sin enlace está disponible únicamente con el servidor Desktop.
|
|
116
|
+
|
|
117
|
+
Según Figma, los límites dependen del plan y asiento. Actualmente un asiento Dev
|
|
118
|
+
o Full en Professional admite hasta 200 lecturas diarias y 10 por minuto; Figma
|
|
119
|
+
puede modificar esos límites. Ante `429`, conservar el snapshot y reanudar
|
|
120
|
+
después, sin repetir nodos ya extraídos.
|
|
121
|
+
|
|
122
|
+
Fuentes oficiales:
|
|
123
|
+
|
|
124
|
+
- https://developers.figma.com/docs/figma-mcp-server/remote-server-installation/
|
|
125
|
+
- https://developers.figma.com/docs/figma-mcp-server/local-server-installation/
|
|
126
|
+
- https://developers.figma.com/docs/figma-mcp-server/tools-and-prompts/
|
|
127
|
+
- https://developers.figma.com/docs/figma-mcp-server/rate-limits-access/
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
# REST API como respaldo
|
|
2
|
+
|
|
3
|
+
Usar REST solamente cuando el usuario autorice crear un snapshot y el MCP
|
|
4
|
+
oficial/Desktop/Bridge no estén disponibles. REST entrega datos más crudos y no
|
|
5
|
+
reemplaza el contexto preparado por `get_design_context`.
|
|
6
|
+
|
|
7
|
+
## Autenticación
|
|
8
|
+
|
|
9
|
+
Figma admite OAuth y personal access tokens. Para una tarea local controlada,
|
|
10
|
+
inyectar el token mediante el entorno del proceso:
|
|
11
|
+
|
|
12
|
+
```bash
|
|
13
|
+
export FIGMA_ACCESS_TOKEN="..."
|
|
14
|
+
```
|
|
15
|
+
|
|
16
|
+
No escribirlo en `.env` versionado, argumentos de terminal persistidos,
|
|
17
|
+
manifiestos, código cliente, capturas o registros. `doctor` informa únicamente
|
|
18
|
+
si la variable existe; nunca lee ni muestra su valor.
|
|
19
|
+
|
|
20
|
+
## Extracción responsable
|
|
21
|
+
|
|
22
|
+
1. Obtener el file key desde el enlace autorizado.
|
|
23
|
+
2. Consultar solo páginas/nodos necesarios.
|
|
24
|
+
3. Registrar versión/fecha del archivo en el snapshot.
|
|
25
|
+
4. Descargar imágenes/assets una vez y conservar su procedencia.
|
|
26
|
+
5. Respetar `429` y encabezados de espera; no crear reintentos agresivos.
|
|
27
|
+
6. No guardar el JSON completo si contiene páginas ajenas al alcance.
|
|
28
|
+
|
|
29
|
+
El snapshot resultante debe seguir `extraction-contract.md`. Nunca incluir el
|
|
30
|
+
token ni URLs firmadas temporales como contrato permanente.
|
|
31
|
+
|
|
32
|
+
Fuentes oficiales:
|
|
33
|
+
|
|
34
|
+
- https://developers.figma.com/docs/rest-api/authentication/
|
|
35
|
+
- https://developers.figma.com/docs/rest-api/rate-limits/
|
|
@@ -0,0 +1,169 @@
|
|
|
1
|
+
# Flujo de contenido entre Figma, desarrollo y Bacano
|
|
2
|
+
|
|
3
|
+
Diseño, programación y gestión editorial pueden comenzar en cualquier orden.
|
|
4
|
+
La coordinación se hace mediante un blueprint de contenido; Figma no se
|
|
5
|
+
convierte en base de datos y los componentes no dependen de datos temporales.
|
|
6
|
+
|
|
7
|
+
## 1. Clasificar la propiedad de cada dato
|
|
8
|
+
|
|
9
|
+
Antes de crear campos o fixtures, asignar cada valor a una fuente:
|
|
10
|
+
|
|
11
|
+
| Información | Fuente habitual |
|
|
12
|
+
| --- | --- |
|
|
13
|
+
| Títulos, textos, banners y bloques editoriales | Bacano Content |
|
|
14
|
+
| Productos, variantes, precios y disponibilidad | Catálogo y live state del SDK |
|
|
15
|
+
| Legal, branding y configuración del sitio | `publicConfig` |
|
|
16
|
+
| Carrito, checkout, cliente y pedidos | Módulo correspondiente del SDK |
|
|
17
|
+
| Etiquetas permanentes de interfaz | Código e i18n del storefront |
|
|
18
|
+
|
|
19
|
+
No duplicar en Content información que ya tiene una fuente funcional. Un valor
|
|
20
|
+
visible en Figma no implica que sea editorial.
|
|
21
|
+
|
|
22
|
+
## 2. Elegir el punto de partida
|
|
23
|
+
|
|
24
|
+
### Figma primero
|
|
25
|
+
|
|
26
|
+
1. Extraer el contenido público visible y sus assets autorizados.
|
|
27
|
+
2. Proponer tipos, keys, campos y entradas en `content-blueprint.json`.
|
|
28
|
+
3. Crear fixtures locales que implementen el view model de la página.
|
|
29
|
+
4. Implementar y validar el diseño contra esos fixtures.
|
|
30
|
+
5. Entregar el blueprint al equipo de Content para crearlo en Bacano.
|
|
31
|
+
6. Conectar las keys reales sin modificar los componentes visuales.
|
|
32
|
+
|
|
33
|
+
### Bacano Content primero
|
|
34
|
+
|
|
35
|
+
1. Inventariar tipos, campos, keys y entradas existentes mediante contratos
|
|
36
|
+
públicos documentados.
|
|
37
|
+
2. Mapear los frames de Figma al contenido real.
|
|
38
|
+
3. Señalar incompatibilidades de estructura antes de programar.
|
|
39
|
+
4. Reutilizar las keys existentes; no crear aliases o estructuras paralelas
|
|
40
|
+
únicamente para hacer coincidir un frame.
|
|
41
|
+
|
|
42
|
+
### Fuentes en paralelo
|
|
43
|
+
|
|
44
|
+
Comparar el blueprint propuesto con Bacano. Clasificar cada sección como
|
|
45
|
+
`ready`, `missing`, `needs-mapping` o `blocked` y asignar responsable. No
|
|
46
|
+
sobrescribir datos reales ni asumir que el diseño más reciente autoriza una
|
|
47
|
+
migración editorial.
|
|
48
|
+
|
|
49
|
+
## 3. Blueprint de entrega
|
|
50
|
+
|
|
51
|
+
Guardar el archivo junto al snapshot:
|
|
52
|
+
|
|
53
|
+
```text
|
|
54
|
+
.bacano/designs/<proyecto>/content-blueprint.json
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
Estructura recomendada:
|
|
58
|
+
|
|
59
|
+
```json
|
|
60
|
+
{
|
|
61
|
+
"schemaVersion": 1,
|
|
62
|
+
"project": "mi-storefront",
|
|
63
|
+
"source": "figma",
|
|
64
|
+
"routes": [
|
|
65
|
+
{
|
|
66
|
+
"route": "/",
|
|
67
|
+
"sections": [
|
|
68
|
+
{
|
|
69
|
+
"sectionKey": "home-hero",
|
|
70
|
+
"figmaNodeId": "1:20",
|
|
71
|
+
"component": "HomeHero",
|
|
72
|
+
"ownership": "content",
|
|
73
|
+
"contentTypeKey": "home_hero",
|
|
74
|
+
"entryKey": "home-main-hero",
|
|
75
|
+
"status": "missing",
|
|
76
|
+
"fields": [
|
|
77
|
+
{
|
|
78
|
+
"key": "title",
|
|
79
|
+
"type": "text",
|
|
80
|
+
"required": true,
|
|
81
|
+
"sampleValue": "Compra para cada etapa"
|
|
82
|
+
}
|
|
83
|
+
],
|
|
84
|
+
"fixture": "fixtures/home-hero.json"
|
|
85
|
+
}
|
|
86
|
+
]
|
|
87
|
+
}
|
|
88
|
+
]
|
|
89
|
+
}
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
El blueprint es una propuesta y una evidencia de coordinación, no una orden de
|
|
93
|
+
escritura. No incluir IDs internos innecesarios, secretos, datos personales ni
|
|
94
|
+
respuestas crudas de GraphQL. Mantener keys estables y registrar cambios que
|
|
95
|
+
rompan el contrato.
|
|
96
|
+
|
|
97
|
+
## 4. Fixtures temporales
|
|
98
|
+
|
|
99
|
+
- Usar contenido real del diseño cuando esté disponible; evitar Lorem ipsum.
|
|
100
|
+
- Guardarlos en un único directorio y cargarlos mediante un adaptador explícito.
|
|
101
|
+
- Hacer que implementen el view model que consumen los componentes, no una
|
|
102
|
+
copia inventada de respuestas GraphQL ni de internals del SDK.
|
|
103
|
+
- Mantener el mapper de Bacano separado: `Content` real y fixture deben terminar
|
|
104
|
+
en el mismo view model.
|
|
105
|
+
- Incluir estados vacío, incompleto y contenido largo en pruebas separadas; no
|
|
106
|
+
convertirlos en el contenido principal de la página.
|
|
107
|
+
- No crear fixtures para precios, stock, autenticación, carrito, checkout,
|
|
108
|
+
pedidos o atribución.
|
|
109
|
+
|
|
110
|
+
Una forma válida de separación es:
|
|
111
|
+
|
|
112
|
+
```text
|
|
113
|
+
fixture ───────┐
|
|
114
|
+
├─> PageContentViewModel ─> componentes
|
|
115
|
+
Bacano mapper ─┘
|
|
116
|
+
```
|
|
117
|
+
|
|
118
|
+
El cambio de fuente debe ocurrir en el loader o repositorio de contenido, nunca
|
|
119
|
+
mediante condicionales repartidos por los componentes.
|
|
120
|
+
|
|
121
|
+
## 5. Entrega al equipo de Content
|
|
122
|
+
|
|
123
|
+
Entregar una tabla legible con:
|
|
124
|
+
|
|
125
|
+
- Ruta y sección visible.
|
|
126
|
+
- Tipo y entry key sugeridos.
|
|
127
|
+
- Campos, tipo, obligatoriedad y ejemplo tomado de Figma.
|
|
128
|
+
- Assets desktop/mobile, proporción y uso esperado.
|
|
129
|
+
- Estado y responsable.
|
|
130
|
+
- Dependencias entre componentes, listas y entradas.
|
|
131
|
+
|
|
132
|
+
El equipo de Content puede crear o ajustar la estructura desde Bacano. Si el
|
|
133
|
+
usuario autoriza que el agente materialice el blueprint, usar exclusivamente
|
|
134
|
+
`@bacano/sdk/content-management` y el token temporal generado desde **Conectar
|
|
135
|
+
agente**. Confirmar la empresa, inventariar primero, crear componentes antes de
|
|
136
|
+
sus consumidores y trabajar inicialmente en borrador. La skill no crea entradas,
|
|
137
|
+
importaciones ni cargas de media.
|
|
138
|
+
|
|
139
|
+
## 6. Cambio a Bacano real
|
|
140
|
+
|
|
141
|
+
Antes de retirar el fixture:
|
|
142
|
+
|
|
143
|
+
1. Confirmar que las keys reales coinciden con el blueprint.
|
|
144
|
+
2. Validar campos requeridos, media y contenido largo.
|
|
145
|
+
3. Comparar la página con Figma usando Content real.
|
|
146
|
+
4. Verificar preview si la capacidad está activa.
|
|
147
|
+
5. Eliminar el fixture del camino de ejecución, no necesariamente de los tests.
|
|
148
|
+
|
|
149
|
+
En producción no se permite fallback silencioso a fixtures. Si una página
|
|
150
|
+
depende de contenido temporal, reportar `❌ NO LISTO` con las rutas y secciones
|
|
151
|
+
afectadas. Los fixtures pueden conservarse como datos de pruebas unitarias o
|
|
152
|
+
visuales siempre que no entren en el bundle o loader de producción.
|
|
153
|
+
|
|
154
|
+
## 7. Automatización administrativa
|
|
155
|
+
|
|
156
|
+
La gestión de tipos pertenece al entrypoint separado
|
|
157
|
+
`@bacano/sdk/content-management`, no al cliente público del storefront. Antes de
|
|
158
|
+
escribir:
|
|
159
|
+
|
|
160
|
+
1. Pedir al usuario que genere un acceso temporal de 15, 30 o 60 minutos.
|
|
161
|
+
2. Guardarlo solo en el entorno local del proceso del agente.
|
|
162
|
+
3. Ejecutar `getContext()`, `listTypes()` y `getReferences()`.
|
|
163
|
+
4. Mostrar el plan y esperar aprobación cuando altere estructuras existentes.
|
|
164
|
+
5. Crear primero componentes y luego tipos consumidores, siempre en borrador.
|
|
165
|
+
6. Para archivar o eliminar, inspeccionar dependencias y confirmar nuevamente.
|
|
166
|
+
|
|
167
|
+
Nunca exponer el token en el navegador, commit, blueprint, salida de consola o
|
|
168
|
+
chat. Nunca convertir el blueprint en una importación implícita ni usar GraphQL
|
|
169
|
+
directo. Las entradas y media permanecen bajo gestión editorial en Bacano.
|
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
# Contrato de extracción normalizado
|
|
2
|
+
|
|
3
|
+
Cada fuente Figma debe producir el mismo checkpoint para que cambiar de MCP a
|
|
4
|
+
Desktop o REST no obligue a rehacer la implementación.
|
|
5
|
+
|
|
6
|
+
## Estructura sugerida
|
|
7
|
+
|
|
8
|
+
```text
|
|
9
|
+
.bacano/designs/<proyecto>/
|
|
10
|
+
├── manifest.json
|
|
11
|
+
├── tokens.json
|
|
12
|
+
├── content-blueprint.json
|
|
13
|
+
├── fixtures/
|
|
14
|
+
├── assets/
|
|
15
|
+
└── screenshots/
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
`content-blueprint.json` y `fixtures/` son necesarios únicamente cuando el
|
|
19
|
+
diseño contiene información editorial que todavía no existe o no está lista en
|
|
20
|
+
Bacano. Su contrato se define en
|
|
21
|
+
[content-workflow.md](content-workflow.md). No crear fixtures para catálogo,
|
|
22
|
+
precios, inventario, checkout, identidad ni otras fuentes funcionales del SDK.
|
|
23
|
+
|
|
24
|
+
No modificar `.gitignore` automáticamente. Preguntar o seguir la política del
|
|
25
|
+
proyecto antes de versionar imágenes o archivos grandes.
|
|
26
|
+
|
|
27
|
+
Una política opcional, sin secretos, puede guardarse en
|
|
28
|
+
`.bacano/designs/config.json`:
|
|
29
|
+
|
|
30
|
+
```json
|
|
31
|
+
{
|
|
32
|
+
"preferredSource": "figma-official",
|
|
33
|
+
"fallbackSources": [
|
|
34
|
+
"figma-desktop",
|
|
35
|
+
"desktop-bridge",
|
|
36
|
+
"rest-snapshot"
|
|
37
|
+
],
|
|
38
|
+
"fallbackMode": "ask",
|
|
39
|
+
"reuseCachedExtraction": true
|
|
40
|
+
}
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
`fallbackMode` debe ser `ask` por defecto. Usar `auto` únicamente cuando el
|
|
44
|
+
usuario haya autorizado expresamente todas las fuentes declaradas.
|
|
45
|
+
|
|
46
|
+
## Manifiesto mínimo
|
|
47
|
+
|
|
48
|
+
```json
|
|
49
|
+
{
|
|
50
|
+
"schemaVersion": 1,
|
|
51
|
+
"project": "mi-storefront",
|
|
52
|
+
"source": {
|
|
53
|
+
"adapter": "figma-official",
|
|
54
|
+
"fileKey": "opcional",
|
|
55
|
+
"fileVersion": "opcional",
|
|
56
|
+
"extractedAt": "2026-08-24T12:00:00.000Z"
|
|
57
|
+
},
|
|
58
|
+
"capabilities": {
|
|
59
|
+
"variables": "partial",
|
|
60
|
+
"components": "available",
|
|
61
|
+
"autoLayout": "available",
|
|
62
|
+
"responsiveFrames": "partial",
|
|
63
|
+
"interactions": "partial"
|
|
64
|
+
},
|
|
65
|
+
"pages": [
|
|
66
|
+
{
|
|
67
|
+
"route": "/",
|
|
68
|
+
"name": "Home",
|
|
69
|
+
"status": "extracted",
|
|
70
|
+
"desktop": { "nodeId": "1:2", "url": "https://figma.com/..." },
|
|
71
|
+
"mobile": { "nodeId": "1:3", "url": "https://figma.com/..." }
|
|
72
|
+
}
|
|
73
|
+
],
|
|
74
|
+
"assumptions": []
|
|
75
|
+
}
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
Valores de `adapter`:
|
|
79
|
+
|
|
80
|
+
- `figma-official`: MCP remoto oficial.
|
|
81
|
+
- `figma-desktop`: MCP local oficial.
|
|
82
|
+
- `desktop-bridge`: bridge comunitario.
|
|
83
|
+
- `rest-snapshot`: REST autorizado.
|
|
84
|
+
|
|
85
|
+
Capacidades: `available`, `partial` o `missing`.
|
|
86
|
+
Estado de página: `pending`, `extracted`, `implemented` o `validated`.
|
|
87
|
+
|
|
88
|
+
Cada página requiere `route`, `name`, `status` y al menos un frame desktop o
|
|
89
|
+
mobile con `nodeId` o `url`. No guardar secretos ni respuestas MCP completas.
|
|
90
|
+
|
|
91
|
+
## Estrategia de consultas
|
|
92
|
+
|
|
93
|
+
- Obtener metadata suficiente para construir el mapa de páginas.
|
|
94
|
+
- Extraer cada frame principal una vez.
|
|
95
|
+
- Solicitar subnodos solo si el contexto principal es incompleto.
|
|
96
|
+
- Reutilizar tokens/assets comunes entre páginas.
|
|
97
|
+
- Al reanudar, comparar `fileVersion` y repetir únicamente nodos cambiados.
|
|
98
|
+
- Conservar las inferencias en `assumptions` para revisión humana.
|
|
99
|
+
|
|
100
|
+
Para sitios medianos, una extracción organizada suele requerir decenas de
|
|
101
|
+
lecturas, no una consulta por cada capa. La cifra exacta depende de la calidad y
|
|
102
|
+
estructura del archivo, no únicamente del número de páginas.
|