figma-implement-design
Translate specific Figma nodes into production-ready UI with close visual fidelity and project-aware implementation decisions.
Quellinformationen
- Repository
- Calvin-Corbett/thomas
- Letzte Quellaktivität
- 9. September 2026 um 02:49
- Erkannte Sprache von SKILL.md
- Englisch
- Sterne
- 4
- Forks
- 0
Installationsoptionen
Standardmäßig ist der Prompt ausgewählt, der zuerst die Quelle prüft. Sie können zu einem direkten Befehl wechseln oder eine lokale Kopie herunterladen.
Quelldateien prüfen
Lesen Sie SKILL.md und alle von SkillsMP angezeigten Begleitdateien, bevor Sie sich für eine Installation entscheiden.
SKILL.md wird angezeigt
SKILL.md
Quellanweisungen · Schreibgeschützte Vorschau- name
- figma-implement-design
- description
- Translate specific Figma nodes into production-ready UI with close visual fidelity and project-aware implementation decisions.
# Figma Implement Design
Use this skill when Thomas must implement a Figma design faithfully in code rather than only summarizing it.
## Workflow
1. Inspect the exact Figma node or screen and gather screenshots, measurements, and assets.
2. Translate the design into the project?s real component structure instead of flat copywork.
3. Implement the UI with attention to spacing, typography, responsive behavior, and states.
4. Verify the result visually against the design source.
5. Report any intentional implementation deviations and why they were necessary.
## Rules
- Aim for fidelity, but adapt responsibly to the project?s real architecture.
- Do not ignore responsive states or interactive variants.
Auf GitHub ansehen