ToolypetMCP
intermediate5 minutescss

Complete Card Design System

Design a full card component: shadow, gradient header, border-radius, glassmorphism overlay, and hover animation.

cardshadowgradientglassmorphismdesign-system

このレシピの使いどころ

Build a complete card design system with multiple variants (solid, gradient, glass). Cards are the most reused component in modern UIs.

ステップ

1

Box Shadow Generator

このツールを試す →

Create depth with layered shadows

プロンプト：Generate layered card shadows: base shadow 0 1px 3px rgba(0,0,0,0.08), hover shadow 0 8px 30px rgba(0,0,0,0.12)
2

Gradient Generator

このツールを試す →

Design the card header gradient

プロンプト：Generate a subtle gradient for the card header: from #667eea to #764ba2 at 135 degrees
3

Border Radius Generator

このツールを試す →

Apply asymmetric rounding

プロンプト：Generate 16px top corners and 12px bottom corners for card with larger header rounding
4

Filter Generator

このツールを試す →

Add glass effect variant

プロンプト：Generate backdrop-filter: blur(12px) saturate(150%) for a glassmorphism card variant
5

Animation Generator

このツールを試す →

Create hover lift effect

プロンプト：Generate a smooth hover animation: translateY(-6px) with shadow expansion over 250ms ease-out

よくある質問

How many card variants should a design system have?

3-4 variants: default (simple shadow), elevated (stronger shadow), outlined (border only), and interactive (hover effects). Add glassmorphism as a premium variant.

What's the ideal card border-radius?

8-16px is the modern sweet spot. Apple uses 12-16px. Google Material uses 4-12px. Match your design system's overall roundness level.

関連レシピ

Complete Button Style

Create a polished button with gradient background, shadow, border radius, and hover animation using MCP tools.

Hero Section Design

Design a stunning hero section with gradient background, flexbox centering, and entrance animation.

Card Component Style

Build a modern card component with shadow, border radius, hover transform, and smooth transitions.

Glassmorphism Effect

Create a frosted glass effect using backdrop-filter, gradient overlay, and border styling.

← すべてのレシピに戻る