Files
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.7 KiB

Prompts para Claude Design

Plantillas listas para pegar en claude.ai/design. Copias, rellenas los {PLACEHOLDERS}, pegas. Cada una asume que el repo fn-design-system ya está enlazado al proyecto de Claude Design y que DESIGN_SYSTEM.md es la regla suprema.

# Archivo Cuándo usar
00 onboarding.md Primera vez al crear un proyecto nuevo en Claude Design. Le fija las reglas.
01 dashboard.md Dashboard de analytics con KPIs + charts.
02 crud.md Gestión CRUD: lista + tabla + modal create/edit/delete.
03 detail.md Ficha de detalle de una entidad.
04 settings.md Página de configuración con navegación lateral.
05 auth.md Login / register.
06 error.md 404 / 500 / 403 / custom.
07 custom.md Pantalla libre que no encaja en ninguna plantilla.
08 handoff_integrate.md Para Claude Code (yo) — integrar un export de Claude Design al registry.
09 questionnaire.md Guía del agente — cuestionario numerado para rellenar plantillas rápido.

Flujo estándar

  1. Primera vez en el proyecto → pegas onboarding.md.
  2. Cada pantalla nueva → dices al agente "quiero un prompt de dashboard / crud / ..." y el agente te lanza el cuestionario numerado (ver questionnaire.md). Respondes con 1,2,3 y él construye el prompt completo.
  3. Cuando te guste el diseño → "Handoff to Claude Code" en Claude Design.
  4. De vuelta aquí → me pegas el export + handoff_integrate.md, yo lo adapto al repo.