"Create a design for a SaaS marketing site with customer case studies, 
   testimonials, and dynamic feature sections"

   "Add a markdown rich text field called content to the blog post"
   "Organize the homepage content with blocks dynamic zone"

I'm designing a [type of website/app] for [target audience] that needs to display [specific content types]. The brand is [adjective describing brand personality]. Generate 3 distinct layout concepts that prioritize [primary goal: readability/conversion/engagement].

Content structure:
- Primary content: [e.g., blog posts, product listings, case studies]
- Key user actions: [e.g., search, filter, purchase]  
- Design constraints: [e.g., must accommodate video, needs mobile-first approach, content managed through Strapi v5 with Dynamic Zones]

For each concept, explain:
1. Content hierarchy decisions
2. Responsive behavior approach  
3. How the layout supports the primary user goal

I'm designing a SaaS marketing site for technical decision-makers that displays customer case studies. The brand is modern and data-driven. Generate 3 layout concepts that emphasize social proof while maintaining scannability.

Content structure:
- Primary content: case studies with customer quotes, success metrics, video testimonials, technical implementation details
- Key user actions: filter by industry, view detailed case studies, download PDFs, contact sales
- Design constraints: Strapi v5 manages content through Dynamic Zones where editors arrange reusable blocks differently per page. Design needs modular flexibility to accommodate pages with 3 blocks and pages with 12 blocks.

For each concept, explain:
1. How the modular approach maintains visual consistency across varying content lengths
2. Responsive behavior for video content on mobile
3. How the layout guides users from overview to detail without overwhelming them

"Create a content structure for a SaaS marketing site with case studies, 
testimonials, and feature sections"

Design a [component type] for displaying [Strapi content type] with the following fields.

Content type structure:
- Field 1: [field name and type, e.g., title (short text, required)]
- Field 2: [field name and type, e.g., featured image (media, optional)]
- Field 3: [field name and type]
- Relations: [any related content types]

Design requirements:
- Visual hierarchy: [which fields are most prominent]
- Required vs. optional fields: [how to handle missing optional content]
- Content length variations: [how to handle long titles, descriptions, etc.]
- Responsive behavior: [desktop and mobile considerations]

Please provide:
1. Visual design description
2. How the design handles missing optional fields
3. Content overflow strategies for variable-length fields
4. Accessibility considerations

Design a product card component for an e-commerce site using Strapi v5 content types.

Content type structure:
- name (short text, required, max 100 characters)
- price (number, required)
- featured_image (media, optional - not all products have images)
- short_description (long text, optional, max 200 characters)
- categories (relation, multiple - products can belong to several categories)
- availability (enumeration: in_stock, low_stock, out_of_stock)

Design requirements:
- Visual hierarchy: name and price most prominent, categories and availability secondary
- Required vs. optional fields: must gracefully handle products without images or descriptions
- Content length variations: names vary from 20-100 characters, some products have no short_description
- Responsive behavior: cards appear in 4-column grid on desktop, 2-column on tablet, 1-column on mobile

Please provide:
1. Visual design description including how to handle missing images (placeholder? icon? text-only?)
2. How the design displays 1 category vs. 5 categories
3. Visual treatment for each availability state
4. How cards maintain consistent height when content varies
5. Typography scale that works for both short (20 char) and long (100 char) product names
6. Spacing system that keeps cards visually consistent regardless of content present

Design a component system for [project type] that includes [list component types].

Component categories:
- Global components: [e.g., Header, Footer, SEO metadata]
- Shared components: [e.g., Address, Link, Button, Card]
- Dynamic Zone components: [e.g., Hero Section, Testimonial, FAQ Block, Feature Grid]

For each component, specify:
1. Required fields and optional fields
2. Nesting rules (can components contain other components?)
3. Responsive behavior
4. Accessibility requirements
5. When editors should use this component vs. alternatives

Design a component system for a company website using Strapi v5.

Component categories:

Global components (used site-wide):
- Header: logo (media), navigation links (repeatable Link component), CTA button
- Footer: logo (media), social links (repeatable Link component), copyright text, sitemap links
- SEO: metaTitle (short text, 60 char max), metaDescription (long text, 160 char max), ogImage (media), canonical URL

Shared components (reusable building blocks):
- Link: label (short text), url (short text), icon (media, optional), opensInNewTab (boolean)
- Address: streetNumber (number), streetName (short text), city (short text), state (relation to State collection), country (relation to Country collection)
- Button: text (short text), url (short text), style (enum: primary, secondary, tertiary), size (enum: small, medium, large)

