Saltar a contenido

DISENO1 — Proyecto Claude Design avanzado

Memoria de proyecto. Se carga automáticamente en cada sesión de Claude Code y se debería pegar como prefijo de system prompt en API calls. Mantén este archivo bajo control de versiones y cachéalo con TTL de 1h (ver references/prompt-caching.md).

Stack por defecto

  • Modelo planificación / mockup→código: claude-opus-4-7 (thinking effort xhigh).
  • Modelo coding diario / componentes: claude-sonnet-4-6.
  • Modelo clasificación / subagents paralelos / extracción: claude-haiku-4-5-20251001.
  • Artifacts internos (Claudeception): claude-sonnet-4-20250514 (hard-coded por la guía de prototyping).
  • Frontend: React 18 + TypeScript + Vite + Tailwind + shadcn/ui.
  • Animación: motion-primitives nativas; Framer Motion solo fuera de artifacts.
  • 3D: three.js r128 dentro de artifacts; @react-three/fiber en Claude Code.
  • Datos: Recharts para artifacts; D3 / Plotly cuando se requiera customización.
  • Tests: Playwright vía Playwright MCP + Vitest.

Usa siempre IDs fechados pinned (NO aliases evergreen tipo claude-opus-4). Suscríbete a deprecation notices con 60d.

You tend to converge toward generic, "on distribution" outputs. Resist this. Before writing any UI code, declare in a top-of-file comment:

  1. Purpose — what problem this UI solves, in one sentence.
  2. Tone — pick ONE extreme: brutally minimal | editorial | brutalist | retro-futuristic | luxury | maximalist. No safe middle.
  3. Constraints — performance, accessibility, brand, device.
  4. Differentiation — the single element a user will remember.

Anti-slop hard bans (refuse to emit; replace before delivering): - Fonts: Inter, Roboto, Open Sans, Lato, Arial, system-ui, Helvetica, Space Grotesk (overused by AI). Prefer JetBrains Mono / Fira Code (code), Playfair Display / Crimson Pro / Fraunces (editorial), IBM Plex (técnico), Bricolage Grotesque / Newsreader (distinctive), or custom variable fonts. - Colors: purple gradients on white. Generic SaaS palette (#6366F1 + #8B5CF6 + white). - Layout: three centered feature cards. Uniformly rounded corners (mix sharp + soft). "Hero with image right" boilerplate. - Motion: fade-in-up on scroll for every section. Use ONE orchestrated reveal per page, not per-element.

Typographic rule: extreme contrast. Weights 200 vs 800, not 400 vs 600. Size jumps 3×+, not 1.5×.

You still tend to converge on common choices (Space Grotesk, for example). Avoid this: it is critical that you think outside the box!

Type lock for this project: display = Fraunces (variable, opsz axis 9-144, wght 100-900). Body = IBM Plex Sans. Mono = JetBrains Mono. Do not substitute without explicit permission.

Palette lock for this project: define in references/brand-tokens.json (create on first use). Until then, work in monochrome + one accent.

Sandbox awareness (artifacts)

Cuando generes artifacts React/HTML, recuerda los límites duros antes de codear (ver references/sandbox-limits.md):

  • Sin localStorage / sessionStorage / indexedDB — usa useState + window.storage (solo artifacts publicados, 20 MB, JSON only, batch en un blob).
  • Sin <form> en React — usa <div> + handlers.
  • Tailwind sin arbitrary values — top-[117px] se ignora silenciosamente. Fuera de escala → style={{...}} inline (pierdes hover:/sm:).
  • Three.js r128: THREE.CapsuleGeometry no existe; OrbitControls no importable — implementa controles manuales o usa Cylinder + Sphere.
  • Librerías whitelisted en React artifacts: lucide-react, recharts, mathjs, lodash, d3, plotly, three@r128, papaparse, xlsx, mammoth, tensorflow, chart.js, tone, @/components/ui/* (shadcn subset). NO Framer Motion, NO react-three-fiber, NO Lottie dentro de artifacts.
  • HTML artifacts: cualquier script desde cdnjs.cloudflare.com vía <script src>.
  • CSP: fetch a api.anthropic.com se proxy-ea con credenciales del visitante (Claudeception); fetch a terceros se bloquea salvo MCP servers.
  • Default export obligatorio en componente React principal. Sin required props.

Si necesitas algo que el sandbox no soporta (backend, multi-archivo, SEO, APIs externas no-MCP, tests E2E), migra a Claude Code local, no luches contra el sandbox.

Convenciones de código

  • Comentarios: por defecto cero. Solo cuando el WHY no es obvio.
  • Naming: identificadores autoexplicativos > comentarios narrativos.
  • Componentes: un archivo, un default export, props tipadas, sin any.
  • CSS: Tailwind utility-first; style={{}} inline solo para arbitrary values en artifacts; CSS modules en Claude Code para casos complejos.
  • Accesibilidad: WCAG 2.2 AA mínimo. aria-* obligatorio en cualquier interactivo no semántico. Foco visible no opcional.
  • i18n: textos visibles en archivo separado desde día 1 si el proyecto es bilingüe ES/EN.

Comandos del proyecto

(Rellenar cuando se inicialice el frontend real)

# dev
pnpm dev

# typecheck
pnpm typecheck

# test
pnpm test

# build
pnpm build

Subagents instalados

Ver .claude/agents/:

  • artifact-engineer — construye artifacts respetando sandbox.
  • ui-reviewer — audita UI generada (slop, a11y, perf).
  • design-critic — crítica estética con referencias.
  • accessibility-auditor — pasada WCAG con axe-core + Playwright MCP.
  • mockup-to-code — convierte PNG/Figma a componente React tipado.

Delégalos en lugar de hacer todo en el main thread cuando la tarea sea aislable.

Skills locales

Ver .claude/skills/:

  • frontend-design — override local con type-lock + palette-lock.
  • brand-guidelines — aplica tokens de marca a cualquier output.
  • artifact-builder — scaffolding con sandbox awareness.

Activación automática por descripción. Si no se dispara, invoca explícitamente.

Caching policy

Cachea como prefijo system (TTL 1h):

  1. Este CLAUDE.md completo.
  2. references/brand-tokens.json (cuando exista).
  3. Cualquier design system / Storybook export referenciado.

Mide usage.cache_read_input_tokens vs cache_creation_input_tokens. Hit rate objetivo: >80% en sesiones de >5 turnos.

Hard "don'ts"

  • No commit secrets, .env, API keys, ni node_modules.
  • No --no-verify en commits.
  • No force push a main.
  • No instalar dependencias sin pinned version.
  • No tocar .claude/agents/* ni .claude/skills/* sin actualizar este archivo si cambia el contrato.