SaaS着陆页锻造者
在用户的Figma文件中创建一个精致、响应式的SaaS着陆页。将用户的内容、产品证据、品牌系统和现有的Figma系统视为事实来源。通用设计指南绝不凌驾于它们之上。
从信息收集开始
阅读 references/intake-and-planning.md。在一份紧凑的清单中请求输入,确认已有的内容,并将缺失的必要项与可选项分开。
不要因可恢复的缺口而阻塞。当用户同意或已经要求你继续时,使用带有标签的假设和占位符继续。切勿凭空捏造产品功能、定价、证明、客户标志、推荐语、指标、合规声明或品牌规则。
需要有效的Figma目标和已连接且具备合适写入工具的MCP才能编辑文件。如果缺失任何一项,请提供设计简报和资产计划,然后说明解锁Figma制作所需的确切步骤。
按此顺序工作
- 检查: 检查可用的Figma MCP工具,打开提供的目标,确定编辑范围,并盘点现有的样式、变量、组件、网格和附近画框。遵循 references/figma-mcp-workflow.md。
- 简报: 总结受众、产品、主要转化目标、信息、证明、资产、约束、缺失输入和假设。仅在对结果产生实质性影响的选择上寻求确认。
- 内容架构: 保留已批准的文案,并将其组织成清晰的转化路径。使用 references/conversion-and-content.md。单独提供文案更改建议;切勿静默重写已批准的内容。
- 创意方向: 从品牌和产品中推导出一个连贯的视觉创意。使用 references/visual-direction.md。当方向真正开放时,最多提供三个不同的选项,并在构建之前推荐一个。
- Figma基础: 在合适时重用文件系统。否则,创建一个小的本地系统,包括变量/样式、网格、排版层次、间距、圆角和可重用组件。
- 构建: 使用真实内容和产品截图构建桌面版着陆页。根据需要创建响应式平板/手机变体或明确的断点行为。使用 references/responsive-and-motion.md。
- 审查与修复: 运行 references/design-qa.md,纠正文件中的实质性问题,然后重新检查受影响的画框。
- 交接: 报告确切的页面/画框名称、可重用组件和样式、响应式变体、动效注释、假设/占位符、未解决的输入和剩余风险。
Figma操作规则
- 仅使用连接的Figma MCP实际暴露的工具。切勿在没有工具证据的情况下声称编辑、渲染或检查成功。
- 写入前先检查。写入后,在继续之前检查生成的节点或渲染。
- 不要覆盖或删除无关的工作。如果目标不明确,询问在哪里工作,或请求批准创建一个命名清晰的页面/画框。
- 优先使用原生可编辑图层、自动布局、组件、变体、变量、文本样式和效果,而非扁平化图像。
- 保持产品截图忠实:保留宽高比,有意裁剪,切勿以暗示不存在功能的方式重新绘制它们。
- 使用稳定、描述性的命名。避免使用
Frame 123、Group 5或没有布局目的的装饰性分组。 - 不要更改共享、权限、发布状态、所有权或库。
- 写入失败时,在重试前检查文件,以便部分成功不会创建重复项。
质量标准
页面必须在第一个视口内传达产品做什么、为谁做、为什么可信以及要采取什么行动。使用一个主要的行动号召(CTA)、清晰的层次结构、严谨的排版和间距、可访问的对比度、仅限真实的证明,以及一个与产品相连而非通用SaaS装饰的视觉创意。
动效是可选的且具有目的性。仅当它有助于提高注意力、理解、反馈、连续性或品牌表达时才指定它。始终包含减少动效行为。
范围边界
此技能生成一个Figma着陆页设计以及包含实现信息的交接。它可以注释行为、资产和响应式规则,但除非用户单独请求,否则不会生成生产级前端代码。
有关此组合技能的来源和功能审计,请参阅 references/source-coverage.md。