Dynamic Zone components (flexible page sections):
- HeroSection: title (short text), subtitle (long text), image (media), ctaButtons (repeatable Button component)
- Testimonial: quote (long text), authorName (short text), authorRole (short text), authorPhoto (media), companyLogo (media)
- FAQBlock: title (short text), faqs (relation to FAQ collection, multiple)
- FeatureGrid: title (short text), features (relation to Feature collection, multiple), displayStyle (enum: grid, list, carousel)

For each component, provide:
1. Visual design showing component with all fields populated
2. Visual design showing component with only required fields (how optional fields degrade gracefully)
3. Sizing behavior (fixed width? responsive? full-width?)
4. Spacing between nested components
5. Mobile responsive behavior
6. Component variants (if applicable: light/dark mode, different layouts)

[In Strapi AI after importing Figma file]
"Create component system with global Header/Footer, shared Link/Address components, 
and dynamic zone Hero/Testimonial components based on the provided design"

Design [component/layout] that handles optional fields gracefully.

Content structure:
- Required fields: [list fields that always exist]
- Optional fields: [list fields that may be empty]
- Content variations: [describe different combinations]

Design requirements:
- Default state: all fields populated
- Degraded states: [specific combinations of missing fields]
- Visual consistency: maintain layout integrity regardless of content present
- Editor guidance: how design communicates which fields are optional vs. required

Provide designs for:
1. All fields populated (ideal state)
2. Optional field 1 missing
3. Optional field 2 missing
4. Multiple optional fields missing
5. Only required fields present (minimal state)

Design a blog post card for Strapi v5 collection type.

