企业与 SaaS 设计提示词

Design a professional SaaS marketing website. Clean header with logo, product/solutions/pricing/docs nav links, and 'Get Started' CTA button. Hero: clear headline describing the product benefit, subtext, email input with CTA button, and a product screenshot. Sections: feature grid (2x3), integration logos, customer testimonials with company logos, pricing table (3 tiers with annual/monthly toggle), FAQ, footer with sitemap columns. Use Inter font, blue primary color (#2563eb), neutral gray palette, and generous whitespace.

Create a Stripe-inspired product page using shadcn/ui. Include: a gradient mesh background for the hero section, clean typography with large heading and clear subtext, animated code snippets showing API usage, interactive pricing calculator, feature comparison table with checkmarks, and a developer-focused footer with API docs links. Use a blue-to-purple gradient accent, white cards with subtle shadows, and system font stack.

Build a B2B SaaS platform interface in Next.js. Include: top navigation with mega-menu dropdowns for Products and Solutions, a resource center page with filterable blog/case-study cards, a pricing page with feature comparison matrix, and a contact sales form with company size selector. Use professional typography (Inter), blue-600 as primary, gray-50 backgrounds for alternating sections, and 80px vertical section spacing.

Generate a complete enterprise web application shell with React and TypeScript. Include: authenticated layout with top bar (user menu, notifications, org switcher), sidebar navigation with collapsible sections, breadcrumb navigation, page header with action buttons, and a content area. Build reusable components: DataTable with sorting/filtering/pagination, StatCard, PageHeader, EmptyState, and ConfirmDialog. Use Tailwind CSS with a professional blue-gray color scheme.

Design a SaaS pricing page that converts. Three tier cards on a #f8fafc section background: cards in #ffffff with 1px #e2e8f0 borders and 12px radius. Highlight the Pro tier with a 2px #2563eb border and a small 'Recommended' badge. Prices in 48px Inter semibold with tabular-nums; per-seat caption in 14px #64748b. Annual/monthly toggle with a 'Save 20%' pill in #dcfce7/#166534. Below the cards, a feature comparison table with sticky header row and check icons in #2563eb. End with an enterprise CTA band on #0f172a with white text. All text must meet WCAG AA 4.5:1 contrast.

Build a developer documentation site using shadcn/ui. Three-column layout: left sidebar nav (240px, collapsible groups, active link with blue-600 text and blue-50 background), center content column (max-w-3xl, prose styling with 16px/1.75 body), right 'On this page' outline (200px, scroll-spy highlighting). Code blocks in #0f172a with a copy button and language tab. Callout components for Note/Warning/Danger using blue-50, amber-50, red-50 backgrounds with 4px left borders. Top bar with search trigger (Cmd+K hint) and version selector. Keyboard navigable throughout with visible focus rings in blue-500.

Build a SaaS onboarding flow in Next.js with Tailwind. Four steps: workspace name, team invites, integration selection, and a success screen. Centered card (max-w-lg) on gray-50 background, white card with shadow-sm and 16px radius. Progress bar at top: 4px height, blue-600 fill animating width with transition-all duration-500. Inputs with gray-300 borders, focus:ring-2 focus:ring-blue-500. Integration step shows a 3x2 grid of logo cards with checkbox selection (selected state: blue-600 border + blue-50 background). Back link in gray-500, primary button in blue-600 hover:blue-700. Announce step changes with aria-live for screen readers.

Generate a React customer billing portal with TypeScript and Tailwind. Pages: subscription overview (current plan card with usage meters), invoice history (DataTable with status badges: paid #16a34a, pending #d97706, failed #dc2626 — each paired with an icon, never color alone), and payment methods (card list with brand icons and a default indicator). Usage meters: 8px rounded bars, gray-100 track, blue-600 fill, amber-500 above 80%, red-600 above 95%, with exact numbers as text. Typography: Inter, 24px page titles, 14px table text. Layout: max-w-5xl with 32px section spacing. Include empty and loading states for every list.