¿Necesito programar?

No. Vas a escribir unos pocos comandos (el capítulo 2 parte desde abrir la terminal) y a revisar mucho, con las herramientas que trae el kit.

¿Funciona en Windows?

Sí: Claude Code se instala con PowerShell o en WSL. Los hooks son scripts de bash y piden Git for Windows y jq. El kit se probó en macOS.

¿Qué pasa cuando Claude Code cambie?

Cada capítulo cita sus fuentes oficiales y los skills son texto que se corrige editando. Las actualizaciones te llegan por Gumroad.

¿Por qué Astro y no Next.js?

Astro genera sitios estáticos que Cloudflare sirve gratis. Next.js en Cloudflare está en transición y enseñarlo hoy envejecería en semanas.

¿Puedo pedir reembolso?

Sí. Si en los 14 días siguientes a tu compra el kit no te sirve, escríbeme a hola@carloslagos.cl y te devuelvo el dinero. No necesitas explicar por qué.

Kit para diseñadores · v1.0

Del Figma a producción con Claude Code

Una guía en español y un pack de herramientas para Claude Code: de un frame de Figma a un sitio publicado, accesible y fiel al diseño.

US$ 29

Precio de lanzamiento hasta el domingo 25 de octubre de 2026. Desde el lunes 26 de octubre, US$ 39.

Comprar en Gumroad

El pago lo procesa Gumroad. Si el kit no te sirve, te devuelvo el dinero dentro de 14 días.

De dónde sale

Es el método que usé para llevar a producción, con Claude Code y sin equipo de ingeniería, un marketplace de avisos clasificados en Chile: cuentas, fotos, mensajes, pagos y moderación. Del primer commit a tener pagos con dinero real funcionando en producción pasaron 18 días.

Lo difícil no fue construir rápido; fue mantener la calidad mientras lo hacía. El kit es esa parte: gira en torno al MCP oficial de Figma y suma lo que viene antes del código (tu archivo y tus tokens) y después (verificación, accesibilidad, textos y publicación).

Qué incluye

10: capítulos de guía, 63 páginas A4 en PDF y HTML
14: skills para Claude Code, empaquetados como plugin
6: subagentes que revisan sin haber escrito el código
3: hooks: tuteo, archivos sensibles y confirmación antes de publicar
5: plantillas de CLAUDE.md para distintos tipos de proyecto
2: proyectos de partida en Astro, listos para Cloudflare

Pieza por pieza

La guía: Diez capítulos y una introducción, con capturas reales: qué puede y qué no puede hacer un diseñador con Claude Code, setup en 30 minutos, el CLAUDE.md de un diseñador, de Figma a código, QA visual y accesibilidad, UX writing en español, publicar gratis en Cloudflare, un agente que revisa tu sitio cada semana y un caso real.
Skills: Figma a código, tokens de Figma a Tailwind, componentes, QA visual, accesibilidad WCAG 2.2, contraste, responsive, rendimiento, UX writing en español, SEO, publicación en Cloudflare, revisión semanal, CLAUDE.md y git sin miedo.
Subagentes: Crítica de diseño, fidelidad con Figma, accesibilidad, copy, tokens y uno que te explica el código con analogías de Figma.
Hooks: Uno revisa el tuteo después de cada edición, otro protege los archivos sensibles y el tercero pide tu confirmación antes de cualquier publicación real.
Plantillas: CLAUDE.md para una landing, un portafolio, una app, un design system y el sitio de un cliente.
Proyectos: Una landing y un portafolio en Astro con Tailwind v4, tokens, pruebas de accesibilidad y la configuración de Cloudflare.
Extras: Checklist de lanzamiento y plantilla de GitHub Actions para la revisión semanal.

Cada pieza se probó al menos una vez sobre un sitio con errores puestos a propósito. Los resultados vienen en el kit.

Para quién

Es para ti

Si diseñas en Figma, has visto código aunque no programes a diario y quieres publicar lo que diseñas con tokens, componentes y accesibilidad.

No es para ti

Si quieres aprender a programar desde cero, si esperas una app compleja en un fin de semana sin revisar nada o si buscas apps nativas para iOS: el kit es web primero.

Qué necesitas

Claude Pro: US$ 20 al mes, o US$ 17 pagando el año. Incluye Claude Code; el plan gratis no sirve.
Figma: Con el plan gratis o un asiento View o Collab, el MCP de Figma da hasta 20 llamadas al mes: alcanza para probar, no para trabajar a diario. Para eso, un asiento Dev o Full de un plan pagado (el Dev parte en US$ 12 al mes). Sin MCP, el kit sirve igual con tus variables copiadas a mano.
Node.js 22.22+ y Git: Gratis.
Cloudflare: Plan gratis: los archivos estáticos se sirven sin costo.

Antes de comprar

Puedes probar el método sin pagar nada.

3 skills del kit, gratis y con licencia MIT, en GitHub

Y las guías de esta sección:

Preguntas frecuentes

¿Necesito programar?: No. Vas a escribir unos pocos comandos (el capítulo 2 parte desde abrir la terminal) y a revisar mucho, con las herramientas que trae el kit.
¿Funciona en Windows?: Sí: Claude Code se instala con PowerShell o en WSL. Los hooks son scripts de bash y piden Git for Windows y jq. El kit se probó en macOS.
¿Qué pasa cuando Claude Code cambie?: Cada capítulo cita sus fuentes oficiales y los skills son texto que se corrige editando. Las actualizaciones te llegan por Gumroad.
¿Por qué Astro y no Next.js?: Astro genera sitios estáticos que Cloudflare sirve gratis. Next.js en Cloudflare está en transición y enseñarlo hoy envejecería en semanas.
¿Puedo pedir reembolso?: Sí. Si en los 14 días siguientes a tu compra el kit no te sirve, escríbeme a hola@carloslagos.cl y te devuelvo el dinero. No necesitas explicar por qué.

Licencia

Para 1 persona: úsalo en tus proyectos y en los de tus clientes, y modifícalo. No puedes revender ni redistribuir el kit, la guía ni el pack.

Producto independiente. No está afiliado a Anthropic ni a Figma. Claude y Claude Code son marcas de Anthropic; Figma es marca de Figma, Inc.

Comprar en Gumroad · US$ 29