Saltar a contenido

HANDOFF — Deploy DISENO1 a hosting

Brief para la IA que administra el repo de hosting. Léelo entero antes de hacer cualquier cosa.

REGLA INVIOLABLE — Path único de verdad

Todo el código, configuración y contenido vive aquí:

/Users/mac_mini2/Documents/DISENO1/
  • NO dupliques archivos a tu repo de hosting.
  • NO edites versiones paralelas en otro lado.
  • NO generes archivos de scaffolding en tu repo — todo (package.json, astro.config.mjs, src/, etc.) se crea dentro de este path.
  • Tu repo de hosting solo orquesta: DNS, subdomain, pipeline de build, deploy. No es source of truth de nada.

Cualquier cambio que necesites hacer (añadir dependencia, ajustar config, modificar contenido, fix de bug): edítalo en /Users/mac_mini2/Documents/DISENO1/ y commit ahí. Después tu pipeline lo recoge.

Si rompes este principio, el usuario termina con dos versiones desincronizadas y pierde trabajo. No lo rompas.

Qué es DISENO1

Toolkit de diseño avanzado para el ecosistema Claude (Artifacts + Skills + Claude Code + Claude Design + API). NO es una webapp con backend ni un SaaS — es una librería de plantillas, skills, subagents y referencias que un diseñador-ingeniero usa para acelerar trabajo en Claude.ai.

Audiencia del sitio: diseñadores y frontend engineers avanzados que ya usan Claude y quieren un kit serio.

Estado actual del repo (al momento del handoff)

58 archivos, ~9000 líneas. Todo markdown + JSON + 4 archivos de starter (.tsx/.html).

DISENO1/
├── CLAUDE.md                       Memoria viva del proyecto (carga auto en Claude Code)
├── README.md                       Mapa del repo
├── HANDOFF.md                      Este archivo
├── .claude/
│   ├── settings.json               Hooks (prettier/tsc) + permisos Claude Code
│   ├── skills/                     3 skills locales
│   │   ├── frontend-design/SKILL.md
│   │   ├── brand-guidelines/SKILL.md
│   │   └── artifact-builder/SKILL.md
│   └── agents/                     5 subagents
│       ├── artifact-engineer.md
│       ├── ui-reviewer.md
│       ├── design-critic.md
│       ├── accessibility-auditor.md
│       └── mockup-to-code.md
├── templates/                      Starters reusables
│   ├── artifact-react.tsx
│   ├── artifact-html.html
│   ├── prompt-landing-page.md
│   ├── prompt-component.md
│   └── claude-design/              38 plantillas + README
│       ├── README.md
│       ├── 01-multi-direction-exploration.md
│       ├── ...
│       └── 38-generative-art-controls.md
└── references/
    ├── sandbox-limits.md
    ├── library-cheatsheet.md
    ├── model-selection.md
    ├── prompt-caching.md
    ├── mcp-servers.md
    └── brand-tokens.json           ⚠ accent.primary/secondary aún TBD

Lo que NO existe todavía (debes scaffoldarlo tú dentro del mismo path): - package.json, tsconfig.json, vite.config.ts / astro.config.mjs (lo que elijas) - src/ con app entry - .gitignore (CRÍTICO antes de tu primer git add) - .env.example - git init aún no se hizo

Qué debe ser el sitio web

Sitio estático de documentación + showcase. No SaaS, no backend, no auth. Las 38 plantillas + 3 skills + 5 agents + 6 references son contenido público (toolkit open-source).

Routes mínimas sugeridas:

/                          Home — qué es DISENO1, stack, link a las secciones
/plantillas                Index de las 38 plantillas, categorizadas
/plantillas/[slug]         Cada plantilla renderizada
/skills                    Las 3 skills
/skills/[slug]             Cada skill
/agents                    Los 5 subagents
/agents/[slug]             Cada agent
/references                Los 6 references docs
/references/[slug]         Cada reference
/case-cipher               Caso real probado en Claude Design (opcional, ver § Assets)

Search global (Cmd+K) es valioso — la gente busca "AI chat", "pricing", "anti-slop" y debería encontrar la plantilla relevante.

Framework recomendado

Astro + Starlight es el match natural: - Mounts markdown nativamente (las 50+ .md que ya existen no necesitan reescribirse). - Static export listo para cualquier hosting (CloudFlare Pages, Vercel, Netlify, S3, nginx). - Search built-in (pagefind). - Frontmatter-driven sidebar nav. - Theming con CSS vars — se conecta directamente a references/brand-tokens.json.

