Web designers often create beautiful layouts that break the moment content editors start using them. A perfectly aligned grid collapses when an editor adds a sixth content block instead of five. A navigation system designed for five categories becomes unusable when the site grows to twenty.

AI prompts help solve this problem, but only if they account for how content is actually structured and managed.

Generic design prompts produce generic layouts. Prompts that reference content types, workflow states, and CMS capabilities produce designs that work with real content systems like Strapi v5.

Mastering CMS-aware prompt techniques transforms AI from a general design assistant into a specialized partner that understands Dynamic Zones, content relationships, workflow states, and dual-interface design requirements.

In this guide, you'll learn:

• How to use external AI tools (ChatGPT, Claude, etc.) to generate CMS-aware designs
• When to use Strapi AI's built-in features to accelerate content type creation
• Structured prompts referencing content types, field definitions, and relationships that produce implementable designs
• CMS-specific prompts that address real challenges like nested categories, workflow states, and media management
• Complete workflows combining design AI and Strapi AI for rapid prototyping

The prompt patterns in this guide focus on headless CMS platforms like Strapi v5, where content structure directly affects design decisions.

The Design-to-CMS Workflow: External AI + Strapi AI

Before diving into specific prompts, understand how external AI tools and Strapi AI work together in a modern development workflow:

External AI Tools (ChatGPT, Claude, etc.):

• Generate design concepts and layouts
• Create component specifications
• Produce Figma-ready designs
• Define user interfaces

Strapi AI (Built-in):

• Generate content types from designs
• Create collection types and components automatically
• Import Figma files to generate schemas
• Import frontend code to reverse-engineer content models

Complete Workflow Example:

1. Use ChatGPT/Claude to generate a design prompt:

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

2. Generate frontend with v0 or Lovable from that design prompt
3. Use Strapi AI to import the frontend project:
   • Upload the ZIP file to Strapi AI
   • AI automatically identifies needed content types (blog posts, testimonials, services, pricing tiers, FAQs)
   • Generates complete content structure with relationships
4. Refine with follow-up prompts in Strapi AI:

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

This integrated approach means you're not choosing between tools—you're using each for its strength. External AI excels at design and visual creativity. Strapi AI excels at understanding content structure and generating matching backend schemas.

1. Generating Layouts for Dynamic Content Zones

Prompts for layout design need specificity. Generic requests like "design a homepage" produce generic results. The difference between useful AI output and useless suggestions depends on how clearly you define your requirements.

Before prompting AI, gather the details that make your project specific: content types, user goals, business constraints, and technical requirements.

Asking for "a tech company homepage" gets you stock layouts. Asking for "a SaaS homepage for IT directors that needs to highlight security features" gives AI something concrete to work with.

1I'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].
2
3Content structure:
4- Primary content: [e.g., blog posts, product listings, case studies]
5- Key user actions: [e.g., search, filter, purchase]  
6- Design constraints: [e.g., must accommodate video, needs mobile-first approach, content managed through Strapi v5 with Dynamic Zones]
7
8For each concept, explain:
91. Content hierarchy decisions
102. Responsive behavior approach  
113. How the layout supports the primary user goal

Strapi v5's Dynamic Zones let content editors mix and arrange text, media, and CTAs in any order. When designing for platforms with this flexibility, your layouts need to be modular rather than rigid.

Specify in your prompts that designs must accommodate varying content arrangements. AI can then suggest component-based systems that work whether a page has 3 content blocks or 12.

1I'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.
2
3Content structure:
4- Primary content: case studies with customer quotes, success metrics, video testimonials, technical implementation details
5- Key user actions: filter by industry, view detailed case studies, download PDFs, contact sales
6- 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.
7
8For each concept, explain:
91. How the modular approach maintains visual consistency across varying content lengths
102. Responsive behavior for video content on mobile
113. How the layout guides users from overview to detail without overwhelming them

Workflow Tip: After generating your design, use Strapi AI to create matching content types. Simply chat with Strapi AI:

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

Strapi AI will generate Collection Types, Single Types, and Components with appropriate relationships—saving hours of manual schema creation.

Start with clear problem statements in your prompts. Ask follow-up questions to refine AI output as your design direction develops. Effective layouts emerge from iterative prompting, not single attempts.

2. Designing for Structured Content Types

Content management systems like Strapi v5 organize content into structured types with defined fields. A blog post might have fields for title, author, publication date, featured image, body content, and tags.

This structure influences design decisions; your layouts must accommodate these specific content components.

