Communitygithub.com

Figma设计系统落地页

根据完整的简报,在指定的Figma目标中设计落地页,每次运行可选用Basalam或自定义设计系统路线,可选的Mobbin UX参考,本地基于设计系统构建的缺失模式,规范的Figma字体回退,以及有限的两轮润色。在预检之前绝不修改Figma,也绝不发明无界定的视觉语言。

Figma设计系统落地页 是什么?

该技能旨在将完整的落地页简报转化为Figma中的最终设计。它会根据简报推断出最小且有效的页面结构,将每个需求映射到授权的设计系统,仅当系统没有匹配组件时才创建本地衍生的模式,并在组装后自动进行视觉润色。该技能仅操作Figma,不生成HTML、CSS、React等实现代码,也绝不编辑或发布源设计系统库。它支持两种路线:Basalam模式(使用捆绑的Basalam源)和自定义DS模式(使用用户提供的设计系统或技能)。在预检阶段,它会验证路线、简报完整性、Figma目标权限、字体可用性以及是否需要进行Mobbin研究,确保所有操作都在授权范围内进行。所有例外情况(如字体回退、本地衍生组件、缺失资产占位符)都必须在完成报告中明确记录。

兼容平台~Claude Code~Codex CLI~Cursor
npx skills add alieslami745-bot/landing-skill

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

Figma设计系统落地页 是做什么的?

概述

将完整的落地页简报转换为完成的Figma设计。从简报中推断出最小且有价值的页面结构,将每个需求映射到授权的设计系统,仅当系统中没有匹配的单个组件时,才组合本地衍生的模式,并在装配后运行自动视觉润色。

该技能在Figma中设计。它不编写HTML、CSS、React、Next.js或其他实现代码。它从不编辑或发布源设计系统库。

授权的视觉语言是唯一真理。唯一的刻意例外是:

  • 当设计系统字体不可用时,本地应用的Figma字体回退;
  • 由经授权的设计系统部件和Figma图元构建的本地衍生组合/组件,其视觉值绑定到设计系统样式或变量;
  • 当设计系统和简报都未包含合适资产时,创建一个空资产插槽。

每个异常都必须在完成报告中可见。

路由:Basalam或自定义设计系统

在每次落地页运行前,在任何Figma或Mobbin操作之前,解析设计系统路由:

  • BASALAM_MODE:使用此包中捆绑的Basalam源。不要向用户询问设计系统链接或其他设计系统。
  • CUSTOM_DS_MODE:使用用户提供的设计系统或已安装的设计系统技能。
  • ROUTE_PENDING:用户请求了落地页,但品牌路由尚未明确。

如果简报明确指出落地页用于Basalam,则选择BASALAM_MODE,无需再次询问。如果它明确命名了另一个品牌或产品上下文,则选择CUSTOM_DS_MODE。如果两者都不明确,则明确询问:

این لندینگ برای باسلام است؟ بله / خیر

当路由为ROUTE_PENDING时,不要进行任何Figma或Mobbin的变更。将答案限定在当前的落地页运行范围内;如果简报或品牌发生变化,则重新解析路由。

首次使用引导

路由确定后,在新对话中首次调用时,如果用户尚未提供所有必需输入,则在详细问题或预检之前发送一条简短的路由特定消息:

  • BASALAM_MODE:

    برای شروع بفرست: ۱) brief ۲) نود/فریم مقصد در Figma ۳) assetهای لازم، در صورت وجود.

  • CUSTOM_DS_MODE:

    برای شروع بفرست: ۱) brief ۲) design system یا اسکیل آن ۳) نود/فریم مقصد در Figma ۴) assetهای لازم، در صورت وجود.

如果输入已经完整,则跳过引导并运行预检。在用户提供输入后不要重复。继续收集仅缺失的详细信息,并当某个前提条件仍然缺失时返回BLOCKED,不进行任何变更。

使用时机

当用户希望在Figma中设计落地页并提供以下内容时,使用此技能:

  1. 完整的简报及其批准的内容;
  2. 要么是包含捆绑源的BASALAM_MODE,要么是包含一个明确、可访问的Figma设计系统源的CUSTOM_DS_MODE;
  3. 一个精确的、可编辑的Figma目标。

Mobbin是一个可选的研究辅助工具,并非必需输入。如果已配置可用的Mobbin MCP,则在组合缺失模式之前,以只读方式使用它来查找附近的UX模式。当实际需要Mobbin研究但已配置、已授权的Mobbin MCP不可用时,在任何Figma变更之前暂停,并提供如下所述连接选择。在用户选择本地继续后——或者当连接的Mobbin没有找到有用的匹配时——继续使用此技能中的本地UI/UX方法。

不要将此技能用于代码、纯文本工作、设计系统创建、源库维护,或没有授权的Figma源和目标的无界视觉探索。

必需输入