Alternativas válidas si tu hosting tiene preferencia: - Nextra (Next.js based) — si vas a Vercel/CloudFlare. - VitePress — más opinionado, menos flexible. - Astro vanilla + tu propio layout — si quieres control total del diseño editorial.

No uses: Docusaurus (over-engineered para este caso), Gatsby (deprecado en práctica), CRA (sin sentido).

Confirma tu elección con el usuario antes de scaffoldar — él tiene preferencia sober/editorial.

Locks de marca — INVIOLABLES

Estos están declarados en CLAUDE.md y references/brand-tokens.json. Aplícalos al sitio:

Tipografía (hard lock)

  • Display: Fraunces (variable, opsz 9-144, wght 100-900, SOFT axis 0-100)
  • Body: IBM Plex Sans (300, 400, 500, 700)
  • Mono: JetBrains Mono (400, 500)

Carga via Google Fonts: 

<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT@9..144,100..900,0..100&family=IBM+Plex+Sans:wght@300;400;500;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">

Prohibido sustituir sin permiso explícito del usuario.

Anti-slop bans

  • Sin Inter, Roboto, Open Sans, Lato, Arial, system-ui, Helvetica, Space Grotesk en ningún lado.
  • Sin bg-gradient-to-br from-purple-* to-pink-* o variantes purple-on-white.
  • Sin "3 feature cards centradas en grid-cols-3".
  • Sin "hero con imagen-derecha texto-izquierda" boilerplate.
  • Sin rounded-xl uniforme — mezcla bordes 0px y 24px.
  • Sin fade-in-up on scroll en cada section. Una sola revelación orquestada al load.

Paleta

Lee references/brand-tokens.json. Caveat crítico: accent.primary y accent.secondary están como #TBD. Pregúntale al usuario qué colores poner antes de scaffoldar el theme. Si dice "decide tú", trabaja monocromo (negro + neutrales) + UN acento que tú propongas con justificación y déjalo configurable.

Neutrales ya definidos: 

neutral.0   #FFFFFF    neutral.700 #403F3A
neutral.50  #FAFAF7    neutral.900 #1A1916
neutral.100 #F0EFEB
neutral.200 #D9D7CF
neutral.300 #B8B6AC
neutral.500 #7A786E

Semánticos: success #2D6A4F, warning #C77100, error #A1213C, info #1E3A8A.

Estética del sitio — directrices

El usuario rechaza explícitamente: - Docs sites genéricos estilo Docusaurus default. - "Modern startup" look (purple gradients, Inter, gradient buttons). - Tres feature cards centradas en home.

Inspiraciones válidas (cita en tu propuesta si elijes una dirección): - Stripe Press / Stripe docs — sober technical. - Anthropic docs — restraint + serif headings. - Vercel docs — denso pero limpio (cuidado con su Geist por overuse). - Linear docs — minimal con personalidad sutil. - Are.na — editorial archival.

Recomendación de tono: editorial-sober (Fraunces brilla aquí). Display serif para headings + IBM Plex sans para body + JetBrains mono para code = combo coherente con el lock.

Workflow de cambios (CRÍTICO)

Cada vez que necesites hacer un cambio:

  1. Edita en /Users/mac_mini2/Documents/DISENO1/, nunca en tu repo de hosting.
  2. Si añades dependencia: pnpm add X (el usuario usa pnpm por defecto, ver CLAUDE.md).
  3. Commit en este repo con mensaje claro.
  4. Tu pipeline de hosting: clona/pulls desde este path → build → deploy.

Si tu hosting necesita un archivo específico (e.g., vercel.json, _redirects, netlify.toml, wrangler.toml): - Créalo en este path, no en el tuyo. - Documéntalo en README.md o en una sección nueva de HANDOFF.md.

Si te sale un bug del build: - El fix va en este path. - Si descubres que CLAUDE.md o brand-tokens.json tiene info incorrecta, edítalo aquí y avisa al usuario.

Antes de scaffoldar — preguntas al usuario

No procedas sin estas respuestas:

  1. Subdomain: ¿qué nombre? (ej. disena.tanok.club, kit.tanok.club, diseno1.tanok.something)
  2. Hosting: ¿CloudFlare Pages / Vercel / Netlify / self-hosted nginx / otro?
  3. Framework: ¿confirmas Astro Starlight, o prefieres alternativa?
  4. Accent colors: ¿defino primary/secondary ahora o trabajo monocromo y los añades después?
  5. Case Cipher: ¿quieres incluir la sección /case-cipher con los screenshots de la prueba en Claude Design? (El proyecto vive en claude.ai/design/p/66db94e0-fbd8-43b4-8bda-3bd128975aaa — el usuario tendría que exportar imágenes).
  6. Comments / feedback: ¿quieres dejar un canal de feedback en el sitio (email, GitHub Issues, Anthropic Discord) o es read-only?
  7. Analytics: ¿algún tracker? (Plausible / Fathom / nada).