Effective prompts reference the content structure you're designing for. If you're designing a product card and the CMS stores products with specific fields (name, price, SKU, categories, images), specify this in your prompt.

AI can then generate designs that work with your actual content model rather than hypothetical layouts that break when content doesn't fit the expected structure.

1Design a [component type] for displaying [Strapi content type] with the following fields.
2
3Content type structure:
4- Field 1: [field name and type, e.g., title (short text, required)]
5- Field 2: [field name and type, e.g., featured image (media, optional)]
6- Field 3: [field name and type]
7- Relations: [any related content types]
8
9Design requirements:
10- Visual hierarchy: [which fields are most prominent]
11- Required vs. optional fields: [how to handle missing optional content]
12- Content length variations: [how to handle long titles, descriptions, etc.]
13- Responsive behavior: [desktop and mobile considerations]
14
15Please provide:
161. Visual design description
172. How the design handles missing optional fields
183. Content overflow strategies for variable-length fields
194. Accessibility considerations

When Strapi's Content Type Builder defines specific fields and relationships, your designs need to account for this reality.

A design that assumes every product has an image breaks when editors publish products without images. A card layout that looks perfect with 50-character titles becomes unusable with 150-character titles.

1Design a product card component for an e-commerce site using Strapi v5 content types.
2
3Content type structure:
4- name (short text, required, max 100 characters)
5- price (number, required)
6- featured_image (media, optional - not all products have images)
7- short_description (long text, optional, max 200 characters)
8- categories (relation, multiple - products can belong to several categories)
9- availability (enumeration: in_stock, low_stock, out_of_stock)
10
11Design requirements:
12- Visual hierarchy: name and price most prominent, categories and availability secondary
13- Required vs. optional fields: must gracefully handle products without images or descriptions
14- Content length variations: names vary from 20-100 characters, some products have no short_description
15- Responsive behavior: cards appear in 4-column grid on desktop, 2-column on tablet, 1-column on mobile
16
17Please provide:
181. Visual design description including how to handle missing images (placeholder? icon? text-only?)
192. How the design displays 1 category vs. 5 categories
203. Visual treatment for each availability state
214. How cards maintain consistent height when content varies
225. Typography scale that works for both short (20 char) and long (100 char) product names
236. Spacing system that keeps cards visually consistent regardless of content present

Strapi AI Integration: Once you have your design spec, you can generate the matching content type in Strapi AI by uploading your design as an image or Figma file:

1. Save your AI-generated design mockup
2. In Strapi v5 Content-Type Builder, click the Strapi AI icon
3. Upload your design image
4. Prompt: "Generate content types based on this product card design"
5. Strapi AI creates the collection type with all specified fields

This ensures your backend structure perfectly matches your frontend design.

3. Building Reusable Component Systems

Component systems in Strapi v5 enable content reusability across different contexts. A well-designed component system reduces duplication, maintains consistency, and makes it easier for editors to compose pages.

When designing component libraries for Strapi, distinguish between components that should be global (used everywhere), shared (used in multiple places), and dynamic zones (used flexibly by editors).

1Design a component system for [project type] that includes [list component types].
2
3Component categories:
4- Global components: [e.g., Header, Footer, SEO metadata]
5- Shared components: [e.g., Address, Link, Button, Card]
6- Dynamic Zone components: [e.g., Hero Section, Testimonial, FAQ Block, Feature Grid]
7
8For each component, specify:
91. Required fields and optional fields
102. Nesting rules (can components contain other components?)
113. Responsive behavior
124. Accessibility requirements
135. When editors should use this component vs. alternatives

Strapi v5 organizes components into categories. Your designs should reflect this organizational structure, helping editors understand when to use each component type.