将空白、未知、待定(TBD)、模糊、不可访问或冲突的值视为缺失。不要默默选择目标或编造业务事实。

0. 路由

需要已解析的BASALAM_MODE或CUSTOM_DS_MODE。如果路由未知,使用ROUTE_PENDING,询问Basalam问题,进行零变更,并等待答案。

1. 简报

需要:

  • 产品或服务及其报价;
  • 目标受众、用户问题、认知水平和重要异议;
  • 价值主张和支持的好处;
  • 一个转化目标和主要行动号召(CTA);
  • 需要时提供已批准的事实、声明、证明、价格、法律文本和章节文案;
  • 如果用户有,提供必需和禁止的章节;
  • 语言、书写方向、请求的断点和视口大小;
  • 每个预期图像、图标或插图的预期角色、宽高比或内容需求。

尽可能使用提供的资产或已批准的设计系统资产。缺失的视觉资产本身不会阻止运行:它可以按照如下所述,使用最接近的许可材料或显式的空资产插槽来解决。

仅当简报明确允许且提供的事实足够时,才能起草普通的界面文案。绝不要编造声明、证明、价格、推荐、法律语言或业务事实。

2. 设计系统源

在BASALAM_MODE中,仅从以下包相对路径解析捆绑源:

  • references/basalam-design-system/manifest.json
  • references/basalam-design-system/BASALAM-RULES.md
  • references/basalam-design-system/kit/
  • assets/basalam-design-system/fonts/

在Figma变更之前,验证清单、必要的协调文件、相关组件引用和字体资产。不要向用户询问设计系统URL或默默替换为另一个系统。如果捆绑包缺失或未能通过完整性检查,则返回BASALAM_DEPENDENCY_MISSING,并附上确切缺失/损坏的路径,进行零变更。

在CUSTOM_DS_MODE中,需要一个明确的Figma库/文件URL或密钥,具有读取访问权限,并具有可识别的相关已发布组件、变体、变量、文本样式和表面/背景样式,以及任何可用的图标/资产。缺乏合适的图标或资产由ASSET_NEAREST或ASSET_SLOT处理;它本身不会使源无效。如果需要,指定预期的主题或模式。

如果用户在CUSTOM_DS_MODE中命名了一个已安装的设计系统技能,则将其与此技能一起加载。仅当技能名称明确解析为一个已授权的Figma源时,技能名称才足够;否则将源报告为缺失。

捆绑的Basalam源

Basalam路由是可移植的:该包包含用户提供的Basalam设计系统规则、套件参考和Dana字体文件的版本化快照。相对于此技能包解析它们;绝不要使用个人绝对路径,并且对于BASALAM_MODE,从不需要单独安装的Basalam设计系统技能。

首先阅读BASALAM-RULES.md和kit/中的两个协调文件,然后仅加载与简报相关的组件/标记参考。在设计运行期间,该捆绑包是只读的。其清单记录了来源、快照日期、文件大小和SHA-256哈希。捆绑的字体是资源,而不是自动安装字体的权限;验证它们在Figma中的可用性,如果运行时看不到Dana,则应用记录的字体策略。

3. Figma目标

需要一个Figma设计文件以及一个精确的现有目标页面和插入节点/框架,作为节点URL或等效标识符提供,并具有编辑访问权限。当任何部分缺失时,不要创建替换文件、页面或目标。

仅提供文件级URL永远不满足此要求。不要选择默认页面、使用画布根节点或创建插入框架。将缺失的精确页面、插入节点/框架以及任何未验证的编辑访问权限报告为单独的差距。

不可协商的边界

  • 仅在Figma中工作。绝不输出实现代码。
  • 直接映射的视觉组件必须在明确授权的设计系统源中具有来源。
  • 仅在目标文件中允许本地衍生组合。其视觉子级可以是授权的设计系统实例、已发布的变体、变量、文本样式、表面/背景样式、图标、批准的资产以及原生Figma图元,例如Frame、Auto Layout、Text、Rectangle和Component。
  • 本地图元的每个视觉属性都必须绑定到授权的设计系统标记/样式。不允许使用硬编码的颜色、渐变、叠加、字体大小、字重、行高、间距、半径、阴影、效果或任何任意的视觉值,记录的FONT_FALLBACK字体系列覆盖除外。
  • 本地衍生的组件绝不可从授权实例分离、发布到源库,或用于默默创建第二种设计语言。它保留在目标内,并记录其来源。
  • 绝不要使用第三方库、外部资产、手绘图标、复制的Mobbin视觉或外来组件。
  • Mobbin结果仅为UX参考。使用授权的设计系统重新解释其层级结构、交互模式和构成;不要复制品牌样式或导入其资产。
  • 当每个必需模式都是DIRECT_MAPPED时,不要提及或暂停使用Mobbin。除非用户明确要求设置帮助,否则绝不要代表用户安装或连接Mobbin。
  • 在BASALAM_MODE中,仅使用捆绑的Basalam源及其已验证的来源。绝不要默默回退到自定义或无关的设计系统。
  • 始终首选主要设计系统字体。仅允许在下面“字体回退策略”下使用字体回退。
  • 背景润色只能使用现有的设计系统表面/背景样式。绝不要创建新的渐变、叠加、颜色或背景效果。
  • 在润色过程中,不要更改文案、声明、章节顺序、章节数量、CTA含义或提供的资产。
  • 绝不要编辑、发布或变更源设计系统库。
  • 当必需的先决条件、目标、权限、内容、标记或有效的构建计划缺失时,绝不要进行部分设计。已批准的空资产插槽是一个明确的完成例外,而不是未报告的部分。

