The Designer's Guide to Effective AI Prompting  🔗 **Source:** [The Designer's Guide to Effective AI Prompting](https://penpot.app/blog/penpot-ai-prompting-guide/) > [!note]+ Document Notes > tags: #ai #design #prompting #user-experience #design-systems > author: Juan de la Cruz García > source: Penpot > reference: https://penpot.app/blog/penpot-ai-prompting-guide/ > date created: 2024-12-19 13:58 > > # 🏷️ Title: The designer's guide to effective AI prompting > <!-- deep-read:sections start --> ## 🧰 Action Inbox - [H1] Develop internal AI prompting guidelines following the 9 best practices #design-systems - [H2] Create role definitions for AI agents used in design workflows #ai - [H3] Build "do not touch" lists to prevent AI hallucinations #user-experience ## 🧭 Table of Contents - [[#📝 Summary]] - [[#📖 Main Content]] - [[#🗒️ Notes]] - [[#📚 References]] - [[#🗣️ Paraphrase]] - [[#📰 Newsletter]] - [[#✅ Action Items]] - [[#🧪 Hypotheses]] - [[#📊 Methodology]] - [[#❓ Questions]] - [[#🔮 Future Research]] - [[#💡 Implications]] - [[#🧠 Learning Styles Assessment]] - [[#📊 Accessibility Assessment]] - [[#🌍 DEIB Assessment]] - [[#✅ Logical Validity]] - [[#🛡️ DARVO Analysis]] - [[#🎯 Conclusion]] ### 🔗 References - [Penpot AI Whitepaper](https://penpot.app/blog/) - [Design Tokens Guide](https://penpot.app/blog/) ## 📝 Summary - Juan de la Cruz García provides a comprehensive guide to writing effective AI prompts for design work in Penpot - Emphasizes treating AI prompting like writing creative briefs rather than casual conversations - Outlines 9 specific best practices including role definition, structured prompting, and iterative workflows - Focuses on reducing hallucinations and improving production-ready outputs - Bottom line: Effective AI prompting requires structured, contract-like communication rather than human-style conversation ## 📖 Main Content The guide addresses the common mistake of treating AI like a human collaborator and instead advocates for a structured, brief-like approach. García argues that designers need to communicate with AI using clear roles, constraints, and step-by-step instructions to get usable outputs. The piece provides practical examples of how to structure prompts for design work, emphasizing the importance of defining what AI should NOT do as clearly as what it should do. The guide integrates specific advice for Penpot users about working with design tokens and ensuring code-ready outputs. ## 🗒️ Notes #### ⏱️ Article Introduction — [H1] Common AI prompting mistakes - Key idea: Designers incorrectly treat AI like human colleagues rather than structured tools - Evidence: "The first mistake most designers make when using AI is speaking to it like another human" #### ⏱️ Role Definition Section — [H2] Define specific AI roles - Key idea: AI needs detailed job descriptions with clear boundaries and expertise areas - Evidence: "You are a Senior Product Designer and an expert in design systems and WCAG accessibility best practices" #### ⏱️ Structured Prompting — [H2] Treat prompts like creative briefs - Key idea: AI responds better to structured directions without prose or filler - Evidence: "Your prompts should avoid inspirational adjectives and help AI instantly recognize the product" #### ⏱️ Image Direction — [H3] Direct AI attention in visual references - Key idea: AI sees everything in images but can't differentiate importance without guidance - Evidence: "In image 1, consider only the negative space between the two vertical strips" #### ⏱️ Documentation Summary — [H3] Summarize design system rules - Key idea: Long documentation needs specific direction about what rules to follow - Evidence: "Use only tokens from /core/color. Don't work outside of the defined hierarchy rules" #### ⏱️ Transformation Focus — [H2] Ask for steps not final results - Key idea: AI can't reverse engineer success from final outcomes - Evidence: "AI doesn't know what it doesn't know. So, you have to walk it through the stages" #### ⏱️ Development Language — [H3] Use technical specifications - Key idea: AI should know implementation constraints from the beginning - Evidence: "Generate the structure for React based on this framework. Map Penpot tokens to CSS variables" #### ⏱️ Decision Documentation — [H3] Request explanations for changes - Key idea: AI must justify design decisions for audit trails and explainability - Evidence: "Ask it to explain any changes it makes, no matter how small" #### ⏱️ Negative Constraints — [H2] Define what AI shouldn't do - Key idea: Explicit limitations prevent hallucinations and unwanted variations - Evidence: "Don't add new navigation patterns. Don't mess with the visual identity" #### ⏱️ Iterative Process — [H2] Plan for multiple rounds - Key idea: Perfect one-shot prompts don't exist; iteration is necessary - Evidence: "the perfect do-it-in-one-go prompt doesn't exist. It takes many iterations" #### ⏱️ TL;DR Guidelines — [H1] Core prompting principles - Key idea: Five essential rules every designer should follow - Evidence: "Give AI a role before you give it a task. Structure prompts like a brief" #### ⏱️ Prompting Importance — [H2] Translation of design skills - Key idea: Prompting converts design expertise into AI-digestible instructions - Evidence: "Prompting is the main way to translate your design skills, taste, constraints, and systems" ## 📚 References - [Penpot AI Whitepaper](https://penpot.app/blog/) - [Design Tokens JSON Guide](https://penpot.app/blog/) - [Penpot Docker Deployment Guide](https://penpot.app/blog/) ## 🗣️ Paraphrase - AI prompting for design requires treating the AI like a new hire who needs detailed job descriptions and step-by-step instructions - Effective prompts function like creative briefs with clear problems, constraints, and success criteria rather than conversational requests - Designers must explicitly define both what AI should do and what it shouldn't do to prevent hallucinations and maintain design system consistency ## 📰 Newsletter 🎯 **AI Prompting for WordPress Designers** Juan de la Cruz García's guide reveals why most designers struggle with AI tools: they're having conversations instead of writing contracts. The key insight? Treat AI like a new junior developer who needs explicit instructions about your design system. **Key takeaways for WordPress teams:** - Define AI roles like job descriptions: "You're a WordPress theme designer expert in accessibility and responsive design" - Structure prompts like briefs with clear problems and constraints - Tell AI what NOT to do as clearly as what to do This approach prevents AI from inventing new colors or breaking your carefully crafted design tokens—crucial for maintaining brand consistency across WordPress sites. **Try this prompt structure:** Role → Problem → Constraints → Success criteria → Step-by-step instructions Resources: [Learn WordPress](https://learn.wordpress.org/), [WordPress Design Handbook](https://make.wordpress.org/design/handbook/), [Accessibility Guidelines](https://make.wordpress.org/accessibility/) ## ✅ Action Items #### DevRel - Developer experience: Create AI prompting templates for WordPress component development - Education: Develop workshops on structured AI communication for design systems - Documentation: Build prompt libraries for common WordPress design patterns #### Community - Contributors: Share AI prompting best practices in WordPress design team meetings - Maintainers: Develop guidelines for AI-assisted theme development - Ecosystem: Create cross-theme AI prompting standards #### WordPress - Design: Integrate AI prompting guidelines into WordPress design handbook - Themes: Create structured prompts for theme review automation - Documentation: Add AI prompting section to developer documentation - Accessibility: Develop AI prompts that enforce WCAG compliance ## 🧪 Hypotheses - Structured AI prompting reduces design inconsistencies by 60% compared to conversational approaches - Teams using role-based AI prompting produce more accessible designs than those without defined constraints - Step-by-step prompting leads to higher code implementation success rates than single-request prompting - Negative constraint lists reduce AI hallucinations in design outputs by preventing common deviation patterns ### 📊 Methodology - A/B testing structured vs. conversational prompts across design teams measuring consistency metrics - Accessibility audits comparing AI-assisted designs with and without WCAG-specific role definitions - Code implementation success tracking for stepped vs. single prompts in WordPress theme development ### ❓ Questions - How do structured AI prompts perform when working with existing WordPress theme frameworks? - What prompt patterns work best for maintaining brand consistency across multiple WordPress sites? - How can AI prompting guidelines be integrated into WordPress design system governance? ### 🔮 Future Research - Development of WordPress-specific AI prompt templates and libraries - Integration of structured prompting with WordPress block editor development workflows - Cross-platform prompt compatibility between design tools and WordPress development environments ### 💡 Implications - Practice: Design teams need to develop internal AI communication standards and prompt libraries - Education: Design curricula should include structured AI communication as a core skill - Security: AI prompting guidelines must include data protection considerations for client work - Funding: Organizations should budget for AI prompting training and template development ### 🧠 Learning Styles Assessment Reading level estimate: 9th Grade (Flesch-Kincaid) #### 👀 Visual learners - Present: Screenshots of Penpot interface showing design tokens and components - Improve: Flowcharts showing prompt structure, before/after comparison images #### 🔊 Aural learners - Present: No audio content currently available - Improve: Podcast version with prompt examples read aloud, audio explanations #### 🗣️ Verbal learners - Present: Clear definitions of prompting concepts, concrete examples - Improve: Analogies comparing AI prompting to other communication forms #### 🧩 Kinesthetic learners - Present: Step-by-step prompt examples, hands-on guidance - Improve: Interactive prompt builder, practice exercises with immediate feedback #### 🧠 Logical learners - Present: Numbered best practices, clear cause-effect relationships - Improve: Decision trees for prompt construction, performance metrics #### 🧑‍🤝‍🧑 Social learners - Present: Team-focused advice, collaboration considerations - Improve: Group exercises, prompt peer review processes #### 🧘‍♀️ Solitary learners - Present: Individual practice examples, self-assessment opportunities - Improve: Personal prompt journals, reflection questions #### 🌿 Naturalistic learners - Present: Systems thinking about design tokens and consistency - Improve: Ecosystem metaphors, organic growth patterns in design systems ### 📊 Accessibility Assessment #### Screen reader semantics - Present: Clear heading hierarchy, article structure - Improve: ARIA labels for code examples, better alt text for interface screenshots #### Keyboard navigation - Present: Standard web navigation patterns - Improve: Skip links for long code examples, keyboard-accessible interactive elements #### Contrast and readability - Present: Good text contrast on white background - Improve: Verify code syntax highlighting meets contrast requirements #### Text resizing and reflow - Present: Responsive design handles zoom well - Improve: Ensure code blocks don't create horizontal scroll at 200% zoom #### Media and captions - Present: Static images with contextual descriptions - Improve: Alt text specifically describing design interface elements #### Forms and interactions - Present: No complex forms in article - Improve: If interactive prompt builders added, ensure full accessibility ### 🌍 DEIB Assessment #### Cultural breadth - Present: Universal design principles applicable across contexts - Improve: Examples from diverse design traditions and markets #### Inclusive language - Present: Professional, jargon-explained terminology - Improve: Avoid assumptions about team structures and roles #### Neurodiversity support - Present: Well-structured content with clear headings - Improve: Summary boxes, consistent formatting throughout #### Representation - Present: Focus on technical content rather than personal examples - Improve: Include diverse use cases and design contexts #### Psychological safety - Present: Encouraging tone about learning AI prompting - Improve: Acknowledge different comfort levels with AI technology ### ✅ Logical Validity #### Strong reasoning - Deductive strength: Clear progression from general AI communication problems to specific prompting solutions - Inductive strength: Examples build effectively toward general principles - Causal reasoning: Well-established links between prompt structure and output quality - Analogical strength: Effective comparison of AI prompting to creative briefs and job descriptions #### Fallacies - Appeal to novelty: Slight tendency to present AI as inherently better when properly prompted - False dichotomy: May oversimplify the spectrum between conversational and structured approaches #### Tone of voice - Overall tone: Authoritative but accessible, practical and solution-focused ### 🛡️ DARVO Analysis - Deny: No denial patterns present - Attack: No attacking language toward users or other approaches - Reverse victim/offender: No victim/offender dynamics present - Emotional cues and rhetoric: Professional, educational tone without manipulation ## 🎯 Conclusion - García provides a practical framework for treating AI prompting as structured communication rather than casual conversation - The 9 best practices offer actionable guidelines for designers to improve their AI outputs and reduce hallucinations - Teams should develop internal prompting standards and treat AI training as a core design skill for modern workflows ## 🧱 Refactor Appendix ### 📚 Literature Split Pad ### [H1] AI prompting requires role-based communication frameworks > [!quote] [The designer's guide to effective AI prompting](https://penpot.app/blog/penpot-ai-prompting-guide/) by [[Juan de la Cruz García]] via [[Penpot]]. Published 2026-04-20. Accessed 2024-12-19. > "Give AI a role before you give it a task." Essential for preventing scope creep and hallucinations in AI design outputs. [view highlight](https://penpot.app/blog/penpot-ai-prompting-guide/#H1) #xref #articleseed ID:rw_001 ### [H2] Structured prompts outperform conversational approaches > [!quote] [The designer's guide to effective AI prompting](https://penpot.app/blog/penpot-ai-prompting-guide/) > "Structure prompts like a brief: define the problem, the constraints, and what 'done' looks like." Critical for maintaining design system consistency and reducing iterations. [view highlight](https://penpot.app/blog/penpot-ai-prompting-guide/#H2) #xref ID:rw_002 --- ### 🔖 Atomic Split Pad (Zettel Candidates) #### [Z1] Negative constraints prevent AI hallucinations - Applies to design systems and brand consistency requirements - Reference: "Tell it what not to do as clearly as what to do" - Links: [[Design-Systems]] [[AI-Communication]] #### [Z2] Iterative prompting produces better outputs than one-shots - Universal principle for AI-assisted creative work - Reference: "the perfect do-it-in-one-go prompt doesn't exist" - Links: [[Design-Process]] [[AI-Workflows]] --- ### ✏️ Fleeting Queue - [F1] Create WordPress-specific AI prompting templates — https://penpot.app/blog/penpot-ai-prompting-guide/ #fleeting #inbox - [F2] Research prompt engineering for accessibility compliance — design systems context #fleeting #inbox - [F3] Develop training materials for structured AI communication — design teams #fleeting #inbox <!-- deep-read:sections end --> 📄 **Full text:** ![[Full Document Contents/Articles/The Designer's Guide to Effective AI Prompting.md|The Designer's Guide to Effective AI Prompting by penpot.app]] ## Highlights - here are guidelines every designer should follow each time they work with AI. • Give AI a role before you give it a task. • Structure prompts like a brief: define the problem, the constraints, and what "done" looks like. • Direct AI step by step, rather than asking for the final result. • Tell it what not to do as clearly as what to do. • Write prompts like contracts, not conversations — schemas and rulesets over prose. ([View Highlight](https://read.readwise.io/read/01kpp08fc1me4hm1qps48ad5nq)) - AI design prompts should follow a similar pattern: *Adjust the visual hierarchy. Reduce noise by eliminating unnecessary borders. Use our tokens to normalize spacing.* ([View Highlight](https://read.readwise.io/read/01kpp07h03b99danxfbw301k8y)) - Tags: 👻 ai highlighted