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中设计落地页并提供以下内容时,使用此技能:
- 完整的简报及其批准的内容;
- 要么是包含捆绑源的
BASALAM_MODE,要么是包含一个明确、可访问的Figma设计系统源的CUSTOM_DS_MODE; - 一个精确的、可编辑的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.jsonreferences/basalam-design-system/BASALAM-RULES.mdreferences/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中,在解析其源之前,加载命名的设计系统技能。
共同验证以下所有内容:
- 路由已解析。在
BASALAM_MODE中,捆绑的清单、必需的参考和字体资产存在且有效;在CUSTOM_DS_MODE中,用户提供的设计系统源明确且可访问。 - 简报包含必需的事实、批准的内容、CTA、语言/方向以及断点要求。
- 目标文件、页面、插入节点、文件类型和编辑权限有效。
- 可以推断落地页结构,而无需编造业务事实。
- 每个选定的章节、断点和必需状态要么是
DIRECT_MAPPED,要么有一个有效的DS_COMPOSED计划。 - 每个
DS_COMPOSED计划都可以从授权的DS部件和绑定标记的原生Figma图元构建,而无需新的标记、样式、组件库编辑或外来资产。 - 每个预期的资产都有以下结果之一:提供/授权的资产、
ASSET_NEAREST或ASSET_SLOT。 - 主要DS字体可用于每种必需的脚本、字重和样式;或者已识别出有效的可访问Figma回退候选者。
- 确定是否需要Mobbin研究。当每个必需模式都是
DIRECT_MAPPED时,记录MOBBIN_NOT_NEEDED。否则,记录MOBBIN_USED、MOBBIN_SKIPPED_BY_USER、MOBBIN_ERROR、MOBBIN_NO_MATCH或LOCAL_UX_METHOD。如果需要Mobbin但不可用,并且用户尚未选择路径,则在返回READY之前使用下面的Mobbin连接选择。
在变更之前构建覆盖表:
| 要求 | 章节目的 | 构建模式 | DS子级/图元 | 标记/样式 | 内容源 | 资产状态 | 字体
... [为翻译截断]