1Design a component system for a company website using Strapi v5.
2
3Component categories:
4
5Global components (used site-wide):
6- Header: logo (media), navigation links (repeatable Link component), CTA button
7- Footer: logo (media), social links (repeatable Link component), copyright text, sitemap links
8- SEO: metaTitle (short text, 60 char max), metaDescription (long text, 160 char max), ogImage (media), canonical URL
9
10Shared components (reusable building blocks):
11- Link: label (short text), url (short text), icon (media, optional), opensInNewTab (boolean)
12- Address: streetNumber (number), streetName (short text), city (short text), state (relation to State collection), country (relation to Country collection)
13- Button: text (short text), url (short text), style (enum: primary, secondary, tertiary), size (enum: small, medium, large)
14
15Dynamic Zone components (flexible page sections):
16- HeroSection: title (short text), subtitle (long text), image (media), ctaButtons (repeatable Button component)
17- Testimonial: quote (long text), authorName (short text), authorRole (short text), authorPhoto (media), companyLogo (media)
18- FAQBlock: title (short text), faqs (relation to FAQ collection, multiple)
19- FeatureGrid: title (short text), features (relation to Feature collection, multiple), displayStyle (enum: grid, list, carousel)
20
21For each component, provide:
221. Visual design showing component with all fields populated
232. Visual design showing component with only required fields (how optional fields degrade gracefully)
243. Sizing behavior (fixed width? responsive? full-width?)
254. Spacing between nested components
265. Mobile responsive behavior
276. Component variants (if applicable: light/dark mode, different layouts)

Component Design Best Practices:

• Keep components atomic: Each component should have a single, clear purpose
• Design for missing optionals: Show how components look when optional fields are empty
• Test with real content: Use varying lengths, missing images, different quantities
• Document nesting rules: Specify which components can contain other components

Using Strapi AI for Component Generation:

After designing your component system, Strapi AI can generate the backend structure:

1. Create a visual diagram of your component hierarchy in Figma
2. Import the Figma file into Strapi AI (Settings → Security → Generate API token)
3. Strapi AI automatically creates:
   • Component categories (global, shared, dynamic-zone)
   • All component fields with correct types
   • Relationships between components
   • Proper nesting structures

Example Strapi AI workflow:

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

4. Handling Optional Fields and Content Variations

One of the most common design failures in CMS projects is assuming content will always be complete. In reality, editors often publish entries with missing optional fields. Your designs must handle these variations gracefully.

When some fields are optional in Strapi v5, your interface design needs fallback patterns. A blog post might have an optional featured image—what does the card look like without it? A team member might not have a bio—how does the profile display?

1Design [component/layout] that handles optional fields gracefully.
2
3Content structure:
4- Required fields: [list fields that always exist]
5- Optional fields: [list fields that may be empty]
6- Content variations: [describe different combinations]
7
8Design requirements:
9- Default state: all fields populated
10- Degraded states: [specific combinations of missing fields]
11- Visual consistency: maintain layout integrity regardless of content present
12- Editor guidance: how design communicates which fields are optional vs. required
13
14Provide designs for:
151. All fields populated (ideal state)
162. Optional field 1 missing
173. Optional field 2 missing
184. Multiple optional fields missing
195. Only required fields present (minimal state)

Consider these scenarios when designing for optional content:

Scenario 1: Blog Posts with Optional Featured Images

