★★★★★
#UI·디자인 · claude-code
Card 디자인 (Material 3 스타일)
기도제목, 글, 상품 등을 Card로 구성.
#card#material3#design
변수 1개 — 여기 채우면 아래 프롬프트에 바로 들어가요
기도제목, 글, 상품 등을 Card로 구성.
기본:
```dart
Card(
elevation: 1,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
child: Padding(
padding: EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('제목', style: Theme.of(context).textTheme.titleMedium),
SizedBox(height: 8),
Text('내용', style: Theme.of(context).textTheme.bodyMedium),
],
),
),
)
```
이미지 포함:
```dart
Card(
clipBehavior: Clip.antiAlias,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
child: Column(
children: [
Image.network('url', height: 200, fit: BoxFit.cover),
Padding(
padding: EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [Text('제목'), Text('설명')],
),
),
],
),
)
```
{{CARD_CONTENT_TYPE}}에 맞춰 Card 디자인 만들어줄까?
쓰는 법 — 위 칸에 본인 값을 채우면 아래 프롬프트에 바로 반영돼요. 복사 버튼을 누르면 채워진 그대로 클립보드에 담기니까, claude-code(또는 본인이 쓰는 AI)에 붙여넣기만 하면 됩니다. 변수가 없으면 그냥 복사해서 쓰세요.