أعزائي المشتركين، اليوم، أريد أن أشارك حلقة جديدة مع فيليكس لي. قام فيليكس بتعليم آلاف المصممين كيفية البرمجة باستخدام Claude Code وFigma MCP. طلبت منه أن يريني كيف يقوم بتحويل تصميم Figma إلى موقع ويب عامل وتحويل موقع الويب مرة أخرى إلى طبقات قابلة للتحرير في Figma. يعد المصمم الذي يمكنه الشحن أحد أكثر الموظفين قيمة في مجال التكنولوجيا اليوم - تعرّف على كيفية القيام بذلك من خلال مشاهدة هذه الحلقة. شاهده الآن على YouTube وApple وSpotify. تحدثت أنا وفيليكس عن:(00:00) 3 منتجات صممها فيليكس وصممها كلود كود(06:36) إنشاء خريطة عالم متحركة ثلاثية الأبعاد في لقطة واحدة(07:50) تطبيق Felix الذي يحلل مدى جودة صفحتك المقصودة (13:17) العرض التوضيحي: تصميم Figma لموقع ويب يعمل في 15 دقيقة (23:07) العرض التوضيحي: مخطط انسيابي لـ FigJam إلى لعبة عمل (31:30) A مهارة مراجع تجربة المستخدم للحصول على تعليقات التصميم (40:19) كيفية تصدير التعليمات البرمجية مرة أخرى إلى Figma كتصميمات قابلة للتحرير (45:10) لماذا لا يتكيف معظم المصممين بسرعة كافية أنا فخور بالشراكة مع ReplitReplit’s Agent 4 هي أفضل طريقة للفرق للعمل مع وكلاء الذكاء الاصطناعي. يمكنك استخدامه من أجل: استكشاف تنوعات التصميم على لوحة قماشية لا حصر لها، البناء باستخدام عوامل ذكاء اصطناعي متعددة في وقت واحد باستخدام لوحة المهام. إنشاء مجموعات شرائح جميلة ورسوم متحركة والمزيد في لقطة واحدة. جرب Agent 4 لمدة 3 أشهر مجانًا باستخدام الكود الخاص بي PYANG26 عند الخروج. احصل على Replit لمدة 3 أشهر مجانًا أهم 10 نصائح تعلمتها من هذه الحلقة إذا كنت تستخدم Figma، فإن Figma MCP هي أفضل طريقة للانتقال من التصميم إلى التعليمات البرمجية: التثبيت. في المحطة الطرفية الخاصة بك، قم بتشغيل "claude mcp add --transport httpFigma https://mcp.figma.com/mcp"Authenticate. افتح Claude Code، واكتب "/mcp" ثم حدد Figma. سيفتح متصفحك لتتمكن من مصادقة MCP باستخدام حساب Figma الخاص بك. انسخ إطار Figma. انتقل الآن إلى أحد تصميمات Figma الخاصة بك وانقر بزر الماوس الأيمن على أي إطار أو طبقة. حدد "نسخ الرابط إلى التحديد" ثم الصق الرابط في Claude Code مع المطالبة: "قم بإنشاء هذا التصميم". الأمر بهذه البساطة. قم بتحويل التعليمات البرمجية مرة أخرى إلى طبقات Figma قابلة للتحرير لاستكشاف المزيد من أشكال التصميم المختلفة. إليك كيفية القيام بذلك خطوة بخطوة بعد إعداد Figma MCP: اقرأ المزيد
كيفية التصميم والبرمجة باستخدام Claude Code وFigma MCP في 50 دقيقة | فيليكس لي
By Creator Economy
·
·
2 min read
·
307 views
Read in:
aa
ace
af
ak
alz
am
ar
as
awa
ay
az
ba
ban
be
bew
+191 more
bg
bho
bik
bm
bn
brx
bs
bug
ca
ceb
cgg
ckb
co
crh
cs
cv
cy
da
de
din
doi
dv
dyu
dz
ee
el
en
eo
es
et
eu
fa
ff
fi
fj
fo
fr
fur
fy
ga
gd
gl
gom
gn
gu
ha
haw
he
hi
hil
hne
hmn
hr
hrx
ht
hu
hy
id
ig
ilo
is
it
ja
jam
jv
ka
kab
kbp
kg
kha
kk
kl
km
kn
ko
kri
ku
ktu
ky
la
lb
lg
li
lij
ln
lo
lmo
lt
ltg
lua
luo
lus
lv
mai
mak
mg
mi
min
mk
ml
mn
mni-mtei
mos
mr
ms
mt
my
nd
ne
nl
nn
no
nr
nso
nus
ny
oc
om
or
pa
pag
pam
pap
pl
ps
pt
pt-br
qu
rn
ro
ru
rw
sa
sah
sat
sc
scn
sg
si
sk
sl
sm
sn
so
sq
sr
ss
st
su
sus
sv
sw
szl
ta
tcy
te
tg
th
ti
tiv
tk
tl
tn
to
tpi
tr
trp
ts
tt
tum
ty
udm
ug
uk
ur
uz
ve
vec
vi
war
wo
xh
yi
yo
yua
yue
zap
zh
zh-hk
zh-tw
zu
