Grupo-Rascacielos-AIO/skills-agente-inmobiliario

Landing pour le propriétaire

Une page web que l'agent envoie (ou montre lors de la visite de prospection) pour que le propriétaire voie, avec sa propre maison, à quel point elle sera bien présentée et comment elle sera vendue. Une seule page, légère, sans serveur, qui se publie gratuitement en une minute.

Fichiers

Fichier	Description
plantilla/index.html	La page (design, styles et assemblage). À ne pas modifier par bien.
plantilla/datos.js	Tout ce qui change : marque, bien, textes. C'est la seule chose à remplir.
plantilla/plano3d.css	Styles de la section 3D (utilisé uniquement s'il y a un plan).
ejemplo/	Landing complète avec des données fictives (les « photos » sont des illustrations). Ouvrir pour voir le résultat.
referencia/marca-primera-vez.md	Questions sur la marque, palettes et polices pour la première fois.
referencia/desde-un-portal.md	Comment extraire les données et photos d'un lien Idealista ou autre portail.
referencia/publicar.md	Visualiser sur l'ordinateur et publier gratuitement (Vercel ou Netlify), étape par étape.

Étape 0 · La marque de l'agent (seulement la première fois)

Lire ~/.claude/mi-marca-inmobiliaria.md.

• S'il existe : l'utiliser tel quel et ne pas demander à nouveau. On ne le change que si l'agent le demande (« change mes couleurs », « nouvelle photo », « change la police »).
• S'il n'existe pas : exécuter le flux de la compétence mi-marca (présente dans cette même collection) et continuer lorsque le fichier existe. Si mi-marca n'est pas installée, suivre referencia/marca-primera-vez.md, qui résume les trois voies (manuelle, en choisissant parmi 3 maquettes ou en les extrayant de son Instagram ou site web) et sauvegarde le fichier avec le même format.

Le champ estilo du fichier choisit la variante visuelle de la page : elegante (par défaut), moderno, minimalista ou calido. S'il porte une autre valeur, utiliser la plus proche parmi ces quatre.

Étape 1 · Données du bien

Avec ce que donne l'agent :

• Lien d'un portail : suivre referencia/desde-un-portal.md (données, photos et plan s'il y en a).
• Photos + données : demander les photos (dossier ou glissées dans le chat) et les informations de base : quartier, m², chambres, salles de bain, étage, extras, prix indicatif (optionnel) et nom du propriétaire. Ne demander que ce qui manque, tout en un seul message. Ce qui n'est pas connu reste vide et n'apparaît pas sur la page.

Avertissement concernant les photos du portail : elles appartiennent généralement à l'annonceur. Elles sont utilisées uniquement pour les montrer au propriétaire dans cette proposition privée (la page porte un noindex). Pour les annonces réelles, des photos propres. Le dire à l'agent lorsqu'il les utilise.

Étape 2 · Monter le dossier

<dossier de travail>/landing-<rue-ou-quartier>/
  index.html              ← copie de plantilla/index.html
  datos.js                ← copie de plantilla/datos.js, rempli
  fotos/                  ← 01.jpg, 02.jpg… (la plus lumineuse en premier ; idéalement 1600-2000 px de large)
  marca/                  ← logo et photo de l'agent copiés depuis les chemins du fichier de marque
  (s'il y a un plan) plano3d.css, plano3d.js, plano-data.js

• Photos trop lourdes (plus de 1 Mo) : les réduire avec sips -Z 2000 foto.jpg (Mac) avant de les utiliser.
• Le nom du dossier ne doit pas contenir de données du propriétaire s'il doit être publié.

Étape 3 · Plan 3D (seulement s'il y a un plan)

Utiliser la compétence plano-3d (dans cette même collection) pour tracer plano-data.js. Copier dans le dossier plano-3d/motor/plano3d.js et plantilla/plano3d.css, et mettre plano3d: true dans datos.js. Ajouter un pilier { icono: 'cubo', t: 'Plano en 3D', … } au plan. Sans plan, la landing reste complète uniquement avec des photos : ne pas inventer de plan.

Étape 4 · Rédiger les textes dans datos.js

Ton : le champ tono de la marque. S'adresser au propriétaire en « tu », avec des phrases courtes et concrètes sur SA maison.

• Titre : le bien + une promesse claire. Ex. : « Ton appartement à Ruzafa, présenté comme il le mérite. »
• Points forts (3 ou 6) : ce que l'acheteur va valoriser (lumière, état, quartier, distribution, extras), chacun avec le pourquoi.
• Plan : les piliers du template servent de base ; les adapter à la maison (p. ex. home staging uniquement dans les pièces vides ou désuètes).
• Annonce sur mobile : titre de portail, accroche pour les réseaux et un court texte avec appel à la visite.
• Calendrier 30-60-90 et rapport hebdomadaire : ajuster à la façon de travailler de l'agent. Les chiffres du rapport sont illustratifs et la page l'indique (« Données d'exemple »).
• Agent : biographie réelle. Ne jamais inventer les années, ventes, évaluations ou récompenses : si l'agent ne les donne pas, cifras: [].
• Ne pas promettre un prix de vente ni un délai garanti. Le prix, s'il apparaît, doit être « indicatif ».

Étape 5 · Rendu IA (optionnel)

Uniquement si l'agent dispose déjà de son propre outil d'IA pour décorer les photos. Les ajouter comme photos supplémentaires dans la galerie avec le texte « Décoration virtuelle (indicative) ». La landing est conçue pour être parfaite sans eux.

Étape 6 · Réviser (toujours, avant de livrer)

Servir le dossier (npx serve <dossier>) et l'ouvrir dans le navigateur intégré :

1. En taille ordinateur et à 375 px de large : rien ne dépasse sur les côtés (pas de scroll horizontal), les textes se lisent sur la photo de couverture et la barre WhatsApp/Appeler apparaît en bas sur mobile en descendant.
2. Galerie : chaque photo s'ouvre en grand et on navigue avec les flèches.
3. S'il y a un plan : la maquette charge, les murs se lèvent et les styles Nórdico et Moderno meublent.
4. Bouton WhatsApp : ouvre wa.me avec le numéro de l'agent et le message. Bouton d'appel : tel: correct.
5. Console sans erreurs. Aucun texte entre crochets oublié. Puis expliquer à l'agent comment la visualiser et la publier (referencia/publicar.md) avec des mots simples.

Erreurs à ne pas répéter

• Logo foncé sur la couverture : le menu est au-dessus de la photo ; utiliser la version claire du logo (ou sans logo, le nom).
• Couleurs de marque sans contraste : color_principal doit être foncé et color_secundario clair. Si l'agent les a inversés, la page corrige la couleur du texte, mais il est préférable de proposer de les échanger.
• Données incohérentes : si les m² ou les chambres du plan ne correspondent pas à l'annonce, en avertir l'agent.
• Données personnelles dans l'URL : le nom du propriétaire doit être à l'intérieur de la page, jamais dans le nom du projet publié.

Dans l'application Claude (sans terminal)

Si ~/.claude/mi-marca-inmobiliaria.md n'existe pas (par exemple, dans l'application Claude), chercher un fichier mi-marca-inmobiliaria.md dans la connaissance du Projet ou attaché au chat et l'utiliser de la même manière. S'il n'est pas là non plus, lancer mi-marca. Toujours livrer le résultat sous forme de fichiers à télécharger (HTML, images) et, pour publier, expliquer Netlify Drop : se rendre sur app.netlify.com/drop et glisser le dossier. Si tu ne peux pas ouvrir un lien de portail, demander les photos et de copier le texte de l'annonce.