wd
willy-design
por WebFactoryRD
v1.0 · MIT · open source

Pipeline de diseño
para landings RD.

Skill open-source para Claude Code. 7 sub-skills atomizadas + 12 familias visuales RD-específicas + bloques drop-in para Polar, WhatsApp, RD$/USD y Telegram. Construido por una agencia, para agencias.

Tailwind v4 shadcn/ui Playwright MCP Polar checkout Vercel deploy

Por qué existe

Construido para mercado RD
no para Bay Area.

Mobile-first

3G antillano real

Performance budget LCP <2.5s en 4G, JS <100KB. Lighthouse gate antes de cada deploy.

WhatsApp-first

CTA WhatsApp embebido

Mensaje pre-rellenado, sticky mobile, flotante desktop, tracking GA4/Meta. El email casi no convierte en RD.

Compliance RD

Ley 172-13 + INDOTEL

Privacy + términos auto-inyectados. Schema.org por rubro. RNC visible. Disclaimer médico/legal cuando aplica.

Pago RD-friendly

Polar + DOP/USD toggle

Checkout drop-in, webhook a Telegram, split 50/50, contra-entrega. Pesos y dólares con preferencia persistente.

Review autónomo

Rubric 7×25 + Playwright

Captura screenshots reales 3 viewports, evalúa contra 25 criterios objetivos, itera fixes hasta score ≥8/10.

MIT

Uso comercial libre

Úsalo con tus clientes pagos, fork, modifica, vende. Solo mantén el copyright. Sin restricciones.

Pipeline 7 fases

7 sub-skills atomizadas
1 orquestador.

Cada una invocable sola. La orquestadora las encadena. No es un mega-skill monolítico.

1
wd-grill

Question form pre-flight

6 preguntas determinísticas en español: rubro · audiencia · ticket · tono · hook · pago. Sin estas respuestas el pipeline NO arranca. Anti-AI-slop gate.

2
wd-brief

Brief comercial completo

Avatar dominicano específico, top 3 dolores con frases reales, promesa central de 1 línea, 3 elementos de prueba verificables, oferta exacta, lista de prohibido decir.

3
wd-ia

Information Architecture

8-14 secciones ordenadas por funnel (atención → interés → deseo → acción), micro-copy por CTA, jerarquía tipográfica, decisión de qué bloques drop-in usar.

4
wd-tokens

Design tokens Tailwind v4

Paleta derivada de la familia DESIGN.md elegida, tipografía, escala spacing/radius/shadow/motion. Output tokens.css con @theme block listo. Dark mode incluido. Reduced-motion respetado.

5
wd-build

HTML/JSX scaffold

HTML semántico WCAG 2.1 AA, microinteracciones en CSS puro (sin GSAP), schema.org por rubro, OG meta tags dinámicos. Bloques drop-in inyectados en su sitio correcto.

6
wd-review

Design review autónomo

Playwright MCP captura screenshots a 375 / 768 / 1440 px. Pasa cada uno por rubric 7 dimensiones × 25 sub-criterios. Aplica fixes mínimos automáticamente. Itera hasta score ≥8/10.

7
wd-ship

Deploy a producción

Repo GitLab privado · Vercel deploy con custom domain · Cloudflare DNS · Polar webhook → Telegram notifier · validación HTTP 200 + SSL · reporte final con todos los URLs.

12 familias visuales

Cada rubro
tiene su lenguaje.

Un colmadón no se ve como Stripe. Una clínica no se ve como Linear. Cada familia trae paleta, tipografía, copy aprobado, schema.org y compliance del rubro.

candy-suplementos

E-commerce health, productos naturales. Copy emocional permitido en marca propia. Disclaimer médico obligatorio.

Plus Jakarta Sans · Inter

coopnama-financiero

Cooperativas, seguros, financieros B2C. IDECOOP visible, calculadora préstamo, trust signals.

Lexend · Inter

capcana-luxury

Inmobiliaria luxury caribe. Aspiracional sereno, fotografía editorial, dorado champán mate.

Cormorant Garamond · Inter

clinica-salud

Médicos, dentistas, fisio. Cédula INTEC visible, agenda online, disclaimer médico.

