Communitygithub.com

mubasildesign/saas-landing-page-forge

在可编辑的Figma文件中,根据提供的文案、产品截图、品牌指南和连接的Figma MCP,设计或重新设计一款专注于转化的SaaS着陆页。

saas-landing-page-forge 是什么?

此技能旨在帮助用户在Figma中创建或重新设计一个高转化率的SaaS着陆页。它严格遵循用户提供的文案、产品证据、品牌系统和现有的Figma设计系统,绝不依赖通用设计建议。技能工作流程从信息收集开始,通过一个紧凑的清单要求用户提供必要输入,并对可恢复的缺口使用占位符。它强调在Figma中进行操作时,必须严格使用暴露的工具,先检查后写入,并优先使用原生可编辑图层和自动布局。最终交付物包括一个完整的桌面版着陆页,以及可选的响应式平板/手机变体,并附带详细的实现交接说明,涵盖组件、样式、假设和风险,但不生成生产级前端代码。

兼容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/mubasildesign/saas-landing-page-forge/tree/HEAD

在你喜欢的 AI 中提问

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

文档

SaaS着陆页锻造者

在用户的Figma文件中创建一个精致、响应式的SaaS着陆页。将用户的内容、产品证据、品牌系统和现有的Figma系统视为事实来源。通用设计指南绝不凌驾于它们之上。

从信息收集开始

阅读 references/intake-and-planning.md。在一份紧凑的清单中请求输入,确认已有的内容,并将缺失的必要项与可选项分开。

不要因可恢复的缺口而阻塞。当用户同意或已经要求你继续时,使用带有标签的假设和占位符继续。切勿凭空捏造产品功能、定价、证明、客户标志、推荐语、指标、合规声明或品牌规则。

需要有效的Figma目标和已连接且具备合适写入工具的MCP才能编辑文件。如果缺失任何一项,请提供设计简报和资产计划,然后说明解锁Figma制作所需的确切步骤。

按此顺序工作

  1. 检查: 检查可用的Figma MCP工具,打开提供的目标,确定编辑范围,并盘点现有的样式、变量、组件、网格和附近画框。遵循 references/figma-mcp-workflow.md。
  2. 简报: 总结受众、产品、主要转化目标、信息、证明、资产、约束、缺失输入和假设。仅在对结果产生实质性影响的选择上寻求确认。
  3. 内容架构: 保留已批准的文案,并将其组织成清晰的转化路径。使用 references/conversion-and-content.md。单独提供文案更改建议;切勿静默重写已批准的内容。
  4. 创意方向: 从品牌和产品中推导出一个连贯的视觉创意。使用 references/visual-direction.md。当方向真正开放时,最多提供三个不同的选项,并在构建之前推荐一个。
  5. Figma基础: 在合适时重用文件系统。否则,创建一个小的本地系统,包括变量/样式、网格、排版层次、间距、圆角和可重用组件。
  6. 构建: 使用真实内容和产品截图构建桌面版着陆页。根据需要创建响应式平板/手机变体或明确的断点行为。使用 references/responsive-and-motion.md。
  7. 审查与修复: 运行 references/design-qa.md,纠正文件中的实质性问题,然后重新检查受影响的画框。
  8. 交接: 报告确切的页面/画框名称、可重用组件和样式、响应式变体、动效注释、假设/占位符、未解决的输入和剩余风险。

Figma操作规则

  • 仅使用连接的Figma MCP实际暴露的工具。切勿在没有工具证据的情况下声称编辑、渲染或检查成功。
  • 写入前先检查。写入后,在继续之前检查生成的节点或渲染。
  • 不要覆盖或删除无关的工作。如果目标不明确,询问在哪里工作,或请求批准创建一个命名清晰的页面/画框。
  • 优先使用原生可编辑图层、自动布局、组件、变体、变量、文本样式和效果,而非扁平化图像。
  • 保持产品截图忠实:保留宽高比,有意裁剪,切勿以暗示不存在功能的方式重新绘制它们。
  • 使用稳定、描述性的命名。避免使用 Frame 123、Group 5 或没有布局目的的装饰性分组。
  • 不要更改共享、权限、发布状态、所有权或库。
  • 写入失败时,在重试前检查文件,以便部分成功不会创建重复项。

质量标准

页面必须在第一个视口内传达产品做什么、为谁做、为什么可信以及要采取什么行动。使用一个主要的行动号召(CTA)、清晰的层次结构、严谨的排版和间距、可访问的对比度、仅限真实的证明,以及一个与产品相连而非通用SaaS装饰的视觉创意。

动效是可选的且具有目的性。仅当它有助于提高注意力、理解、反馈、连续性或品牌表达时才指定它。始终包含减少动效行为。

范围边界

此技能生成一个Figma着陆页设计以及包含实现信息的交接。它可以注释行为、资产和响应式规则,但除非用户单独请求,否则不会生成生产级前端代码。

有关此组合技能的来源和功能审计,请参阅 references/source-coverage.md。

相关技能