Guide de travail

Workflow
Figma ↔ Code

Comment garder Figma et acidstudio.ch synchronisés — sans limite d'API, 100% gratuit, via screenshots et scripts Scripter.

Figma → Code

Screenshot dans Figma

Sélectionne le composant → Cmd+Shift+4

Gratuit

Colle dans Claude

Image + prompt standard → code Astro/React généré

Claude claude.ai

Colle dans VS Code

Fichier dans src/components/ → npm run dev

Code → Figma

Note ce qui a changé

Couleur, taille, nouveau composant dans le code

Demande un script à Claude

"Génère un script Scripter pour mettre à jour [X]"

Script JS généré

Lance dans Scripter

Figma → Plugins → Scripter → colle → ▶ Run

Gratuit

02Scénarios du quotidien

Clique sur un scénario pour voir le prompt exact à envoyer à Claude.

Tu modifies un composant dans Figma

Nouveau style de bouton, card, section modifiée

›

  # Message à envoyer à Claude avec le screenshot :
Voici mon [bouton/card/section] modifié dans Figma.
[colle le screenshot ici]

Génère le code Astro pour src/components/ui/[nom].tsx
Design System v2.1 :
- Accent : #c8f135 · Texte sur acid : #1a2000
- Breakpoint : 767px CSS / 768 JS
- Glass : rgba(255,255,255,0.78) + blur(14px)
- Pas de overflow:hidden sur glass button

Tu crées une nouvelle page ou section

Nouvelle landing, section pricing, formulaire

›

  # Message à envoyer à Claude avec le screenshot :
Voici ma nouvelle section [Hero/Pricing/Contact].
[colle le screenshot ici]

Stack : Astro + Tailwind CSS
Génère le fichier src/pages/[page].astro complet.

Respecte :
- Accent #c8f135, texte acid #1a2000
- Breakpoint 767px / 768 JS
- Design System v2.1 Acid Studio

Tu changes quelque chose dans le code

Nouvelle couleur, composant ajouté, taille modifiée

›

  # Message à envoyer à Claude :
J'ai changé ceci dans mon code :
- [couleur X → Y]
- [composant ajouté : ...]
Génère un script Figma Scripter pour :
1. Mettre à jour les variables Figma correspondantes
2. Créer le composant dans la page Components si nouveau

Tu veux vérifier la cohérence Figma ↔ Code

Avant un push, avant de montrer à un client

›

  # Message à envoyer à Claude avec le screenshot :
Voici ma page [X] dans Figma.
[colle le screenshot ici]

Compare avec le Design System v2.1 Acid Studio.
Relève les incohérences et génère :
1. Script Scripter pour corriger Figma
2. Code pour corriger le site

03Couleurs

Ink

#111111

Fond principal · H1–H3

Acid ★

#c8f135

CTA · Badge · Accent

Blanc

#ffffff

Cards · Arrière-plans

Blue Tech

#0c5bd3

Liens UI · Sélection JS

Prose

#4b5563

Corps blog · Desc.

Vert Code

#178d00

Code inline UNIQUEMENT

✓ Acid #c8f135 autorisé

CTA primaires hero + formulaire

Badge Disponible avec pulse

Highlight plan Populaire

Texte sur acid → #1a2000

✗ Acid #c8f135 interdit

Liens dans le blog ou la prose

H2, H3 dans le blog

Texte blanc sur fond acid

04Typographie

 Display 52px · Outfit 700 · ls -0.02em · #000000
H1 44px · Outfit 700 · ls -0.02em · #000000
H2 30px · Outfit 700 · border-bottom 2px #000
H3 20px · Outfit 600 · #000000 (jamais de couleur accent)
Corps 16px · Inter 400  · lh 1.8 · ls 0.3px · #4b5563
UI/Nav 14px · Inter 500  · #111111
Small 13px · Inter 400  · #767676
Code 13px · Mono 400   · bg #f1f5f9 · color #178d00

05Règles critiques

Glass Button

 /* ✅ Obligatoire */ .glass-button {
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(14px);
  border: 0.5px solid rgba(0, 0, 0, 0.11);
  border-radius: 8px;
}
.glass-button-shadow { display: none; }
/* ✗ Jamais */ /* overflow:hidden · ::before gradient · inset:0 shadow */ 

Hero Shimmer

 /* ✅ Toujours combiner les deux */ .hero-shimmer {
  animation:
wordReveal 0.75s ease forwards,
shimmerSlide 4s linear 1.2s infinite;
}
/* ✗ shimmerSlide seul → opacity reste 0 */ 

Breakpoint

 /* CSS */
@media (max-width: 767px) { }
/* JavaScript */
if (window.innerWidth < 768) { }
/* ✗ Jamais 900px — désynchronise tarifs-details */ 

06Checklist avant chaque push

Coche chaque point avant de pousser sur Infomaniak.

Aucun breakpoint 900px — vérifier avec grep -r "900px" src/

Aucun CTA avec #178d00 hors code inline

Texte sur fond acid = #1a2000 (jamais blanc)

H3 blog en #000000 — aucune couleur accent

Liens blog en noir + underline gris (pas #0c5bd3)

Hero shimmer = wordReveal + shimmerSlide combinés

Glass button sans overflow:hidden

npm run build passe sans erreurs

Les cases cochées sont mémorisées dans le navigateur.

WorkflowFigma ↔ Code