Plus Jakarta Sans · Inter

restaurante-rd

Restaurantes, comida criolla, cafés. Imagen del plato es el sitio. Reservas + delivery zones.

Playfair Display · Inter

abogado-bufete

Abogados, notarios. Cédula CARD visible, casos anonimizados, disclaimer abogado-cliente.

Lora · Inter

+ 6 familias en roadmap v2

colmadon-moderno iglesia-comunidad taller-mecanico gimnasio-fitness seguros-rd educacion-cursos

5 bloques drop-in

Plug-and-play para tu stack.

whatsapp/

CTA WhatsApp

Botón + sticky-mobile + flotante. Mensaje pre-rellenado. Tracking GA4/Meta.

$
polar/

Checkout Polar

Botón con price display, ahorro, trust badges, tracking InitiateCheckout.

RD
rd-price/

Toggle DOP/USD

Pesos y dólares con preferencia persistente en localStorage.

rd-map/

Google Maps RD

Embed con dirección + "Cómo llegar" deep-link a Google Maps app.

telegram/

Polar webhook

Vercel serverless verifica firma Standard Webhooks y notifica al Telegram.

+v2

Más bloques en camino

Azul.do · Stripe · MJML email · Mailerlite · Calendly · Sanity CMS

Instalación

3 comandos. 30 segundos.

1. Clonar

# clonar el repo
git clone https://github.com/Marte1978/willy-design.git

2. Copiar las skills al directorio Claude Code

# macOS / Linux / Windows MSYS
cp -r willy-design/skills/* ~/.claude/skills/

# asegurar que designs / blocks / rubrics estén accesibles
cp -r willy-design/{designs,blocks,rubrics} ~/.claude/skills/willy-design/

3. Reabrir Claude Code y usar

/willy-design hazme una landing para "Clínica Sonrisa Plus"

Requisitos

  • Claude Code instalado
  • Cuenta Vercel (free tier sirve)
  • Cuenta Cloudflare con dominio configurado (opcional para el subdominio webfactoryrd.com)
  • Cuenta Polar (opcional, solo si vendes con checkout)
  • Bot Telegram (opcional, solo para notificaciones)

FAQ

Preguntas frecuentes

¿En qué se diferencia de huashu-design?
huashu-design es un mega-skill monolítico con 20 filosofías de diseño abstractas. willy-design es atomizado en 7 sub-skills, optimizado para mercado RD (compliance, pago, mapas, copy en español natural), trae integración drop-in con Polar/WhatsApp, y usa rubric medible 7×25 con Playwright real en lugar de evaluación subjetiva. Y la licencia es MIT — uso comercial libre.
¿Puedo usar esto en clientes pagos?
Sí. Licencia MIT — úsalo libremente con clientes, fork, modifica, hasta vende derivados. Solo mantén el copyright en el archivo LICENSE.
¿Funciona fuera de RD?
Sí, pero está optimizado para mercado RD. Si vas a usarlo en otro mercado LATAM, considera reemplazar la familia de DESIGN.md para tu contexto. Los bloques drop-in (Polar, WhatsApp, RD-price, RD-map) son configurables — solo cambia los IDs/números/coordenadas.
¿Necesito Vercel obligatoriamente?
No. wd-ship hace deploy a Vercel por default, pero puedes adaptar para Netlify, GitLab Pages o tu propio VPS. El bloque telegram/polar-webhook.js está escrito para Vercel serverless functions — para otra plataforma adapta el handler.
¿Puedo agregar mi propia familia DESIGN.md?
Sí. Copia el formato de cualquiera de las 6 incluidas (paleta, tipografía, patrones, microcopy, schema.org, bloques, compliance) y agrégala a designs/. PRs bienvenidos en GitHub para incluirla en futuras versiones.
¿Cómo se compara contra contratar un diseñador?
No reemplaza a un buen diseñador para proyectos premium. Es para servicios productizados: cuando vendes "página web en 24h por US$200" y necesitas un pipeline ejecutable. Para una marca con identidad rica, presupuesto y tiempo, contrata un humano.

Construido por una agencia,
para agencias.

WebFactoryRD lo usa cada semana en producción. Si te ahorra 10 horas, vale el clone.