Content structure:
- title (short text, required, max 100 characters)
- excerpt (long text, required, max 200 characters)
- featured_image (media, optional - 40% of posts don't have images)
- author (relation to User, required)
- published_date (date, required)
- category (relation to Category, required)
- read_time (number, optional - calculated for some posts)

Design variations:
1. With featured image (60% of posts)
2. Without featured image (40% of posts)

Design requirements:
- Cards must maintain consistent height in grid layout
- Without image: use category color block or illustration
- Both variations should feel complete, not "broken"
- Mobile: cards stack vertically, need consistent spacing

Design team member profile cards with highly variable content.

Content structure:
- name (short text, required)
- role (short text, required)
- photo (media, optional - 30% don't have photos)
- bio (long text, optional - 50% don't have bios)
- email (email, optional - 80% include)
- linkedin (short text, optional - 40% include)
- twitter (short text, optional - 20% include)

Content variation scenarios:
1. Complete profile: photo + bio + all social links
2. Photo only: photo + no bio + no social
3. No photo: use initials avatar + has bio + has social
4. Minimal: no photo + no bio + email only
5. Social only: photo + no bio + social links

Design requirements:
- Maintain visual weight across all variations
- Initials avatars for missing photos (use name field)
- Social icons only appear if links exist
- Bio area collapses gracefully when empty
- Cards in grid maintain consistent height or use masonry

/* GOOD: Section collapses when bio is empty */
.team-member-bio {
  display: [bio exists] ? block : none;
}

/* BAD: Section shows empty space */
.team-member-bio {
  min-height: 100px; /* Always reserves space */
}

Design an editor interface for [Strapi content type] optimized for [editor persona].

Content type structure:
- [List all fields with types]
- [Note any complex fields: relations, components, dynamic zones]

Editor persona:
- Role: [content writer, marketing manager, technical editor]
- Technical skill: [low, medium, high]
- Frequency of use: [daily, weekly, occasional]
- Common tasks: [create new, bulk edit, review drafts]
- Pain points: [current frustrations with CMS editing]

Interface requirements:
- Field organization: [logical grouping of related fields]
- Help text: [when and where to provide guidance]
- Validation: [field requirements, character limits, format rules]
- Autosave: [handling long-form content]
- Preview: [ability to see published appearance while editing]

Provide:
1. Field layout with sections/tabs for complex content types
2. Help text examples for complicated fields
3. Validation message patterns
4. How to handle dynamic zones in the editor view
5. Mobile editing considerations (if editors use tablets)

Design a blog post editor interface in Strapi v5 for content marketing team.

Content type structure:
- title (short text, required, max 100 char) - SEO optimized
- slug (UID, auto-generated from title)
- excerpt (long text, required, max 200 char) - used in cards
- body (rich text markdown, required) - main content
- featured_image (media, optional) - shown in cards and article header
- author (relation to User, required) - current user auto-selected
- category (relation to Category, required) - single select
- tags (relation to Tag, optional) - multi-select, max 5
- seo (component: SEO fields) - collapsible section
- dynamic_zone (FAQBlock component) - optional add-on sections
- published_at (date/time) - draft & publish workflow

Editor persona:
- Role: Content marketing writers (3-5 people)
- Technical skill: Low to medium - familiar with Word, Google Docs
- Frequency: Daily use, publishing 2-3 articles per week
- Common tasks: Write draft → Add images → Preview → Submit for review
- Pain points: Often forget SEO fields, confused by markdown, want quick preview

Interface requirements:
- Organize fields into logical sections: Content / Media / Metadata / SEO
- Real-time character counters for title and excerpt
- Markdown toolbar for body field (bold, italic, link, heading buttons)
- Image upload with drag-and-drop
- SEO section collapsed by default but shows validation icon if empty
- Preview button opens draft in modal matching published appearance
- Autosave every 30 seconds with "Last saved" indicator

Provide:
1. Field layout showing 3 main tabs: Content, SEO & Settings, Preview
2. Content tab design with title at top, markdown editor with toolbar, character counters
3. Media section with image upload zone and alt text field
4. SEO section design (collapsed by default, expandable)
5. Top bar with: Autosave status, Draft/Published indicator, Save Draft/Publish buttons
6. Validation patterns (e.g., "Title is too long (120/100 characters)" in red)
7. Preview modal design matching published article appearance
8. How dynamic zone editor allows adding optional FAQ sections

Design workflow state indicators for [content type] with [workflow states].

Workflow states:
- Draft: content being created, not visible to public
- In Review: submitted for editorial review
- Published: live and visible to public
- Scheduled: set to publish at future date/time
- Archived: no longer published but preserved

Design requirements:
- State visibility in content list view
- State visibility in content editor
- Visual differentiation using color, icons, and labels
- Accessibility: states must be identifiable without color alone
- Editor actions available in each state
- Preview mode for draft content

Provide:
1. Color system for each state (with WCAG AA contrast ratios)
2. Icon set for states
3. Badge designs for content list view
4. Editor header design showing current state
5. State transition button designs
6. Preview mode design for viewing draft content
7. How scheduled content displays countdown or publish date

Design workflow state system for blog articles in Strapi v5.

Workflow states:
- Draft: Writers creating content, can save and return later
- In Review: Submitted to editor for approval
- Scheduled: Approved and scheduled for future publication
- Published: Live on site
- Archived: Previously published, now removed from site but preserved

Design requirements:
- State visibility: Editors need to see state at a glance in article list (showing 50+ articles)
- State visibility in editor: Prominent indicator in editor showing current state
- Visual differentiation: Color, icon, and text label for each state
- Accessibility: Must work for colorblind users (not color alone)
- Editor actions: Clear buttons for state transitions (Save Draft, Submit for Review, Publish Now, Schedule, Archive)
- Preview mode: Draft and scheduled articles need preview that looks like published version but with clear indicator "DRAFT - Not Public"
- Scheduled articles: Show publish date/time prominently

Provide:
1. Color coding with specific hex values for each workflow state, ensuring WCAG AA contrast
2. Badge designs specifying size (24px height), shape (rounded rectangle), placement (left of article title in lists), typography (12px semi-bold uppercase)
3. How states display in article list table (colored vertical bar on left edge + text badge + last modified timestamp)
4. State indicator in article editor (prominent banner at top with current state, available actions as buttons, last published date if applicable)
5. Action buttons for each state (Draft shows "Publish Now" primary button + "Schedule" secondary button, Published shows "Unpublish" + "Archive")
6. Accessibility: state indicated by color, icon, and text label (not color alone), keyboard shortcuts for state changes (Cmd+P to publish)
7. Preview mode design (when viewing draft in preview, prominent banner says "DRAFT - Not visible to public" with styling distinct from published view)

[In external AI tool like ChatGPT]
"Design a workflow state system for Strapi v5 blog articles with 
Draft, In Review, Scheduled, Published, and Archived states. Include 
color coding, badges, and state transition buttons."

[Then in Strapi AI]
"Create a blog collection type with Draft & Publish enabled"

Design navigation for [content type] with nested relationships.

Content structure:
- Parent level: [top-level categories]
- Child level: [subcategories under each parent]
- Grandchild level: [if applicable]
- Relationship type: [one-to-many, many-to-many]

Navigation requirements:
- Desktop navigation: [mega menu, dropdown, sidebar]
- Mobile navigation: [drawer, accordion, drill-down]
- Visual hierarchy: [how to show parent-child relationships]
- Current location: [how users know where they are]
- Breadcrumbs: [showing navigation path]

Provide:
1. Navigation structure showing all levels
2. How hierarchy is communicated visually
3. Mobile navigation pattern
4. Breadcrumb design
5. How navigation handles varying numbers of items at each level

Design navigation for a technology news site using Strapi v5 nested categories.

Content structure from Strapi:
- Parent level: 6 main topics (Technology, Business, Science, Culture, Politics, Sports)
- Child level: Technology has 8 subtopics (Artificial Intelligence, Cloud Computing, Cybersecurity, Hardware, Mobile, Software, Startups, Web Development)
- Grandchild level: Artificial Intelligence has 4 subtopics (Machine Learning, Natural Language Processing, Computer Vision, Robotics)
- Relationship type: one-to-many (each child belongs to one parent)

Navigation requirements:
- Desktop navigation: horizontal main nav with mega-menu dropdowns showing child and grandchild categories
- Mobile navigation: 70% of traffic is mobile, needs touch-friendly navigation
- Visual hierarchy: users need to understand they're viewing Technology > AI > Machine Learning articles
- Current location: active category highlighted in navigation
- Breadcrumbs: showing full path on article pages and category pages

Provide:
1. Desktop mega-menu structure showing how 3 levels display (does AI section show all 4 grandchild topics inline?)
2. Visual hierarchy using typography, color, or indentation to show parent-child relationships
3. Mobile navigation pattern (hamburger menu opening drawer? accordion showing nested levels? drill-down where tapping Technology shows its 8 children?)
4. Breadcrumb design with specific styling (Home > Technology > Artificial Intelligence > Machine Learning)
5. How navigation handles categories with no children (Sports has no subcategories) vs. categories with many children (Technology has 8)
6. Active state design showing current category at all levels
7. How filters integrate with nested navigation (filter AI articles by date/author while maintaining category context)

[In Strapi AI]
"Create a category collection type with self-referential relationship 
for parent/child categories, supporting 3 levels of nesting"

Design a media management interface for [content type/use case].

Media requirements:
- File types: [images, videos, PDFs, documents]
- Volume: [approximate number of assets]
- Organization: [folders, tags, categories]
- Common tasks: [upload, search, filter, insert into content]

Design requirements:
- View options: [grid view for visual browsing, list view for file details]
- Search and filter: [by file type, upload date, dimensions, tags]
- File details: [metadata display, preview, file info]
- Upload flow: [single file, bulk upload, drag and drop]
- Selection: [single select, multi-select for bulk actions]

Provide:
1. Layout supporting both grid and list views
2. Search and filter interface
3. File detail panel design
4. Upload interface and progress indicators
5. How design scales with hundreds or thousands of assets

Design a media library interface for a content marketing team managing blog images, video content, and downloadable resources.

Media requirements:
- File types: Images (PNG, JPG, WebP), Videos (MP4, WebM), PDFs, Documents (DOCX)
- Volume: 2,000+ assets, growing by 50-100 per month
- Organization: Folders by content type (Blog Images, Video, Downloads, Brand Assets)
- Common tasks: Upload blog featured images, find previous campaign images, bulk tag assets, insert media into articles

Design requirements:
- View options: Grid view (default) with image previews, List view showing file details, Board view grouped by folder
- Search and filter: Full-text search of filenames and alt text, filter by file type/size/upload date, filter by tags
- File details: Preview, dimensions, file size, upload date, alt text editor, tags, used in (which articles use this image)
- Upload flow: Drag-and-drop zone, bulk upload with progress indicators, folder selection during upload
- Selection: Single select for inserting, multi-select for bulk tagging/moving/deleting

Provide:
1. Grid view layout (4 columns on desktop) with thumbnails, filename, file type icon, quick actions (edit, delete, insert)
2. Search bar with advanced filters dropdown (file type checkboxes, date range picker, tag selector)
3. File detail panel (slides in from right) showing large preview, metadata form (alt text, tags, folder), usage information
4. Upload interface: Drop zone covering grid when dragging files, progress indicators showing individual file upload status, success/error messages
5. How grid maintains performance with 2,000+ assets (virtual scrolling, infinite scroll, pagination?)
6. Bulk actions bar appearing when multiple files selected (Move to Folder, Add Tags, Delete)

[Image thumbnail]
📸 product-photo.jpg
Alt text: [AI-generated: "Modern laptop on wooden desk with coffee mug"] ✓ Accept ✏️ Edit
Tags: #workspace #laptop #productivity [+Add tag]

Design an internationalized interface for [content type] supporting [list of locales].

Localization requirements:
- Supported locales: [e.g., English, Spanish, French, German, Arabic, Japanese]
- Content fields: [which fields are translatable vs. shared across locales]
- Translation workflow: [simultaneous translation, progressive rollout]
- Default locale: [which language is primary]
- Fallback behavior: [what happens when translation doesn't exist]

Design requirements:
- Locale switcher: [how users select language in editor and on public site]
- Translation status: [visual indicators for complete/incomplete translations]
- Content length variations: [German 30% longer, Japanese more compact]
- RTL support: [layout adjustments for Arabic/Hebrew]
- Date/number formatting: [locale-specific formats]

Provide:
1. Locale switcher design for editor and public site
2. Translation status indicators in content list
3. Side-by-side translation interface
4. Layout flexibility for varying text lengths
5. RTL layout examples
6. How to handle shared vs. translatable fields

Design an internationalized blog platform in Strapi v5 supporting English, Spanish, French, German, and Japanese.

Localization requirements:
- Supported locales: en (English - default), es (Spanish), fr (French), de (German), ja (Japanese)
- Content fields: title, slug, body, excerpt are translatable; featured_image and published_date shared across locales
- Translation workflow: English content created first, then progressively translated to other languages
- Default locale: English (en)
- Fallback behavior: If translation doesn't exist, show English version with language indicator

Design requirements:
- Locale switcher: Dropdown showing language names in native script (English, Español, Français, Deutsch, 日本語)
- Translation status: Show completion percentage for each article (e.g., "3/5 languages complete")
- Content length variations: German headlines often 30% longer, Japanese more compact, Spanish similar to English
- Date formatting: US format (MM/DD/YYYY) for English, European format (DD/MM/YYYY) for Spanish/French/German, Japanese format (YYYY/MM/DD)

Provide:
1. Editor locale switcher at top of page (current: English | Translate to: [Spanish] [French] [German] [Japanese])
2. Translation status in article list showing badges (🟢 Complete | 🟡 3/5 | 🔴 1/5)
3. Side-by-side translation interface showing English source on left, editable translation on right
4. Flexible card layout that accommodates German titles up to 120 characters vs. English 80 characters
5. How featured image (shared field) appears in all locale editors vs. title (translatable field) per locale
6. Public site locale switcher in header (globe icon + dropdown)
7. URL structure for locales (example.com/en/article vs. example.com/es/articulo)

[In Strapi AI - future feature]
"Automatically translate this blog post from English to Spanish, French, and German"

   "Add SEO component to all page types"
   "Create a dynamic zone for homepage sections"
   "Add markdown rich text field to blog posts"

[In Figma, create frames for:]

Collection Types:
├─ Blog Post
│  ├─ title (text)
│  ├─ slug (text)
│  ├─ body (rich text)
│  ├─ featured_image (media)
│  ├─ author (→ User)
│  └─ category (→ Category)
│
├─ Category
│  ├─ name (text)
│  └─ slug (text)
│
└─ Feature
   ├─ title (text)
   ├─ description (text)
   └─ icon (media)

Components:
├─ SEO (global)
│  ├─ metaTitle (text)
│  ├─ metaDescription (text)
│  └─ ogImage (media)
│
└─ Hero Section (dynamic-zone)
   ├─ title (text)
   ├─ subtitle (text)
   └─ background (media)

Single Types:
└─ Global Settings
   ├─ siteName (text)
   ├─ logo (media)
   └─ footer (→ Footer component)

Create a Figma-compatible content model diagram for [project type].

Include:
- Collection Types: [list content types]
- Components: [list reusable components]
- Single Types: [list singleton content]
- Relations: [specify relationships with arrows]

For each content type, show:
- Type name in title case
- List of fields with types (text, media, relation, number, etc.)
- Required vs. optional fields (use asterisk for required)
- Relationships shown with arrows and labels (→ User, → Category)

Visual formatting:
- Use boxes/frames for each content type
- Group by type (Collection Types section, Components section, Single Types section)
- Use consistent spacing and alignment
- Color code: Collection Types (blue), Components (green), Single Types (yellow)

npx create-strapi-app@latest