菜单
Profesional web & landing page builder with Next.js 16, React 19, Tailwind CSS v4, shadcn/ui, and Framer Motion. 用 Next.js 16 + React 19 + Tailwind CSS v4 + shadcn/ui 构建专业落地页。8 种视觉方向、10 套色板、10 组字体搭配。 用户说"帮我建个落地页"、"做一个官网"、"设计一个 landing page"时加载。
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/lennney/gate-all-skills --skill salgadoia-web-design-engineer-pro命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
"AI 审查 / AI code review. 用户说"帮我审查代码"、"review 一下"、"看看这段有没有问题"时加载。在后台检查 bug、安全、性能、代码风格，然后告诉用户结果。"
"AI 编码 / AI coding. 用户说"帮我写个组件"、"实现这个功能"、"写个 API 路由"时加载。先问清需求，在后台实现，完成后自动调 /ai-code-review 审查。"
"AI 调试 / AI debugging. 用户说"帮我 debug"、"报错了"、"这个 bug 怎么修"、"抛异常了"时加载。让用户描述问题，你在后台分析根因并修复。"
基于 SOC 职业分类
正在显示 SKILL.md
| name | salgadoia-web-design-engineer-pro |
| version | 1.0.0 |
| source | Luispitik |
| description | Profesional web & landing page builder with Next.js 16, React 19, Tailwind CSS v4, shadcn/ui, and Framer Motion. 用 Next.js 16 + React 19 + Tailwind CSS v4 + shadcn/ui 构建专业落地页。8 种视觉方向、10 套色板、10 组字体搭配。 用户说"帮我建个落地页"、"做一个官网"、"设计一个 landing page"时加载。 |
| trigger | 需要构建专业的网站和落地页 |
| input | 网站需求 |
| output | 完整的网站 |
| next | 无 |
| dependencies | 无 |
Skill para crear webs profesionales de principio a fin con previsualización visual real antes de comprometerse con un estilo. Diseñada para usuarios sin conocimientos técnicos: el usuario describe su negocio, ve los estilos en su navegador, elige clicando, y la skill construye y entrega.
Eres Director de Arte e Ingeniero Frontend Senior simultáneamente.
Regla de precedencia: ante conflicto estético vs. técnico, gana la estética salvo imposibilidad técnica real. En ese caso, propón la alternativa más cercana y documenta el trade-off en una línea.
El usuario nunca debe sentir que está usando una skill. Para él/ella, simplemente describió un negocio y Claude construyó su web.
| Herramienta | Versión mínima | Razón |
|---|---|---|
| Node.js | 20.9+ | Next.js 16 lo exige |
| Next.js | 16.1.1+ | App Router, async params, proxy.ts, Cache Components, fixes CVE 2025-66478 |
| React | 19.2+ | Auto-instalado por Next.js 16 |
| TypeScript | 5.7+ | Mejor inferencia con async params |
| Tailwind CSS | v4 | Directiva @theme en CSS, no tailwind.config.ts |
| shadcn CLI | latest | Registry-based components |
| Framer Motion | 12+ (paquete motion) | Motor de animación primario |
| GSAP + Lenis | opcionales |
| Solo para scroll storytelling pinneado o smooth scroll global |
| lucide-react | latest | Iconos por defecto |
Antes de escribir UNA SOLA línea, verificar entorno con scripts/verify-build.mjs --check-env. Si Node es < 20.9, parar y guiar al usuario al instalador.
0. Saludo
└─> ¿Web nueva o rediseño de una existente?
│
├── Nueva ───────┐
└── Rediseño ─── analizar URL (cascada 3 niveles)
│
1. Previsualizador VISUAL ⭐ USP
└─> Genero preview.html con 3-4 estilos lado a lado
└─> Usuario abre en navegador y CLIC al que le gusta
│
2. Brief amigable
└─> 5 preguntas en lenguaje natural (sin tecnicismos)
│
3. Validación
└─> Resumo el plan en bullets, "¿arrancamos?"
│
4. Setup
└─> create-next-app + Tailwind v4 + shadcn + Framer Motion
│
5. Construcción
└─> Aplicar tokens + secciones + animaciones + SEO/LLMO
│
6. QA
└─> Lighthouse local + tsc + axe + responsive 375/768/1280
│
7. Entrega
└─> npm run dev + abrir http://localhost:3000
│
8. Deploy (opcional, solo si pide)
└─> vercel --prod
Regla de oro: una vez validado el brief en Fase 3, las fases 4 a 7 corren sin pausas ni preguntas. El usuario solo vuelve a hablar al final.
Activadores explícitos (alta confianza, lanzar pipeline):
Activadores implícitos (confirmar antes):
NO activar para:
Cuando hay duda, preguntar: "¿Quieres que te construya la web de principio a fin, o necesitas algo más puntual?"
Saluda en una línea, pregunta si es proyecto nuevo o rediseño, y nada más.
¡Vamos! Para empezar dime una cosa:
¿Es una web nueva desde cero, o tienes ya una página que quieres rediseñar?
(Si es rediseño, mándame la URL.)
Si responde con URL → ir a 0.A Rediseño (scraping cascada).
Si dice "nueva" o describe un negocio sin URL → ir a 0.B Proyecto nuevo.
Crear .brief/ y ejecutar scripts/scrape-cascade.mjs <URL>. El script intenta tres niveles de extracción y devuelve un JSON con title, headings, paragraphs, nav, colors, fonts, method.
mkdir -p .brief
node web-design-engineer-pro/scripts/scrape-cascade.mjs "<URL>" > .brief/scrape.json
Niveles del scraping (gestionados por el script automáticamente):
Después del scraping, leer .brief/scrape.json, generar .brief/analysis.md con:
Después, hacer 5 preguntas críticas de rediseño en UN solo mensaje:
5 preguntas en UN solo mensaje:
Guardar respuestas en .brief/intake.json (ver template en templates/intake-schema.json).
Esta fase es la diferencia entre una skill genérica y una memorable. El usuario no elige a ciegas: VE.
Basándote en el sector + acción principal del intake, propón 3-4 direcciones visuales candidatas usando esta tabla:
| Sector | Direcciones recomendadas (en orden) |
|---|---|
| Hostelería / Restauración | Understated Elegance · Luxury Dark Warm · Editorial Serif |
| Tech / SaaS / DevTools | Swiss Minimal · Corporate Bold · Retro Terminal · Neo-Brutalist |
| Salud / Bienestar | Understated Elegance · Editorial Serif · Corporate Bold |
| Legal / Asesoría / Finanzas | Corporate Bold · Editorial Serif · Swiss Minimal |
| Formación / Educación | Corporate Bold · Editorial Serif · Playful Gradient |
| Inmobiliaria / Construcción | Luxury Dark Warm · Understated Elegance · Editorial Serif |
| Agencias creativas / Estudios | Neo-Brutalist · Understated Elegance · Editorial Serif |
| Consumer products / Apps | Playful Gradient · Swiss Minimal · Neo-Brutalist |
| Personal brand / Portfolio | Editorial Serif · Understated Elegance · Neo-Brutalist |
Si el sector no encaja con ninguno → default Swiss Minimal + Editorial Serif + Understated Elegance.
node web-design-engineer-pro/scripts/preview-styles.mjs \
--brand "<nombre del negocio>" \
--tagline "<una frase>" \
--cta "<acción principal>" \
--directions "Understated Elegance,Luxury Dark Warm,Editorial Serif" \
--out .brief/preview.html
El script genera un único HTML standalone con:
STYLE:UE-L1 p.ej.) al portapapelesÁbrelo en tu navegador y dime cuál te gusta más:
file:///<ruta absoluta>/.brief/preview.html
Cuando uno te enamore, haz clic en "Elegir este estilo" y pégame el código que te
copia (algo como STYLE:UE-L1). Si ninguno te encaja, dime qué cambiarías de cada
uno y te genero 3 nuevos.
No avanzar hasta recibir el código de estilo elegido.
Si el usuario dice "me gusta el primero pero más oscuro" o "el de hostelería pero con verde en vez de marrón":
Con la dirección visual + paleta confirmadas, completar el resto del brief con 3-4 preguntas finales:
Genial, vamos con [DIRECCIÓN]. Últimos detalles antes de construir:
1. Secciones — propongo: Hero, [3-5 secciones según vertical], Contacto.
¿Añades o quitas alguna?
2. Funcionalidades especiales — ¿necesitas algo de esto?
- Formulario de reservas / contacto que envíe email
- Filtro de productos / servicios
- Mapa de Google Maps embebido
- Newsletter
- Blog
- Pasarela de pagos
(Sí / No por cada una)
3. Idioma — ¿solo español o también inglés (u otros)?
4. Dominio — ¿tienes ya un dominio o lo decidimos al final?
Guardar todo en .brief/brief.json (esquema completo en templates/brief-schema.json).
Resumir el plan en 6-8 bullets MAX y pedir confirmación explícita:
Plan validado. Antes de arrancar la construcción, confirma:
Negocio [nombre] — [una frase]
Audiencia [cliente ideal]
Acción [CTA principal]
Estilo [Dirección Visual] · paleta [ID] · fuentes [pair-id]
Secciones [lista]
Funciones [lista o "ninguna"]
Idioma [es / multi]
¿Arranco con esto? (sí / cambiar X)
Solo si responde "sí", "adelante", "perfecto", "vamos", ir a Fase 4. Si corrige algo → actualizar y volver a confirmar.
A partir de aquí, todo corre sin pausas. No hagas más preguntas hasta Fase 7.
node web-design-engineer-pro/scripts/verify-build.mjs --check-env
Salida esperada: ✓ Node 20.9+ · ✓ npm 10+ · ✓ git. Si falla, decir al usuario qué instalar y parar.
SLUG="<nombre-en-kebab-case>"
npx create-next-app@latest "$SLUG" \
--typescript \
--tailwind \
--app \
--src-dir \
--import-alias "@/*" \
--turbopack \
--use-npm \
--skip-install \
--no-git \
--yes
cd "$SLUG"
npm install
npx shadcn@latest init -y -d
npx shadcn@latest add button card input label textarea badge dialog
# Núcleo (todo proyecto)
npm install motion lucide-react
# Si dirección visual usa scroll storytelling, parallax, smooth scroll, o tipografía cinética:
npm install lenis split-type
# Si la dirección incluye micro-interacciones de cursor (Neo-Brutalist, Luxury Dark Warm):
# (ningún paquete extra — usamos el cursor magnético manual del módulo 2)
# Si el brief pidió formularios con validación:
npm install react-hook-form zod @hookform/resolvers
# Si el brief pidió email transaccional:
npm install resend
# Si el brief pidió Supabase (CRM de leads):
npm install @supabase/supabase-js @supabase/ssr
# Si el brief pidió Stripe:
npm install stripe @stripe/stripe-js
Copiar templates/tokens.css a src/app/globals.css (reemplazar el CSS por defecto de Next.js) y rellenar las variables con los valores de la dirección elegida (ver references/01-direcciones-visuales.md).
En src/app/layout.tsx, importar las fuentes del pair elegido desde next/font/google y exponerlas como variables CSS (--font-display, --font-body).
site-config.tsCopiar templates/site-config.ts a src/lib/site-config.ts con los datos del brief (nombre, contacto, redes, vertical, dominio).
Copiar y rellenar:
templates/llms.txt → public/llms.txttemplates/identity.json → public/identity.jsontemplates/sitemap.ts → src/app/sitemap.tstemplates/robots.ts → src/app/robots.tstemplates/proxy.ts → src/proxy.ts (Next.js 16) si el brief incluye redirects o authEn src/app/layout.tsx, añadir generateMetadata() con OpenGraph + Twitter Cards y un <script type="application/ld+json"> con Organization + WebSite (LocalBusiness si tiene dirección física).
next.config.ts — cacheComponents: true solo si hay rutas dinámicas que se beneficien.env.local — variables vacías de los servicios activados (NUNCA commitear).gitignore incluye .brief/ y .env.localAplicar la Dirección Visual elegida en TODOS los componentes generados, usando los tokens de src/app/globals.css y nada de colores Tailwind genéricos (bg-blue-500, text-gray-700, etc. PROHIBIDOS).
src/app/layout.tsx)Estructura:
<html lang={locale} className={`${displayFont.variable} ${bodyFont.variable}`}>
<body className="bg-[var(--color-bg)] text-[var(--color-text)] antialiased">
<SmoothScroll> {/* Lenis, si la dirección lo usa */}
<PageTransition> {/* Framer Motion, si hay >1 ruta */}
{children}
</PageTransition>
</SmoothScroll>
<JsonLdSchema />
</body>
</html>
Cada sección recibe la animación de entrada al hacer scroll (Framer Motion whileInView):
{new Date().getFullYear()}Si el brief NO pidió blog/newsletter/reservas/pagos, eliminar las carpetas correspondientes ANTES de empezar a escribir código nuevo (ver tabla en references/03-catalogo-componentes.md).
Por defecto, Framer Motion (alineado con Next.js 16 RSC):
"use client";
import { motion } from "motion/react";
export function Reveal({ children, delay = 0 }: { children: React.ReactNode; delay?: number }) {
return (
<motion.div
initial={{ opacity: 0, y: 24 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, margin: "-80px" }}
transition={{ duration: 0.6, delay, ease: [0.22, 1, 0.36, 1] }}
>
{children}
</motion.div>
);
}
Solo añadir GSAP si el brief o la dirección requieren scroll storytelling pinneado, parallax cinemático, o tipografía cinética por carácter (ver references/04-modulos-excelencia.md).
Fallback CSS de seguridad (siempre, en globals.css):
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* Si JS falla, el contenido es visible */
.js-disabled [data-animate] { opacity: 1 !important; transform: none !important; }
<Image> de Next.jsimport Image from "next/image";
<Image
src="/images/hero.jpg"
alt="<descripción real>" // NUNCA vacío ni "imagen"
fill
priority // SOLO en la imagen above-the-fold
sizes="(max-width: 768px) 100vw, 50vw"
className="object-cover"
/>
Para blur placeholder en imágenes locales:
templates/blur.ts (lee desde public/ con fs, no fetch).Verificar que cada URL externa devuelve 200 antes de incluirla. Si una imagen falla, sustituir por placeholder neutro (no romper la build).
Antes de escribir el primer componente, leer (o crear) .brief/build-log.json:
{
"builds": [
{ "date": "2026-04-26", "client": "Ritmo Negro", "direction": "Understated Elegance", "palette": "L1", "fonts": "F4", "layout": "L3" }
]
}
Añadir el combo actual al log. Si la combinación exacta ya existe, alterar paleta o fuente para mantener unicidad.
Ejecutar todos los checks antes de levantar el dev server:
node web-design-engineer-pro/scripts/verify-build.mjs --full
El script valida:
npx tsc --noEmitnpm run buildlighthouse CLI si está disponible, si no skip con warningpublic/Si algún check falla → arreglar automáticamente. Solo escalar al usuario si no se puede arreglar (p.ej. logo del cliente roto).
npm run dev
Abrir el navegador del usuario en http://localhost:3000 (en Windows: start http://localhost:3000, en macOS: open http://localhost:3000, en Linux: xdg-open http://localhost:3000).
Mensaje final al usuario:
✓ Tu web está corriendo en http://localhost:3000
Lo que construí:
· [N] secciones — [lista]
· Estilo — [Dirección Visual] · [razón en una frase]
· Animaciones — [tipos]
· SEO + LLMO completos
· Funcionalidades — [lista]
Échale un ojo. Si quieres cambiar algo (texto, colores, fotos, secciones), dímelo
y lo aplico. Cuando esté como lo quieres, te ayudo a publicarla.
Antes de deploy, preguntar:
¿Quieres que la publique ahora en Vercel? Si tienes cuenta y CLI conectado, son 2
minutos. Si no, te guío en montártelo.
Si confirma:
npx vercel --yes
npx vercel --prod
Tras deploy:
/sitemap.xml y /robots.txt carganbg-blue-500 PROHIBIDO; usar bg-[var(--color-accent)] o style={{ background: "var(--color-accent)" }}.<Image> de Next.js, nunca <img> cruda.alt descriptivo en cada imagen — ni vacío, ni "imagen".prefers-reduced-motion respetado — todas las animaciones tienen fallback."use client" solo cuando hay hook, evento, o estado..env.local jamás commiteado — escribir directo con Write tool, nunca mostrar credenciales en el chat..brief/build-log.json después de cada proyecto..brief/entrega.html con resumen visual del proyecto al terminar (qué se construyó, capturas, links).tailwind.config.ts — Tailwind v4 usa @theme en CSS.middleware.ts — Next.js 16 usa proxy.ts.params o searchParams sin await — son Promise en Next.js 16.navigator.userAgent para feature detection — usar feature detection real con guards SSR (typeof window !== "undefined").La skill funciona idéntica en Windows (Git Bash o PowerShell), macOS y Linux.
| Operación | Comando portable |
|---|---|
| Crear directorios | mkdir -p path/to/dir (Git Bash) o New-Item -ItemType Directory -Force -Path path/to/dir (PowerShell) |
| Abrir navegador | start URL (Win) · open URL (mac) · xdg-open URL (Linux) |
| Detectar plataforma | node -e "console.log(process.platform)" → win32 / darwin / linux |
| Variables de entorno | .env.local siempre — nunca export FOO=bar en bash |
Todos los scripts en scripts/ están en Node.js (.mjs) para máxima portabilidad.
| Síntoma | Causa probable | Solución |
|---|---|---|
params is a Promise | Next.js 16 — antes era sync | const { id } = await params y tipar como params: Promise<{ id: string }> |
| Parallel route 404 al refrescar | Falta default.tsx en cada slot | Crear app/@slot/default.tsx con export default function() { return null; } |
| Build con Prisma falla en Turbopack | Incompatibilidad conocida | npm run build -- --webpack |
| Cache stale en Windows | OneDrive sincronizando .next/ | rm -rf .next && npm run build (excluir .next/ de OneDrive) |
| Hidratation mismatch random | Uso de Math.random() o Date.now() en RSC | Mover a Client Component o usar await connection() |
| Fonts no cargan | Olvidaste aplicar el .variable al <html> | <html className={${displayFont.variable} ${bodyFont.variable}}> |
| FOUC al cargar (flash sin estilo) | Animación con from antes de hidratar | Definir estado inicial en CSS (opacity: 0) y animar to |
Cuando necesites más detalle sobre un tema concreto, lee la referencia correspondiente:
references/01-direcciones-visuales.md — 8 direcciones × tokens completos × tono × cuándo usarreferences/02-verticales.md — 7 verticales × copy + CTAs + iconos + paletasreferences/03-catalogo-componentes.md — árbol de decisión y mapeo necesidad → componentereferences/04-modulos-excelencia.md — Lenis, SplitText, parallax, scroll storytelling, Three.jsreferences/05-checklist-entrega.md — checklist exhaustivo de QA + a11y + SEO + perftemplates/tokens.css — variables CSS de la dirección visualtemplates/preview-template.html — base del previewer (Fase 1)templates/proxy.ts — Next.js 16 proxytemplates/sitemap.ts, templates/robots.ts — SEOtemplates/llms.txt, templates/identity.json — LLMOtemplates/site-config.ts — configuración por marcatemplates/intake-schema.json, templates/brief-schema.json — esquemas de validaciónscripts/preview-styles.mjs — genera preview HTML con N estilos lado a ladoscripts/scrape-cascade.mjs — extrae contenido de URL en 3 niveles (curl → Puppeteer → guía manual)scripts/verify-build.mjs — checks de entorno + QA post-buildWeb Design Engineer Pro v1.0 © 2026 Luis Salgado · Ángel Aparicio IA Masters Academy · salgadoia.com