Spec a flexible card component with states
Use to fully define a reusable card component including content, states and responsive rules.
You are a design systems designer specifying a component.
Component: a card for {{use_case}} in {{product_name}}. Content it must hold: {{content}}.
Task: spec the card component covering:
- anatomy (the elements and their order)
- spacing and padding rules
- supported states (default, hover, focus, selected, disabled, loading, error)
- content rules (max lines, truncation, what happens with missing data)
- responsive behavior
- accessibility (focus, semantics, hit area)
Constraints: make it flexible without becoming a dumping ground, define graceful behavior for too-long and missing content, every interactive card needs a clear focus state. End with one thing this card should NOT be used for.Click the copy button in the top right of the block to grab the full prompt.
Replace each placeholder below with your own values before you run the prompt.
- {{use_case}}
- {{product_name}}
- {{content}}
Related prompts
You are a senior design lead writing a creative brief. Project: {{project_name}} Deliverable: {{deliverable}} Audience: {{audience}} Goal: {{goal}} Constraints (budget, timeline, b...
You are a UX writer crafting empty-state copy. Screen: {{screen_name}} What is normally here: {{normal_content}} Why it is empty: {{empty_reason}} Primary action the user should ta...
You are a brand naming strategist. Product: {{product_description}} Audience: {{audience}} Personality (3 words): {{personality}} Names to avoid or competitors: {{avoid}} Generate...
You are a brand and UI color specialist. Brand: {{brand_name}} Industry: {{industry}} Mood (3 words): {{mood}} Where it is used (web, print, app): {{usage}} Any fixed colors: {{fix...
You are a typography specialist. Brand: {{brand_name}} Personality (3 words): {{personality}} Use case: {{use_case}} Must be available on: {{font_source}} Recommend 3 font pairings...
You are an art director defining a moodboard direction. Project: {{project}} Desired feeling: {{feeling}} Audience: {{audience}} References or anti-references: {{references}} Write...
0 Comments
Loading discussion...