Figma Annotation Guide Skill

Produces a complete set of developer handoff annotations for a Figma screen or component — the notes that turn a visual design into a buildable spec.

Required Inputs

• Screen or component description (describe or summarise what was designed)
• Platform (iOS / Android / Web / React Native)
• Interaction type (static / interactive / animated / form)
• Developer audience (mobile / frontend / full-stack)

Programmatic Helper

Contrast ratios cannot be eyeballed. The AA line sits at 4.5:1, and #777777 on white is 4.478 (fails) while #767676 is 4.54 (passes) — no amount of looking at a screenshot separates those. Compute them: