shadcn/ui 暗色管理后台提示词示例｜GSAP 滚动动画
代码预览
エディタを読み込み中…
P
提示词
Create a single HTML page with a modern dark dashboard UI inspired by shadcn/ui. Use Tailwind CSS (CDN), Swiper for a carousel of stat cards, GSAP for scroll-triggered animations (stagger, fade, scale), and AOS for section reveals. Include: sidebar navigation (dark glass), top header with search and avatar, grid of 4 stat cards (revenue, users, orders, growth) with icons, a bar chart (CSS-only), a recent orders table, and a footer. All interactive elements (hover, click) must have smooth transitions. Keep it compact, production-ready, and visually stunning.
shadcn/ui風のダッシュボードをTailwind CSSで構築。Swiperで統計カードをカルーセル表示、GSAPとAOSでスクロールに応じたフェード・スケールアニメーションを実装。ガラス調サイドバー、検索ヘッダー、4つの統計カード、CSSバーチャート、注文テーブルを収録。すべての操作にスムーズなトランジションを適用し、プロダクション品質に仕上げています。
提示词解读
使用Tailwind CSS构建shadcn/ui风格的仪表盘。通过Swiper实现统计卡片轮播展示，利用GSAP和AOS实现滚动触发的淡入缩放动画。包含毛玻璃侧边栏、搜索头部、4张统计卡片、CSS柱状图和订单表格。所有交互均应用流畅过渡效果，达到生产级品质。
这个提示对您有帮助吗？
评论
评论将在审核后显示
この記事が役に立ったら投げ銭で応援
Apple Pay / Google Pay / カード (Visa/Mastercard/JCB/Amex) / Link / Alipay / WeChat Pay 対応 · Stripeで安全に決済
開発者が選ぶ最強ツール集
運営者が毎日使っているツール・ガジェット 6選