1Design a blog post card for Strapi v5 collection type.
2
3Content structure:
4- title (short text, required, max 100 characters)
5- excerpt (long text, required, max 200 characters)
6- featured_image (media, optional - 40% of posts don't have images)
7- author (relation to User, required)
8- published_date (date, required)
9- category (relation to Category, required)
10- read_time (number, optional - calculated for some posts)
11
12Design variations:
131. With featured image (60% of posts)
142. Without featured image (40% of posts)
15
16Design requirements:
17- Cards must maintain consistent height in grid layout
18- Without image: use category color block or illustration
19- Both variations should feel complete, not "broken"
20- Mobile: cards stack vertically, need consistent spacing

Scenario 2: Team Member Profiles with Variable Content

1Design team member profile cards with highly variable content.
2
3Content structure:
4- name (short text, required)
5- role (short text, required)
6- photo (media, optional - 30% don't have photos)
7- bio (long text, optional - 50% don't have bios)
8- email (email, optional - 80% include)
9- linkedin (short text, optional - 40% include)
10- twitter (short text, optional - 20% include)
11
12Content variation scenarios:
131. Complete profile: photo + bio + all social links
142. Photo only: photo + no bio + no social
153. No photo: use initials avatar + has bio + has social
164. Minimal: no photo + no bio + email only
175. Social only: photo + no bio + social links
18
19Design requirements:
20- Maintain visual weight across all variations
21- Initials avatars for missing photos (use name field)
22- Social icons only appear if links exist
23- Bio area collapses gracefully when empty
24- Cards in grid maintain consistent height or use masonry

Design Pattern: Collapsing Sections

When optional content is missing, sections should collapse rather than show empty space:

css

1/* GOOD: Section collapses when bio is empty */
2.team-member-bio {
3  display: [bio exists] ? block : none;
4}
5
6/* BAD: Section shows empty space */
7.team-member-bio {
8  min-height: 100px; /* Always reserves space */
9}

Strapi AI for Content Variation Testing:

After designing your optional field patterns, use Strapi AI to generate realistic test content:

1. Generate your content types in Strapi AI
2. Populate with sample data (Strapi AI can suggest realistic examples)
3. In content editor, create entries with different field combinations
4. Test your designs against real data variations

5. Designing Content Editor Interfaces

While external designers focus on the public-facing site, Strapi's admin interface needs design consideration too. Content editors spend hours in the Strapi admin panel—its usability directly affects content quality and publishing speed.

The Strapi admin interface is where editors create, edit, and manage content. Your design decisions about content structure directly impact editor experience.

1Design an editor interface for [Strapi content type] optimized for [editor persona].
2
3Content type structure:
4- [List all fields with types]
5- [Note any complex fields: relations, components, dynamic zones]
6
7Editor persona:
8- Role: [content writer, marketing manager, technical editor]
9- Technical skill: [low, medium, high]
10- Frequency of use: [daily, weekly, occasional]
11- Common tasks: [create new, bulk edit, review drafts]
12- Pain points: [current frustrations with CMS editing]
13
14Interface requirements:
15- Field organization: [logical grouping of related fields]
16- Help text: [when and where to provide guidance]
17- Validation: [field requirements, character limits, format rules]
18- Autosave: [handling long-form content]
19- Preview: [ability to see published appearance while editing]
20
21Provide:
221. Field layout with sections/tabs for complex content types
232. Help text examples for complicated fields
243. Validation message patterns
254. How to handle dynamic zones in the editor view
265. Mobile editing considerations (if editors use tablets)

Example: Blog Post Editor Interface

1Design a blog post editor interface in Strapi v5 for content marketing team.
2
3Content type structure:
4- title (short text, required, max 100 char) - SEO optimized
5- slug (UID, auto-generated from title)
6- excerpt (long text, required, max 200 char) - used in cards
7- body (rich text markdown, required) - main content
8- featured_image (media, optional) - shown in cards and article header
9- author (relation to User, required) - current user auto-selected
10- category (relation to Category, required) - single select
11- tags (relation to Tag, optional) - multi-select, max 5
12- seo (component: SEO fields) - collapsible section
13- dynamic_zone (FAQBlock component) - optional add-on sections
14- published_at (date/time) - draft & publish workflow
15
16Editor persona:
17- Role: Content marketing writers (3-5 people)
18- Technical skill: Low to medium - familiar with Word, Google Docs
19- Frequency: Daily use, publishing 2-3 articles per week
20- Common tasks: Write draft → Add images → Preview → Submit for review
21- Pain points: Often forget SEO fields, confused by markdown, want quick preview
22
23Interface requirements:
24- Organize fields into logical sections: Content / Media / Metadata / SEO
25- Real-time character counters for title and excerpt
26- Markdown toolbar for body field (bold, italic, link, heading buttons)
27- Image upload with drag-and-drop
28- SEO section collapsed by default but shows validation icon if empty
29- Preview button opens draft in modal matching published appearance
30- Autosave every 30 seconds with "Last saved" indicator
31
32Provide:
331. Field layout showing 3 main tabs: Content, SEO & Settings, Preview
342. Content tab design with title at top, markdown editor with toolbar, character counters
353. Media section with image upload zone and alt text field
364. SEO section design (collapsed by default, expandable)
375. Top bar with: Autosave status, Draft/Published indicator, Save Draft/Publish buttons
386. Validation patterns (e.g., "Title is too long (120/100 characters)" in red)
397. Preview modal design matching published article appearance
408. How dynamic zone editor allows adding optional FAQ sections

Editor Experience Principles:

• Progressive disclosure: Show essential fields first, advanced options in collapsible sections
• Helpful validation: Explain why something is invalid and how to fix it
• Visual feedback: Loading states, save confirmations, error messages
• Contextual help: Tooltips and help text where editors need guidance
• Keyboard shortcuts: Power users benefit from quick actions (Cmd+S to save)

6. Visualizing Workflow States

Strapi v5's Draft & Publish system enables content workflow management. Content can exist in different states: draft, published, scheduled, archived. Your design needs to communicate these states clearly to both editors and end users.

Content workflow states affect both the admin interface (how editors see content status) and public interface (what visitors see). Design systems need visual language for these states.

1Design workflow state indicators for [content type] with [workflow states].
2
3Workflow states:
4- Draft: content being created, not visible to public
5- In Review: submitted for editorial review
6- Published: live and visible to public
7- Scheduled: set to publish at future date/time
8- Archived: no longer published but preserved
9
10Design requirements:
11- State visibility in content list view
12- State visibility in content editor
13- Visual differentiation using color, icons, and labels
14- Accessibility: states must be identifiable without color alone
15- Editor actions available in each state
16- Preview mode for draft content
17
18Provide:
191. Color system for each state (with WCAG AA contrast ratios)
202. Icon set for states
213. Badge designs for content list view
224. Editor header design showing current state
235. State transition button designs
246. Preview mode design for viewing draft content
257. How scheduled content displays countdown or publish date

Example: Blog Article Workflow States

1Design workflow state system for blog articles in Strapi v5.
2
3Workflow states:
4- Draft: Writers creating content, can save and return later
5- In Review: Submitted to editor for approval
6- Scheduled: Approved and scheduled for future publication
7- Published: Live on site
8- Archived: Previously published, now removed from site but preserved
9
10Design requirements:
11- State visibility: Editors need to see state at a glance in article list (showing 50+ articles)
12- State visibility in editor: Prominent indicator in editor showing current state
13- Visual differentiation: Color, icon, and text label for each state
14- Accessibility: Must work for colorblind users (not color alone)
15- Editor actions: Clear buttons for state transitions (Save Draft, Submit for Review, Publish Now, Schedule, Archive)
16- Preview mode: Draft and scheduled articles need preview that looks like published version but with clear indicator "DRAFT - Not Public"
17- Scheduled articles: Show publish date/time prominently
18
19Provide:
201. Color coding with specific hex values for each workflow state, ensuring WCAG AA contrast
212. Badge designs specifying size (24px height), shape (rounded rectangle), placement (left of article title in lists), typography (12px semi-bold uppercase)
223. How states display in article list table (colored vertical bar on left edge + text badge + last modified timestamp)
234. State indicator in article editor (prominent banner at top with current state, available actions as buttons, last published date if applicable)
245. Action buttons for each state (Draft shows "Publish Now" primary button + "Schedule" secondary button, Published shows "Unpublish" + "Archive")
256. Accessibility: state indicated by color, icon, and text label (not color alone), keyboard shortcuts for state changes (Cmd+P to publish)
267. Preview mode design (when viewing draft in preview, prominent banner says "DRAFT - Not visible to public" with styling distinct from published view)

Workflow State Design System:

Strapi AI and Workflow Design:

When using Strapi AI to generate content types, the Draft & Publish workflow is enabled by default for Collection Types. Your design system needs to account for this:

1[In external AI tool like ChatGPT]
2"Design a workflow state system for Strapi v5 blog articles with 
3Draft, In Review, Scheduled, Published, and Archived states. Include 
4color coding, badges, and state transition buttons."
5
6[Then in Strapi AI]
7"Create a blog collection type with Draft & Publish enabled"

The combination ensures your visual design aligns with Strapi's built-in workflow capabilities.

7. Creating Navigation for Nested Content Relationships

Navigation design becomes complex when content has hierarchical relationships. Categories contain subcategories.

Topics have child topics. Products belong to department, then category, then subcategory. Your navigation needs to communicate these relationships clearly while remaining usable.

Strapi v5 supports nested content relationships through its relational fields. A technology news site might structure content with parent categories (Technology), child categories (Artificial Intelligence), and grandchild categories (Machine Learning).

When designing navigation for these structures, consider how users discover and filter content at each level.

1Design navigation for [content type] with nested relationships.
2
3Content structure:
4- Parent level: [top-level categories]
5- Child level: [subcategories under each parent]
6- Grandchild level: [if applicable]
7- Relationship type: [one-to-many, many-to-many]
8
9Navigation requirements:
10- Desktop navigation: [mega menu, dropdown, sidebar]
11- Mobile navigation: [drawer, accordion, drill-down]
12- Visual hierarchy: [how to show parent-child relationships]
13- Current location: [how users know where they are]
14- Breadcrumbs: [showing navigation path]
15
16Provide:
171. Navigation structure showing all levels
182. How hierarchy is communicated visually
193. Mobile navigation pattern
204. Breadcrumb design
215. How navigation handles varying numbers of items at each level

When mapping flows for content-driven applications using Strapi v5's nested categories, your navigation should reflect content relationships.

If a user browses from Technology → Artificial Intelligence → Machine Learning, the interface needs to show this path clearly and allow easy movement between levels.

1Design navigation for a technology news site using Strapi v5 nested categories.
2
3Content structure from Strapi:
4- Parent level: 6 main topics (Technology, Business, Science, Culture, Politics, Sports)
5- Child level: Technology has 8 subtopics (Artificial Intelligence, Cloud Computing, Cybersecurity, Hardware, Mobile, Software, Startups, Web Development)
6- Grandchild level: Artificial Intelligence has 4 subtopics (Machine Learning, Natural Language Processing, Computer Vision, Robotics)
7- Relationship type: one-to-many (each child belongs to one parent)
8
9Navigation requirements:
10- Desktop navigation: horizontal main nav with mega-menu dropdowns showing child and grandchild categories
11- Mobile navigation: 70% of traffic is mobile, needs touch-friendly navigation
12- Visual hierarchy: users need to understand they're viewing Technology > AI > Machine Learning articles
13- Current location: active category highlighted in navigation
14- Breadcrumbs: showing full path on article pages and category pages
15
16Provide:
171. Desktop mega-menu structure showing how 3 levels display (does AI section show all 4 grandchild topics inline?)
182. Visual hierarchy using typography, color, or indentation to show parent-child relationships
193. Mobile navigation pattern (hamburger menu opening drawer? accordion showing nested levels? drill-down where tapping Technology shows its 8 children?)
204. Breadcrumb design with specific styling (Home > Technology > Artificial Intelligence > Machine Learning)
215. How navigation handles categories with no children (Sports has no subcategories) vs. categories with many children (Technology has 8)
226. Active state design showing current category at all levels
237. How filters integrate with nested navigation (filter AI articles by date/author while maintaining category context)

Strapi AI for Nested Relationships:

When building nested category systems, Strapi AI can generate the structure:

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

Strapi AI will create:

• Category collection type
• Self-referential relation (parent_category → Category)
• Inverse relation (child_categories → Category, multiple)

This matches your navigation design's hierarchical structure.

8. Designing Media Management Interfaces

Websites use various media types: images, videos, PDFs, and documents. Content editors need to upload, organize, search, and insert these assets.

Media management interfaces need to balance visual browsing (editors want to see images) with efficient organization (editors need to find specific files quickly).

Strapi v5's Media Library stores and organizes uploaded assets. When designing interfaces that work with Strapi's media management, consider how editors browse assets, search for specific files, view file details, and insert media into content. Your design needs to work with hundreds or thousands of assets.

1Design a media management interface for [content type/use case].
2
3Media requirements:
4- File types: [images, videos, PDFs, documents]
5- Volume: [approximate number of assets]
6- Organization: [folders, tags, categories]
7- Common tasks: [upload, search, filter, insert into content]
8
9Design requirements:
10- View options: [grid view for visual browsing, list view for file details]
11- Search and filter: [by file type, upload date, dimensions, tags]
12- File details: [metadata display, preview, file info]
13- Upload flow: [single file, bulk upload, drag and drop]
14- Selection: [single select, multi-select for bulk actions]
15
16Provide:
171. Layout supporting both grid and list views
182. Search and filter interface
193. File detail panel design
204. Upload interface and progress indicators
215. How design scales with hundreds or thousands of assets

When designing media management for Strapi v5 projects, editors need to organize assets by content type, campaign, or date. They need to find the right image among hundreds. They need to see file dimensions before inserting images into articles. Your interface needs to make these tasks efficient.

Example: Media Library for Content Marketing Team

1Design a media library interface for a content marketing team managing blog images, video content, and downloadable resources.
2
3Media requirements:
4- File types: Images (PNG, JPG, WebP), Videos (MP4, WebM), PDFs, Documents (DOCX)
5- Volume: 2,000+ assets, growing by 50-100 per month
6- Organization: Folders by content type (Blog Images, Video, Downloads, Brand Assets)
7- Common tasks: Upload blog featured images, find previous campaign images, bulk tag assets, insert media into articles
8
9Design requirements:
10- View options: Grid view (default) with image previews, List view showing file details, Board view grouped by folder
11- Search and filter: Full-text search of filenames and alt text, filter by file type/size/upload date, filter by tags
12- File details: Preview, dimensions, file size, upload date, alt text editor, tags, used in (which articles use this image)
13- Upload flow: Drag-and-drop zone, bulk upload with progress indicators, folder selection during upload
14- Selection: Single select for inserting, multi-select for bulk tagging/moving/deleting
15
16Provide:
171. Grid view layout (4 columns on desktop) with thumbnails, filename, file type icon, quick actions (edit, delete, insert)
182. Search bar with advanced filters dropdown (file type checkboxes, date range picker, tag selector)
193. File detail panel (slides in from right) showing large preview, metadata form (alt text, tags, folder), usage information
204. Upload interface: Drop zone covering grid when dragging files, progress indicators showing individual file upload status, success/error messages
215. How grid maintains performance with 2,000+ assets (virtual scrolling, infinite scroll, pagination?)
226. Bulk actions bar appearing when multiple files selected (Move to Folder, Add Tags, Delete)

Media Library Best Practices:

• Thumbnail quality: Generate high-quality thumbnails for visual browsing
• Alt text workflow: Prompt editors to add alt text during upload
• Smart search: Search filenames, alt text, and tags simultaneously
• Visual organization: Folder colors, type icons, clear file indicators
• Performance: Lazy load images, virtualize long lists, paginate results

Strapi AI Media Library Feature:

Strapi v5 includes AI-powered media features that your design should account for:

• AI-generated alt text: Automatically generates accessibility-friendly alt text
• AI-generated captions: Creates descriptive captions for images
• AI-generated tags: Suggests relevant tags for content categorization

Design your media library interface to show:

• AI-generated suggestions (with option to edit)
• Confidence indicators for AI suggestions
• Quick accept/reject buttons for AI-generated metadata
• Batch processing status for bulk AI generation

Example design element:

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

9. Designing for Internationalization (i18n)

Modern websites serve global audiences. Strapi v5's internationalization (i18n) plugin enables content in multiple languages. Your design needs to accommodate different locales, text lengths, and reading directions.

When designing for i18n, consider how content length varies between languages (German text is often 30% longer than English), how dates and numbers format differently, and how right-to-left languages (Arabic, Hebrew) affect layout.

1Design an internationalized interface for [content type] supporting [list of locales].
2
3Localization requirements:
4- Supported locales: [e.g., English, Spanish, French, German, Arabic, Japanese]
5- Content fields: [which fields are translatable vs. shared across locales]
6- Translation workflow: [simultaneous translation, progressive rollout]
7- Default locale: [which language is primary]
8- Fallback behavior: [what happens when translation doesn't exist]
9
10Design requirements:
11- Locale switcher: [how users select language in editor and on public site]
12- Translation status: [visual indicators for complete/incomplete translations]
13- Content length variations: [German 30% longer, Japanese more compact]
14- RTL support: [layout adjustments for Arabic/Hebrew]
15- Date/number formatting: [locale-specific formats]
16
17Provide:
181. Locale switcher design for editor and public site
192. Translation status indicators in content list
203. Side-by-side translation interface
214. Layout flexibility for varying text lengths
225. RTL layout examples
236. How to handle shared vs. translatable fields

Example: Blog Platform with Multi-Language Support

1Design an internationalized blog platform in Strapi v5 supporting English, Spanish, French, German, and Japanese.
2
3Localization requirements:
4- Supported locales: en (English - default), es (Spanish), fr (French), de (German), ja (Japanese)
5- Content fields: title, slug, body, excerpt are translatable; featured_image and published_date shared across locales
6- Translation workflow: English content created first, then progressively translated to other languages
7- Default locale: English (en)
8- Fallback behavior: If translation doesn't exist, show English version with language indicator
9
10Design requirements:
11- Locale switcher: Dropdown showing language names in native script (English, Español, Français, Deutsch, 日本語)
12- Translation status: Show completion percentage for each article (e.g., "3/5 languages complete")
13- Content length variations: German headlines often 30% longer, Japanese more compact, Spanish similar to English
14- Date formatting: US format (MM/DD/YYYY) for English, European format (DD/MM/YYYY) for Spanish/French/German, Japanese format (YYYY/MM/DD)
15
16Provide:
171. Editor locale switcher at top of page (current: English | Translate to: [Spanish] [French] [German] [Japanese])
182. Translation status in article list showing badges (🟢 Complete | 🟡 3/5 | 🔴 1/5)
193. Side-by-side translation interface showing English source on left, editable translation on right
204. Flexible card layout that accommodates German titles up to 120 characters vs. English 80 characters
215. How featured image (shared field) appears in all locale editors vs. title (translatable field) per locale
226. Public site locale switcher in header (globe icon + dropdown)
237. URL structure for locales (example.com/en/article vs. example.com/es/articulo)

i18n Design Patterns:

• Flexible layouts: Use min-width instead of fixed widths to accommodate text length variations
• Truncation strategies: Long German titles may need ellipsis, but provide full text on hover
• Icon universality: Icons should be culturally neutral and universally understood
• RTL mirroring: For Arabic/Hebrew, mirror navigation, text alignment, and directional icons
• Translation workflows: Show which locales are complete, partial, or missing

Strapi AI i18n Feature (Coming Soon):

Strapi AI will include automatic translation features. Design your interface to support:

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

Your design should show:

• AI translation progress indicators
• Quality confidence scores
• Quick edit buttons for AI-generated translations
• Original text reference while editing translations

10. Integrating Figma-to-Strapi Workflows

Many design teams work in Figma. Strapi AI can import Figma files directly to generate content types. This creates a seamless design-to-development workflow.

Complete Figma-to-Strapi Workflow:

1. Design in Figma: Create your content model as a visual diagram
   • Boxes for each Collection Type
   • Boxes for Components
   • Arrows showing relationships
   • Field lists for each content type
2. Generate Figma API Token:
   • Figma → Settings → Security → Generate new token
   • Scope: Read access to files
   • Save token securely
3. Import to Strapi AI:
   • Strapi v5 → Content-Type Builder → Strapi AI icon
   • Click "Import from Figma"
   • Paste API token and Figma file URL
   • Click "Import"
4. AI Generates Content Types:
   • Strapi AI analyzes your design
   • Creates Collection Types, Components, Relations
   • Generates field structures matching your diagram
5. Refine with Prompts:

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

Example Figma Content Model Diagram:

1[In Figma, create frames for:]
2
3Collection Types:
4├─ Blog Post
5│  ├─ title (text)
6│  ├─ slug (text)
7│  ├─ body (rich text)
8│  ├─ featured_image (media)
9│  ├─ author (→ User)
10│  └─ category (→ Category)
11│
12├─ Category
13│  ├─ name (text)
14│  └─ slug (text)
15│
16└─ Feature
17   ├─ title (text)
18   ├─ description (text)
19   └─ icon (media)
20
21Components:
22├─ SEO (global)
23│  ├─ metaTitle (text)
24│  ├─ metaDescription (text)
25│  └─ ogImage (media)
26│
27└─ Hero Section (dynamic-zone)
28   ├─ title (text)
29   ├─ subtitle (text)
30   └─ background (media)
31
32Single Types:
33└─ Global Settings
34   ├─ siteName (text)
35   ├─ logo (media)
36   └─ footer (→ Footer component)

Prompt for External AI to Create Figma Diagrams:

1Create a Figma-compatible content model diagram for [project type].
2
3Include:
4- Collection Types: [list content types]
5- Components: [list reusable components]
6- Single Types: [list singleton content]
7- Relations: [specify relationships with arrows]
8
9For each content type, show:
10- Type name in title case
11- List of fields with types (text, media, relation, number, etc.)
12- Required vs. optional fields (use asterisk for required)
13- Relationships shown with arrows and labels (→ User, → Category)
14
15Visual formatting:
16- Use boxes/frames for each content type
17- Group by type (Collection Types section, Components section, Single Types section)
18- Use consistent spacing and alignment
19- Color code: Collection Types (blue), Components (green), Single Types (yellow)

Then upload the generated design to Figma and import to Strapi AI.

Bringing It All Together From Prompts to Production

By applying the prompt patterns in this guide, you'll transform AI from a general design assistant into a specialized partner that understands headless CMS architecture and produces designs that work with how content is actually structured and managed.

The combination of external AI tools (for design) and Strapi AI (for content structure) creates a powerful workflow:

1. Design with context - Use external AI to generate CMS-aware designs
2. Generate structure - Use Strapi AI to create matching content types
3. Iterate rapidly - Refine both design and structure together
4. Deploy faster - Skip manual schema creation and design-development gaps

Whether you're building a company website, e-commerce platform, or content-driven application, these prompt techniques ensure your designs work in the real world—where content varies, editors make mistakes, and requirements evolve.

Start with one prompt pattern today. Apply it to your current project. Refine it based on results. Build your library. Share with your team.

The future of web design isn't choosing between creativity and structure—it's using AI to excel at both.

Ready to get started?

1npx create-strapi-app@latest

Try Strapi AI with a 30-day Growth plan trial and start building smarter, faster.

Download: Community Edition

Begin our journey with our Quick Start Guide. Click below to get started!

• Get started