Que fait Design Website ?
Objectif
Générer un site web HTML mockup élégant et complet pour le business d'un prospect. Le site respecte l'esthétique buildinamsterdam.com : typographie audacieuse, fonds blanc cassé, grilles éditoriales, accents terre cuite. Utilisé pour présenter des services de design web.
Entrées
- URL de la feuille Google Sheets avec les données du prospect
- Numéro de ligne (indexé à partir de 1, hors en-tête) pour sélectionner le prospect
- Optionnel : nom de l'onglet (par défaut : premier onglet)
Colonnes attendues dans la feuille
Le script mappe ces colonnes (insensible à la casse, correspondance flexible) :
| Colonne | Correspond à |
|---|---|
| company_name / company | Nom de l'entreprise (hero, navigation, pied de page) |
| description / about | Section À propos + sous-titre du hero |
| keywords / services | Grille des services (séparés par des virgules) |
| phone / phone_number | Section Contact |
| email / contact_email | Section Contact |
| address / full_address | Section Contact |
| city, state, country | Informations de localisation |
| industry / category | Recherche d'images Unsplash |
| first_name, last_name | Attribution au propriétaire |
| title / role | Rôle du propriétaire |
Scripts
scripts/read_prospect.py— Lire une seule ligne de prospect depuis Google Sheets → JSONscripts/generate_website.py— Générer le site HTML à partir du JSON du prospect
Processus
Étape 1 : Lire les données du prospect
python3 .claude/skills/design-website/scripts/read_prospect.py \
--url "SHEET_URL" \
--row ROW_NUMBER \
--worksheet "WORKSHEET_NAME" # optionnel
Sort le JSON sur stdout.
Étape 2 : Générer le site
python3 .claude/skills/design-website/scripts/read_prospect.py \
--url "SHEET_URL" --row 1 | \
python3 .claude/skills/design-website/scripts/generate_website.py
Ou avec un fichier JSON :
python3 .claude/skills/design-website/scripts/generate_website.py < prospect.json
Étape 3 : Prévisualiser
Ouvrez le fichier généré dans votre navigateur :
open .tmp/website_*.html
Sorties
.tmp/website_{company_slug}.html— Fichier HTML autonome, consultable dans n'importe quel navigateur- Tout le CSS est inline, les images sont des URL externes (Unsplash)
Environnement
UNSPLASH_ACCESS_KEYdans.env— Requis pour les photos libres de droits. Obtenez une clé gratuite sur https://unsplash.com/developers- Si aucune clé n'est définie, utilisation par défaut d'images factices depuis picsum.photos
- Identifiants OAuth Google (token.json / credentials.json) pour l'accès aux feuilles
Système de design
- Police : Inter (CDN Google Fonts)
- Couleurs : Blanc cassé
#F2EFE6, Noir#000, Blanc#FFF, Terre cuite#C38133 - Typographie : Affichage en gras et majuscules (72-100px), titres de section (36-48px), corps de texte (16-18px)
- Mise en page : Hero pleine page, À propos en deux colonnes, grille de services en trois colonnes, galerie 2x2
- Boutons : Bordés, majuscules, espacés
Cas particuliers
- Colonnes manquantes : Le script utilise des valeurs par défaut raisonnables (par ex. "Bienvenue" si aucune description)
- Pas de clé Unsplash : Utilise des images de remplacement depuis picsum.photos
- Noms d'entreprise longs : Le CSS gère l'adaptation avec une taille de police responsive
- Caractères spéciaux : Échappés HTML dans la sortie