{% extends 'base.html.twig' %} {% block title %}{{ editPrompt is defined ? 'Modifier' : 'Créer' }} un prompt — Promptly{% endblock %} {% block body %} {% set ptColor = tool_color_details['promptly'] %}
{# ── En-tête page ── #}

{{ editPrompt is defined ? 'Modifier le prompt' : 'Créer un prompt' }}

{{ editPrompt is defined ? 'Modifiez votre prompt et ses paramètres.' : 'Construisez un prompt réutilisable avec des variables dynamiques.' }}

{% include '_atoms/button/button.html.twig' with { label: 'Retour', variant: 'back', size: 'md', icon: 'arrow-left', href: editPrompt is defined ? path('app_promptly_show', { id: editPrompt.id }) : path('app_promptly') } only %}
{# ── Layout deux colonnes ── #}
{# ============================================================ COLONNE GAUCHE — rédaction ============================================================ #}
{# Titre & description #}

Informations

{% include '_atoms/form/input.html.twig' with { label: 'Titre du prompt', placeholder: 'Ex. : Rédiger une fiche produit', required: true, maxlength: 100, showCount: true, size: 'sm', attr: { 'data-promptly--create-target': 'inputTitle' } } only %} {% include '_atoms/form/textarea.html.twig' with { label: 'Description', placeholder: 'À quoi sert ce prompt ? (au moins 20 caractères)', hint: 'Aide les autres utilisateurs à comprendre votre prompt.', required: true, rows: 2, resize: 'none', maxlength: 500, showCount: true, size: 'sm', attr: { 'data-promptly--create-target': 'inputDescription', 'data-action': 'input->textarea#updateCount input->promptly--create#onDescriptionInput', 'minlength': minDescriptionLength|default(20), } } only %}
{# Corps du prompt #}
{# Astuce variables — molecule inline-alert #}
{% include '_molecules/inline-alert/inline-alert.html.twig' with { variant: 'warning', icon: 'magic-stick', message: 'Entourez un mot de ' ~ '{{doubles accolades}}' ~ ' pour le transformer en champ interactif — ex. : ' ~ '{{prénom}}' ~ '.' } only %}
{# Textarea #}

Contenu du prompt

{% include '_atoms/button/button.html.twig' with { label: 'Insérer une variable', variant: 'soft-warning', icon: 'plus', size: 'sm', radius: 'lg', mobileIconOnly: true, mobileBreakpoint: 'lg', class: 'aspect-square lg:aspect-auto', attr: { 'data-action': 'click->promptly--create#insertVariable', 'data-tooltip': 'Insérer une variable', 'aria-label': 'Insérer une variable' } } only %} {% include '_atoms/button/button.html.twig' with { label: 'Améliorer', variant: 'soft-cohorts', icon: 'magic-stick', size: 'sm', radius: 'lg', mobileIconOnly: true, mobileBreakpoint: 'lg', class: 'aspect-square lg:aspect-auto', attr: { 'data-action': 'click->promptly--create#improveWithAI', 'data-promptly--create-target': 'improveBtn', 'data-tooltip': 'Améliorer avec l\'IA', 'aria-label': 'Améliorer avec l\'IA' } } only %}
{% include '_atoms/form/textarea.html.twig' with { placeholder: "Écrivez votre prompt ici… (au moins " ~ (minBodyLength|default(100)) ~ " caractères)", hint: 'Minimum ' ~ (minBodyLength|default(100)) ~ ' caractères pour qu\'il soit utilisable et améliorable.', maxlength: 5000, showCount: true, rows: 12, resize: 'none', attr: { 'data-promptly--create-target': 'inputBody', 'data-action': 'input->textarea#updateCount input->promptly--create#onBodyInput', 'minlength': minBodyLength|default(100), } } only %} {# Variables détectées #}
{# Espaces à remplir (conditionnel) #}
{# ============================================================ COLONNE DROITE — réglages uniquement (sticky) La méthode RCTD n'occupe PLUS la sidebar : elle se trouve dans un drawer/slide-over indépendant qui s'ouvre depuis la droite via un bouton flottant. Cf. plus bas dans le template. ============================================================ #}
{# ==================================================================== GUIDE RCTD — bouton flottant (atom) + drawer (molecule modal position:right) Atomic design respecté : atoms pour les boutons, molecule modal pour le drawer slide-over. Aucun HTML inline qui dupliquerait un atome. ==================================================================== #} {% set rctdSteps = [ { num: '1', label: 'Rôle', color: '#FBBF24', help: 'Qui l\'IA doit-elle incarner ?', detail: 'Donnez un rôle précis avec un niveau d\'expertise. Plus le rôle est spécialisé, plus la réponse sera ciblée. Évitez les rôles trop génériques (« assistant », « expert ») qui ne guident pas vraiment l\'IA.', tip: 'Astuce : précisez le métier + le secteur + l\'expérience.', example: 'Tu es un copywriter expert avec 10 ans d\'expérience en e-commerce B2C.' }, { num: '2', label: 'Contexte', color: '#FB923C', help: 'Pour qui, dans quelle situation ?', detail: 'Décrivez l\'audience cible (qui lit ?), l\'environnement (B2B, grand public, professionnel...) et les enjeux (vente, formation, support). Sans contexte, l\'IA répond de façon générique et hors-sol.', tip: 'Astuce : explicitez ce que vous tenez pour acquis — l\'IA ne le devine pas.', example: 'Tu écris pour des entrepreneurs solo qui n\'ont pas le temps de lire un long email. L\'objectif est de capter 5 minutes de leur attention.' }, { num: '3', label: 'Tâche', color: '#F87171', help: 'Que doit-elle faire concrètement ?', detail: 'Utilisez des verbes d\'action précis (rédige, génère, liste, résume, traduis, analyse). Une tâche claire produit une réponse focalisée. Évitez les verbes vagues comme « aider » ou « faire ».', tip: 'Astuce : décomposez en étapes si la tâche est complexe.', example: 'Rédige un email de prospection en 3 paragraphes : accroche personnalisée, valeur proposée, appel à l\'action.' }, { num: '4', label: 'Dirigeabilité', color: '#60A5FA', help: 'Quelle latitude lui laisses-tu ?', detail: 'Précisez les libertés et les limites de créativité. Plus vous êtes directif, plus la réponse sera prévisible mais cadrée. Plus vous êtes souple, plus elle sera créative mais variable.', tip: 'Astuce : indiquez explicitement ce qui est ajustable VS ce qui est fixe.', example: 'Reste concis, max 3 paragraphes. Tu peux varier le ton mais garde un registre professionnel et le tutoiement.' }, { num: '5', label: 'Format', color: '#FB923C', help: 'Quelle structure de sortie ?', detail: 'Définissez la mise en forme exacte : Markdown, JSON, tableau, liste à puces, plain text, code. Un format précis évite les surprises et facilite l\'intégration du résultat dans votre flux.', tip: 'Astuce : si vous attendez du JSON, donnez le schéma exact entre triple-backticks.', example: 'Markdown : un titre H2, puis 3 bullets de 50 mots chacune, puis un appel à l\'action en gras. Pas de tableau.' }, { num: '6', label: 'Tonalités', color: '#86EFAC', help: 'Quel ton adopter ?', detail: 'Définissez le registre (formel/informel), l\'émotion (enthousiaste/neutre/empathique), la voix (tutoiement/vouvoiement) et la cohérence avec votre brand voice. Le ton transforme la perception sans changer le fond.', tip: 'Astuce : nommez 2-3 marques dont vous voulez emprunter le ton.', example: 'Ton chaleureux et direct, jamais commercial. Tutoiement systématique. Inspiré du ton de Notion ou Linear.' }, { num: '7', label: 'Objectif', color: '#C4B5FD', help: 'Quel résultat veux-tu obtenir ?', detail: 'Énoncez le résultat business ou le KPI visé. Cela aide l\'IA à orienter chaque phrase vers ce résultat plutôt que vers la beauté littéraire ou la complétude académique.', tip: 'Astuce : un objectif mesurable bat un objectif esthétique.', example: 'Convertir au moins 5 % des destinataires en réponse positive — ouverture à un appel découverte de 15 minutes.' }, { num: '8', label: 'Contraintes', color: '#A5B4FC', help: 'Qu\'est-ce qui est interdit ?', detail: 'Listez les mots, structures, sujets à proscrire. Précisez la longueur maximale, la langue, les mots-clés obligatoires. Plus les contraintes sont strictes, plus elles sont respectées.', tip: 'Astuce : listez les anti-patterns concrets, pas des principes abstraits.', example: 'Pas de superlatifs (« incroyable », « unique »), pas d\'anglicismes, max 150 mots, en français.' }, { num: '9', label: 'Exemples', color: '#FCD34D', help: 'Un cas concret qui inspire ?', detail: 'Un ou deux exemples du résultat souhaité (technique du « few-shot learning »). C\'est l\'outil le plus puissant en prompt engineering : l\'IA s\'aligne sur le style de vos exemples bien plus vite qu\'avec n\'importe quelle description abstraite.', tip: 'Astuce : donnez un bon ET un mauvais exemple pour clarifier le contraste.', example: '✅ « Bonjour Pierre, j\'ai vu ton post sur LinkedIn… » ❌ « Cher Monsieur, je me permets de vous contacter… »' }, { num: '10', label: 'Validation', color: '#FB923C', help: 'Comment vérifier la qualité ?', detail: 'Demandez à l\'IA de s\'auto-évaluer, de proposer des variantes, ou de pointer les faiblesses de sa propre réponse. Une boucle de validation explicite transforme une réponse moyenne en résultat poli.', tip: 'Astuce : exigez 2-3 variantes plutôt qu\'une seule réponse définitive.', example: 'Relis ta proposition et donne-moi 2 alternatives plus accrocheuses. Si l\'objet fait plus de 50 caractères, raccourcis-le.' } ] %} {# ── Bouton flottant — atom button variant 'success' (charte graphique) ──── #}
{% include '_atoms/button/button.html.twig' with { label: '', icon: 'lightbulb-bolt', iconPosition: 'left', variant: 'success', size: 'md', radius: 'full', attr: { onclick: "openModal('promptly-rctd-drawer')", 'aria-label': 'Ouvrir le guide pour créer un prompt', 'data-tooltip': 'Méthode RCTD — 10 étapes pour un bon prompt', 'data-tooltip-position': 'left' } } only %}
{# ── Drawer RCTD — molecule modal en mode side-panel droite ──────────── #} {# `rctdSteps` est explicitement passé pour traverser le scope `only`. #} {% embed '_molecules/modal/modal.html.twig' with { id: 'promptly-rctd-drawer', title: 'Méthode RCTD', subtitle: '10 étapes guidées pour un prompt qualitatif', icon: 'lightbulb-bolt', iconColor: 'success', position: 'right', size: 'md', rctdSteps: rctdSteps } only %} {% block body %}
{# CTA principal — atom button variant success (charte graphique) #}
{% include '_atoms/button/button.html.twig' with { label: 'Insérer un canevas vierge', icon: 'magic-stick', variant: 'success', size: 'md', radius: 'xl', width: 'full', attr: { 'data-action': 'click->promptly--rctd-drawer#insertTemplate' } } only %}

Une structure prête à compléter en quelques minutes.

{# Liste des 10 étapes — chaque étape : question + détail + astuce + exemple #}
    {% for step in rctdSteps %}
  1. {# Pastille numérotée colorée — repère visuel de l'étape #} {{ step.num }}
    {# Titre de l'étape + question d'amorce #}

    {{ step.label }}

    {{ step.help }}

    {# Explication détaillée — le « pourquoi » et le « comment » #}

    {{ step.detail }}

    {# Astuce pratique — règle d'or à retenir #}

    ▸ {{ step.tip }}

    {# Exemple concret entre guillemets, bordure colorée #}

    « {{ step.example }} »

    2. {% endfor %}
{% endblock %} {% endembed %} {% endblock %}