Figma 是一个用于界面设计的协作式 Web 应用程序。本笔记本介绍如何从
Figma REST API 加载数据到可被 LangChain 处理的格式，以及用于代码生成的示例用法。
import os
from langchain.indexes import VectorstoreIndexCreator
from langchain_community.document_loaders.figma import FigmaFileLoader
from langchain_core.prompts.chat import (
ChatPromptTemplate,
HumanMessagePromptTemplate,
SystemMessagePromptTemplate,
)
from langchain_openai import ChatOpenAI
?node-id=\{node_id\} 参数。
访问令牌的说明请参阅 Figma 帮助中心文章：help.figma.com/hc/en-us/articles/8085703771159-Manage-personal-access-tokens
figma_loader = FigmaFileLoader(
os.environ.get("ACCESS_TOKEN"),
os.environ.get("NODE_IDS"),
os.environ.get("FILE_KEY"),
)
# 更多详情请参阅 https://python.langchain.com/en/latest/modules/data_connection/getting_started.html
index = VectorstoreIndexCreator().from_loaders([figma_loader])
figma_doc_retriever = index.vectorstore.as_retriever()
def generate_code(human_input):
# 我不确定 Jon Carmack 的风格是否能生成更好的代码。效果可能因人而异。
# 聊天相关信息请参阅 https://python.langchain.com/en/latest/modules/models/chat/getting_started.html
system_prompt_template = """你是专家级程序员 Jon Carmack。请根据用户请求，使用提供的设计上下文，尽可能创建地道的 HTML/CSS 代码。
所有内容必须内联在一个文件中，并且你的响应必须能被浏览器直接渲染。
Figma 文件节点和元数据：{context}"""
human_prompt_template = "编写 {text} 的代码。确保其具有移动端响应式"
system_message_prompt = SystemMessagePromptTemplate.from_template(
system_prompt_template
)
human_message_prompt = HumanMessagePromptTemplate.from_template(
human_prompt_template
)
# 删除 gpt-4 model_name 以使用默认的 gpt-3.5 turbo 获得更快的结果
gpt_4 = ChatOpenAI(temperature=0.02, model_name="gpt-4")
# 如需筛选更长的文档，可使用检索器的 'get_relevant_documents' 方法
relevant_nodes = figma_doc_retriever.invoke(human_input)
conversation = [system_message_prompt, human_message_prompt]
chat_prompt = ChatPromptTemplate.from_messages(conversation)
response = gpt_4(
chat_prompt.format_prompt(
context=relevant_nodes, text=human_input
).to_messages()
)
return response
response = generate_code("page top header")
response.content 中返回以下内容：
<!DOCTYPE html>\n<html lang="en">\n<head>\n <meta charset="UTF-8">\n <meta name="viewport" content="width=device-width, initial-scale=1.0">\n <style>\n @import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@500;700&family=Inter:wght@600&display=swap\');\n\n body {\n margin: 0;\n font-family: \'DM Sans\', sans-serif;\n }\n\n .header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 20px;\n background-color: #fff;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n }\n\n .header h1 {\n font-size: 16px;\n font-weight: 700;\n margin: 0;\n }\n\n .header nav {\n display: flex;\n align-items: center;\n }\n\n .header nav a {\n font-size: 14px;\n font-weight: 500;\n text-decoration: none;\n color: #000;\n margin-left: 20px;\n }\n\n @media (max-width: 768px) {\n .header nav {\n display: none;\n }\n }\n </style>\n</head>\n<body>\n <header class="header">\n <h1>Company Contact</h1>\n <nav>\n <a href="#">Lorem Ipsum</a>\n <a href="#">Lorem Ipsum</a>\n <a href="#">Lorem Ipsum</a>\n </nav>\n </header>\n</body>\n</html>
通过 MCP 将这些文档连接到 Claude、VSCode 等，以获取实时答案。