用AI做出質感網站工作坊

Inspiration

靈感圖庫

Mobbin最多人參考的靈感網站。
Dribble各式各樣的UI/UX。
Lapa NinjaLanding Page 與品牌頁，架構清晰好抄
Land-book專收一頁式、SaaS、App 折段結構
One Page Love生活化小站，適合活動、個人頁
SiteInspire分類極細，快速找特定風格
Webdesign Inspiration可依產業/顏色篩選，找佈局靈感
Page Collective介於商業與創意間，互動質感高
Minimal Gallery聚焦極簡風格，乾淨俐落
Godly酷炫品牌站，比 Awwwards 更緊湊
Awwwards網站獎項牆，看最新趨勢與技術
SaaSpo收錄大量 SaaS 官網，看常見結構
curated.design高品質目錄，風格現代有質感
landingfolio大量 Landing Page，針對產業分類
darkmodedesigns專門展示深色模式 (Dark Mode) 靈感

Prompt 建構器

選擇選項來構建Prompt

風格卡 Style Cards
Color Hunt COOLORS Happy Hues
Google Fonts
英文與中文混排
文字以段落呈現
合適的動效
區塊多變化
字要有大小對比變化營造層級
無漸層
大圓角
柔和陰影
Generated Prompt

Skill

風格技能檔案

Impeccable

精緻細節風格

Frontend-design

前端設計導向

Taste

品味美感風格

UI/UX Pro Max

全方位 UI/UX

Resources

圖片、組件與素材庫

Images & Video

Components

Libraries

Icons

Sections

區塊類別與線框

View UI Kit

Navigation / Header

導航列

Hero Section

首頁主視覺

Announcement Bar

公告橫幅

Logo Cloud

合作夥伴

Feature Grid

特色功能

Split Content

圖文並排

Lists

列表組件

Cards

卡片模組

PARALLAX

Parallax

視差滾動

Carousel / Slider

輪播組件

Stats / Numbers

數據統計

Timeline

時間軸

Tabs & Accordion

頁籤/手風琴

Testimonials

客戶評價

Masonry Gallery

瀑布流圖庫

Pricing

定價表

Call to Action

行動呼籲

Newsletter

電子報

Footer

頁尾

Motion Sites

常見動態效果網站

CSS Effects Motion Demo

Web Interactions Gallery

收集各種高質感 UI 互動與動態效果的案例展示。

FreeFrontend – CSS Animations

大量 CSS 動畫範例，可直接複製使用。

Codepen

搜尋任何關鍵字就能看到世界各地工程師製作的動畫 Demo。

Animate.css

提供常見淡入、縮放、彈跳等動畫的即用 class。

CodemyUI

各類 UI 元件的互動與動畫範例集合。

CodyHouse

提供可重複使用的 UI 動態元件與互動模式。

GSAP Showcase

官方展示區，可看到進階、流暢、專業級動畫案例。

Anime.js Examples

官方範例集合，展示路徑、彈性、數值動畫等。

Framer Motion Examples

React 動態效果示範，適合做 UI/頁面動效。

Background

背景關鍵字

Background Library

流體與能量 (Fluid & Energy)

科技、AI、未來感

  • Liquid Gradient / Fluid Noise柔和流動的漸層噪波背景
  • Particle Flow / Energy Flow粒子沿著曲線或隨噪波漂浮
  • Wave Field / Ripple大面積波紋、呼吸感

線條與幾何 (Lines & Geometry)

現代、科技、商務風

  • Grid Distortion / Mesh Warp格線呼吸、扭曲 3D 空間感
  • Line Sweep / Scanline線條掃過背景，網安、雲端感
  • Geometric Loop簡單幾何漂移或有序排列

光影與柔焦 (Light & Soft)

Apple 風、質感、高級感

  • Soft Glow / Bloom柔光區塊微弱跳動、呼吸
  • Frosted Glass Motion模糊玻璃背景輕微流動
  • Halo / Orb Glow柔亮光球緩慢漂浮，療癒感

環境素材 (Atmosphere)

增加層次與手感

  • Noise Grain Moving極細微噪點流動，提升質感
  • Diffused Gradient純色色塊 + 模糊濾鏡 的瀰散漸層
  • Aurora / Northern Lights北極光流動光帶