Design for AIRecipe chips
Recipe chips: a CSS card. Copy the rules, or the prompt that rebuilds it.
CSS
.card-081 {
width: 300px;
background: #fff;
border-radius: 18px;
overflow: hidden;
font-family: system-ui,sans-serif;
color: #1c1917;
box-shadow: 0 4px 20px rgba(0,0,0,.08)
}
.card-081__img {
height: 180px;
background: radial-gradient(circle at 40% 40%,#bef264,#65a30d 55%,#3f6212)
}
.card-081__body {
padding: 16px 18px 18px
}
.card-081 h3 {
margin: 0 0 10px;
font-size: 17px;
line-height: 1.3
}
.card-081__chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 14px
}
.card-081__chips span {
padding: 4px 9px;
border-radius: 999px;
background: #f5f5f4;
font-size: 11px;
font-weight: 600;
color: #44403c
}
.card-081 a {
display: inline-block;
padding: 9px 16px;
border-radius: 10px;
background: #65a30d;
color: #fff;
font-size: 13px;
font-weight: 700;
text-decoration: none;
transition: background .15s
}
.card-081 a:hover {
background: #4d7c0f
}
.card-081 :is(a,button,input,select,textarea):focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
HTML
<article class="card-081">
<div class="card-081__img"></div>
<div class="card-081__body">
<h3>Lemon orzo with charred broccoli</h3>
<div class="card-081__chips"><span>25 min</span><span>Vegetarian</span><span>Easy</span></div>
<a href="#">View recipe</a>
</div>
</article>Prompt
Build a 300px recipe card: white, 18px radius, shadow 0 4px 20px rgba(0,0,0,.08). Image area 180px with a radial green gradient (#bef264 to #65a30d to #3f6212). Body: 17px title, a wrapped row of small pill chips ("25 min", "Vegetarian", "Easy") on #f5f5f4 with 11px semibold #44403c text, and a green #65a30d "View recipe" button (10px radius) that darkens to #4d7c0f on hover.