企业和 SaaS 设计优先考虑信任感、清晰度和转化率。这些界面使用用户一眼就能识别的成熟模式：清晰的导航、明确的层级、专业的排版和克制的色彩使用。最好的企业设计在不牺牲专业感的前提下保持亲和力，通过微动画和用心的间距等微妙设计细节来提升原本标准的布局。
设计专业 SaaS 营销网站。header 包含 logo、Product/Solutions/Pricing/Docs 导航和 'Get Started' CTA。hero 使用清晰标题说明产品价值，并提供副标题、邮件输入框、CTA 按钮和产品截图。后续区块依次为 2x3 功能网格、integration logo、带客户公司 logo 的评价区、支持年付/月付切换的三档定价表、FAQ，以及按 sitemap 分栏的 footer。使用 Inter、primary blue #2563eb、中性灰色板和充足留白。使用 shadcn/ui 创建 Stripe 风格产品页。hero 使用 gradient mesh 背景，排版保持清晰，以大标题和简洁说明文字建立层级。加入展示 API 用法的动画 code snippet、交互式定价计算器、带 check 的功能对比表，以及包含 API docs 链接的开发者 footer。强调色使用蓝到紫的渐变，卡片为白色并带轻微阴影，字体使用 system font stack。在 Next.js 中构建 B2B SaaS 平台界面。顶部导航为 Products 和 Solutions 提供 mega-menu dropdown；资源中心包含可筛选的 blog 与 case study 卡片；定价页提供功能 comparison matrix；联系销售表单包含公司规模 selector。排版使用 Inter，primary 使用 blue-600，交替区块使用 gray-50 背景，区块垂直间距统一为 80px。使用 React 和 TypeScript 生成完整的企业 Web 应用 shell。authenticated layout 包含顶部栏中的用户菜单、通知和组织切换器，以及带可折叠分组的侧边栏、面包屑、带操作按钮的 PageHeader 和内容区。构建可复用的 DataTable、StatCard、PageHeader、EmptyState 与 ConfirmDialog，其中 DataTable 支持排序、筛选和分页。样式使用 Tailwind CSS 和专业的蓝灰色板。设计以转化为目标的 SaaS 定价页。区块背景为 #f8fafc，三档卡片使用 #ffffff、1px #e2e8f0 完整边框和 12px radius。Pro 档使用 2px #2563eb 完整边框和小型 'Recommended' badge 突出显示。价格使用 48px Inter semibold 与 tabular-nums，每席位说明使用 14px #64748b。年付/月付 toggle 旁放置使用 #dcfce7 背景和 #166534 文字的 'Save 20%' pill。卡片下方提供 sticky header 的功能对比表，check 图标使用 #2563eb。结尾使用 #0f172a 背景和白字的 enterprise CTA band。所有文字达到 WCAG AA 4.5:1。使用 shadcn/ui 构建开发者文档站。三栏布局左侧为 240px sidebar nav，分组可折叠，当前链接使用 blue-600 文字和 blue-50 背景；中间内容列为 max-w-3xl，prose 正文使用 16px/1.75；右侧为 200px 'On this page' outline，并通过 scroll-spy 高亮当前位置。代码块使用 #0f172a 背景，提供复制按钮和语言 tab。Note、Warning、Danger callout 分别使用 blue-50、amber-50、red-50 背景，并使用对应语义色的完整 1px 边框。顶部栏提供搜索入口、Cmd+K 提示和版本 selector。全站支持键盘导航，并使用可见的 blue-500 focus ring。使用 Next.js 和 Tailwind 构建 SaaS onboarding flow，依次包含 workspace 名称、团队邀请、integration 选择和成功页四步。gray-50 背景上居中放置 max-w-lg 白色卡片，使用 shadow-sm 和 16px radius。顶部进度条高 4px，blue-600 fill 通过 transition-all duration-500 改变宽度。input 使用 gray-300 边框和 focus:ring-2 focus:ring-blue-500。integration 步骤展示 3x2 logo 卡网格并支持 checkbox 选择；选中状态为 blue-600 完整边框与 blue-50 背景。返回链接使用 gray-500，primary button 使用 blue-600 和 hover:blue-700。步骤变化通过 aria-live 向 screen reader 宣告。使用 React、TypeScript 和 Tailwind 生成客户计费 portal。页面包括订阅概览，显示当前 plan 与 usage meter；发票历史使用 DataTable 和状态 badge，已支付为 #16a34a、待处理为 #d97706、失败为 #dc2626，每种状态都必须配合图标，不能只依赖颜色；支付方式页显示带品牌图标和默认标记的卡片列表。usage meter 使用 8px rounded bar、gray-100 track 和 blue-600 fill，超过 80% 改为 amber-500，超过 95% 改为 red-600，并同时显示精确数值文字。使用 Inter、24px 页面标题和 14px 表格文字；布局为 max-w-5xl，区块间距 32px。每个列表都包含 empty state 和 loading state。关键元素：一致的间距系统（8px 网格）、专业字体（Inter、系统字体）、有限色板（1 个主色 + 中性色）、清晰的导航层级、高质量产品截图、社会证明（Logo、评价、数据）和精致的微交互。避免：图库照片、过多颜色、杂乱布局和过度创意的字体。
最佳实践：展示 3 个层级（基础、专业、企业），视觉突出推荐方案，包含年付/月付切换和节省提示，在卡片下方放功能对比表，添加解答常见定价问题的 FAQ，并为企业方案提供「联系销售」选项。最受欢迎的方案应通过不同的背景或边框色在视觉上突出。
Stripe 的设计语言特点是：渐变网格背景、干净的无衬线排版、充足的留白、代码片段作为视觉元素、滚动时的微妙动画、以及蓝到紫的渐变色强调。它在技术可信度（展示真实代码）和视觉精致度（平滑渐变、微动画）之间取得平衡。UI Library 的 Stripe Style 预设捕捉了这些模式。
主流选择是 Inter——Figma、Vercel、GitHub 都在使用或衍生它——因为较高的 x-height 让它在 13-14px 的 UI 字号下依然清晰。常见替代：系统字体栈（最快、零布局偏移）、Geist（Vercel）、Soehne（Stripe）、IBM Plex Sans。可靠配方：UI 和正文用 Inter 的 400/500/600 字重，32px 以上的标题加 -0.02em 的紧缩字距，价格和数据表格通过 font-variant-numeric 启用 tabular-nums 让数字垂直对齐。
要比在编辑器里看着舒服的量更多。实用数值：主要区块之间垂直留 96-128px（Tailwind 的 py-24 到 py-32）、卡片间距最少 24px、区块标题与内容网格之间 64-80px、正文宽度限制在 640-720px（每行 65-75 字符）。卡片内部用 24-32px 内边距。最常见的业余错误是区块间距只留 40-48px——把它翻倍，其他什么都不改，页面立刻显得更高级。