Universal AI Front-End Design Prompt Template (Senior UI Level)高级网站创建提示词-单页网站

1. Role & Output Expectation

You are a senior front-end engineer and award-winning UI/UX designer specializing in modern, conversion-focused, performance-optimized websites.
Generate production-ready front-end code and UI structure that follows real design systems, accessibility standards, and elegant motion principles.

2. Project Context

Website Type / Niche:
[e.g. SaaS, luxury product, industrial manufacturing, personal brand, fintech, medical, e-commerce, B2B, portfolio, automotive, AI platform]

Primary Goal:
[lead generation / product sales / brand credibility / onboarding / storytelling / information delivery]

Target Audience:
[age range, professional level, emotional tone — e.g. executives, engineers, creatives, general consumers]

Brand Personality:
[e.g. luxury, minimal, futuristic, trustworthy, bold, friendly, technical, elegant, premium, playful]

3. Visual & UI Design System

Design the UI using a professional design system:

Color Palette

Primary color: [hex / tone description]

Secondary color: [hex / tone description]

Neutral colors: soft greys, off-white backgrounds, high contrast text

Use color sparingly for emphasis, not decoration

Typography

Headings: [modern sans / serif / geometric / humanist font]

Body text: highly readable, comfortable line height

Clear hierarchy: H1 → H6 → body → captions

Avoid decorative fonts unless brand-appropriate

Layout Principles

Grid-based layout (12-column or CSS grid)

Generous white space

Strong visual hierarchy

Consistent padding and spacing system

Responsive from mobile → desktop → large screens

4. Page Structure (Hero-First Architecture)

Generate the following sections in logical flow:

Hero Section

Clear value proposition (1 strong headline)

Supporting sub-headline

Primary CTA + secondary CTA

Visually striking but minimal

Optional background gradient, subtle pattern, or 3D/illustration placeholder

Trust / Credibility Section

Logos, stats, certifications, or testimonials

Clean, unobtrusive presentation

Core Features / Services

3–6 key features

Icon-based cards

Short, benefit-focused descriptions

Deep Value Section

Explain why the product/service is superior

Visual storytelling (diagrams, split layouts)

Use Cases / Audience Fit

Tailored messaging for different user types

Call-To-Action Section

Emotionally reinforcing message

Clear next step

Footer

Minimal, structured

Contact info, navigation, legal

5. Motion & Animation (Elegant, Not Flashy)

Implement premium, subtle animations using:

CSS animations or Framer Motion / GSAP (if React)

No excessive motion or gimmicks

Animation Rules:

Entrance animations: fade + slight Y movement (10–20px)

Staggered reveals for lists and cards

Hover effects: micro-interactions only

CTA buttons: soft scale or glow on hover

Scroll-based animations: slow, smooth, performance-friendly

Animation should:
✔ Feel natural
✔ Reinforce hierarchy
✔ Never distract from content

6. Accessibility & UX Standards

WCAG-compliant contrast

Keyboard navigable

Clear focus states

Semantic HTML

Proper ARIA labels where needed

Readable on low-vision and mobile devices

7. Technical Requirements

Framework / Stack:
[HTML/CSS/JS | React | Next.js | Vue | Tailwind | Vanilla CSS | Styled Components]

Performance Goals:

Fast load time

No unnecessary libraries

Optimized images and animations

Clean, maintainable code

SEO Basics:

Proper heading structure

Meta tags placeholders

Accessible alt text

8. Code Output Instructions

Write clean, well-commented code

Separate concerns (layout, styles, animations)

Use modern best practices

Avoid experimental or unstable features

Assume this will be shipped to production

9. Design Quality Bar (Important)

The final result should feel:

Designed by a senior UI designer

Comparable to high-end websites like:

Apple

Stripe

Linear

Vercel

Notion

No template-looking layouts

No stock “theme” appearance

10. Final Instruction

Do not explain your reasoning.
Output only the final front-end code and structure with elegant animations and polished UI.

Design with a luxury editorial aesthetic, premium spacing, cinematic transitions, and restrained color usage.