Figma to code th

Skill PiNocPie/thai-claude-skills/skills/designer/figma-to-code-th

Figma design → React/HTML 1:1 | สำหรับ designer, UX/UI หรือคนที่ต้อง . Triggers when user says (Thai/EN): 'figma to code', 'figma code'From its SKILL.md

Install

npx -y skills add PiNocPie/thai-claude-skills --skill figma-to-code-th

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

2 things to look at

no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
13 stars13 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

2.2 KB, 676 tokens by cl100k_base, as published. Nobody here has run it

แปลง Figma เป็นโค้ด

🇹🇭 ดัดแปลงเป็นภาษาไทยจาก openai/skills · License: MIT

ทำอะไรได้

Figma design → React/HTML 1:1

เหมาะกับใคร

designer, UX/UI หรือคนที่ต้อง review งานออกแบบ

ใช้ตอน:

มีไฟล์ Figma แต่ไม่มีเวลา review ทีละหน้า
อยากได้ feedback แบบ structured ไม่ใช่ "สวยดี/ไม่สวย"
ต้องส่งให้ stakeholder แต่อยากรอบคอบก่อน

บอก Claude ยังไง

แค่พิมพ์เป็นภาษาไทยปกติ ไม่ต้องจำชื่อ skill เพราะ Claude จะหยิบใช้เองตาม trigger ที่กำหนดไว้

ตัวอย่าง:

"ช่วยแปลง Figma เป็นโค้ด ให้หน่อย บริบทคือ [อธิบายสถานการณ์ของคุณ]"

"figma to code สำหรับ [กลุ่มเป้าหมาย], อยากได้แบบ [น้ำเสียง/สไตล์]"

Claude จะถามข้อมูลที่ยังขาด (เช่น กลุ่มเป้าหมาย น้ำเสียง บริบทธุรกิจ) ก่อนเริ่มทำงาน

ที่ต้องระวัง

AI ไม่เห็นรูปจริง, ใช้สำหรับ structure/heuristics ได้ แต่ visual judgment ยังต้องคน

🔙 กลับไปดู skill ทั้งหมด · 🐛 แจ้ง bug / ขอแก้ · 📜 License เต็ม

What ships with it

Read from the repository

Just SKILL.md. No reference files, no scripts.

Gives 0 of the 12 instructions most design frontend skills give in 676 tokens

Counted across 1,179 of the 2,086 authors here whose files we hold, read 2026-09-06

Commit to a bold aesthetic directionin 31 of 1179, across 24 files
Prefer component composition over inheritancein 28 of 1179, across 14 files
Animate only transform and opacity propertiesin 27 of 1179, across 22 files
Memoize expensive computations with useMemoin 26 of 1179, across 13 files
Use semantic HTML elementsin 24 of 1179, across 23 files
Virtualize long lists for performancein 21 of 1179, across 10 files
Use CSS variables for design tokensin 20 of 1179, across 14 files
Implement loading, empty, and error statesin 20 of 1179
Lazy load heavy components with Suspensein 19 of 1179, across 8 files
Respect prefers-reduced-motion media queriesin 18 of 1179, across 10 files
Prioritize CSS-only animations for HTMLin 18 of 1179, across 16 files
Use compound components for related UI elementsin 18 of 1179, across 7 files

Said here and by no other author read

Ask for missing information before starting
Use for structure and heuristics only
Request target audience and tone
Request business context

Grouped from the skills themselves: near-identical wordings counted once, and counted by distinct author, so one author publishing three of these counts once. Length counted with cl100k_base; the agent that loads this file may tokenize it differently.