Files

T

egutierrez 0883155432 feat(design-system): DESIGN_SYSTEM.md + prompts + extract-design command

- frontend/DESIGN_SYSTEM.md: contrato del @fn_library (regla suprema para
  Claude Design y agentes).
- frontend/design_prompts/: 11 plantillas de prompt (onboarding, dashboard,
  crud, detail, settings, auth, error, custom, handoff_integrate) +
  questionnaire numerado para arranque rapido.
- .claude/commands/extract-design.md: workflow de 10 pasos para extraer
  componentes nuevos y mejoras desde exports "standalone" de Claude Design
  al registry, sync al espejo fn-design-system y push a gitea+github.
- .claude/scripts/extract_design_bundle.py: decodificador del bundle
  (base64+gzip en manifest, nombra JSX por heuristica de header).
- .gitignore: ignorar subrepos/*/ (el mirror fn-design-system es repo
  propio con remotes dataforge/fn-design-system + gutierenmanuel/fn-design-system).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

2026-04-21 20:46:00 +02:00

1.9 KiB

Raw Permalink Blame History

Handoff Integrate — prompt para Claude Code (yo)

Usa este prompt cuando tengas el export de Claude Design y quieras que lo integre al registry.

Acabo de terminar un diseño en Claude Design y te paso el export. Quiero que lo integres en fn_registry siguiendo frontend/DESIGN_SYSTEM.md.

Destino

App: apps/{APP}/ (si no existe, dímelo y decidimos si se crea).
Ruta / componente: {src/pages/Whatever.tsx} o similar.

Contexto del diseño

Tipo: {dashboard / crud / detail / settings / auth / error / custom}
Propósito: {1-2 frases}

Export de Claude Design

{pega aquí los ficheros .tsx que te dio el handoff. Si son varios, uno bajo cada encabezado ### path/to/file.tsx con el código dentro de .}

Qué necesito que hagas

Verifica que todo lo importable de UI viene de @fn_library (no @mantine/core directo, no HTML nativo, no librerías ajenas). Si el export usa otra cosa, reescríbelo con wrappers del registry.
Valida la deny-list: cero tailwindcss, clsx, cn, cva, lucide-react, shadcn, @radix-ui/*, framer-motion, chakra, mui, antd, CSS modules, className con clases propias, style inline para maquetar.
Migra cualquier icono a @tabler/icons-react.
Coloca los ficheros bajo apps/{APP}/frontend/src/ respetando la estructura existente.
Si aparece un componente que no existe en @fn_library pero tiene sentido como primitiva reutilizable, dime: propones extraerlo a frontend/functions/ui/{nombre}.tsx + .md y corremos fn index. No lo hagas sin confirmar.
Verifica con pnpm tsc --noEmit o pnpm build que compila. Si no, arregla los imports.
Reporta en tres líneas: qué integraste, qué cambiaste del export, y qué quedó pendiente.

No inventes features. No añadas lógica que no estaba en el export. Integración fiel + adaptación al stack.

1.9 KiB Raw Permalink Blame History