SUMMARY
Purpose: Platform Guidelines (Prototyping & Specs) ensure consistency, clarity, and scalability by defining interaction rules, design tokens, behavioural standards, and UI patterns across platforms in mid-to-high fidelity prototypes and spec handoffs.
Design Thinking Phase: Prototype
Time: Typically 1–2 weeks embedded in a sprint cadence, concurrent with design handoff
Difficulty: ⭐⭐
When to use: When finalising mid–hi fidelity designs before handoff When scaling a team or unifying multiple product lines When auditing interaction consistency across a product suite
What it is
Platform guidelines in prototyping and specs are framework conditions that govern how components, interactions, spacing, states, and patterns should function, appear, and adapt across platforms (e.g. iOS, Android, Web). They go beyond a visual style guide, defining functional behaviours, gesture expectations, and native affordances that influence system design decisions.
📺 Video by NNgroup. Embedded for educational reference.
Why it matters
Platform-specific guidelines help reduce technical waste, improve usability, and streamline development. By specifying expected behaviours and constraints early in prototyping, teams can build high-fidelity designs that align with engineering patterns, native OS conventions, and user expectations.
They also enable greater collaboration in cross-functional teams — designers, engineers, and QA speak from a shared source of truth. Handovers become cleaner, and interaction bugs become easier to catch earlier in the cycle.
When to use
- Before starting a new feature with distinct mobile vs. web behaviour
- While revising an existing component for reuse in other platforms
- When conducting accessibility or platform audits
Benefits
- Rich Insights: Helps uncover user needs that aren’t visible in metrics.
- Flexibility: Works across various project types and timelines.
- User Empathy: Deepens understanding of behaviours and motivations.
How to use it
To integrate platform guidelines into your prototype specs effectively:
- Start with platform audits (iOS, Android, Web) to baseline expected behaviours and native affordances.
- Annotate interactive mockups with per-platform nuances, breakpoints, and behavioural edge cases (e.g. swipe actions on iOS vs long-press on Android).
- Use tools like Figma's component variants and property definitions for platform switching logic.
- Document navigation, keyboard focus, accessibility standards, and error state behaviour per platform in your spec sheet.
- Align with engineers on their platform constraints upfront. Clarify any divergence from native behaviour with rationale.
Example Output
A sample UI spec annotation for a bottom nav bar across platforms may include:
- Web: Fixed sticky toolbar; label + icon ∆ changes on scroll
- iOS: Native TabBarController pattern; home tab stays loaded
- Android: Material bottom nav with ripple feedback on tap
- Shared Note: Avoid using floating nav buttons on iPad landscape
Common Pitfalls
- Too Generic: Avoid vague annotations like “behaves normally on iOS.” Specify interaction states.
- Over-reliance on design system: Even reusable components need platform-specific rationale for their behaviour.
- Hardcoding Behaviours: Don't embed rigid logic in specs without checking with engineering against native libraries or platform constraints.
10 Design-Ready AI Prompts for Platform Guidelines – UX/UI Edition
How These Prompts Work (C.S.I.R. Framework)
Each of the templates below follows the C.S.I.R. method — a proven structure for writing clear, effective prompts that get better results from ChatGPT, Claude, Copilot, or any other LLM.
C.S.I.R. stands for:
- Context: Who you are and the UX situation you're working in
- Specific Info: Key design inputs, tasks, or constraints the AI should consider
- Intent: What you want the AI to help you achieve
- Response Format: The structure or format you want the AI to return (e.g. checklist, table, journey map)
Level up your career with smarter AI prompts. Get templates used by UX leaders — no guesswork, just results. Design faster, research smarter, and ship with confidence. First one’s free. Unlock all 10 by becoming a member.
Prompt Template 1: “Create a Platform Consistency Audit Checklist”
Create a Platform Consistency Audit Checklist
Context: You're a senior product designer reviewing a cross-platform onboarding experience (iOS, Android, Web).
Specific Info: The experience includes 5 screens using native components (modals, pickers) and 3 custom patterns. Known issues involve inconsistent gestures and styling variations in mobile transition animations.
Intent: Surface gaps and inconsistencies across platforms and propose recommendations.
Response Format: Provide a checklist grouped by platform, highlighting mismatches in behaviour, gesture conventions, and visual standards.
Ask for clarifying questions if any gesture conventions or transitions are unclear. Suggest one follow-up area to deepen the audit.
Prompt Template 2: “Generate Platform-Specific Microcopy Variants”
Generate Platform-Specific Microcopy Variants
Context: You're a UX writer localising micro-interactions for Android and iOS apps.
Specific Info: You're editing tooltip text, onboarding button labels (“Continue,” “Next,” “Allow Access”), and inline alerts.
Intent: Tailor platform-appropriate tone, brevity, and voice consistency.
Response Format: Return text variants in a table with columns: Context, Android Suggestion, iOS Suggestion.
Suggest additional areas where tone adaptation would improve trust or usability.
Prompt Template 3: “Summarise Navigation Best Practices by Platform”
Summarise Navigation Best Practices by Platform
Context: You're a design lead advising a sprint team on choosing between tabbed, side-drawer, or modal-based navigation.
Specific Info: The app has task-based flows and needs to support quick-switching between 3 core areas. Constraints include device size and session interruption risks.
Intent: Clarify native UI conventions for nav structures across iOS, Android, and Web to align with platform UX patterns.
Response Format: Table summary of nav model vs platform support, with UX trade-offs and pattern examples.
Offer a guiding principle that helps future team members choose correctly.
Prompt Template 4: “Draft a Spec Table for Icon Tap Behaviour by Platform”
Draft a Spec Table for Icon Tap Behaviour by Platform
Context: You're updating component specs for an in-app toolbar used on mobile and tablet.
Specific Info: Icons include Search, Profile, and Notifications. Some platforms use text + icon, others icon-only.
Intent: Clarify tap zones, label rules, and accessibility best practices per platform.
Response Format: Create a spec table showing interaction rules, touch targets, and voiceover labels.
Recommend any exceptions or OS-channel-specific behaviours to note.
Prompt Template 5: “List Animation Timing Norms for Platform Transitions”
List Animation Timing Norms for Platform Transitions
Context: You're auditing microinteractions for onboarding transitions in a multi-platform app.
Specific Info: You’re comparing screen transition animations, dropdown expand/collapse, and loading states.
Intent: Ensure animation duration, easing, and delay conform with platform-native behaviour.
Response Format: Table with interaction name, iOS guideline, Android Material spec, and Web default.
Call out platform guidelines references if authoritative links are available.
Prompt Template 6: “Create a Platform-Specific Focus Behaviour Spec (Web Accessibility)”
Create a Platform-Specific Focus Behaviour Spec (Web Accessibility)
Context: You're finalising keyboard navigation specs for an accessible web app.
Specific Info: Interactive elements include modals, carousels, and form inputs.
Intent: Describe expected focus behaviour per component along standard ARIA practices.
Response Format: Checklist and flow diagram outlining focus transitions, trapping rules, and exit patterns.
Suggest any overlooked edge cases for assistive devices.
Prompt Template 7: “Outline State Variants for Component Specs by Platform”
Outline State Variants for Component Specs by Platform
Context: You're defining specs for a primary CTA button used on mobile and web.
Specific Info: States include default, hover, pressed, disabled, and loading.
Intent: Ensure the interaction states look and behave natively on each platform.
Response Format: Table showing state definitions, visual tokens, and behavioural rules by platform.
Note any contradictions or clarity gaps between existing design system rules.
Prompt Template 8: “Map Native Gestures to Component Triggers”
Map Native Gestures to Component Triggers
Context: You’re prototyping a card-based UI where users can dismiss, expand, or save cards via gestures.
Specific Info: Platform teams want guidance on gesture triggers versus tap interactions.
Intent: Match gestures to safe, expected interactions across platforms.
Response Format: Table with gesture type, platform conventions, action mapping, and risk cautions.
Flag potential misinterpretation or gesture conflict risks.
Prompt Template 9: “Validate Sizing Tokens for Platform Consistency”
Validate Sizing Tokens for Platform Consistency
Context: You're comparing a web-based design system with a native iOS toolkit.
Specific Info: Tokens include XS–XL spacing units, container breakpoints, and line height ratios.
Intent: Identify where scaling falls apart across resolutions or breakpoints.
Response Format: Audit table comparing visual density and token reuse success or failure per screen/frame.
Offer remedies for display or hierarchy inconsistencies.
Prompt Template 10: “Translate Component Spec into Developer Story Format”
Translate Component Spec into Developer Story Format
Context: You're handing off design specs to frontend mobile and web engineers.
Specific Info: Specs include multi-state interaction, platform-specific transitions, and accessibility notes.
Intent: Convert this into a concise developer-ready summary or JIRA ticket structure.
Response Format: Structured story block with: Background, Acceptance Criteria, Success Metrics.
Suggest phrasing guidelines that make stories more reliable during QA.
Recommended Tools
- Figma: Variants and interactive component specs
- Zeplin: Platform-specific handoff annotations
- UXPin: Device-specific interactive prototypes with handoff links
- Linting tools: Stark (a11y), Contrast Grid, or Figma plugin “Design Lint”
- Google Material Guidelines and Apple Human Interface Guidelines
