figma-generate-design by figma/mcp-server-guide
npx skills add https://github.com/figma/mcp-server-guide --skill figma-generate-design使用此技能,通过复用已发布的设计系统——组件、变量和样式——在 Figma 中创建或更新全页界面,而不是使用硬编码的值绘制基础图形。关键洞察:Figma 文件很可能有一个已发布的设计系统,其中包含与代码库 UI 组件和令牌相对应的组件、颜色/间距变量以及文本/效果样式。找到并使用这些,而不是用十六进制颜色绘制方框。
强制要求:在任何 use_figma 调用之前,您必须加载 figma-use。该技能包含适用于您编写的每个脚本的关键规则(颜色范围、字体加载等)。
作为此技能的一部分调用 use_figma 时,始终传递 skillNames: "figma-generate-design"。 这是一个日志记录参数——它不影响执行。
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
当从可以在浏览器中渲染的 Web 应用构建界面时,并行运行两种方法可获得最佳结果:
generate_figma_design 以捕获正在运行的 Web 应用的像素级完美截图generate_figma_design 捕获的像素级完美布局。捕获提供了要瞄准的精确间距、尺寸和视觉处理方式,而您的 use_figma 输出具有链接到设计系统的正确组件实例。generate_figma_design 的输出——它仅用作视觉参考。这结合了两者的优点:generate_figma_design 提供像素级完美的布局精度,而 use_figma 提供保持链接和可更新的正确设计系统组件实例。
此工作流仅适用于 Web 应用,其中 generate_figma_design 可以捕获正在运行的页面。对于非 Web 应用(iOS、Android 等)或更新现有界面时,请使用下面的标准工作流。
按顺序遵循这些步骤。不要跳过步骤。
在接触 Figma 之前,先理解要构建的内容:
您需要从设计系统中获取三样东西:组件(按钮、卡片等)、变量(颜色、间距、圆角半径)和样式(文本样式、效果样式如阴影)。当存在设计系统令牌时,不要硬编码十六进制颜色或像素值。
首选:首先检查现有界面。 如果目标文件已包含使用相同设计系统的界面,请跳过 search_design_system 并直接检查现有实例。一个遍历现有框架实例的 use_figma 调用可以为您提供精确、权威的组件映射:
const frame = figma.currentPage.findOne(n => n.name === "Existing Screen");
const uniqueSets = new Map();
frame.findAll(n => n.type === "INSTANCE").forEach(inst => {
const mc = inst.mainComponent;
const cs = mc?.parent?.type === "COMPONENT_SET" ? mc.parent : null;
const key = cs ? cs.key : mc?.key;
const name = cs ? cs.name : mc?.name;
if (key && !uniqueSets.has(key)) {
uniqueSets.set(key, { name, key, isSet: !!cs, sampleVariant: mc.name });
}
});
return [...uniqueSets.values()];
仅当文件没有现有界面可供参考时,才回退到使用 search_design_system。使用时,广泛搜索——尝试多个术语和同义词(例如,"button"、"input"、"nav"、"card"、"accordion"、"header"、"footer"、"tag"、"avatar"、"toggle"、"icon" 等)。使用 includeComponents: true 来专注于组件。
在映射中包含组件属性——您需要知道每个组件公开了哪些 TEXT 属性用于文本覆盖。创建一个临时实例,读取其 componentProperties(以及嵌套实例的属性),然后删除临时实例。
包含属性信息的组件映射示例:
Component Map:
- Button → key: "abc123", type: COMPONENT_SET
Properties: { "Label#2:0": TEXT, "Has Icon#4:64": BOOLEAN }
- PricingCard → key: "ghi789", type: COMPONENT_SET
Properties: { "Device": VARIANT, "Variant": VARIANT }
Nested "Text Heading" has: { "Text#2104:5": TEXT }
Nested "Button" has: { "Label#2:0": TEXT }
首先检查现有界面(与组件相同)。或者使用 search_design_system 并设置 includeVariables: true。
警告:两种不同的变量发现方法——不要混淆它们。
use_figma配合figma.variables.getLocalVariableCollectionsAsync()—— 仅返回当前文件中定义的局部变量。如果返回为空,并不意味着没有变量存在。远程/已发布的库变量对此 API 不可见。search_design_system配合includeVariables: true—— 在所有链接的库中搜索,包括远程和已发布的库。这是发现设计系统变量的正确工具。
永远不要仅基于
getLocalVariableCollectionsAsync()返回空就断定“没有变量存在”。 在决定创建自己的变量之前,始终还要运行search_design_system并设置includeVariables: true来检查库变量。
查询策略: search_design_system 匹配变量名称(例如,"Gray/gray-9"、"core/gray/100"、"space/400"),而不是类别。并行运行多个简短、简单的查询,而不是一个复合查询:
如果初始搜索返回空,请尝试更短的片段或不同的命名约定——库的命名差异很大("grey" 与 "gray"、"spacing" 与 "space"、"color/bg" 与 "background")。
检查现有界面的绑定变量以获得最权威的结果:
const frame = figma.currentPage.findOne(n => n.name === "Existing Screen");
const varMap = new Map();
frame.findAll(() => true).forEach(node => {
const bv = node.boundVariables;
if (!bv) return;
for (const [prop, binding] of Object.entries(bv)) {
const bindings = Array.isArray(binding) ? binding : [binding];
for (const b of bindings) {
if (b?.id && !varMap.has(b.id)) {
const v = await figma.variables.getVariableByIdAsync(b.id);
if (v) varMap.set(b.id, { name: v.name, id: v.id, key: v.key, type: v.resolvedType, remote: v.remote });
}
}
}
});
return [...varMap.values()];
对于库变量(remote = true),使用 figma.variables.importVariableByKeyAsync(key) 通过键导入。对于局部变量,直接使用 figma.variables.getVariableByIdAsync(id)。
有关绑定模式,请参阅 variable-patterns.md。
使用 search_design_system 并设置 includeStyles: true 以及诸如 "heading"、"body"、"shadow"、"elevation" 等术语来搜索样式。或者检查现有界面使用了什么:
const frame = figma.currentPage.findOne(n => n.name === "Existing Screen");
const styles = { text: new Map(), effect: new Map() };
frame.findAll(() => true).forEach(node => {
if ('textStyleId' in node && node.textStyleId) {
const s = figma.getStyleById(node.textStyleId);
if (s) styles.text.set(s.id, { name: s.name, id: s.id, key: s.key });
}
if ('effectStyleId' in node && node.effectStyleId) {
const s = figma.getStyleById(node.effectStyleId);
if (s) styles.effect.set(s.id, { name: s.name, id: s.id, key: s.key });
}
});
return {
textStyles: [...styles.text.values()],
effectStyles: [...styles.effect.values()]
};
使用 figma.importStyleByKeyAsync(key) 导入库样式,然后通过 node.textStyleId = style.id 或 node.effectStyleId = style.id 应用。
有关详细信息,请参阅 text-style-patterns.md 和 effect-style-patterns.md。
不要将各个部分构建为顶级页面的子元素,稍后再重新设置父级——跨 use_figma 调用使用 appendChild() 移动节点会静默失败并产生孤立的框架。相反,首先创建包装器,然后直接在内部构建每个部分。
在单独的 use_figma 调用中创建页面包装器。将其放置在远离现有内容的位置并返回其 ID:
// 寻找空白区域
let maxX = 0;
for (const child of figma.currentPage.children) {
maxX = Math.max(maxX, child.x + child.width);
}
const wrapper = figma.createFrame();
wrapper.name = "Homepage";
wrapper.layoutMode = "VERTICAL";
wrapper.primaryAxisAlignItems = "CENTER";
wrapper.counterAxisAlignItems = "CENTER";
wrapper.resize(1440, 100);
wrapper.layoutSizingHorizontal = "FIXED";
wrapper.layoutSizingVertical = "HUG";
wrapper.x = maxX + 200;
wrapper.y = 0;
return { success: true, wrapperId: wrapper.id };
这是最重要的步骤。 一次构建一个部分,每个部分都在其自己的 use_figma 调用中。在每个脚本开始时,通过 ID 获取包装器,并将新内容直接附加到它。
const createdNodeIds = [];
const wrapper = await figma.getNodeByIdAsync("WRAPPER_ID_FROM_STEP_3");
// 通过键导入设计系统组件
const buttonSet = await figma.importComponentSetByKeyAsync("BUTTON_SET_KEY");
const primaryButton = buttonSet.children.find(c =>
c.type === "COMPONENT" && c.name.includes("variant=primary")
) || buttonSet.defaultVariant;
// 导入设计系统变量用于颜色和间距
const bgColorVar = await figma.variables.importVariableByKeyAsync("BG_COLOR_VAR_KEY");
const spacingVar = await figma.variables.importVariableByKeyAsync("SPACING_VAR_KEY");
// 使用变量绑定(而非硬编码值)构建部分框架
const section = figma.createFrame();
section.name = "Header";
section.layoutMode = "HORIZONTAL";
section.setBoundVariable("paddingLeft", spacingVar);
section.setBoundVariable("paddingRight", spacingVar);
const bgPaint = figma.variables.setBoundVariableForPaint(
{ type: 'SOLID', color: { r: 0, g: 0, b: 0 } }, 'color', bgColorVar
);
section.fills = [bgPaint];
// 导入并应用文本/效果样式
const shadowStyle = await figma.importStyleByKeyAsync("SHADOW_STYLE_KEY");
section.effectStyleId = shadowStyle.id;
// 在部分内部创建组件实例
const btnInstance = primaryButton.createInstance();
section.appendChild(btnInstance);
createdNodeIds.push(btnInstance.id);
// 将部分附加到包装器
wrapper.appendChild(section);
section.layoutSizingHorizontal = "FILL"; // 在附加之后设置
createdNodeIds.push(section.id);
return { success: true, createdNodeIds };
在每个部分之后,在继续之前使用 get_screenshot 进行验证。仔细查看是否有裁剪/截断的文本(行高切断内容)和重叠的元素——这些是最常见的问题,一眼看去很容易错过。
组件实例附带占位符文本("Title"、"Heading"、"Button")。使用您在步骤 2 中发现的组件属性键,通过 setProperties() 覆盖它们——这比直接操作 node.characters 更可靠。有关完整模式,请参阅 component-patterns.md。
对于公开自己 TEXT 属性的嵌套实例,在嵌套实例上调用 setProperties():
const nestedHeading = cardInstance.findOne(n => n.type === "INSTANCE" && n.name === "Text Heading");
if (nestedHeading) {
nestedHeading.setProperties({ "Text#2104:5": "Actual heading from source code" });
}
仅对于不受任何组件属性管理的文本,才回退到直接使用 node.characters。
将代码组件转换为 Figma 实例时,检查组件在源代码中的默认属性值,而不仅仅是显式传递的值。例如,<Button size="small">Register</Button> 没有 variant 属性——检查组件定义以找到默认的 variant = "primary"。选择错误的变体(例如,Neutral 而不是 Primary)会产生视觉上不正确的结果,这很容易被忽略。
| 手动构建 | 从设计系统导入 |
|---|---|
| 页面包装框架 | 组件:按钮、卡片、输入框、导航等 |
| 部分容器框架 | 变量:颜色(填充、描边)、间距(内边距、间隙)、圆角半径 |
| 布局网格(行、列) | 文本样式:标题、正文、说明文字等 |
| 效果样式:阴影、模糊等 |
当存在设计系统变量时,永远不要硬编码十六进制颜色或像素间距。 使用 setBoundVariable 处理间距/圆角半径,使用 setBoundVariableForPaint 处理颜色。使用 node.textStyleId 应用文本样式,使用 node.effectStyleId 应用效果样式。
组合所有部分后,在整个页面框架上调用 get_screenshot 并与源代码进行比较。使用有针对性的 use_figma 调用修复任何问题——不要重建整个界面。
截取各个部分的截图,而不仅仅是整个页面。 降低分辨率的全页截图会隐藏文本截断、错误颜色和尚未被覆盖的占位符文本。通过节点 ID 截取每个部分的截图以发现:
当更新而不是从头创建时:
get_metadata 检查现有界面结构。get_screenshot 进行验证。// 示例:在现有界面中交换按钮变体
const existingButton = await figma.getNodeByIdAsync("EXISTING_BUTTON_INSTANCE_ID");
if (existingButton && existingButton.type === "INSTANCE") {
// 导入更新后的组件
const buttonSet = await figma.importComponentSetByKeyAsync("BUTTON_SET_KEY");
const newVariant = buttonSet.children.find(c =>
c.name.includes("variant=primary") && c.name.includes("size=lg")
) || buttonSet.defaultVariant;
existingButton.swapComponent(newVariant);
}
return { success: true, mutatedNodeIds: [existingButton.id] };
有关详细的 API 模式和注意事项,请根据需要从 figma-use 参考资料中加载:
遵循 figma-use 中的错误恢复流程:
get_metadata 或 get_screenshot 来检查当前文件状态。因为此技能是增量工作的(每次调用一个部分),所以错误自然限定在单个部分内。来自成功调用的先前部分保持完好。
use_figma 调用中构建超过一个主要部分。get_screenshot 及早发现问题。每周安装次数
77
仓库
GitHub 星标
540
首次出现
1 天前
安全审计
安装于
opencode75
codex71
github-copilot70
gemini-cli70
kimi-cli70
cursor70
Use this skill to create or update full-page screens in Figma by reusing the published design system — components, variables, and styles — rather than drawing primitives with hardcoded values. The key insight: the Figma file likely has a published design system with components, color/spacing variables, and text/effect styles that correspond to the codebase's UI components and tokens. Find and use those instead of drawing boxes with hex colors.
MANDATORY : You MUST also load figma-use before any use_figma call. That skill contains critical rules (color ranges, font loading, etc.) that apply to every script you write.
Always passskillNames: "figma-generate-design" when calling use_figma as part of this skill. This is a logging parameter — it does not affect execution.
When building a screen from a web app that can be rendered in a browser, the best results come from running both approaches in parallel:
generate_figma_design to capture a pixel-perfect screenshot of the running web appgenerate_figma_design capture. The capture provides the exact spacing, sizing, and visual treatment to aim for, while your use_figma output has proper component instances linked to the design system.generate_figma_design output — it was only used as a visual reference.This combines the best of both: generate_figma_design gives pixel-perfect layout accuracy, while use_figma gives proper design system component instances that stay linked and updatable.
This workflow only applies to web apps where generate_figma_design can capture the running page. For non-web apps (iOS, Android, etc.) or when updating existing screens, use the standard workflow below.
Follow these steps in order. Do not skip steps.
Before touching Figma, understand what you're building:
You need three things from the design system: components (buttons, cards, etc.), variables (colors, spacing, radii), and styles (text styles, effect styles like shadows). Don't hardcode hex colors or pixel values when design system tokens exist.
Preferred: inspect existing screens first. If the target file already contains screens using the same design system, skip search_design_system and inspect existing instances directly. A single use_figma call that walks an existing frame's instances gives you an exact, authoritative component map:
const frame = figma.currentPage.findOne(n => n.name === "Existing Screen");
const uniqueSets = new Map();
frame.findAll(n => n.type === "INSTANCE").forEach(inst => {
const mc = inst.mainComponent;
const cs = mc?.parent?.type === "COMPONENT_SET" ? mc.parent : null;
const key = cs ? cs.key : mc?.key;
const name = cs ? cs.name : mc?.name;
if (key && !uniqueSets.has(key)) {
uniqueSets.set(key, { name, key, isSet: !!cs, sampleVariant: mc.name });
}
});
return [...uniqueSets.values()];
Only fall back to search_design_system when the file has no existing screens to reference. When using it, search broadly — try multiple terms and synonyms (e.g., "button", "input", "nav", "card", "accordion", "header", "footer", "tag", "avatar", "toggle", "icon", etc.). Use includeComponents: true to focus on components.
Include component properties in your map — you need to know which TEXT properties each component exposes for text overrides. Create a temporary instance, read its componentProperties (and those of nested instances), then remove the temp instance.
Example component map with property info:
Component Map:
- Button → key: "abc123", type: COMPONENT_SET
Properties: { "Label#2:0": TEXT, "Has Icon#4:64": BOOLEAN }
- PricingCard → key: "ghi789", type: COMPONENT_SET
Properties: { "Device": VARIANT, "Variant": VARIANT }
Nested "Text Heading" has: { "Text#2104:5": TEXT }
Nested "Button" has: { "Label#2:0": TEXT }
Inspect existing screens first (same as components). Or use search_design_system with includeVariables: true.
WARNING: Two different variable discovery methods — do not confuse them.
use_figmawithfigma.variables.getLocalVariableCollectionsAsync()— returns only local variables defined in the current file. If this returns empty, it does not mean no variables exist. Remote/published library variables are invisible to this API.search_design_systemwithincludeVariables: true— searches across all linked libraries , including remote and published ones. This is the correct tool for discovering design system variables.
Never conclude "no variables exist" based solely on
getLocalVariableCollectionsAsync()returning empty. Always also runsearch_design_systemwithincludeVariables: trueto check for library variables before deciding to create your own.
Query strategy: search_design_system matches against variable names (e.g., "Gray/gray-9", "core/gray/100", "space/400"), not categories. Run multiple short, simple queries in parallel rather than one compound query:
If initial searches return empty, try shorter fragments or different naming conventions — libraries vary widely ("grey" vs "gray", "spacing" vs "space", "color/bg" vs "background").
Inspect an existing screen's bound variables for the most authoritative results:
const frame = figma.currentPage.findOne(n => n.name === "Existing Screen");
const varMap = new Map();
frame.findAll(() => true).forEach(node => {
const bv = node.boundVariables;
if (!bv) return;
for (const [prop, binding] of Object.entries(bv)) {
const bindings = Array.isArray(binding) ? binding : [binding];
for (const b of bindings) {
if (b?.id && !varMap.has(b.id)) {
const v = await figma.variables.getVariableByIdAsync(b.id);
if (v) varMap.set(b.id, { name: v.name, id: v.id, key: v.key, type: v.resolvedType, remote: v.remote });
}
}
}
});
return [...varMap.values()];
For library variables (remote = true), import them by key with figma.variables.importVariableByKeyAsync(key). For local variables, use figma.variables.getVariableByIdAsync(id) directly.
See variable-patterns.md for binding patterns.
Search for styles using search_design_system with includeStyles: true and terms like "heading", "body", "shadow", "elevation". Or inspect what an existing screen uses:
const frame = figma.currentPage.findOne(n => n.name === "Existing Screen");
const styles = { text: new Map(), effect: new Map() };
frame.findAll(() => true).forEach(node => {
if ('textStyleId' in node && node.textStyleId) {
const s = figma.getStyleById(node.textStyleId);
if (s) styles.text.set(s.id, { name: s.name, id: s.id, key: s.key });
}
if ('effectStyleId' in node && node.effectStyleId) {
const s = figma.getStyleById(node.effectStyleId);
if (s) styles.effect.set(s.id, { name: s.name, id: s.id, key: s.key });
}
});
return {
textStyles: [...styles.text.values()],
effectStyles: [...styles.effect.values()]
};
Import library styles with figma.importStyleByKeyAsync(key), then apply with node.textStyleId = style.id or node.effectStyleId = style.id.
See text-style-patterns.md and effect-style-patterns.md for details.
Do NOT build sections as top-level page children and reparent them later — moving nodes across use_figma calls with appendChild() silently fails and produces orphaned frames. Instead, create the wrapper first, then build each section directly inside it.
Create the page wrapper in its own use_figma call. Position it away from existing content and return its ID:
// Find clear space
let maxX = 0;
for (const child of figma.currentPage.children) {
maxX = Math.max(maxX, child.x + child.width);
}
const wrapper = figma.createFrame();
wrapper.name = "Homepage";
wrapper.layoutMode = "VERTICAL";
wrapper.primaryAxisAlignItems = "CENTER";
wrapper.counterAxisAlignItems = "CENTER";
wrapper.resize(1440, 100);
wrapper.layoutSizingHorizontal = "FIXED";
wrapper.layoutSizingVertical = "HUG";
wrapper.x = maxX + 200;
wrapper.y = 0;
return { success: true, wrapperId: wrapper.id };
This is the most important step. Build one section at a time, each in its own use_figma call. At the start of each script, fetch the wrapper by ID and append new content directly to it.
const createdNodeIds = [];
const wrapper = await figma.getNodeByIdAsync("WRAPPER_ID_FROM_STEP_3");
// Import design system components by key
const buttonSet = await figma.importComponentSetByKeyAsync("BUTTON_SET_KEY");
const primaryButton = buttonSet.children.find(c =>
c.type === "COMPONENT" && c.name.includes("variant=primary")
) || buttonSet.defaultVariant;
// Import design system variables for colors and spacing
const bgColorVar = await figma.variables.importVariableByKeyAsync("BG_COLOR_VAR_KEY");
const spacingVar = await figma.variables.importVariableByKeyAsync("SPACING_VAR_KEY");
// Build section frame with variable bindings (not hardcoded values)
const section = figma.createFrame();
section.name = "Header";
section.layoutMode = "HORIZONTAL";
section.setBoundVariable("paddingLeft", spacingVar);
section.setBoundVariable("paddingRight", spacingVar);
const bgPaint = figma.variables.setBoundVariableForPaint(
{ type: 'SOLID', color: { r: 0, g: 0, b: 0 } }, 'color', bgColorVar
);
section.fills = [bgPaint];
// Import and apply text/effect styles
const shadowStyle = await figma.importStyleByKeyAsync("SHADOW_STYLE_KEY");
section.effectStyleId = shadowStyle.id;
// Create component instances inside the section
const btnInstance = primaryButton.createInstance();
section.appendChild(btnInstance);
createdNodeIds.push(btnInstance.id);
// Append section to wrapper
wrapper.appendChild(section);
section.layoutSizingHorizontal = "FILL"; // AFTER appending
createdNodeIds.push(section.id);
return { success: true, createdNodeIds };
After each section, validate with get_screenshot before moving on. Look closely for cropped/clipped text (line heights cutting off content) and overlapping elements — these are the most common issues and easy to miss at a glance.
Component instances ship with placeholder text ("Title", "Heading", "Button"). Use the component property keys you discovered in Step 2 to override them with setProperties() — this is more reliable than direct node.characters manipulation. See component-patterns.md for the full pattern.
For nested instances that expose their own TEXT properties, call setProperties() on the nested instance:
const nestedHeading = cardInstance.findOne(n => n.type === "INSTANCE" && n.name === "Text Heading");
if (nestedHeading) {
nestedHeading.setProperties({ "Text#2104:5": "Actual heading from source code" });
}
Only fall back to direct node.characters for text that is NOT managed by any component property.
When translating code components to Figma instances, check the component's default prop values in the source code, not just what's explicitly passed. For example, <Button size="small">Register</Button> with no variant prop — check the component definition to find variant = "primary" as the default. Selecting the wrong variant (e.g., Neutral instead of Primary) produces a visually incorrect result that's easy to miss.
| Build manually | Import from design system |
|---|---|
| Page wrapper frame | Components : buttons, cards, inputs, nav, etc. |
| Section container frames | Variables : colors (fills, strokes), spacing (padding, gap), radii |
| Layout grids (rows, columns) | Text styles : heading, body, caption, etc. |
| Effect styles : shadows, blurs, etc. |
Never hardcode hex colors or pixel spacing when a design system variable exists. Use setBoundVariable for spacing/radii and setBoundVariableForPaint for colors. Apply text styles with node.textStyleId and effect styles with node.effectStyleId.
After composing all sections, call get_screenshot on the full page frame and compare against the source. Fix any issues with targeted use_figma calls — don't rebuild the entire screen.
Screenshot individual sections, not just the full page. A full-page screenshot at reduced resolution hides text truncation, wrong colors, and placeholder text that hasn't been overridden. Take a screenshot of each section by node ID to catch:
When updating rather than creating from scratch:
get_metadata to inspect the existing screen structure.get_screenshot after each modification.// Example: Swap a button variant in an existing screen
const existingButton = await figma.getNodeByIdAsync("EXISTING_BUTTON_INSTANCE_ID");
if (existingButton && existingButton.type === "INSTANCE") {
// Import the updated component
const buttonSet = await figma.importComponentSetByKeyAsync("BUTTON_SET_KEY");
const newVariant = buttonSet.children.find(c =>
c.name.includes("variant=primary") && c.name.includes("size=lg")
) || buttonSet.defaultVariant;
existingButton.swapComponent(newVariant);
}
return { success: true, mutatedNodeIds: [existingButton.id] };
For detailed API patterns and gotchas, load these from the figma-use references as needed:
Follow the error recovery process from figma-use:
get_metadata or get_screenshot to inspect the current file state.Because this skill works incrementally (one section per call), errors are naturally scoped to a single section. Previous sections from successful calls remain intact.
use_figma call.get_screenshot to catch issues early.Weekly Installs
77
Repository
GitHub Stars
540
First Seen
1 day ago
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
opencode75
codex71
github-copilot70
gemini-cli70
kimi-cli70
cursor70
shadcn/ui 框架:React 组件库与 UI 设计系统,Tailwind CSS 最佳实践
69,400 周安装
品牌战略师 | 专家级品牌定位、差异化与识别系统开发框架
451 周安装
Biome:比ESLint快100倍的一体化代码检查和格式化工具链 | Rust编写
446 周安装
Express REST API 开发教程:5步构建健壮可扩展的Node.js后端服务
444 周安装
DevOps IaC工程师指南:Terraform、Kubernetes、云平台与CI/CD实践
446 周安装
React Aria Components - 无样式无障碍UI组件库 | 支持自定义样式与AI协作
453 周安装
read-working-memory:读取AI工作记忆,获取会话上下文与近期简报
447 周安装