Scaffolding mínimo (cuando tengas las respuestas)

Estos archivos DEBEN crearse en /Users/mac_mini2/Documents/DISENO1/:

package.json                Pinned versions, pnpm
.gitignore                  node_modules, .env, dist, .astro
.env.example                Vars públicas (sin secretos)
tsconfig.json
astro.config.mjs            (o framework elegido)
src/
  ├── content/              Mounts a templates/ y references/ via collections
  ├── components/           Header, Footer, Search, BrandMark, etc.
  ├── layouts/              Editorial layout cohesivo con locks
  ├── styles/global.css     CSS vars desde brand-tokens.json
  └── pages/                Routes
public/                     Favicon, OG images, robots.txt, sitemap stub

Convención de versiones: pinned exactos, no ranges. Razón en CLAUDE.md:

"No instalar dependencias sin pinned version."

Build & deploy

  • Build local: pnpm build desde /Users/mac_mini2/Documents/DISENO1/
  • Output: dist/ (Astro default) o el que aplique
  • Deploy: tu pipeline. Algunas notas:
  • Si CloudFlare Pages: conecta el repo, build command pnpm build, output dist/
  • Si Vercel: igual, plus vercel.json mínimo si necesitas redirects
  • Si Netlify: netlify.toml con [build] + [redirects] si SPA fallback necesario
  • Si self-hosted: rsync dist/ user@server:/var/www/diseno/ o equivalente

Performance & SEO baseline

  • Lighthouse target: 95+ en Performance, Accessibility, Best Practices, SEO.
  • LCP < 2s.
  • Fuentes con font-display: swap + preconnect a Google Fonts.
  • OG images por route generadas (puedes usar @vercel/og o astro-og-canvas).
  • Sitemap.xml + robots.txt + canonical URLs.
  • View transitions API para navegación suave (Astro lo soporta nativo).

Accesibilidad — NO opcional

CLAUDE.md exige WCAG 2.2 AA mínimo. Aplica al sitio: - Contrast ≥ 4.5:1 en body, ≥ 3:1 en large text. - Focus visible (no outline: none aislado). - Semantic HTML — <article> para plantillas, <nav> para sidebar, <main> único. - Skip-to-content link. - Search keyboard-accessible (Cmd+K + Tab through results). - prefers-reduced-motion respetado (sin animaciones forzadas).

Después de scaffolar, pasa axe-core (cli o playwright) sobre cada route. Reporta findings al usuario.

Memoria del usuario (para tono y modo de trabajo)

Lee también: 

/Users/mac_mini2/.claude/projects/-Users-mac-mini2-Documents-DISENO1/memory/user_profile.md

Resumen ejecutivo: - Nivel avanzado, proyectos production-grade. - Modo autónomo ("HAZ TODO TU") — no preguntes en cada paso, decide y avisa. - Spanish primario, ES/EN técnico OK. - Output comprehensive > minimal.

Resumen de la cadena de mando

Usuario                    → Tú (IA hosting)              → Pipeline
"Sube esto a la web"       → Decide framework + scaffolds → Build → CDN
                            EN /Users/mac_mini2/...        leyendo del path

Si en algún momento te tientas a crear un archivo "temporal" en tu repo de hosting "solo para esto": no lo hagas. Crea ese archivo en el path del proyecto, marca su propósito en el commit message, y úsalo desde tu pipeline.

Checklist antes de tu primer commit

  • [ ] Leí CLAUDE.md completo.
  • [ ] Leí templates/claude-design/README.md para entender el contenido.
  • [ ] Pregunté al usuario las 7 cuestiones del § "Antes de scaffoldar".
  • [ ] Voy a trabajar en /Users/mac_mini2/Documents/DISENO1/ exclusivamente.
  • [ ] Tengo claro el framework + hosting target.
  • [ ] Voy a respetar el type lock (Fraunces / IBM Plex Sans / JetBrains Mono).
  • [ ] Voy a respetar la anti-slop ban list.
  • [ ] Mi primer commit incluye .gitignore antes que node_modules/.
  • [ ] Voy a documentar cualquier desviación del lock en este HANDOFF.md.

Última actualización: 2026-05-17 por el agente que terminó las 38 plantillas + scaffold de skills/agents. Estado: contenido completo, falta scaffolding web.