Fr ü her war es am einfach sten , ein Produkt an zwei Or ten zu machen :
Es wird nicht ent wor fen , es wird wie ein halb fer tig es Produkt gemacht ; es wird nicht entwick elt , das Ent wur f wird nur für immer in Fig ma liegen .
Die Ver kn üp fung von Codex und Fig ma wird nun zu :
Ide en → Bed ür f nisse aus wä hlen → Des ig ns er stellen oder ändern → Real - Se ite entwick eln → Bro wser - B estä tig ung → Zur ück zu Fig ma
Fig ma M CP unterstüt zt bereits die b idir ek tion elle Zusammenarbeit : Code x kann die Kom pon enten , V aria b len , L ayo uts und Materia lien in Fig ma lesen , la uf ende Web se iten als be arbeit bare Fig ma - E bene er fassen und mit entsprech enden Bere chtig ungen auch n ative Fig ma - I nh alte direkt er stellen oder ändern .
1️ ✪ Wie te ilen sich Codex und Fig ma auf ?
V iele Menschen denken :
Codex ist für den Code verantwort lich Fig ma ist für die Ze ich nung verantwort lich
T ats äch lich sieht die Arbeits teilung eher so aus .
Codex : An forder ung san alyse + Entwicklung
Es kann Ihnen helfen :
-
V age Ide en zu kl ären .
-
Les en von PR D und Projekt code
-
Analyse der Se iten struktur
-
Er stellen und Ä nd ern von Front - End - Code
-
Er stellen und testen
-
An pas sung nach Design Feed back
-
Über prü fen Sie die end gül tigen Änderungen
Fig ma : Design - und Über prüfung - Ar be its bereich
Es enthält ha up ts äch lich :
-
Struktur der Seite
-
Kom pon enten und Vari anten
-
Far be , Sch rift und Ab stand V aria b len
-
Autom atis ches L ayo ut
-
Inter ak tive Erklärung
-
Produkt be wert ungen und Kom ment are
-
Meh rere Design programme
Die Verbindung be ider ist Fig ma M CP。
Es konver ti ert ausge wä hlte Fig ma - Fr ame works , Kom pon enten , V aria b len , L ayo uts und Materia lien in einen strukt uri erten Kon text , der Codex verstehen und imp lem enti eren kann . Beach ten Sie , dass M CP selbst nicht den end gül tigen Code für Sie er zeug t ; es ist weiterhin der Codex , der für die An pas sung des Code - Re pos itori es , die Wieder ver wendung von Kom pon enten und die Fer tig stellung der Entwicklung zustän dig ist .
2️ ✪ Be vor Sie beginnen , bestä tigen Sie Ihr Kon to und die Bere chtig ungen .
Sie müssen sich vor bere iten :
1 Chat G PT Desk top - C ode x - Arbeits bereich oder Codex C LI 2 Ein Fig ma - Ac count 3 Ein einfa ches Ü b ungs projekt 4 Git zum Spe ich ern und Rück sch alten von Code 5 Ex pla ined Anforderungen , PR D s oder Refer enz materia lien
Der zeit ist der Remo te - F ig ma M CP auf verschiedenen Pak eten und Pl ätzen verfü gbar , aber mit unterschied lichen An ru fs ch rän ken . Star ter - Ben ut zer sowie View , Col lab - S itz pl ätze in kosten pf lich tigen Te ams , Les eto ols haben in der Regel nur eine kleine Anzahl von Auf ru fen pro Mon at ; Voll - und Dev - S itz pl ätze sind höher .
Z wei wich tige Funk tionen unters cheiden :
-
Les en von Design inform ationen .S itz pl ätze wie Dev und Full können je nach Bere chtig ung gen ut zt werden
-
Sch reiben auf Can vas , ändern Sie die Fig ma - Le in wand direkt: Ben ö tigt einen Full - S itz platz und besit zt Be arbeit ungs rechte für die Zi eld atei .
Write to Can vas bef ind et sich noch in der Beta - Ph ase , und Fig ma sagt , dass es derzeit keine zusätz lichen Geb ü hren gibt , aber in Zukunft plant , die Geb ü hren nach Nut zung zu bere ch nen .
3️ ✪ Er ster Sch ritt : Inst alli eren von Codex
Ben ut zer , die bereits inst alli ert sind , können direkt über spr ingen .
mac OS oder Linux
Die Windows Power Sh ell
power sh ell - Execu tion Po licy By Pass - c " ir m
| „ IE X "
Sie können auch n pm verw enden :
n pm inst alli eren - g
mac OS kann auch über Hom eb rew inst alli ert werden :
Bre w Inst all - Cas k Code x
Nach der Inst alla tion überprü fen :
Code x - Version en
Star ten Sie die C LI :
Der Code x
Diese Be feh le stam men aus dem aktu ellen of fizi ellen Codex - Re posit ory von Open AI .
Ab Juli 20 26 wurde das urspr üng liche Codex - D esk top - Er leb nis in die Chat G PT - D esk top - Anwendung integ ri ert , wobei die Code x - Pro jek te , - Einst ell ungen und - Work flo ws bei be halten werden .
4️ ✪ Sch ritt 2: Verb inden von Fig ma in den Codex
Auf dem aktu ellen neuen Chat G PT - D esk top können Sie allgeme in zug re ifen :
Einst ell ungen → Pl ug ins → Fig ma → Inst alli eren
Nach der An meld ung und Autor isierung in Fig ma können Sie sie im Codex - Ar be its bereich auf ru fen .
Ein ige Version en oder die Fig ma - H il fe se iten zeigen immer noch den folgenden E ingang an :
Lin ks oben Pl ug ins → + neben Fig ma → Inst alli eren von Fig ma → Zug riff erla uben
Dies liegt daran , dass die Pl ugin - Ver walt ung nach der Integr ation von Codex im Juli in Chat G PT - D esk top geändert wurde und die tatsäch liche Sch nitt stelle je nach Version vari i eren kann .
Über prü fen Sie , ob die Verbindung erfolg reich ist
Ö ff nen Sie eine Fig ma - D atei , auf die Sie Zug riff haben :
Wä hlen Sie Frame → Rechts tas te → Copy link to sele ction → Link an Codex senden .
Und dann importi eren :
Mark down s
请通过 Figma MCP 读取这个设计节点。
暂时不要写代码，请告诉我：
1. 页面包含哪些模块
2. 使用了哪些颜色、字体和间距
3. 有哪些组件和变量
4. 哪些内容适合复用项目已有组件
5. 是否提供了移动端设计
无法确认的内容请明确标记，不要自行猜测。Die Remo te - F ig ma - M CP arbe itet auf Lin ks , die möglich st genau auf einen Frame , eine Kom pon ente oder eine Vari ante ver weisen sollten , an statt nur die Start se ite - Ad resse der gesamten D atei zu lie fern .
5️ ✪ Tip p 1: Beg innen Sie mit einer Website
Du kannst importi eren :
H elf en Sie mir , eine Ha usti er - Web site zu er stellen .
Dies kann jedoch nur verwendet werden , um Diskus sionen zu starten und nicht direkt in die Entwicklung zu gehen .
Es ist sicher er , den Codex als Produkt mana ger zu fragen .
Kopi eren Sie diesen Text direkt !
Mark down s
我想制作一个宠物用品品牌官网，但需求还不完整。
先不要设计，也不要写代码。
请向我提问，帮助我明确：
1. 目标用户是谁
2. 核心产品是什么
3. 用户进入网站后的主要目标
4. 首页需要哪些模块
5. 是否需要商品详情、购物车或支付
6. 品牌风格与参考方向
7. 手机端有哪些重点
8. 第一版必须完成什么
9. 第一版暂时不做什么
10. 最终验收标准是什么
每轮最多问5个问题。
信息不足时继续提问，不要自行编造。
确认完成后，输出：
- 产品定位
- 页面结构
- 用户流程
- 内容清单
- 设计需求
- 开发计划Ein Sat z kann ein Projekt starten , aber die Richtung ents cheid et , bleiben die Fragen , B estä tig ungen und Kom prom ise , die dana ch kommen .
6️ ✪ Codex er zeug t erste Ent wür fe in Fig ma
In der urspr üng lichen Auf forder ung :
Er stellen Sie die Start se ite in einer neuen Fig ma - D atei .
Das ist nicht stabil genug .
Für den kleinen Wei ßen ist es besser :
-
Er stellen Sie eine neue le ere Design - D atei in Fig ma .
-
B estä tigen Sie , dass Sie die redak tion ellen Re chte haben ;
-
Kopi eren von Dokument en ver bind ungen ;
-
Sch reiben Sie den Codex in den Le in wand .
Mark down s
请使用 Figma MCP，在下面这个空白文件中创建首页设计：
【粘贴Figma文件链接】
要求：
1. 使用Figma原生图层
2. 使用Auto Layout
3. 建立清晰的页面层级
4. 建立颜色、字体和间距变量
5. 包含桌面端与手机端页面
6. 图片位置先使用占位区域
7. 不编造Logo和品牌素材
8. 不增加尚未确认的功能Write to Can vas ermög licht das Er stellen von Frame , Kom pon enten , V aria b len und automatis chen L ayo uts , ben ö tigt jedoch Voll bes itz ungen und D atei be arbeit ungs rechte . Nach der Gen eri erung muss die Aus gabe weiterhin in Fig ma manu ell überprü ft werden , an statt die KI - A us gabe direkt als end gül tig es Design zu betra chten .
Wenn es keinen Full - S itz platz gibt , kann man den Codex zu erst aus führen :
-
Struktur der Seite
-
Liste der Kom pon enten
-
Design - Nor men
-
W ire fr ame Besch reib ung
Sie können es dann manu ell in Fig ma er stellen oder mit einem bereits vor hand enen Ent wur f lesen und entwick eln .
7️ ✪ Pra xis 2: Ver wand eln Sie Ihr Fig ma - Des ign in eine echte Web se ite
Nach der B estä tig ung des Des ig ns wä hlen Sie den Frame , den Sie entwick eln mö chten , und geben Sie den Link an den Codex :
Mark down s
请根据这个Figma Frame实现当前项目中的首页。
【设计要求】
1. 遵循布局、间距、颜色和字体层级
2. 优先复用项目已有组件和变量
3. 不创建重复的组件系统
4. 使用Figma提供的真实图片和图标
5. 同时适配桌面端与手机端
【工程要求】
1. 先检查项目技术栈
2. 先输出实现计划
3. 不安装没有必要的依赖
4. 不修改无关文件
5. 不添加设计稿中没有的业务功能
【验证要求】
1. 运行已有构建和测试
2. 检查文字溢出与横向滚动
3. 检查按钮、链接和交互
4. 对比页面与Figma参考
5. 输出修改文件及验证结果
无法实际验证的项目必须标记为“未验证”。Of fizi ell emp fie hlt der Codex , den gena uen Kon text und Screen sh ots des Kn oten zu er fassen und vor hand ene Kom pon enten , Tok en , Ro uting und Daten mus ter im Code - Re posit ory wieder zu ver w enden , an statt die von M CP zurück geg ebene Beispiel struktur direkt zu kopi eren .
Je standard isi er ter die Fig ma - D atei ist , desto stabil er sind die Ergebnisse , die zum ersten Mal er zeug t werden :
-
Möglich st Auto L ayo ut verw enden .
-
Teile nicht alle a use inander lassen .
-
Der Name der K lasse ist klar
-
Ver w enden von V aria b len oder Design - T oken
-
E chte Bil der und Sym bole erhalten
-
K lare Desk top - und Mobile - Stat us
8️ ✪ Tip p 3: Ver wand eln Sie Screen sh ots in ein Original produkt
Wenn Sie eine Seite sehen , die Ihnen gefällt , können Sie einen Screen shot hoch la den , damit der Codex sie analy si ert , aber lassen Sie es nicht direkt kopi eren .
Die Geschäfts log ik und Inter ak tions reg eln , die im Screen shot nicht zu sehen sind , müssen zu erst mir Fragen stellen , nicht selbst erf inden .
Mark down s
请分析我提供的网页截图。
不要逐像素复刻，也不要复制原网站的：
- Logo
- 品牌名称
- 文案
- 插画
- 产品图片
- 具有明显识别度的视觉资产
请只提取：
1. 信息层级
2. 页面模块
3. 配色逻辑
4. 字体层级
5. 卡片和按钮风格
6. 留白与间距
7. 图片使用方式
再结合我的产品需求，生成一套原创设计。Screen sh ots lie fern nur visu elle Informationen und können nicht AI sagen :
-
Was passiert , wenn man den Kn op f dr ück t
-
Wie man das For mu lar überprü ft
-
wo her die Daten gewonnen werden
-
Wie die Reg istri erungs rechte geste u ert werden
-
Wie man das Men ü am H andy er öff net
-
Wie man Sche it ern und Le er heit zeigt
9️ ✪ Pra xis 4: Ver wand eln Sie PR D in einen überprü f baren Prot otyp
Sob ald Sie die PR D an den Codex über geben haben , bit ten Sie sie nicht sofort , eine Seite zu gen eri eren .
Z uer st müssen Sie die L ücken in der Nach frage finden :
Mark down s
请读取这份产品需求文档。
第一阶段只做需求分析，不要生成设计和代码。
请整理：
1. 用户角色
2. 每个角色能够执行的操作
3. 所需页面
4. 页面核心任务
5. 正常流程
6. 异常流程
7. 空状态和错误状态
8. 权限边界
9. 矛盾或模糊描述
10. 必须由我补充的问题
等待我确认后，再制作产品原型。Na chd em Sie die Anforderungen bestä tigt haben , lassen Sie Codex die Seite oder das Fig J am - F low dia gram m über Fig ma M CP er stellen .
Bei der Verwendung von Write to Can vas ben ö tigen Sie den noch einen Full - S itz und Be arbeit ungs rechte ; ein Dev - S itz eig net sich besser zum Les en des Design kon text es , an statt direkt die Le in wand zu ändern .
🔟 S enden Sie die la uf ende Seite zurück zu Fig ma
Dies ist eine der wert voll sten Fä hig keiten von Codex + Fig ma .
Die tradition ellen Pro z esse sind :
Fig ma Design → Entwicklung → Imp lem enti erung → Ent wur f läuft ab
Jetzt kann ein gesch lossen er Kre isla uf er stellt werden :
Fig ma - Des ign → Codex - Ent wick lung → Bro wser bet rieb → Cap ture Back Fig ma → Review und An pas sung → Codex erne ut imp lem enti ert
Sie können zum Codex Folg endes sagen :
Star ten Sie bitte den lok alen Entwick lungs ser ver für das aktuelle Projekt . Ver w enden Sie die Code - to - Can vas - F unk tionen von Fig ma M CP , um die aktuelle Start se ite in eine neue Fig ma Design - D atei zu er fassen .Über sch re iten Sie nicht den urspr üng lichen Ent wur f . Na chd em die erste Er fassung ab geschlossen ist , te ilen Sie mir mit , wie Sie weitere Se iten status er fassen können .
Code to Can vas kann die la uf ende Seite in einem Bro wser in ein be arbeit bar es Fig ma Frame um wand eln . Der aktuelle Z ust and wird automatis ch er fasst , wenn der Bro wser zum ersten Mal ge öff net wird ; andere Se iten , Pop - ups oder Fehler zust ände erforder n in der Regel , dass Sie die Seite mani puli eren und dann die Er fassung mit " Ges am ter Bild sch irm " oder " E lement aus wä hlen " in der Sym bol le iste fort führen .
Für das Er stellen oder Be arbeiten eig ener Er fass ungs date ien in D raf ts können Sie vers chiedene Sit ze verw enden ; zum Sch reiben vor hand ener D atei en außer halb von D raf ts ben ö tigen Sie einen Voll sit z und Be arbeit ungs rechte .
1 der1 der App und Daten , aber auch Gren zen .
Codex + Fig ma eig net sich für die Her stellung von :
-
Werk ze uge zu tun .
-
Ge wo hn heit zu sch lagen .
-
Ein fa che Buch haltung
-
Dat ensch utz b ü cher
-
Produkt Land ing Seite
-
Betrieb des Prot oty pen im H inter grund
-
Le ichte Web App
„ Se ite er stellen " bedeutet jedoch nicht , „ Re ife - App s ab zus ch ließen " .
Die mob ilen An wend ungen ben ö tigen möglich erweise noch :
-
X code oder das Android SD K
-
Unters ch rift und Z erti fikat
-
Der Back - End - Service
-
Registrierung und Berechtigungen
-
Benachrichtigung schieben
-
Privacy Policy
-
App Store Überprüfung
-
Langfristige Instandhaltung
Auch die Datenschutzbücher müssen bestätigt werden:
-
Daten-Schnittstelle
-
Indikator Kaliber
-
Benutzerrechte
-
Daten isolieren
-
Seiten und Performance
-
Verarbeitung sensibler Daten
1 der2 2 Nach Abschluss nicht direkt einsetzen.
Zum Abschluss gibt es folgende Abschnitte an den Codex:
Mark down s
请对当前项目执行发布前检查。
先列出项目中真实存在的：
- build
- lint
- test
- 浏览器测试
- 部署脚本
然后执行可以安全运行的检查。
检查内容：
1. 构建是否成功
2. 是否存在终端或控制台错误
3. 是否存在横向滚动
4. 图片是否加载失败
5. 按钮和链接是否有效
6. 表单是否提供错误提示
7. 是否存在测试文案和占位数据
8. 是否泄露API Key或敏感信息
9. 页面是否符合Figma设计
10. 是否存在明显无障碍问题
不能实际验证的项目标记为“未验证”，
不要写成“已通过”。
不要执行正式部署、购买域名或创建付费资源。Der offizielle Empfehlungsprozess erfordert auch die Verwendung eines echten Browsers im Vergleich zum Design und die Kombination von Tools wie Playwright, um das Aussehen und die Interaktion der Seite zu überprüfen, anstatt nur den Code zu lesen und die Fertigstellung zu erklären.
Die Generierung von Code bedeutet nur, dass das Projekt eine erste Version hat; die Validierung bedeutet, dass es sich dem Produkt nähert.
Abschließende Zusammenfassung
Die richtige Öffnung von Codex + Figma ist nicht:
Ein Wort → Automatisches Design → Automatische Entwicklung → Automatische Online-Aufnahme
Sondern:
1Codex-Fragen, klare Anforderungen2Figma-Hosting für bearbeitbare Designs3Seiten und Prozesse manuell bestätigen4Codex-Implementierung von echtem Code5Browser und Testwerkzeuge überprüfen6Implementierungsergebnisse zurücksenden7Bestätigung vor Bereitstellung online
In der Vergangenheit würde man nicht in Figma Karten entwerfen, und nicht in Code Karten programmieren.
Jetzt senkt Codex + Figma die Schwelle von der Idee zum Prototypen bis hin zu einer ausführbaren Seite.
Es reduziert jedoch die Realisierungskosten, nicht die Denkenkosten.
Was letztendlich den Wert eines Produkts bestimmt, ist:
-
Welches Problem hast du gelöst?
-
Wer will nutzen
-
Die Bedürfnisse sind klar
-
Die Daten sind zuverlässig
-
Der Code wurde überprüft.
-
Möchten Sie fortfahren?