DISENO1¶

Base de proyecto avanzada para diseñar y construir con el ecosistema completo de Claude: Artifacts, Skills, Claude Code, Claude Design, API directa y MCP.

Mapa del repositorio¶

DISENO1/
├── CLAUDE.md                  Memoria viva del proyecto (carga auto).
├── README.md                  Este archivo.
├── .claude/
│   ├── settings.json          Hooks (prettier/typecheck/test) + permisos.
│   ├── skills/                Skills locales activables por description.
│   │   ├── frontend-design/   Override del oficial con locks de proyecto.
│   │   ├── brand-guidelines/  Tokens de marca aplicables a cualquier output.
│   │   └── artifact-builder/  Scaffolding consciente del sandbox.
│   └── agents/                Subagents especializados (Task tool).
│       ├── 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
└── references/                Cheatsheets cargables on-demand.
    ├── sandbox-limits.md
    ├── library-cheatsheet.md
    ├── model-selection.md
    ├── prompt-caching.md
    └── mcp-servers.md

Quick start¶

Abre el repo en Claude Code: cd /Users/mac_mini2/Documents/DISENO1 && claude. CLAUDE.md se carga solo; los skills y agents quedan disponibles.
Primer prompt sugerido (sanity check):

Lee CLAUDE.md y templates/prompt-landing-page.md. Genera un artifact React siguiendo el type-lock (Fraunces / IBM Plex Sans / JetBrains Mono) para una landing de [tu producto]. Antes de codear, declara las 4 dimensiones (Purpose, Tone, Constraints, Differentiation) en un comentario.
Para artifacts en Claude.ai (no Claude Code): copia el bloque <frontend_aesthetics> de CLAUDE.md al inicio de tu prompt y pega también references/sandbox-limits.md.
Para API directa: pasa CLAUDE.md como system con cache_control: {type: "ephemeral", ttl: "1h"}. Ahorras 90% en input tokens para cada componente que generes.

Workflow canónico¶

[brief]
   │
   ▼
delegate to design-critic       → revisa la dirección estética (tone, refs)
   │
   ▼
delegate to artifact-engineer   → construye respetando sandbox
   │
   ▼
delegate to ui-reviewer         → audita slop + Tailwind misuse
   │
   ▼
delegate to accessibility-auditor → WCAG AA + axe-core via Playwright MCP
   │
   ▼
[publish artifact / commit / preview deploy]

Para flujos cortos (un componente), main thread es suficiente. Para flujos largos (landing + dashboard + slides), usa Plan Mode (Shift+Tab) y reparte por subagents en paralelo (Ctrl+B background).

MCP recomendados¶

Ver references/mcp-servers.md. Mínimo para diseño:

figma (lectura de frames + Code Connect)
playwright (E2E y visual regression)
vercel (preview deploys)
linear o github (ticket / PR loop)

Instalación rápida en Claude Code: claude plugin install figma@claude-plugins-official.

Convenciones¶

Detalladas en CLAUDE.md. Las críticas:

Pinned model IDs, nunca aliases.
Anti-slop bans activos: sin Inter/Roboto/Space Grotesk, sin purple-on-white.
Sandbox awareness obligatoria en artifacts (sin localStorage, Three.js r128, etc.).
Cero comentarios por defecto.