{ "title": "Morten A. Giraffe UI Prompt Field Guide", "canonical_url": "https://www.mortenagiraffe.com/journal/ui-prompt-library-for-vibe-coders", "updated": "2026-09-21", "prompt_count": 108, "category_count": 18, "usage": "Combine the universal prefix, one pattern-specific prompt, and the universal verification suffix.", "copied_prompt_source_line": "Every prompt copied from the website ends with a visible source link to its individual pattern guide. It is provenance, not a hidden instruction.", "universal_prefix": "You are designing or repairing a real interface inside an existing product. Do not start by decorating it.\n\nFIRST, establish the screen job in one sentence: “This screen helps [specific user] understand/do [specific thing] so they can [specific next action].” Inspect the current repository, `design.md`, existing components, tokens, routes, data flow, accessibility behavior, tests, and any supplied reference screenshot before editing. Preserve working product behavior and the project’s existing brand language unless the task explicitly replaces it.\n\nUse the Morten A. Giraffe UI/UX field-guide principles as constraints: purpose before polish, visible hierarchy, relationship-driven spacing, meaningful contrast, clear proximity, behavioral consistency, familiar interaction patterns, reachable targets, structured choice, chunking, progressive disclosure, immediate feedback, recoverable errors, accessibility, responsive purpose, deliberate sequence, trust near doubt, and outcome-based measurement.\n\nANTI-AI-SLOPE RULES: do not default to generic SaaS composition, random gradients, glow effects, glassmorphism, oversized rounded cards, cards-inside-cards, decorative icon circles, fake stats, fake testimonials, meaningless bento grids, excessive pills, filler copy, giant empty spacing, or animation that does not explain state. Do not invent proof, customer names, metrics, security claims, reviews, or product capabilities.", "universal_suffix": "IMPLEMENTATION CONTRACT\n- Use semantic HTML and the project’s existing accessible primitives before creating new ones.\n- Keep one clear primary action; visually subordinate secondary and tertiary actions.\n- Design the complete state model where relevant: idle, hover/focus, loading, success, empty, partial data, disabled, validation error, server error, offline/retry, and permission/locked.\n- Preserve user input after recoverable errors. Explain what happened and the next useful action.\n- Make keyboard operation, visible focus, logical tab order, screen-reader naming, contrast, reduced motion, zoom/reflow, and touch targets part of the implementation—not a later patch.\n- Treat mobile as the same purpose under different constraints, not a squeezed desktop. Verify narrow phones, tablet, desktop, long content, and 200% zoom.\n- Avoid new dependencies unless the existing stack cannot reasonably support the requirement.\n- Keep copy specific, human, and useful. Button labels should describe the outcome.\n- For public/indexable pages, keep important meaning, links, headings, and metadata available without requiring client JavaScript; preserve truthful canonicals, titles, structured data, and internal links.\n- Protect performance: avoid layout shift, oversized media, unnecessary client JavaScript, and effects that hurt responsiveness.\n- Do not silently remove routes, integrations, analytics, auth behavior, deep links, metadata, or existing functionality.\n- Run the project’s relevant build, typecheck, lint, tests, and targeted browser checks after implementation. Fix issues caused by your changes.\n\nBEFORE CALLING IT COMPLETE, report: (1) page/screen job, (2) files changed, (3) what was preserved, (4) UX rules applied, (5) responsive/accessibility states verified, (6) tests/checks run with results, (7) remaining unknowns or production-only checks. Never claim “bug free,” “fully accessible,” or “regression free” without evidence.", "prompts": [ { "id": "01-01-focused-landing-page", "category_number": "01", "category": "Page Foundations", "title": "Focused landing page", "summary": "A conversion-focused public page with one dominant promise and next action.", "use_when": "One audience needs one clear decision path.", "avoid_when": "Users must compare many peer options before acting.", "uiux_rules": [ "01 Purpose", "02 Hierarchy", "03 Space", "04 Contrast", "05 Proximity", "06 Consistency", "07 Familiarity" ], "seo_checks": [ "08 Site architecture", "09 Rendering", "10 Titles/snippets", "16 Content overlap", "17 AI search" ], "specific_prompt": "Build a landing page around a single page job. Open with a specific H1, a short explanation, one primary CTA and at most one secondary action. Follow only with the proof, explanation, objections and next step needed for that decision; use spacing and section rhythm before cards, put trust beside the action it supports, and end with a clear resolution instead of a generic CTA banner.", "surface": "public", "copy_label": "Copy full prompt" }, { "id": "01-02-product-overview-page", "category_number": "01", "category": "Page Foundations", "title": "Product overview page", "summary": "Explain a multi-capability product without turning the page into a feature dump.", "use_when": "Visitors need a mental model before choosing a deeper path.", "avoid_when": "The product has one narrow job that deserves a focused page.", "uiux_rules": [ "01 Purpose", "02 Hierarchy", "03 Space", "04 Contrast", "05 Proximity", "06 Consistency", "07 Familiarity" ], "seo_checks": [ "08 Site architecture", "09 Rendering", "10 Titles/snippets", "16 Content overlap", "17 AI search" ], "specific_prompt": "Start by explaining who the product is for and the problem it solves, then group capabilities by user outcome rather than internal feature names. Use 3–5 meaningful groups with selective visuals and contextual links; keep one story arc and surface material prerequisites or limitations.", "surface": "public", "copy_label": "Copy full prompt" }, { "id": "01-03-application-shell", "category_number": "01", "category": "Page Foundations", "title": "Application shell", "summary": "A durable authenticated shell with stable navigation, page context and predictable actions.", "use_when": "A multi-route product has repeated navigation and account controls.", "avoid_when": "A one-task utility would gain friction from persistent chrome.", "uiux_rules": [ "01 Purpose", "02 Hierarchy", "03 Space", "04 Contrast", "05 Proximity", "06 Consistency", "07 Familiarity" ], "seo_checks": [ "08 Site architecture", "09 Rendering", "10 Titles/snippets", "16 Content overlap", "17 AI search" ], "specific_prompt": "Design a stable global shell with clear current-location state, page title/context, a predictable action zone and compact account/workspace control. Define desktop and mobile transformations, skip navigation, focus behavior, collapsed states and loading/no-content behavior without shifting the whole layout.", "surface": "public", "copy_label": "Copy full prompt" }, { "id": "01-04-entity-detail-page", "category_number": "01", "category": "Page Foundations", "title": "Entity detail page", "summary": "A detail view for one record, project, item, profile or object.", "use_when": "Users need status, metadata, history and actions around one entity.", "avoid_when": "The main task is cross-item comparison.", "uiux_rules": [ "01 Purpose", "02 Hierarchy", "03 Space", "04 Contrast", "05 Proximity", "06 Consistency", "07 Familiarity" ], "seo_checks": [ "08 Site architecture", "09 Rendering", "10 Titles/snippets", "16 Content overlap", "17 AI search" ], "specific_prompt": "Orient with entity name, type, status, essential metadata and the primary action before secondary detail. Group information by meaning, separate destructive actions, include missing-section states and preserve the essential context at the top on mobile.", "surface": "public", "copy_label": "Copy full prompt" }, { "id": "01-05-comparison-page", "category_number": "01", "category": "Page Foundations", "title": "Comparison page", "summary": "A decision surface that makes meaningful differences easy to scan.", "use_when": "Users need to compare peer products, plans, records or options.", "avoid_when": "The options are not genuinely comparable.", "uiux_rules": [ "01 Purpose", "02 Hierarchy", "03 Space", "04 Contrast", "05 Proximity", "06 Consistency", "07 Familiarity" ], "seo_checks": [ "08 Site architecture", "09 Rendering", "10 Titles/snippets", "16 Content overlap", "17 AI search" ], "specific_prompt": "Build around the criteria users actually need. Keep option identity and key differences visible, align comparable attributes, explain non-obvious terms, avoid ambiguous checkmarks for nuanced differences, and choose an intentional mobile comparison strategy that does not hide material differences.", "surface": "public", "copy_label": "Copy full prompt" }, { "id": "01-06-task-flow-page", "category_number": "01", "category": "Page Foundations", "title": "Task flow page", "summary": "A focused surface for completing one operational task without unrelated noise.", "use_when": "The user is creating, editing, reviewing or submitting something.", "avoid_when": "Users need to monitor several areas at once.", "uiux_rules": [ "01 Purpose", "02 Hierarchy", "03 Space", "04 Contrast", "05 Proximity", "06 Consistency", "07 Familiarity" ], "seo_checks": [ "08 Site architecture", "09 Rendering", "10 Titles/snippets", "16 Content overlap", "17 AI search" ], "specific_prompt": "Create a task-focused page with clear start state, required context, task controls, progress when multi-step and an explicit completion state. Preserve work on validation/network failure, keep back/cancel predictable, and show what is complete, what remains and whether previous steps are safely editable.", "surface": "public", "copy_label": "Copy full prompt" }, { "id": "02-01-editorial-split-hero", "category_number": "02", "category": "Hero & First View", "title": "Editorial split hero", "summary": "Text-led first view with one restrained, meaningful visual.", "use_when": "The proposition needs explanation plus a concrete visual anchor.", "avoid_when": "The visual would be decorative only.", "uiux_rules": [ "01 Purpose", "02 Hierarchy", "03 Space", "04 Contrast", "16 Sequence", "17 Trust" ], "seo_checks": [ "09 Rendering", "10 Titles/snippets", "12 Media", "14 Core Web Vitals", "15 Mobile/accessibility" ], "specific_prompt": "Use a two-column editorial hero: specific promise, short explanation and one primary action on the left; one meaningful product visual, diagram or evidence artifact on the right. The visual must clarify the proposition rather than compete with it, and mobile should stack message before visual.", "surface": "public", "copy_label": "Copy full prompt" }, { "id": "02-02-product-in-context-hero", "category_number": "02", "category": "Hero & First View", "title": "Product-in-context hero", "summary": "Show the real product doing the job being promised.", "use_when": "A truthful interface/output is stronger evidence than abstract branding.", "avoid_when": "No real product visual exists yet.", "uiux_rules": [ "01 Purpose", "02 Hierarchy", "03 Space", "04 Contrast", "16 Sequence", "17 Trust" ], "seo_checks": [ "09 Rendering", "10 Titles/snippets", "12 Media", "14 Core Web Vitals", "15 Mobile/accessibility" ], "specific_prompt": "Center the hero on one real product screenshot or output crop. Make the H1 describe the user outcome, annotate at most 2–3 details that prove the promise, avoid fake browser chrome unless it adds context, and provide a mobile crop and useful alt text.", "surface": "public", "copy_label": "Copy full prompt" }, { "id": "02-03-problem-first-hero", "category_number": "02", "category": "Hero & First View", "title": "Problem-first hero", "summary": "Name a real pain point and immediately show the path forward.", "use_when": "Visitors arrive with a known problem and need fast orientation.", "avoid_when": "The framing would rely on fear or exaggeration.", "uiux_rules": [ "01 Purpose", "02 Hierarchy", "03 Space", "04 Contrast", "16 Sequence", "17 Trust" ], "seo_checks": [ "09 Rendering", "10 Titles/snippets", "12 Media", "14 Core Web Vitals", "15 Mobile/accessibility" ], "specific_prompt": "Lead with the concrete problem the intended visitor recognizes, then state the product response in plain language. Use one next-step CTA, optional low-commitment evidence, and only factual proof; make the first viewport answer where am I, what is this, why it matters and what can I do next.", "surface": "public", "copy_label": "Copy full prompt" }, { "id": "02-04-demo-first-hero", "category_number": "02", "category": "Hero & First View", "title": "Demo-first hero", "summary": "Let the user understand value by seeing or trying the product immediately.", "use_when": "The product becomes obvious through a safe interactive demo.", "avoid_when": "A demo would delay basic orientation or require sensitive data.", "uiux_rules": [ "01 Purpose", "02 Hierarchy", "03 Space", "04 Contrast", "16 Sequence", "17 Trust" ], "seo_checks": [ "09 Rendering", "10 Titles/snippets", "12 Media", "14 Core Web Vitals", "15 Mobile/accessibility" ], "specific_prompt": "Pair a concise orientation block with a deterministic interactive preview, sandbox or short demo. Make it usable with keyboard and touch, provide a non-interactive fallback, distinguish sample from real data, avoid autoplay audio and keep the primary CTA available without covering the demo.", "surface": "public", "copy_label": "Copy full prompt" }, { "id": "02-05-proof-first-hero", "category_number": "02", "category": "Hero & First View", "title": "Proof-first hero", "summary": "Lead with a verifiable result or artifact when trust is the main barrier.", "use_when": "Strong evidence is more persuasive than feature explanation.", "avoid_when": "Proof is weak, outdated, fabricated or context-free.", "uiux_rules": [ "01 Purpose", "02 Hierarchy", "03 Space", "04 Contrast", "16 Sequence", "17 Trust" ], "seo_checks": [ "09 Rendering", "10 Titles/snippets", "12 Media", "14 Core Web Vitals", "15 Mobile/accessibility" ], "specific_prompt": "Make a verifiable result, case-study artifact, benchmark or real output the central evidence. Pair it with who/what context, timeframe and limitations; keep the offer and next action obvious and never use unsupported vanity numbers.", "surface": "public", "copy_label": "Copy full prompt" }, { "id": "02-06-inline-action-hero", "category_number": "02", "category": "Hero & First View", "title": "Inline-action hero", "summary": "Let users complete one low-friction first action in the hero.", "use_when": "The first action is a URL check, search, email capture or quote start.", "avoid_when": "The form is sensitive or complex.", "uiux_rules": [ "01 Purpose", "02 Hierarchy", "03 Space", "04 Contrast", "16 Sequence", "17 Trust" ], "seo_checks": [ "09 Rendering", "10 Titles/snippets", "12 Media", "14 Core Web Vitals", "15 Mobile/accessibility" ], "specific_prompt": "Place one purpose-built input flow directly under the hero explanation. Use a visible label, realistic example, privacy/processing note where relevant, an outcome-labeled button, clear validation, progress, preserved input on failure and focus movement to result or error.", "surface": "public", "copy_label": "Copy full prompt" }, { "id": "03-01-simple-top-navigation", "category_number": "03", "category": "Navigation", "title": "Simple top navigation", "summary": "A restrained header for a small set of primary destinations.", "use_when": "4–7 primary destinations cover most journeys.", "avoid_when": "Utility links would overcrowd the primary level.", "uiux_rules": [ "02 Hierarchy", "05 Proximity", "06 Consistency", "07 Familiarity", "08 Reach", "14 Accessibility", "15 Responsive" ], "seo_checks": [ "02 Crawlability", "08 Site architecture", "09 Rendering", "15 Mobile/accessibility" ], "specific_prompt": "Use logo/home link, a small set of concrete primary labels, current-page state and one prioritized action only if needed. Keep low-priority utilities elsewhere and define keyboard/focus/mobile-menu behavior without inventing a different IA for mobile.", "surface": "public", "copy_label": "Copy full prompt" }, { "id": "03-02-contextual-sticky-navigation", "category_number": "03", "category": "Navigation", "title": "Contextual sticky navigation", "summary": "Keep orientation/actions available during long scrolls without stealing the page.", "use_when": "Long pages benefit from persistent orientation or a primary action.", "avoid_when": "Sticky chrome would consume too much mobile space.", "uiux_rules": [ "02 Hierarchy", "05 Proximity", "06 Consistency", "07 Familiarity", "08 Reach", "14 Accessibility", "15 Responsive" ], "seo_checks": [ "02 Crawlability", "08 Site architecture", "09 Rendering", "15 Mobile/accessibility" ], "specific_prompt": "Begin as part of the page, then compact after meaningful scroll. Preserve current section/page context, keep the transition subtle and reduced-motion safe, avoid covering anchored headings and reduce rather than overlay content on small screens.", "surface": "public", "copy_label": "Copy full prompt" }, { "id": "03-03-mega-menu", "category_number": "03", "category": "Navigation", "title": "Mega menu", "summary": "A structured menu for many destinations grouped by user meaning.", "use_when": "A flat nav would create long, unclear menus.", "avoid_when": "The site is small enough for direct navigation.", "uiux_rules": [ "02 Hierarchy", "05 Proximity", "06 Consistency", "07 Familiarity", "08 Reach", "14 Accessibility", "15 Responsive" ], "seo_checks": [ "02 Crawlability", "08 Site architecture", "09 Rendering", "15 Mobile/accessibility" ], "specific_prompt": "Group destinations by user intent or product area, not internal departments. Add short descriptions only when they aid choice, keep featured content restrained, support click/keyboard/Escape correctly and use nested disclosure rather than a squeezed desktop mega menu on mobile.", "surface": "public", "copy_label": "Copy full prompt" }, { "id": "03-04-application-sidebar", "category_number": "03", "category": "Navigation", "title": "Application sidebar", "summary": "Persistent vertical navigation for multi-area products.", "use_when": "Users repeatedly move between stable app sections.", "avoid_when": "The product has only a few routes or one sequential flow.", "uiux_rules": [ "02 Hierarchy", "05 Proximity", "06 Consistency", "07 Familiarity", "08 Reach", "14 Accessibility", "15 Responsive" ], "seo_checks": [ "02 Crawlability", "08 Site architecture", "09 Rendering", "15 Mobile/accessibility" ], "specific_prompt": "Include product/workspace identity, stable primary navigation, clear active state, optional grouped secondary nav and separated account/help controls. Support collapse only when labels remain discoverable, transform to drawer/alternate navigation on mobile and preserve semantics.", "surface": "public", "copy_label": "Copy full prompt" }, { "id": "03-05-command-palette-navigation", "category_number": "03", "category": "Navigation", "title": "Command palette navigation", "summary": "A power-user accelerator for navigation and actions without replacing visible IA.", "use_when": "Repeat expert users benefit from keyboard-first navigation.", "avoid_when": "Important destinations would become undiscoverable without it.", "uiux_rules": [ "02 Hierarchy", "05 Proximity", "06 Consistency", "07 Familiarity", "08 Reach", "14 Accessibility", "15 Responsive" ], "seo_checks": [ "02 Crawlability", "08 Site architecture", "09 Rendering", "15 Mobile/accessibility" ], "specific_prompt": "Open from a visible trigger and shortcut, group navigation/entities/actions, show useful shortcuts, support fuzzy search and Escape, keep dangerous actions out or confirmed, manage focus and announce results while preserving normal visible navigation.", "surface": "public", "copy_label": "Copy full prompt" }, { "id": "03-06-mobile-bottom-navigation", "category_number": "03", "category": "Navigation", "title": "Mobile bottom navigation", "summary": "Thumb-reachable navigation for 3–5 high-frequency app destinations.", "use_when": "A mobile-first authenticated product has a small stable top level.", "avoid_when": "There are more than five equal destinations or it is mainly a content site.", "uiux_rules": [ "02 Hierarchy", "05 Proximity", "06 Consistency", "07 Familiarity", "08 Reach", "14 Accessibility", "15 Responsive" ], "seo_checks": [ "02 Crawlability", "08 Site architecture", "09 Rendering", "15 Mobile/accessibility" ], "specific_prompt": "Use icon plus text label, clear selected state, safe-area padding and adequate targets. Keep transient actions out, define keyboard-open behavior and protect unsaved work when switching destinations.", "surface": "public", "copy_label": "Copy full prompt" }, { "id": "04-01-minimal-sign-in", "category_number": "04", "category": "Authentication", "title": "Minimal sign in", "summary": "Focused email/password access with only necessary controls.", "use_when": "Straightforward account sign-in is the job.", "avoid_when": "Marketing content would distract from access.", "uiux_rules": [ "01 Purpose", "05 Proximity", "07 Familiarity", "12 Feedback", "13 Recovery", "14 Accessibility", "17 Trust" ], "seo_checks": [ "04 Status/redirect truth", "09 Rendering", "15 Mobile/accessibility" ], "specific_prompt": "Use product identity, visible labels, email/password, show/hide password, sign-in action, recovery link and signup link only when applicable. Support autofill/password managers, keep errors specific without leaking account existence and preserve the entered email after failure.", "surface": "product", "copy_label": "Copy full prompt" }, { "id": "04-02-context-plus-sign-in-split", "category_number": "04", "category": "Authentication", "title": "Context + sign-in split", "summary": "Use a split layout where the secondary side provides useful context.", "use_when": "Workspace identity or product context materially helps orientation.", "avoid_when": "The second panel would be generic decoration.", "uiux_rules": [ "01 Purpose", "05 Proximity", "07 Familiarity", "12 Feedback", "13 Recovery", "14 Accessibility", "17 Trust" ], "seo_checks": [ "04 Status/redirect truth", "09 Rendering", "15 Mobile/accessibility" ], "specific_prompt": "Keep the form dominant and use the secondary panel for real workspace identity, product example or what happens after sign-in. Collapse form-first on mobile and do not let imagery delay or reduce readability.", "surface": "product", "copy_label": "Copy full prompt" }, { "id": "04-03-passwordless-email-link", "category_number": "04", "category": "Authentication", "title": "Passwordless email link", "summary": "A clear magic-link flow with complete delivery/retry states.", "use_when": "The product supports passwordless email authentication.", "avoid_when": "Email delivery is unreliable or the product cannot recover from expired links.", "uiux_rules": [ "01 Purpose", "05 Proximity", "07 Familiarity", "12 Feedback", "13 Recovery", "14 Accessibility", "17 Trust" ], "seo_checks": [ "04 Status/redirect truth", "09 Rendering", "15 Mobile/accessibility" ], "specific_prompt": "Use one email field and outcome-labeled CTA. After submit, show a clear check-email state with masked address, expected timing, resend cooldown, change-email path and expired/used-link handling; do not make users guess whether the original tab matters.", "surface": "product", "copy_label": "Copy full prompt" }, { "id": "04-04-progressive-account-creation", "category_number": "04", "category": "Authentication", "title": "Progressive account creation", "summary": "Ask for signup information only when it becomes necessary.", "use_when": "Setup includes several meaningful required decisions.", "avoid_when": "A simple two-field signup is being artificially split.", "uiux_rules": [ "01 Purpose", "05 Proximity", "07 Familiarity", "12 Feedback", "13 Recovery", "14 Accessibility", "17 Trust" ], "seo_checks": [ "04 Status/redirect truth", "09 Rendering", "15 Mobile/accessibility" ], "specific_prompt": "Group steps by real decisions, show progress, allow safe back navigation, explain unusual/sensitive fields, validate without losing prior input and finish with the first useful product action instead of an unexplained dashboard.", "surface": "product", "copy_label": "Copy full prompt" }, { "id": "04-05-sso-first-organization-sign-in", "category_number": "04", "category": "Authentication", "title": "SSO-first organization sign in", "summary": "Enterprise/workspace access where approved SSO is primary.", "use_when": "Organizations authenticate through configured identity providers.", "avoid_when": "Generic provider buttons would imply unsupported options.", "uiux_rules": [ "01 Purpose", "05 Proximity", "07 Familiarity", "12 Feedback", "13 Recovery", "14 Accessibility", "17 Trust" ], "seo_checks": [ "04 Status/redirect truth", "09 Rendering", "15 Mobile/accessibility" ], "specific_prompt": "Prioritize SSO/domain discovery, clearly separate alternate methods and explain org-specific requirements. Handle unknown domain, disabled account, invitation required and provider errors without leaking sensitive details; keep support and safe return-to behavior.", "surface": "product", "copy_label": "Copy full prompt" }, { "id": "04-06-account-recovery", "category_number": "04", "category": "Authentication", "title": "Account recovery", "summary": "A complete recovery journey for passwords, lockouts or lost access.", "use_when": "Users need a secure way to regain account access.", "avoid_when": "The UI would expose whether a specific account exists.", "uiux_rules": [ "01 Purpose", "05 Proximity", "07 Familiarity", "12 Feedback", "13 Recovery", "14 Accessibility", "17 Trust" ], "seo_checks": [ "04 Status/redirect truth", "09 Rendering", "15 Mobile/accessibility" ], "specific_prompt": "Ask for the minimum identifier, confirm the next step without exposing existence, handle resend, expiry, reset success and post-reset sign-in, show password requirements before failure and provide a support path when the recovery channel is unavailable.", "surface": "product", "copy_label": "Copy full prompt" }, { "id": "05-01-setup-checklist", "category_number": "05", "category": "Onboarding", "title": "Setup checklist", "summary": "A persistent list of meaningful setup tasks tied to activation.", "use_when": "Users can complete setup in flexible order.", "avoid_when": "The checklist would be a tour of arbitrary features.", "uiux_rules": [ "01 Purpose", "09 Choice", "10 Chunking", "11 Disclosure", "12 Feedback", "13 Recovery", "15 Responsive" ], "seo_checks": [ "09 Rendering", "14 Core Web Vitals", "15 Mobile/accessibility" ], "specific_prompt": "Use 3–7 tasks tied to the user's first successful outcome, show completion criteria and effort only if accurate, launch the real task rather than a detached tutorial, preserve progress across sessions and allow dismissal once the product is usable.", "surface": "product", "copy_label": "Copy full prompt" }, { "id": "05-02-guided-setup-wizard", "category_number": "05", "category": "Onboarding", "title": "Guided setup wizard", "summary": "Sequential onboarding for decisions with real dependencies.", "use_when": "Setup order genuinely matters.", "avoid_when": "Optional configuration is being forced into a wizard.", "uiux_rules": [ "01 Purpose", "09 Choice", "10 Chunking", "11 Disclosure", "12 Feedback", "13 Recovery", "15 Responsive" ], "seo_checks": [ "09 Rendering", "14 Core Web Vitals", "15 Mobile/accessibility" ], "specific_prompt": "Show an explicit goal, named steps, progress, saved state, back/continue behavior, validation and a clear finish. Ask only what is required at each stage, defer advanced settings and explain irreversible choices before commitment.", "surface": "product", "copy_label": "Copy full prompt" }, { "id": "05-03-role-based-onboarding", "category_number": "05", "category": "Onboarding", "title": "Role-based onboarding", "summary": "Tailor setup to the user's actual job or use case.", "use_when": "Different roles have materially different first tasks.", "avoid_when": "Role selection would only change headline copy.", "uiux_rules": [ "01 Purpose", "09 Choice", "10 Chunking", "11 Disclosure", "12 Feedback", "13 Recovery", "15 Responsive" ], "seo_checks": [ "09 Rendering", "14 Core Web Vitals", "15 Mobile/accessibility" ], "specific_prompt": "Ask one concise role/use-case question only if it changes setup, examples, defaults or next steps. Allow later changes, use task-based options rather than stereotypes and include other/skip where appropriate.", "surface": "product", "copy_label": "Copy full prompt" }, { "id": "05-04-import-first-onboarding", "category_number": "05", "category": "Onboarding", "title": "Import-first onboarding", "summary": "Bring existing data into the product safely as the first-value path.", "use_when": "Product value depends on imported records/files.", "avoid_when": "Import is not required and manual/sample paths are viable.", "uiux_rules": [ "01 Purpose", "09 Choice", "10 Chunking", "11 Disclosure", "12 Feedback", "13 Recovery", "15 Responsive" ], "seo_checks": [ "09 Rendering", "14 Core Web Vitals", "15 Mobile/accessibility" ], "specific_prompt": "Offer supported sources, visible requirements, preview before commit, mapping/validation, progress, partial-failure reporting and reversible or clearly explained commit behavior. Never claim success before validation; offer sample/manual alternatives where useful.", "surface": "product", "copy_label": "Copy full prompt" }, { "id": "05-05-interactive-first-task", "category_number": "05", "category": "Onboarding", "title": "Interactive first task", "summary": "Teach by completing a real product action with contextual guidance.", "use_when": "Doing the real task is the fastest route to understanding.", "avoid_when": "The proposed demo would not match production behavior.", "uiux_rules": [ "01 Purpose", "09 Choice", "10 Chunking", "11 Disclosure", "12 Feedback", "13 Recovery", "15 Responsive" ], "seo_checks": [ "09 Rendering", "14 Core Web Vitals", "15 Mobile/accessibility" ], "specific_prompt": "Put the user in the actual product with one first task highlighted. Use short contextual guidance beside relevant controls, let the user complete real state, show immediate success feedback and provide skip/later without trapping them.", "surface": "product", "copy_label": "Copy full prompt" }, { "id": "05-06-first-value-dashboard", "category_number": "05", "category": "Onboarding", "title": "First-value dashboard", "summary": "A post-signup home that guides action before real dashboard data exists.", "use_when": "The mature dashboard would otherwise open as empty metric cards.", "avoid_when": "The UI would need fake metrics or placeholder charts.", "uiux_rules": [ "01 Purpose", "09 Choice", "10 Chunking", "11 Disclosure", "12 Feedback", "13 Recovery", "15 Responsive" ], "seo_checks": [ "09 Rendering", "14 Core Web Vitals", "15 Mobile/accessibility" ], "specific_prompt": "Explain the current product state, show 2–4 actions needed to create value and transition naturally into the mature dashboard as real data appears. Use truthful empty states instead of zeros that imply measurement.", "surface": "product", "copy_label": "Copy full prompt" }, { "id": "06-01-single-task-form", "category_number": "06", "category": "Forms & Input", "title": "Single-task form", "summary": "A compact form for one clear outcome.", "use_when": "Contact, create, invite, subscribe or another short task has one goal.", "avoid_when": "Unrelated outcomes are being combined.", "uiux_rules": [ "05 Proximity", "08 Reach", "09 Choice", "10 Chunking", "12 Feedback", "13 Recovery", "14 Accessibility" ], "seo_checks": [ "09 Rendering", "14 Core Web Vitals", "15 Mobile/accessibility" ], "specific_prompt": "Use visible labels, appropriate input types, concise helper text, required/optional clarity, one outcome-labeled submit button and local validation. Keep related fields close, prevent duplicate submission and confirm success before clearing user input.", "surface": "product", "copy_label": "Copy full prompt" }, { "id": "06-02-sectioned-long-form", "category_number": "06", "category": "Forms & Input", "title": "Sectioned long form", "summary": "A long form divided into meaningful groups with persistent context.", "use_when": "Many fields are genuinely required.", "avoid_when": "A multi-step wizard would hide useful cross-field context.", "uiux_rules": [ "05 Proximity", "08 Reach", "09 Choice", "10 Chunking", "12 Feedback", "13 Recovery", "14 Accessibility" ], "seo_checks": [ "09 Rendering", "14 Core Web Vitals", "15 Mobile/accessibility" ], "specific_prompt": "Group by meaning rather than visual symmetry, add section navigation only if it improves orientation, preserve progress where appropriate, show field-level plus summary errors for long pages and never hide an error inside a collapsed section.", "surface": "product", "copy_label": "Copy full prompt" }, { "id": "06-03-inline-validation-form", "category_number": "06", "category": "Forms & Input", "title": "Inline-validation form", "summary": "Validation appears when it can help rather than nag.", "use_when": "Constraints are important or input errors are common.", "avoid_when": "Every keystroke would trigger premature warnings.", "uiux_rules": [ "05 Proximity", "08 Reach", "09 Choice", "10 Chunking", "12 Feedback", "13 Recovery", "14 Accessibility" ], "seo_checks": [ "09 Rendering", "14 Core Web Vitals", "15 Mobile/accessibility" ], "specific_prompt": "Validate formats after meaningful completion/blur, cross-field rules when dependencies exist and server rules on submit. Associate specific errors with fields, show requirements before failure and preserve valid values across retries.", "surface": "product", "copy_label": "Copy full prompt" }, { "id": "06-04-autosave-editor", "category_number": "06", "category": "Forms & Input", "title": "Autosave editor", "summary": "Continuous editing with visible save state and recovery.", "use_when": "Notes, settings or documents benefit from autosave.", "avoid_when": "Writes are irreversible/high-risk without confirmation.", "uiux_rules": [ "05 Proximity", "08 Reach", "09 Choice", "10 Chunking", "12 Feedback", "13 Recovery", "14 Accessibility" ], "seo_checks": [ "09 Rendering", "14 Core Web Vitals", "15 Mobile/accessibility" ], "specific_prompt": "Use a quiet state model: unsaved, saving, saved, offline, save failed. Debounce safely, prevent version races, preserve local work, provide retry/conflict handling and never show Saved until the server acknowledges the current version.", "surface": "product", "copy_label": "Copy full prompt" }, { "id": "06-05-file-upload-form", "category_number": "06", "category": "Forms & Input", "title": "File upload form", "summary": "Resilient file submission with requirements, progress and recovery.", "use_when": "Users submit media/documents/files.", "avoid_when": "Type/size constraints would remain hidden until failure.", "uiux_rules": [ "05 Proximity", "08 Reach", "09 Choice", "10 Chunking", "12 Feedback", "13 Recovery", "14 Accessibility" ], "seo_checks": [ "09 Rendering", "14 Core Web Vitals", "15 Mobile/accessibility" ], "specific_prompt": "Show accepted types/limits, browse and drag-drop where useful, keyboard access, per-file progress, cancel/retry, validation and duplicate handling. Preview only safe formats and preserve all other form data when uploads fail.", "surface": "product", "copy_label": "Copy full prompt" }, { "id": "06-06-destructive-action-confirmation", "category_number": "06", "category": "Forms & Input", "title": "Destructive action confirmation", "summary": "Confirmation proportional to the consequence.", "use_when": "Delete, revoke, reset or another high-consequence action is occurring.", "avoid_when": "A harmless reversible action would be slowed unnecessarily.", "uiux_rules": [ "05 Proximity", "08 Reach", "09 Choice", "10 Chunking", "12 Feedback", "13 Recovery", "14 Accessibility" ], "seo_checks": [ "09 Rendering", "14 Core Web Vitals", "15 Mobile/accessibility" ], "specific_prompt": "Name the object and consequence, visually separate the destructive action, keep cancellation safe and use stronger typed confirmation only for severe irreversible cases. Manage focus correctly and prefer undo when the action can safely be reversed.", "surface": "product", "copy_label": "Copy full prompt" }, { "id": "07-01-search-first-directory", "category_number": "07", "category": "Search, Filter & Discovery", "title": "Search-first directory", "summary": "A directory where search is the dominant path to known items.", "use_when": "Users often know what they are looking for.", "avoid_when": "Browsing categories is the primary discovery behavior.", "uiux_rules": [ "09 Choice", "10 Chunking", "11 Disclosure", "12 Feedback", "13 Recovery", "14 Accessibility", "15 Responsive" ], "seo_checks": [ "06 Parameters/facets", "08 Site architecture", "09 Rendering", "15 Mobile/accessibility", "16 Content overlap" ], "specific_prompt": "Use a prominent labeled search field, useful example text, immediate result count, keyboard-friendly results, highlighted matches only when helpful and a clear no-results recovery. Keep recent/suggested items secondary and avoid a submit button if safe instant results are better.", "surface": "product", "copy_label": "Copy full prompt" }, { "id": "07-02-filter-sidebar", "category_number": "07", "category": "Search, Filter & Discovery", "title": "Filter sidebar", "summary": "A desktop filter system that keeps result context visible.", "use_when": "Several independent filters materially change a list.", "avoid_when": "One or two simple filters fit inline.", "uiux_rules": [ "09 Choice", "10 Chunking", "11 Disclosure", "12 Feedback", "13 Recovery", "14 Accessibility", "15 Responsive" ], "seo_checks": [ "06 Parameters/facets", "08 Site architecture", "09 Rendering", "15 Mobile/accessibility", "16 Content overlap" ], "specific_prompt": "Group facets by meaning, show counts only if accurate, make selected state obvious, include reset and result count, and choose instant versus explicit Apply based on speed/predictability. On mobile, transform to an accessible drawer/sheet with selected-count summary.", "surface": "product", "copy_label": "Copy full prompt" }, { "id": "07-03-faceted-results", "category_number": "07", "category": "Search, Filter & Discovery", "title": "Faceted results", "summary": "Search/browse results narrowed across several meaningful dimensions.", "use_when": "Catalogs, directories, resources or datasets need multidimensional narrowing.", "avoid_when": "Every internal attribute would become a filter.", "uiux_rules": [ "09 Choice", "10 Chunking", "11 Disclosure", "12 Feedback", "13 Recovery", "14 Accessibility", "15 Responsive" ], "seo_checks": [ "06 Parameters/facets", "08 Site architecture", "09 Rendering", "15 Mobile/accessibility", "16 Content overlap" ], "specific_prompt": "Expose only dimensions users understand, show active filters clearly, keep sorting separate, preserve state through navigation and make zero-result combinations recoverable. For public pages, prevent uncontrolled crawlable URL combinations.", "surface": "product", "copy_label": "Copy full prompt" }, { "id": "07-04-command-search", "category_number": "07", "category": "Search, Filter & Discovery", "title": "Command search", "summary": "Keyboard-optimized discovery across entities and actions.", "use_when": "Expert users repeat searches and actions often.", "avoid_when": "Visible navigation would be replaced by search-only UI.", "uiux_rules": [ "09 Choice", "10 Chunking", "11 Disclosure", "12 Feedback", "13 Recovery", "14 Accessibility", "15 Responsive" ], "seo_checks": [ "06 Parameters/facets", "08 Site architecture", "09 Rendering", "15 Mobile/accessibility", "16 Content overlap" ], "specific_prompt": "Create an overlay with fast matching, grouped result types, clear keyboard movement, optional previews and recent items. Keep navigation results distinct from actions, announce result changes accessibly and never execute destructive actions with a single Enter.", "surface": "product", "copy_label": "Copy full prompt" }, { "id": "07-05-no-results-recovery", "category_number": "07", "category": "Search, Filter & Discovery", "title": "No-results recovery", "summary": "A zero-result state that preserves context and offers the smallest useful recovery.", "use_when": "Search or filter combinations can legitimately return nothing.", "avoid_when": "The UI would stop at a generic 'No results'.", "uiux_rules": [ "09 Choice", "10 Chunking", "11 Disclosure", "12 Feedback", "13 Recovery", "14 Accessibility", "15 Responsive" ], "seo_checks": [ "06 Parameters/facets", "08 Site architecture", "09 Rendering", "15 Mobile/accessibility", "16 Content overlap" ], "specific_prompt": "Repeat the query/filter context, suggest concrete recovery such as removing a restrictive filter or broadening scope, preserve all input and optionally offer a relevant create/support action. Do not inject unrelated popular content as filler.", "surface": "product", "copy_label": "Copy full prompt" }, { "id": "07-06-saved-views", "category_number": "07", "category": "Search, Filter & Discovery", "title": "Saved views", "summary": "Reusable search/filter configurations for repeat workflows.", "use_when": "Users repeatedly return to the same filtered dataset.", "avoid_when": "Filtering is trivial or one-off.", "uiux_rules": [ "09 Choice", "10 Chunking", "11 Disclosure", "12 Feedback", "13 Recovery", "14 Accessibility", "15 Responsive" ], "seo_checks": [ "06 Parameters/facets", "08 Site architecture", "09 Rendering", "15 Mobile/accessibility", "16 Content overlap" ], "specific_prompt": "Let users name, save, update, duplicate and delete views, clarify personal versus shared scope, preserve only the state users expect and keep a clear default. Handle renamed/deleted fields gracefully instead of silently breaking saved state.", "surface": "product", "copy_label": "Copy full prompt" }, { "id": "08-01-dense-data-table", "category_number": "08", "category": "Data Lists & Tables", "title": "Dense data table", "summary": "High-information rows for repeat desktop work.", "use_when": "Users compare the same attributes across many records.", "avoid_when": "Content is narrative or attributes are not comparable.", "uiux_rules": [ "02 Hierarchy", "03 Space", "05 Proximity", "10 Chunking", "14 Accessibility", "15 Responsive" ], "seo_checks": [ "09 Rendering", "14 Core Web Vitals", "15 Mobile/accessibility" ], "specific_prompt": "Use a strong primary identifier column, aligned data types, semantic headers, meaningful sorting and quiet row actions. Support keyboard, loading/empty/error states and sticky headers only where useful; prioritize columns before resorting to horizontal scroll.", "surface": "product", "copy_label": "Copy full prompt" }, { "id": "08-02-responsive-record-list", "category_number": "08", "category": "Data Lists & Tables", "title": "Responsive record list", "summary": "A list that preserves identity and top actions across screen sizes.", "use_when": "A full table is unnecessary or mobile is a primary context.", "avoid_when": "Decorative cards would obscure comparison.", "uiux_rules": [ "02 Hierarchy", "03 Space", "05 Proximity", "10 Chunking", "14 Accessibility", "15 Responsive" ], "seo_checks": [ "09 Rendering", "14 Core Web Vitals", "15 Mobile/accessibility" ], "specific_prompt": "Give each row one primary identifier, 2–4 supporting attributes, status where needed and a predictable action affordance. Prefer dividers/spacing to boxes; align into columns on wider screens and stack in a consistent order on narrow screens.", "surface": "product", "copy_label": "Copy full prompt" }, { "id": "08-03-master-detail-layout", "category_number": "08", "category": "Data Lists & Tables", "title": "Master-detail layout", "summary": "A list plus detail pane for rapid review without losing position.", "use_when": "Inbox, ticket, file or review workflows move between adjacent items.", "avoid_when": "Users rarely need to move among neighboring records.", "uiux_rules": [ "02 Hierarchy", "03 Space", "05 Proximity", "10 Chunking", "14 Accessibility", "15 Responsive" ], "seo_checks": [ "09 Rendering", "14 Core Web Vitals", "15 Mobile/accessibility" ], "specific_prompt": "Build a scannable master list with persistent selection, a detail pane, sensible next/previous keyboard flow and URL/deep-link behavior for the selected item. On mobile, transform to list → detail navigation rather than shrinking three panes together.", "surface": "product", "copy_label": "Copy full prompt" }, { "id": "08-04-bulk-action-table", "category_number": "08", "category": "Data Lists & Tables", "title": "Bulk action table", "summary": "Safe multi-selection and batch operations.", "use_when": "Users commonly apply the same action to several records.", "avoid_when": "Bulk actions are rare and would clutter the table.", "uiux_rules": [ "02 Hierarchy", "03 Space", "05 Proximity", "10 Chunking", "14 Accessibility", "15 Responsive" ], "seo_checks": [ "09 Rendering", "14 Core Web Vitals", "15 Mobile/accessibility" ], "specific_prompt": "Add row selection, explicit select-all scope, selected count and only relevant batch actions. Separate destructive operations, explain partial-failure behavior, preserve selection across pages only when scope is understandable and report success/failure without losing place.", "surface": "product", "copy_label": "Copy full prompt" }, { "id": "08-05-comparison-matrix", "category_number": "08", "category": "Data Lists & Tables", "title": "Comparison matrix", "summary": "A grid optimized for comparing features or attributes across options.", "use_when": "Differences across columns are the core decision.", "avoid_when": "Most cells would be empty or incomparable.", "uiux_rules": [ "02 Hierarchy", "03 Space", "05 Proximity", "10 Chunking", "14 Accessibility", "15 Responsive" ], "seo_checks": [ "09 Rendering", "14 Core Web Vitals", "15 Mobile/accessibility" ], "specific_prompt": "Use sticky option identity where helpful, group attributes, write explicit values instead of ambiguous icons when nuance matters and highlight meaningful differences without declaring an arbitrary winner. Provide an accessible mobile strategy such as pair selection or grouped stacked comparison.", "surface": "product", "copy_label": "Copy full prompt" }, { "id": "08-06-activity-feed", "category_number": "08", "category": "Data Lists & Tables", "title": "Activity feed", "summary": "A chronological stream that explains who did what and when.", "use_when": "Collaboration, audit history or system events matter.", "avoid_when": "Promotional updates would be mixed with operational history.", "uiux_rules": [ "02 Hierarchy", "03 Space", "05 Proximity", "10 Chunking", "14 Accessibility", "15 Responsive" ], "seo_checks": [ "09 Rendering", "14 Core Web Vitals", "15 Mobile/accessibility" ], "specific_prompt": "Use chronological grouping, actor/action/object language, relative time with exact timestamp access, compact meaningful icons and links to affected objects. Group repetitive events without hiding important ones, and provide accessible pagination/loading plus an explanatory empty state.", "surface": "product", "copy_label": "Copy full prompt" }, { "id": "09-01-outcome-dashboard", "category_number": "09", "category": "Dashboards & Analytics", "title": "Outcome dashboard", "summary": "A dashboard centered on a few outcomes users monitor repeatedly.", "use_when": "A small set of metrics guides recurring decisions.", "avoid_when": "Unused space would be filled with extra KPIs.", "uiux_rules": [ "01 Purpose", "02 Hierarchy", "09 Choice", "10 Chunking", "12 Feedback", "18 Measure" ], "seo_checks": [ "09 Rendering", "14 Core Web Vitals", "15 Mobile/accessibility" ], "specific_prompt": "Design around 3–5 user questions. For each metric show label, value, timeframe/comparison context and a path to detail when action is possible. Use a chart only when it answers a question better than numbers, and never show contextless percentages or animated counts.", "surface": "product", "copy_label": "Copy full prompt" }, { "id": "09-02-operational-dashboard", "category_number": "09", "category": "Dashboards & Analytics", "title": "Operational dashboard", "summary": "A work surface combining queues, exceptions and next actions.", "use_when": "Users operate the system rather than just observe it.", "avoid_when": "Charts would overshadow the work that needs doing.", "uiux_rules": [ "01 Purpose", "02 Hierarchy", "09 Choice", "10 Chunking", "12 Feedback", "18 Measure" ], "seo_checks": [ "09 Rendering", "14 Core Web Vitals", "15 Mobile/accessibility" ], "specific_prompt": "Put today's actionable items first, exceptions/alerts second and supporting metrics after. Use understandable status language, provide direct paths into work and define stale data, loading, partial-failure and permission states.", "surface": "product", "copy_label": "Copy full prompt" }, { "id": "09-03-analytics-drill-down", "category_number": "09", "category": "Dashboards & Analytics", "title": "Analytics drill-down", "summary": "A metric-to-detail flow that preserves context while investigating.", "use_when": "Users move from summary to segments/detail analysis.", "avoid_when": "The metric has no meaningful action or explanation path.", "uiux_rules": [ "01 Purpose", "02 Hierarchy", "09 Choice", "10 Chunking", "12 Feedback", "18 Measure" ], "seo_checks": [ "09 Rendering", "14 Core Web Vitals", "15 Mobile/accessibility" ], "specific_prompt": "Keep date/context filters persistent, match the originating metric, use one explanatory visualization and detailed breakdowns below. Apply filters consistently across summary/detail, provide accessible table alternatives and explain missing or partial data.", "surface": "product", "copy_label": "Copy full prompt" }, { "id": "09-04-alert-dashboard", "category_number": "09", "category": "Dashboards & Analytics", "title": "Alert dashboard", "summary": "A dashboard prioritized by anomaly, failure or exception.", "use_when": "Timely intervention matters more than broad reporting.", "avoid_when": "Severity would be arbitrary color coding.", "uiux_rules": [ "01 Purpose", "02 Hierarchy", "09 Choice", "10 Chunking", "12 Feedback", "18 Measure" ], "seo_checks": [ "09 Rendering", "14 Core Web Vitals", "15 Mobile/accessibility" ], "specific_prompt": "Sort by consequence/urgency, not color alone. Each alert states what happened, scope, time, current status, evidence and next action; allow acknowledge/resolve only when meaningful and provide a truthful quiet state when no alerts exist.", "surface": "product", "copy_label": "Copy full prompt" }, { "id": "09-05-timeline-dashboard", "category_number": "09", "category": "Dashboards & Analytics", "title": "Timeline dashboard", "summary": "A time-oriented view for milestones, incidents or progress.", "use_when": "Sequence and timing are primary.", "avoid_when": "A simple table would support the decision better.", "uiux_rules": [ "01 Purpose", "02 Hierarchy", "09 Choice", "10 Chunking", "12 Feedback", "18 Measure" ], "seo_checks": [ "09 Rendering", "14 Core Web Vitals", "15 Mobile/accessibility" ], "specific_prompt": "Use a clear time scale, current position, grouped events, milestone status and only useful filters. Essential meaning must not depend on hover, and mobile/assistive users need a list/table alternative.", "surface": "product", "copy_label": "Copy full prompt" }, { "id": "09-06-executive-summary", "category_number": "09", "category": "Dashboards & Analytics", "title": "Executive summary", "summary": "A concise leadership view focused on outcome, risk and decisions.", "use_when": "Leaders need status and decisions, not operational detail.", "avoid_when": "Aggregates would hide material exceptions.", "uiux_rules": [ "01 Purpose", "02 Hierarchy", "09 Choice", "10 Chunking", "12 Feedback", "18 Measure" ], "seo_checks": [ "09 Rendering", "14 Core Web Vitals", "15 Mobile/accessibility" ], "specific_prompt": "Organize around outcomes, notable change, risks, decisions needed and next milestones. Tie metrics to period/source, surface uncertainty and exceptions and link to the underlying operational evidence instead of duplicating everything.", "surface": "product", "copy_label": "Copy full prompt" }, { "id": "10-01-alternating-narrative", "category_number": "10", "category": "Feature Explanation", "title": "Alternating narrative", "summary": "A sequence of outcome-led sections with selective visuals.", "use_when": "3–5 capabilities each need explanation and evidence.", "avoid_when": "Left-right zig-zag would be used only for decoration.", "uiux_rules": [ "01 Purpose", "02 Hierarchy", "10 Chunking", "11 Disclosure", "14 Accessibility", "16 Sequence" ], "seo_checks": [ "08 Site architecture", "09 Rendering", "12 Media", "15 Mobile/accessibility", "17 AI search" ], "specific_prompt": "Give each section one user problem/outcome, concise explanation, one real visual/diagram and optional deeper link. Alternate composition only when it improves rhythm and preserve a consistent internal logic for scanning.", "surface": "public", "copy_label": "Copy full prompt" }, { "id": "10-02-interactive-feature-tabs", "category_number": "10", "category": "Feature Explanation", "title": "Interactive feature tabs", "summary": "Compact exploration of related peer capabilities.", "use_when": "Several features share one visual area and benefit from comparison.", "avoid_when": "Critical public content would become inaccessible behind JS-only tabs.", "uiux_rules": [ "01 Purpose", "02 Hierarchy", "10 Chunking", "11 Disclosure", "14 Accessibility", "16 Sequence" ], "seo_checks": [ "08 Site architecture", "09 Rendering", "12 Media", "15 Mobile/accessibility", "17 AI search" ], "specific_prompt": "Use 3–5 short labels with correct tab semantics/keyboard behavior and one shared visual region that updates without layout jump. Keep panel text understandable in HTML, consider accordion/disclosure on narrow screens and never auto-rotate.", "surface": "public", "copy_label": "Copy full prompt" }, { "id": "10-03-annotated-product-screenshot", "category_number": "10", "category": "Feature Explanation", "title": "Annotated product screenshot", "summary": "A real interface screenshot with a small number of precise callouts.", "use_when": "The actual UI is strong evidence.", "avoid_when": "A full-screen tiny screenshot would need many arrows.", "uiux_rules": [ "01 Purpose", "02 Hierarchy", "10 Chunking", "11 Disclosure", "14 Accessibility", "16 Sequence" ], "seo_checks": [ "08 Site architecture", "09 Rendering", "12 Media", "15 Mobile/accessibility", "17 AI search" ], "specific_prompt": "Use one focused crop and at most 3–4 numbered callouts connected to short HTML explanations. Keep callout order logical, use the image as evidence rather than decoration and provide alt text for the image while details remain in text.", "surface": "public", "copy_label": "Copy full prompt" }, { "id": "10-04-step-by-step-process", "category_number": "10", "category": "Feature Explanation", "title": "Step-by-step process", "summary": "A linear explanation from input to outcome.", "use_when": "Sequence matters to understanding or trust.", "avoid_when": "The workflow is actually nonlinear.", "uiux_rules": [ "01 Purpose", "02 Hierarchy", "10 Chunking", "11 Disclosure", "14 Accessibility", "16 Sequence" ], "seo_checks": [ "08 Site architecture", "09 Rendering", "12 Media", "15 Mobile/accessibility", "17 AI search" ], "specific_prompt": "Use 3–6 meaningful steps, each naming the user action, system response and resulting state. Include prerequisites/decision points, let lines/arrows support rather than carry all meaning and keep numbers close to content on mobile.", "surface": "public", "copy_label": "Copy full prompt" }, { "id": "10-05-before-after-evidence", "category_number": "10", "category": "Feature Explanation", "title": "Before/after evidence", "summary": "A truthful side-by-side comparison of a real workflow or output change.", "use_when": "Equivalent before/after evidence exists.", "avoid_when": "The transformation would be fabricated or cherry-picked.", "uiux_rules": [ "01 Purpose", "02 Hierarchy", "10 Chunking", "11 Disclosure", "14 Accessibility", "16 Sequence" ], "seo_checks": [ "08 Site architecture", "09 Rendering", "12 Media", "15 Mobile/accessibility", "17 AI search" ], "specific_prompt": "Use equivalent scope and clear labels, explain what changed and what did not, keep the comparison accessible in text and avoid sliders that hide half the evidence unless they add genuine value. Add source/timeframe for metrics.", "surface": "public", "copy_label": "Copy full prompt" }, { "id": "10-06-progressive-feature-list", "category_number": "10", "category": "Feature Explanation", "title": "Progressive feature list", "summary": "A scannable capability inventory with deeper detail on demand.", "use_when": "There are many capabilities but only a subset matters initially.", "avoid_when": "Material limits or pricing differences would be hidden.", "uiux_rules": [ "01 Purpose", "02 Hierarchy", "10 Chunking", "11 Disclosure", "14 Accessibility", "16 Sequence" ], "seo_checks": [ "08 Site architecture", "09 Rendering", "12 Media", "15 Mobile/accessibility", "17 AI search" ], "specific_prompt": "Group features by user job, show concise outcome-led summaries and reveal deeper detail through accessible disclosure. Keep important constraints visible, use icons sparingly and offer anchors for long groups.", "surface": "public", "copy_label": "Copy full prompt" }, { "id": "11-01-tier-comparison", "category_number": "11", "category": "Pricing & Conversion", "title": "Tier comparison", "summary": "A pricing surface for 2–4 genuinely different plans.", "use_when": "Plans map to different user needs or limits.", "avoid_when": "Artificial tiers exist only to push a middle plan.", "uiux_rules": [ "02 Hierarchy", "09 Choice", "10 Chunking", "12 Feedback", "13 Recovery", "17 Trust", "18 Measure" ], "seo_checks": [ "09 Rendering", "10 Titles/snippets", "11 Structured data truth", "15 Mobile/accessibility", "17 AI search" ], "specific_prompt": "Show plan name, intended user, price/time basis, key limits, included features and one CTA per plan. Highlight only with a truthful reason, make material exclusions/billing terms visible and keep plan identity attached to details on mobile.", "surface": "public", "copy_label": "Copy full prompt" }, { "id": "11-02-single-plan-pricing", "category_number": "11", "category": "Pricing & Conversion", "title": "Single-plan pricing", "summary": "Focused pricing for one primary paid offer.", "use_when": "Multiple tier cards would add fake complexity.", "avoid_when": "Variable fees would be hidden outside the main price area.", "uiux_rules": [ "02 Hierarchy", "09 Choice", "10 Chunking", "12 Feedback", "13 Recovery", "17 Trust", "18 Measure" ], "seo_checks": [ "09 Rendering", "10 Titles/snippets", "11 Structured data truth", "15 Mobile/accessibility", "17 AI search" ], "specific_prompt": "Show price basis, inclusions, limits, billing/cancellation terms and one primary CTA. Put objections and trust details beside the purchase decision, keep add-ons only if real and avoid splitting one offer into decorative tiers.", "surface": "public", "copy_label": "Copy full prompt" }, { "id": "11-03-usage-based-estimator", "category_number": "11", "category": "Pricing & Conversion", "title": "Usage-based estimator", "summary": "An interactive cost estimator based on a measurable usage variable.", "use_when": "Users need to approximate cost before buying.", "avoid_when": "The estimate would be presented as a guaranteed invoice.", "uiux_rules": [ "02 Hierarchy", "09 Choice", "10 Chunking", "12 Feedback", "13 Recovery", "17 Trust", "18 Measure" ], "seo_checks": [ "09 Rendering", "10 Titles/snippets", "11 Structured data truth", "15 Mobile/accessibility", "17 AI search" ], "specific_prompt": "Use labeled controls plus direct numeric entry, sensible ranges, current estimate, pricing formula explanation, included minimums/overages and an estimate disclaimer where appropriate. Ensure keyboard access and place the next action near the result.", "surface": "public", "copy_label": "Copy full prompt" }, { "id": "11-04-free-vs-paid", "category_number": "11", "category": "Pricing & Conversion", "title": "Free vs paid", "summary": "A clear comparison of a real free product and paid upgrade.", "use_when": "Users need to understand the upgrade boundary.", "avoid_when": "The free option would be degraded with dark patterns.", "uiux_rules": [ "02 Hierarchy", "09 Choice", "10 Chunking", "12 Feedback", "13 Recovery", "17 Trust", "18 Measure" ], "seo_checks": [ "09 Rendering", "10 Titles/snippets", "11 Structured data truth", "15 Mobile/accessibility", "17 AI search" ], "specific_prompt": "State who each option is for, core limits, what changes on upgrade, billing expectations and downgrade consequences. Keep the free path visible and let visual emphasis reflect relevance rather than coercion.", "surface": "public", "copy_label": "Copy full prompt" }, { "id": "11-05-checkout-summary", "category_number": "11", "category": "Pricing & Conversion", "title": "Checkout summary", "summary": "A purchase confirmation that makes money and consequences explicit.", "use_when": "A subscription, purchase, deposit or upgrade is being paid.", "avoid_when": "Charges would appear only after CTA click.", "uiux_rules": [ "02 Hierarchy", "09 Choice", "10 Chunking", "12 Feedback", "13 Recovery", "17 Trust", "18 Measure" ], "seo_checks": [ "09 Rendering", "10 Titles/snippets", "11 Structured data truth", "15 Mobile/accessibility", "17 AI search" ], "specific_prompt": "Show exact item/plan, quantity/seats, subtotal, discounts, taxes/fees when known, recurring cadence, due-now total, next charge and key cancellation/refund terms. Keep edit/back available, prevent duplicate charges and design processing/success/failure states.", "surface": "public", "copy_label": "Copy full prompt" }, { "id": "11-06-upgrade-or-renewal-decision", "category_number": "11", "category": "Pricing & Conversion", "title": "Upgrade or renewal decision", "summary": "An in-product billing change with current-versus-proposed consequences.", "use_when": "An existing customer is changing plan or renewing.", "avoid_when": "Urgency would be invented.", "uiux_rules": [ "02 Hierarchy", "09 Choice", "10 Chunking", "12 Feedback", "13 Recovery", "17 Trust", "18 Measure" ], "seo_checks": [ "09 Rendering", "10 Titles/snippets", "11 Structured data truth", "15 Mobile/accessibility", "17 AI search" ], "specific_prompt": "Compare current and proposed plan, price delta, effective date, proration when applicable, feature/limit changes and downgrade consequences. Put confirmation beside terms, preserve cancel and show exactly what changed after completion.", "surface": "public", "copy_label": "Copy full prompt" }, { "id": "12-01-case-study-proof-block", "category_number": "12", "category": "Trust & Proof", "title": "Case study proof block", "summary": "Compact evidence connecting context, intervention and result.", "use_when": "A real customer/project story supports the decision.", "avoid_when": "The claim would be unattributed or context-free.", "uiux_rules": [ "02 Hierarchy", "04 Contrast", "05 Proximity", "17 Trust", "18 Measure" ], "seo_checks": [ "10 Titles/snippets", "11 Structured data truth", "12 Media", "17 AI search" ], "specific_prompt": "Show who/what context, starting condition, intervention, measurable/observable result, timeframe and a link to fuller evidence. Use logos/images only with permission and keep caveats visible instead of reducing everything to one giant percentage.", "surface": "public", "copy_label": "Copy full prompt" }, { "id": "12-02-featured-testimonial", "category_number": "12", "category": "Trust & Proof", "title": "Featured testimonial", "summary": "One strong, attributable quote that answers a real concern.", "use_when": "A verified quote directly reduces a meaningful doubt.", "avoid_when": "The page would use a wall of generic praise.", "uiux_rules": [ "02 Hierarchy", "04 Contrast", "05 Proximity", "17 Trust", "18 Measure" ], "seo_checks": [ "10 Titles/snippets", "11 Structured data truth", "12 Media", "17 AI search" ], "specific_prompt": "Use a short real quote, name, role/company when verified and permitted, plus optional context about the product/use case. Keep decoration restrained and never fabricate avatars, logos or public attribution.", "surface": "public", "copy_label": "Copy full prompt" }, { "id": "12-03-customer-logo-evidence", "category_number": "12", "category": "Trust & Proof", "title": "Customer/logo evidence", "summary": "A restrained customer/partner area with explicit relationship context.", "use_when": "Named relationships are real and permitted.", "avoid_when": "Incidental integrations would be presented as endorsements.", "uiux_rules": [ "02 Hierarchy", "04 Contrast", "05 Proximity", "17 Trust", "18 Measure" ], "seo_checks": [ "10 Titles/snippets", "11 Structured data truth", "12 Media", "17 AI search" ], "specific_prompt": "Use a precise heading that describes the relationship, a manageable set of legible logos and grouping/labels where relationships differ. Provide text alternatives and preserve dark/light legibility.", "surface": "public", "copy_label": "Copy full prompt" }, { "id": "12-04-security-and-privacy-trust-panel", "category_number": "12", "category": "Trust & Proof", "title": "Security and privacy trust panel", "summary": "Concrete data/security practices beside a sensitive decision.", "use_when": "Signup, data connection or purchase needs factual reassurance.", "avoid_when": "Generic lock icons or unverified compliance claims would be used.", "uiux_rules": [ "02 Hierarchy", "04 Contrast", "05 Proximity", "17 Trust", "18 Measure" ], "seo_checks": [ "10 Titles/snippets", "11 Structured data truth", "12 Media", "17 AI search" ], "specific_prompt": "State only verified practices such as data handling, encryption context, retention, permissions and real certifications, with links to full policies. Put the most relevant reassurance beside the action and do not invent compliance, audit or uptime claims.", "surface": "public", "copy_label": "Copy full prompt" }, { "id": "12-05-guarantee-and-terms-block", "category_number": "12", "category": "Trust & Proof", "title": "Guarantee and terms block", "summary": "Commercial terms summarized where the user decides.", "use_when": "Trial, cancellation, refund or return terms reduce uncertainty.", "avoid_when": "Headline reassurance would contradict fine print.", "uiux_rules": [ "02 Hierarchy", "04 Contrast", "05 Proximity", "17 Trust", "18 Measure" ], "seo_checks": [ "10 Titles/snippets", "11 Structured data truth", "12 Media", "17 AI search" ], "specific_prompt": "Place trial length, renewal, cancellation, refund/return window and major exclusions near the CTA, link to full terms without hiding material facts and use calm typography rather than badge clutter.", "surface": "public", "copy_label": "Copy full prompt" }, { "id": "12-06-results-evidence-grid", "category_number": "12", "category": "Trust & Proof", "title": "Results evidence grid", "summary": "Several proof artifacts grouped by the doubts they answer.", "use_when": "Multiple verified results support distinct concerns.", "avoid_when": "Unrelated vanity metrics would be mixed together.", "uiux_rules": [ "02 Hierarchy", "04 Contrast", "05 Proximity", "17 Trust", "18 Measure" ], "seo_checks": [ "10 Titles/snippets", "11 Structured data truth", "12 Media", "17 AI search" ], "specific_prompt": "Group evidence by concern such as speed, quality, cost or reliability. Each item needs enough source/timeframe/context to interpret it, and the strongest relevant proof should be visually dominant instead of making every statistic equally loud.", "surface": "public", "copy_label": "Copy full prompt" }, { "id": "13-01-long-form-article", "category_number": "13", "category": "Content & Editorial", "title": "Long-form article", "summary": "A focused reading layout for essays, guides and evidence-rich articles.", "use_when": "Narrative or instructional content needs sustained reading.", "avoid_when": "Article text would be forced into a card grid.", "uiux_rules": [ "01 Purpose", "02 Hierarchy", "03 Space", "10 Chunking", "14 Accessibility", "16 Sequence" ], "seo_checks": [ "02 Crawlability", "07 XML sitemap", "08 Site architecture", "09 Rendering", "10 Titles/snippets", "11 Structured data", "12 Media", "16 Content overlap", "17 AI search" ], "specific_prompt": "Use breadcrumb/context, specific H1 and deck, author/date/source context where relevant, readable measure, strong heading hierarchy, useful inline figures/links and a restrained TOC for long pieces. Keep core content server-rendered and add related/next guidance only when contextually useful.", "surface": "public", "copy_label": "Copy full prompt" }, { "id": "13-02-guide-hub", "category_number": "13", "category": "Content & Editorial", "title": "Guide hub", "summary": "A hub that helps readers choose the right chapter or tool.", "use_when": "A guide contains many related chapters.", "avoid_when": "Every link would be dumped into one undifferentiated list.", "uiux_rules": [ "01 Purpose", "02 Hierarchy", "03 Space", "10 Chunking", "14 Accessibility", "16 Sequence" ], "seo_checks": [ "02 Crawlability", "07 XML sitemap", "08 Site architecture", "09 Rendering", "10 Titles/snippets", "11 Structured data", "12 Media", "16 Content overlap", "17 AI search" ], "specific_prompt": "Use one orientation statement, a quick self-audit, grouped chapter directory, group summaries and a suggested starting path. Keep the numbered editorial language of the Journal, make every chapter reachable by normal links and describe each by the decision it helps with.", "surface": "public", "copy_label": "Copy full prompt" }, { "id": "13-03-chapter-field-guide", "category_number": "13", "category": "Content & Editorial", "title": "Chapter field guide", "summary": "A repeatable chapter format built around evidence, failure, correction and test.", "use_when": "Each topic benefits from a consistent working method.", "avoid_when": "A generic blog template would flatten the method.", "uiux_rules": [ "01 Purpose", "02 Hierarchy", "03 Space", "10 Chunking", "14 Accessibility", "16 Sequence" ], "seo_checks": [ "02 Crawlability", "07 XML sitemap", "08 Site architecture", "09 Rendering", "10 Titles/snippets", "11 Structured data", "12 Media", "16 Content overlap", "17 AI search" ], "specific_prompt": "Structure around cold open, definition/expected state, why it matters, failure scenario, evidence/examples, applied correction, practical field test, role guidance where relevant, copyable AI prompt, FAQ, source trail and related chapter navigation.", "surface": "public", "copy_label": "Copy full prompt" }, { "id": "13-04-resource-library", "category_number": "13", "category": "Content & Editorial", "title": "Resource library", "summary": "A searchable/filterable collection of useful resources with strong metadata.", "use_when": "Templates, tools, downloads or references need browsing.", "avoid_when": "Every resource would be treated as the same type.", "uiux_rules": [ "01 Purpose", "02 Hierarchy", "03 Space", "10 Chunking", "14 Accessibility", "16 Sequence" ], "seo_checks": [ "02 Crawlability", "07 XML sitemap", "08 Site architecture", "09 Rendering", "10 Titles/snippets", "11 Structured data", "12 Media", "16 Content overlap", "17 AI search" ], "specific_prompt": "Render resource metadata in HTML, provide search plus a small set of meaningful filters, show type/date/format where useful and a clear detail/launch action. Keep filter states from becoming accidental crawl spaces and design no-results recovery.", "surface": "public", "copy_label": "Copy full prompt" }, { "id": "13-05-changelog", "category_number": "13", "category": "Content & Editorial", "title": "Changelog", "summary": "A chronological release record that explains meaningful product changes.", "use_when": "Users need durable release communication.", "avoid_when": "Internal commit noise would be published as updates.", "uiux_rules": [ "01 Purpose", "02 Hierarchy", "03 Space", "10 Chunking", "14 Accessibility", "16 Sequence" ], "seo_checks": [ "02 Crawlability", "07 XML sitemap", "08 Site architecture", "09 Rendering", "10 Titles/snippets", "11 Structured data", "12 Media", "16 Content overlap", "17 AI search" ], "specific_prompt": "Use date/version, concise change summary, affected users/areas, visuals only when they clarify and links to docs where behavior changed. Group minor fixes, label breaking changes clearly and keep public entries durable/indexable if the product strategy calls for it.", "surface": "public", "copy_label": "Copy full prompt" }, { "id": "13-06-documentation-page", "category_number": "13", "category": "Content & Editorial", "title": "Documentation page", "summary": "Task-oriented technical/reference content with clear navigation and code handling.", "use_when": "Product docs, APIs, setup or how-to content needs reference structure.", "avoid_when": "Marketing hero treatments would interrupt task completion.", "uiux_rules": [ "01 Purpose", "02 Hierarchy", "03 Space", "10 Chunking", "14 Accessibility", "16 Sequence" ], "seo_checks": [ "02 Crawlability", "07 XML sitemap", "08 Site architecture", "09 Rendering", "10 Titles/snippets", "11 Structured data", "12 Media", "16 Content overlap", "17 AI search" ], "specific_prompt": "Use breadcrumb, task-oriented title, prerequisites, concise steps/reference, copyable code, warnings, a TOC for long content and previous/next links. Keep code keyboard-scrollable, show version/updated context when material and keep the primary content server-rendered.", "surface": "public", "copy_label": "Copy full prompt" }, { "id": "14-01-searchable-faq", "category_number": "14", "category": "Help & Support", "title": "Searchable FAQ", "summary": "A question library where search helps reach known answers quickly.", "use_when": "There are enough distinct FAQs to justify search.", "avoid_when": "Five to eight questions would fit plainly on one page.", "uiux_rules": [ "01 Purpose", "09 Choice", "10 Chunking", "12 Feedback", "13 Recovery", "14 Accessibility" ], "seo_checks": [ "08 Site architecture", "09 Rendering", "10 Titles/snippets", "15 Mobile/accessibility", "17 AI search" ], "specific_prompt": "Use a labeled search field, result count, optional category shortcuts and user-language questions. Keep answers in HTML via direct content/disclosure, provide no-results recovery plus support escalation and avoid schema claims that do not match visible content.", "surface": "public", "copy_label": "Copy full prompt" }, { "id": "14-02-support-hub", "category_number": "14", "category": "Help & Support", "title": "Support hub", "summary": "A central place to choose the right support path.", "use_when": "Users have docs, status, account and human-support options.", "avoid_when": "Channels would be presented without useful prioritization or expectations.", "uiux_rules": [ "01 Purpose", "09 Choice", "10 Chunking", "12 Feedback", "13 Recovery", "14 Accessibility" ], "seo_checks": [ "08 Site architecture", "09 Rendering", "10 Titles/snippets", "15 Mobile/accessibility", "17 AI search" ], "specific_prompt": "Start with problem search/common tasks, then separate self-service docs, billing/account help, system status and human contact. Prioritize frequent or urgent paths instead of equal cards, and show response expectations only when factual.", "surface": "public", "copy_label": "Copy full prompt" }, { "id": "14-03-contact-support-form", "category_number": "14", "category": "Help & Support", "title": "Contact support form", "summary": "A structured request that collects enough context without burdening the user.", "use_when": "Human support needs reproducible context.", "avoid_when": "Users would have to retype information the system already knows.", "uiux_rules": [ "01 Purpose", "09 Choice", "10 Chunking", "12 Feedback", "13 Recovery", "14 Accessibility" ], "seo_checks": [ "08 Site architecture", "09 Rendering", "10 Titles/snippets", "15 Mobile/accessibility", "17 AI search" ], "specific_prompt": "Pre-fill safe known context, ask for issue category, concise description, optional attachments and impact only when routing uses it. Explain sensitive-data rules, preserve form state on failure and show the next step/ticket reference only when the backend truly creates it.", "surface": "public", "copy_label": "Copy full prompt" }, { "id": "14-04-status-and-incident-page", "category_number": "14", "category": "Help & Support", "title": "Status and incident page", "summary": "A truthful operational view with current status and incident history.", "use_when": "Users depend on systems whose availability matters.", "avoid_when": "Green status would be placeholder or unsupported.", "uiux_rules": [ "01 Purpose", "09 Choice", "10 Chunking", "12 Feedback", "13 Recovery", "14 Accessibility" ], "seo_checks": [ "08 Site architecture", "09 Rendering", "10 Titles/snippets", "15 Mobile/accessibility", "17 AI search" ], "specific_prompt": "Show component status, timestamp, active incidents first, chronological incident updates and recent history. Define status language, keep the page lightweight under degraded conditions and never claim operational status from dummy data.", "surface": "public", "copy_label": "Copy full prompt" }, { "id": "14-05-contextual-help-drawer", "category_number": "14", "category": "Help & Support", "title": "Contextual help drawer", "summary": "In-product help that preserves the current task.", "use_when": "Complex workflows need explanation without navigation away.", "avoid_when": "The drawer would be a generic knowledge-base dump.", "uiux_rules": [ "01 Purpose", "09 Choice", "10 Chunking", "12 Feedback", "13 Recovery", "14 Accessibility" ], "seo_checks": [ "08 Site architecture", "09 Rendering", "10 Titles/snippets", "15 Mobile/accessibility", "17 AI search" ], "specific_prompt": "Open from a labeled trigger and tailor content to the current screen/task. Include concise guidance, relevant links and escalation, preserve underlying state, manage focus/Escape correctly and use a full-height sheet on small screens when needed.", "surface": "public", "copy_label": "Copy full prompt" }, { "id": "14-06-escalation-path", "category_number": "14", "category": "Help & Support", "title": "Escalation path", "summary": "A support state that carries unresolved context to a human or higher tier.", "use_when": "Self-service can be exhausted without resolution.", "avoid_when": "Users would be sent in loops or forced to repeat everything.", "uiux_rules": [ "01 Purpose", "09 Choice", "10 Chunking", "12 Feedback", "13 Recovery", "14 Accessibility" ], "seo_checks": [ "08 Site architecture", "09 Rendering", "10 Titles/snippets", "15 Mobile/accessibility", "17 AI search" ], "specific_prompt": "Acknowledge what was already tried, carry relevant context forward, explain what happens next and offer the real available channel(s). Preserve attachments/diagnostics safely and avoid repeating troubleshooting the product already recorded.", "surface": "public", "copy_label": "Copy full prompt" }, { "id": "15-01-account-settings", "category_number": "15", "category": "Settings & Account", "title": "Account settings", "summary": "Identity, sign-in, security and personal account preferences.", "use_when": "Users manage account-owned settings.", "avoid_when": "Workspace/admin settings would be mixed into one flat page.", "uiux_rules": [ "05 Proximity", "06 Consistency", "09 Choice", "11 Disclosure", "12 Feedback", "13 Recovery", "17 Trust" ], "seo_checks": [ "09 Rendering", "15 Mobile/accessibility" ], "specific_prompt": "Group identity/profile, sign-in/security, personal preferences and account export/delete where applicable. Use consistent save/autosave behavior, separate destructive controls into a danger zone and show verification state without exposing secrets.", "surface": "product", "copy_label": "Copy full prompt" }, { "id": "15-02-profile-editor", "category_number": "15", "category": "Settings & Account", "title": "Profile editor", "summary": "Profile editing with clear visibility expectations.", "use_when": "User-facing profile data can be changed.", "avoid_when": "Fields would be collected without product use.", "uiux_rules": [ "05 Proximity", "06 Consistency", "09 Choice", "11 Disclosure", "12 Feedback", "13 Recovery", "17 Trust" ], "seo_checks": [ "09 Rendering", "15 Mobile/accessibility" ], "specific_prompt": "Group identity/contact/public fields, clearly label visibility, handle media upload/validation and preview only when a real rendered profile exists. Explain immutable/org-controlled fields, preserve values on errors and announce successful saves.", "surface": "product", "copy_label": "Copy full prompt" }, { "id": "15-03-workspace-and-team-management", "category_number": "15", "category": "Settings & Account", "title": "Workspace and team management", "summary": "Member, role, invitation and workspace administration.", "use_when": "A multi-user product needs team controls.", "avoid_when": "Permission consequences would be hidden.", "uiux_rules": [ "05 Proximity", "06 Consistency", "09 Choice", "11 Disclosure", "12 Feedback", "13 Recovery", "17 Trust" ], "seo_checks": [ "09 Rendering", "15 Mobile/accessibility" ], "specific_prompt": "Use a member list/table, role labels, pending invitations, invite flow, meaningful role-change confirmation and remove-member safeguards. Explain disabled actions, and keep owner transfer/workspace deletion distinctly separated and strongly confirmed.", "surface": "product", "copy_label": "Copy full prompt" }, { "id": "15-04-billing-settings", "category_number": "15", "category": "Settings & Account", "title": "Billing settings", "summary": "Current plan, payment, invoices and plan-change consequences.", "use_when": "Users manage subscriptions or billing records.", "avoid_when": "Cancellation or renewal terms would be buried.", "uiux_rules": [ "05 Proximity", "06 Consistency", "09 Choice", "11 Disclosure", "12 Feedback", "13 Recovery", "17 Trust" ], "seo_checks": [ "09 Rendering", "15 Mobile/accessibility" ], "specific_prompt": "Show current plan/renewal date, payment summary, billing contact, invoices, upgrade/downgrade and cancellation terms. Explain what changes now versus next cycle and delegate sensitive card handling to trusted providers.", "surface": "product", "copy_label": "Copy full prompt" }, { "id": "15-05-notification-preferences", "category_number": "15", "category": "Settings & Account", "title": "Notification preferences", "summary": "A manageable matrix of event and channel controls.", "use_when": "Users need control over multiple notifications.", "avoid_when": "Dozens of unlabeled toggles would overwhelm choice.", "uiux_rules": [ "05 Proximity", "06 Consistency", "09 Choice", "11 Disclosure", "12 Feedback", "13 Recovery", "17 Trust" ], "seo_checks": [ "09 Rendering", "15 Mobile/accessibility" ], "specific_prompt": "Group by event meaning, then channel if necessary, state defaults and required service notifications, use master controls only when scope is clear and save predictably. Confirm only high-impact mute-all choices.", "surface": "product", "copy_label": "Copy full prompt" }, { "id": "15-06-integrations-and-api-access", "category_number": "15", "category": "Settings & Account", "title": "Integrations and API access", "summary": "Connected services, webhooks and credentials with safe lifecycle controls.", "use_when": "The product exposes external integrations or API access.", "avoid_when": "Full secrets would remain visible or permissions unclear.", "uiux_rules": [ "05 Proximity", "06 Consistency", "09 Choice", "11 Disclosure", "12 Feedback", "13 Recovery", "17 Trust" ], "seo_checks": [ "09 Rendering", "15 Mobile/accessibility" ], "specific_prompt": "Show connection status, scopes, last activity where available and connect/reconnect/disconnect actions. For keys, reveal once at creation then mask, support rename/revoke/rotation and separate credentials from logs/webhooks when complexity warrants.", "surface": "product", "copy_label": "Copy full prompt" }, { "id": "16-01-loading-state", "category_number": "16", "category": "States & Recovery", "title": "Loading state", "summary": "Progress feedback that does not fake certainty.", "use_when": "Content/actions are asynchronous.", "avoid_when": "Skeleton shimmer would add noise to near-instant or unpredictable work.", "uiux_rules": [ "04 Contrast", "05 Proximity", "12 Feedback", "13 Recovery", "14 Accessibility" ], "seo_checks": [ "04 Honest status", "09 Rendering", "14 Core Web Vitals", "15 Mobile/accessibility" ], "specific_prompt": "Mirror expected content only when it preserves continuity, change triggering controls immediately, prevent duplicate execution and use measurable progress only when truly measurable. Provide meaningful text for long operations and respect reduced motion.", "surface": "product", "copy_label": "Copy full prompt" }, { "id": "16-02-empty-state", "category_number": "16", "category": "States & Recovery", "title": "Empty state", "summary": "A useful zero-data/first-use state that explains what belongs here.", "use_when": "A list, dashboard or project can legitimately be empty.", "avoid_when": "A generic illustration would replace instruction.", "uiux_rules": [ "04 Contrast", "05 Proximity", "12 Feedback", "13 Recovery", "14 Accessibility" ], "seo_checks": [ "04 Honest status", "09 Rendering", "14 Core Web Vitals", "15 Mobile/accessibility" ], "specific_prompt": "State what the area contains, why it is empty in this context and the most useful next action. Distinguish first-use empty from filtered no-results and never use zero charts that imply measurement exists.", "surface": "product", "copy_label": "Copy full prompt" }, { "id": "16-03-recoverable-error", "category_number": "16", "category": "States & Recovery", "title": "Recoverable error", "summary": "An error that preserves work and offers a concrete next move.", "use_when": "Network, validation, permission or server failures can occur.", "avoid_when": "'Something went wrong' would be the only message.", "uiux_rules": [ "04 Contrast", "05 Proximity", "12 Feedback", "13 Recovery", "14 Accessibility" ], "seo_checks": [ "04 Honest status", "09 Rendering", "14 Core Web Vitals", "15 Mobile/accessibility" ], "specific_prompt": "Identify the affected action/region, preserve valid work, provide retry/edit/back as appropriate and include support/reference information only when useful. Keep technical details secondary, announce accessibly and return focus to the relevant region.", "surface": "product", "copy_label": "Copy full prompt" }, { "id": "16-04-success-confirmation", "category_number": "16", "category": "States & Recovery", "title": "Success confirmation", "summary": "Confirmation proportional to the completed action.", "use_when": "Create, update, upload, purchase or submission needs clear closure.", "avoid_when": "Routine actions would get distracting celebration.", "uiux_rules": [ "04 Contrast", "05 Proximity", "12 Feedback", "13 Recovery", "14 Accessibility" ], "seo_checks": [ "04 Honest status", "09 Rendering", "14 Core Web Vitals", "15 Mobile/accessibility" ], "specific_prompt": "Name the completed action/object, show relevant resulting state or receipt/reference and offer the next logical action. Do not clear or navigate before the user can understand the outcome.", "surface": "product", "copy_label": "Copy full prompt" }, { "id": "16-05-offline-and-retry", "category_number": "16", "category": "States & Recovery", "title": "Offline and retry", "summary": "Connectivity loss with preserved local work and synchronization clarity.", "use_when": "Users may work on unstable networks.", "avoid_when": "The product cannot truly queue or preserve offline actions.", "uiux_rules": [ "04 Contrast", "05 Proximity", "12 Feedback", "13 Recovery", "14 Accessibility" ], "seo_checks": [ "04 Honest status", "09 Rendering", "14 Core Web Vitals", "15 Mobile/accessibility" ], "specific_prompt": "Show a persistent but nonblocking connection state, distinguish saved locally from synced, preserve unsent work where supported, retry on reconnect and handle conflicts. If offline is unsupported, disable affected actions with explanation rather than letting them fail silently.", "surface": "product", "copy_label": "Copy full prompt" }, { "id": "16-06-permission-or-locked-state", "category_number": "16", "category": "States & Recovery", "title": "Permission or locked state", "summary": "Explain unavailable content/action and the path to legitimate access.", "use_when": "Roles, approvals, feature gates or locks restrict a resource.", "avoid_when": "Sensitive authorization details would be exposed.", "uiux_rules": [ "04 Contrast", "05 Proximity", "12 Feedback", "13 Recovery", "14 Accessibility" ], "seo_checks": [ "04 Honest status", "09 Rendering", "14 Core Web Vitals", "15 Mobile/accessibility" ], "specific_prompt": "State what is unavailable, why at the appropriate level, who/what can grant access and the safe next action. Distinguish security permission from paid upgrade and keep navigation to accessible areas obvious.", "surface": "product", "copy_label": "Copy full prompt" }, { "id": "17-01-responsive-landing-page", "category_number": "17", "category": "Mobile & Responsive", "title": "Responsive landing page", "summary": "A marketing page whose hierarchy and evidence survive narrow screens.", "use_when": "A desktop public page must work on phones/tablets.", "avoid_when": "Responsive work would be proportional shrinking.", "uiux_rules": [ "03 Space", "05 Proximity", "08 Reach", "14 Accessibility", "15 Responsive" ], "seo_checks": [ "09 Rendering", "14 Core Web Vitals", "15 Mobile/accessibility" ], "specific_prompt": "Keep offer/H1/primary CTA first, move supporting media after the core message, reduce simultaneous columns, keep proof beside the relevant doubt and remove decorative complexity. Verify reading width, thumb reach, long headings and text zoom.", "surface": "product", "copy_label": "Copy full prompt" }, { "id": "17-02-mobile-navigation-transformation", "category_number": "17", "category": "Mobile & Responsive", "title": "Mobile navigation transformation", "summary": "A deliberate mobile IA instead of a squeezed desktop header.", "use_when": "Desktop navigation has multiple destinations/groups.", "avoid_when": "Core destinations would become a tiny horizontal scroll.", "uiux_rules": [ "03 Space", "05 Proximity", "08 Reach", "14 Accessibility", "15 Responsive" ], "seo_checks": [ "09 Rendering", "14 Core Web Vitals", "15 Mobile/accessibility" ], "specific_prompt": "Transform into an accessible menu or bottom nav based on hierarchy/frequency, preserve labels/current location/primary action, manage focus/body scroll correctly and restore focus after close. Respect safe areas and virtual keyboards.", "surface": "product", "copy_label": "Copy full prompt" }, { "id": "17-03-mobile-sticky-action", "category_number": "17", "category": "Mobile & Responsive", "title": "Mobile sticky action", "summary": "A persistent mobile primary action only while it remains relevant.", "use_when": "Checkout, booking or long forms benefit from reachable completion.", "avoid_when": "A sticky bar would cover content or repeat an irrelevant CTA.", "uiux_rules": [ "03 Space", "05 Proximity", "08 Reach", "14 Accessibility", "15 Responsive" ], "seo_checks": [ "09 Rendering", "14 Core Web Vitals", "15 Mobile/accessibility" ], "specific_prompt": "Keep the action valid through scroll, include price/status summary only when needed, respect safe areas/keyboard and hide/transform when the underlying action is already visible or invalid.", "surface": "product", "copy_label": "Copy full prompt" }, { "id": "17-04-table-to-mobile-strategy", "category_number": "17", "category": "Mobile & Responsive", "title": "Table-to-mobile strategy", "summary": "Intentional preservation of tabular meaning on phones.", "use_when": "A data table must remain usable at narrow widths.", "avoid_when": "Every cell would be stacked into huge cards.", "uiux_rules": [ "03 Space", "05 Proximity", "08 Reach", "14 Accessibility", "15 Responsive" ], "seo_checks": [ "09 Rendering", "14 Core Web Vitals", "15 Mobile/accessibility" ], "specific_prompt": "Prioritize columns by task, keep identifier/status visible and choose horizontal scroll, expandable details or compact records based on comparison needs. Preserve semantic headers and keep sorting/filtering reachable.", "surface": "product", "copy_label": "Copy full prompt" }, { "id": "17-05-mobile-form-and-keyboard", "category_number": "17", "category": "Mobile & Responsive", "title": "Mobile form and keyboard", "summary": "Forms designed for touch, autofill and virtual-keyboard behavior.", "use_when": "Forms are expected to be completed on phones.", "avoid_when": "Fixed controls or wrong input types would fight the keyboard.", "uiux_rules": [ "03 Space", "05 Proximity", "08 Reach", "14 Accessibility", "15 Responsive" ], "seo_checks": [ "09 Rendering", "14 Core Web Vitals", "15 Mobile/accessibility" ], "specific_prompt": "Use appropriate input types/autocomplete, sufficient targets, visible labels, logical field order and keyboard-aware scroll-to-error. Keep submit reachable without covering fields and verify narrow widths, landscape and zoom.", "surface": "product", "copy_label": "Copy full prompt" }, { "id": "17-06-modal-to-drawer-transformation", "category_number": "17", "category": "Mobile & Responsive", "title": "Modal-to-drawer transformation", "summary": "Choose an overlay container appropriate to available space.", "use_when": "Desktop dialogs become cramped on mobile.", "avoid_when": "Every mobile overlay would become full-screen without need.", "uiux_rules": [ "03 Space", "05 Proximity", "08 Reach", "14 Accessibility", "15 Responsive" ], "seo_checks": [ "09 Rendering", "14 Core Web Vitals", "15 Mobile/accessibility" ], "specific_prompt": "Use centered modal on larger screens only for focused interruption; convert to sheet/drawer on narrow screens where reach/space improve. Preserve semantics, focus, close/cancel, unsaved-change protection and action hierarchy across forms.", "surface": "product", "copy_label": "Copy full prompt" }, { "id": "18-01-contextual-cta-section", "category_number": "18", "category": "Utility & Completion", "title": "Contextual CTA section", "summary": "A closing action that resolves the page rather than repeating the hero.", "use_when": "A long page needs a final decision point after evidence.", "avoid_when": "A generic 'Ready to get started?' banner would add nothing.", "uiux_rules": [ "01 Purpose", "02 Hierarchy", "12 Feedback", "13 Recovery", "14 Accessibility", "16 Sequence", "17 Trust" ], "seo_checks": [ "04 Status/redirects", "08 Site architecture", "09 Rendering", "15 Mobile/accessibility", "18 Monitoring/change control" ], "specific_prompt": "Reference the decision the page just helped make, restate only essential value/next step, use one primary action plus a relevant secondary path and place final trust/terms nearby when needed. Create visual resolution through spacing/hierarchy, not a random gradient.", "surface": "public", "copy_label": "Copy full prompt" }, { "id": "18-02-structured-footer", "category_number": "18", "category": "Utility & Completion", "title": "Structured footer", "summary": "Navigation, trust, legal and next-step utility without a sitemap dump.", "use_when": "A public site needs a durable footer.", "avoid_when": "The header would be copied with dozens of low-value links.", "uiux_rules": [ "01 Purpose", "02 Hierarchy", "12 Feedback", "13 Recovery", "14 Accessibility", "16 Sequence", "17 Trust" ], "seo_checks": [ "04 Status/redirects", "08 Site architecture", "09 Rendering", "15 Mobile/accessibility", "18 Monitoring/change control" ], "specific_prompt": "Use brand identity, a small set of grouped navigation links, contact/next-step information, legal/accessibility/privacy links and only real utilities such as status/newsletter. Preserve the Morten A. Giraffe 'one more move' character and keep headings/links semantic.", "surface": "public", "copy_label": "Copy full prompt" }, { "id": "18-03-404-not-found", "category_number": "18", "category": "Utility & Completion", "title": "404 not found", "summary": "A missing-page state with useful recovery and truthful protocol.", "use_when": "A route truly does not exist.", "avoid_when": "The branded page would return HTTP 200.", "uiux_rules": [ "01 Purpose", "02 Hierarchy", "12 Feedback", "13 Recovery", "14 Accessibility", "16 Sequence", "17 Trust" ], "seo_checks": [ "04 Status/redirects", "08 Site architecture", "09 Rendering", "15 Mobile/accessibility", "18 Monitoring/change control" ], "specific_prompt": "Say the page cannot be found, offer home plus 1–3 likely recovery routes/search and preserve global navigation. Keep it lightweight, return a real 404 and do not canonicalize the missing URL as valid content.", "surface": "public", "copy_label": "Copy full prompt" }, { "id": "18-04-403-access-denied", "category_number": "18", "category": "Utility & Completion", "title": "403 / access denied", "summary": "A permission error that explains access without leaking sensitive details.", "use_when": "Authenticated users lack permission to a resource.", "avoid_when": "Authorization details would reveal protected information.", "uiux_rules": [ "01 Purpose", "02 Hierarchy", "12 Feedback", "13 Recovery", "14 Accessibility", "16 Sequence", "17 Trust" ], "seo_checks": [ "04 Status/redirects", "08 Site architecture", "09 Rendering", "15 Mobile/accessibility", "18 Monitoring/change control" ], "specific_prompt": "State the resource is unavailable to this account/role, offer return/request-access/support when valid and preserve safe context. Do not reveal more than the user is allowed to know and return the correct status/behavior for the architecture.", "surface": "public", "copy_label": "Copy full prompt" }, { "id": "18-05-cookie-consent", "category_number": "18", "category": "Utility & Completion", "title": "Cookie consent", "summary": "A consent UI with real choices and truthful tracking behavior.", "use_when": "Applicable privacy requirements and actual tracking require consent.", "avoid_when": "Reject would be hidden or choices would be fake.", "uiux_rules": [ "01 Purpose", "02 Hierarchy", "12 Feedback", "13 Recovery", "14 Accessibility", "16 Sequence", "17 Trust" ], "seo_checks": [ "04 Status/redirects", "08 Site architecture", "09 Rendering", "15 Mobile/accessibility", "18 Monitoring/change control" ], "specific_prompt": "Use plain-language purpose, equally understandable accept/reject where required, granular settings only when needed and a privacy link. Do not block essential use for nonessential tracking, persist choice and ensure actual tracking follows it.", "surface": "public", "copy_label": "Copy full prompt" }, { "id": "18-06-announcement-and-release-banner", "category_number": "18", "category": "Utility & Completion", "title": "Announcement and release banner", "summary": "A temporary notice for meaningful updates without hijacking the interface.", "use_when": "Service changes, incidents, deadlines or launches need visibility.", "avoid_when": "A permanent NEW bar would advertise trivial changes.", "uiux_rules": [ "01 Purpose", "02 Hierarchy", "12 Feedback", "13 Recovery", "14 Accessibility", "16 Sequence", "17 Trust" ], "seo_checks": [ "04 Status/redirects", "08 Site architecture", "09 Rendering", "15 Mobile/accessibility", "18 Monitoring/change control" ], "specific_prompt": "Use a slim message, one optional link/action, dismiss only when safe and urgency proportional to consequence. Use semantic status/alert roles carefully and define expiration/removal so the notice cannot become permanent clutter.", "surface": "public", "copy_label": "Copy full prompt" } ] }