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