Generate Card-Based UI Components and Layouts

Card-Based Design is a design-style child skill ('bite-sized consumption - encapsulating discrete pieces of information into distinct visual containers'), part of the design-it family and not meant to be triggered directly. Three core principles: Encapsulation (every card is self-contained, with an image, title, short description, and usually an action like a button or a 'like' icon), Responsive Flow (cards easily reflow across screen sizes, from a 4-column desktop grid down to a single mobile column), and Clear Boundaries (cards must visually pop off the background).

Use it when the user's request matches this modular, scannable content-container aesthetic - feeds, product grids, article listings, or any UI presenting many discrete items that need consistent visual structure. As a design sub-style, it's selected by the parent design-it skill's routing rather than invoked on its own.

Visual DNA is very flexible on color, but the background should be slightly darker or distinct from the card color - Sophisticated Neutral works well for a premium feel - with clear typographic hierarchy inside each card (header, subheader, body) and standard border-radius: 8px with a medium drop shadow. The web implementation uses CSS Grid with auto-fit/auto-fill for automatic responsiveness (grid-template-columns: repeat(auto-fill, minmax(300px, 1fr))), each card as a flex column with overflow: hidden to keep images inside rounded corners, a subtle shadow that deepens and lifts the card (transform: translateY(-4px)) on hover, an object-fit: cover image area, flexible content padding that pushes a footer to the bottom via flex-grow: 1, and a bordered footer row for actions.

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.12); }

The body background is typically a standard app gray (#f0f2f5) so white cards read as distinct, elevated surfaces rather than blending into the page.

SwiftUI reproduces the same card anatomy - a gray placeholder image Rectangle, a content VStack with headline title and a two-line-limited secondary-color description, cornerRadius(12), and a clean subtle drop shadow (shadow(color: .black.opacity(0.08), radius: 12, x: 0, y: 4)) - matching the web card's visual weight and structure in a native idiom.

Designers and developers building a feed, product grid, or article listing that needs consistent, self-contained, responsive content containers - the default pattern for presenting many discrete items scannable at a glance, on any screen size, without every item needing bespoke layout treatment.