构建模式和状态

在内部覆盖图和最终报告中使用以下术语:

  • DIRECT_MAPPED:使用了现有的授权设计系统组件/变体。
  • DS_COMPOSED:在目标中从授权DS部件和绑定标记的Figma图元构建了本地组合或本地可重用组件。
  • ASSET_NEAREST:使用了来自设计系统或简报的最接近的许可资产。
  • ASSET_SLOT:不存在合适的资产;创建了一个使用DS布局/表面规则的空替换插槽。
  • FONT_FALLBACK:主要DS字体不可用,并且应用了可访问的Figma字体,同时保留DS排版度量。
  • POLISH_COMMITTED:自动润色通过了QA。
  • ASSEMBLY_DELIVERED_POLISH_ROLLED_BACK:装配有效,但润色在两次尝试后失败并被移除。
  • AWAITING_MOBBIN_CHOICE:需要进行参考研究,Mobbin未连接,用户尚未选择是连接它还是继续本地操作;未发生任何变更。
  • MOBBIN_SKIPPED_BY_USER:用户在选择Mobbin不可用后选择了本地UI/UX方法。
  • ROUTE_PENDING:落地页品牌路由未知,Basalam问题正在等待答案;未发生任何变更。
  • BASALAM_MODE:为此落地页运行选择了捆绑的Basalam源。
  • CUSTOM_DS_MODE:为此落地页运行选择了用户提供的设计系统源。
  • BASALAM_DEPENDENCY_MISSING:捆绑的Basalam源或其完整性要求缺失或无效;未发生任何变更。
  • BLOCKED:无法满足先决条件或必需的构建规则。

DS_COMPOSED、ASSET_SLOT和FONT_FALLBACK是允许的、有文档记录的例外。AWAITING_MOBBIN_CHOICE和ROUTE_PENDING是临时暂停,而不是BLOCKED。BASALAM_DEPENDENCY_MISSING是零变更的预检停止。这些状态并不授权任意自定义样式。

原子预检门控

在进行任何变更性的Figma操作之前,运行一次完整的只读预检。创建文件、页面、框架、节点、组件、实例、占位符或部分章节都算作变更。

在任何Figma读取或写入操作之前,加载figma:figma-generate-design和figma:figma-use。在BASALAM_MODE中,在解析组件之前,加载捆绑的Basalam规则并验证其清单;在CUSTOM_DS_MODE中,在解析其源之前,加载命名的设计系统技能。

共同验证以下所有内容:

  1. 路由已解析。在BASALAM_MODE中,捆绑的清单、必需的参考和字体资产存在且有效;在CUSTOM_DS_MODE中,用户提供的设计系统源明确且可访问。
  2. 简报包含必需的事实、批准的内容、CTA、语言/方向以及断点要求。
  3. 目标文件、页面、插入节点、文件类型和编辑权限有效。
  4. 可以推断落地页结构,而无需编造业务事实。
  5. 每个选定的章节、断点和必需状态要么是DIRECT_MAPPED,要么有一个有效的DS_COMPOSED计划。
  6. 每个DS_COMPOSED计划都可以从授权的DS部件和绑定标记的原生Figma图元构建,而无需新的标记、样式、组件库编辑或外来资产。
  7. 每个预期的资产都有以下结果之一:提供/授权的资产、ASSET_NEAREST或ASSET_SLOT。
  8. 主要DS字体可用于每种必需的脚本、字重和样式;或者已识别出有效的可访问Figma回退候选者。
  9. 确定是否需要Mobbin研究。当每个必需模式都是DIRECT_MAPPED时,记录MOBBIN_NOT_NEEDED。否则,记录MOBBIN_USED、MOBBIN_SKIPPED_BY_USER、MOBBIN_ERROR、MOBBIN_NO_MATCH或LOCAL_UX_METHOD。如果需要Mobbin但不可用,并且用户尚未选择路径,则在返回READY之前使用下面的Mobbin连接选择。

在变更之前构建覆盖表:

| 要求 | 章节目的 | 构建模式 | DS子级/图元 | 标记/样式 | 内容源 | 资产状态 | 字体

... [为翻译截断]

相关技能