SuperAPI AI 工具集

premium-saas-design

设计与创作

查看项目

更新于 10-16 03:13

技能介绍

用途:该技能提供一套专业产品团队与 UI/UX 设计师使用的高端 SaaS 网站设计工作流,适配 AI 辅助开发,目标是把 AI 从「猜测机器」变为真正的设计伙伴,产出更接近 5000 美元级别而非 500 美元级别的精致网站。资料引用斯坦福 2002 年 Fogg 等人的网络可信度研究,指出视觉设计是人们判断是否信任网站时最常提及的因素。

主要能力:核心循环为 DEFINE → BUILD → REVIEW → REFINE(定义、构建、评审、精修),循环往复。7 类上下文文档构成与 AI 的「设计契约」:1) 项目简报(说明建什么、为何建、给谁用,含受众、目标、需求、区块列表);2) 区块内容文件(每个区块一份文案);3) 整体氛围情绪板(整体美学、参考站与截图、色彩心理学、字体方向);4) 区块专属情绪板(逐区块布局参考、导航栏、代码参考、3D 元素、组件来源、背景与动画);5) 样式指南(活文档,含色彩、字体、间距、圆角、阴影、动画、组件模式);6) PRD(技术栈、依赖、文件结构、区块优先级、响应式、性能与无障碍要求);7) 任务文档(分 5 阶段的可勾选实施清单)。

使用方式:先写简报、内容、情绪板与区块规范,再让 AI 生成样式指南、PRD、任务清单,然后逐区块构建与迭代。最佳实践包括:每个区块改动开新对话以隔离上下文、每完成一个区块提交一次(如 git add . 与 git commit -m "feat(landing): add [section-name] section")、提示词中贴参考截图与组件代码、用规则文件在出现新设计决策时自动更新样式指南、修改时先截图再描述改动。组件资源方面提到 shadcn/ui(https://ui.shadcn.com)、21st.dev(https://21st.dev)、Three.js 示例(https://threejs.org/examples/)、Sketchfab(https://sketchfab.com)。

适用场景:需要做出高完成度营销页/落地页的 SaaS 项目,尤其适合希望用 AI 按规范生成多区块页面、并保持全站视觉一致性的团队或个人。

限制:资料未提供安装命令、具体价格、性能实测数据或平台兼容性说明;所涉组件库、字体与 3D 资源的具体授权与可用性暂未提供。该方法强调前期文档投入,且被描述为源自 BuilderSpace 2025 年 12 月视频所记录的工作流,属于经验性流程,非官方标准。