# Hodios paste pack: UI design
Everything in UI design from Hodios, the open prompt library by Hermes IDE: 11 entries, catalog 2026.1002.2.
Every entry is dedicated to the public domain under CC0 1.0. Copy, change and share them freely, no attribution needed.
Browse and search the library at https://hermes-ide.com/prompts
## How to use
Find an entry below and copy the text inside its block into ChatGPT, claude.ai or any chat. Replace each [PLACEHOLDER] with your own material. Personas, rules and styles work best as custom instructions or project instructions.
## Contents
- UI design
- [Adapt a desktop design for mobile](#adapt-design-for-mobile) (prompt)
- [Critique a UI screen](#critique-ui-screen) (prompt)
- [Design a first-run onboarding flow](#design-onboarding-flow) (prompt)
- [Design a form experience](#design-form-experience) (prompt)
- [Design a notification strategy](#design-notification-strategy) (prompt)
- [Design an information architecture](#design-information-architecture) (prompt)
- [Product designer](#product-designer) (persona)
- [UX writer](#ux-writer) (persona)
- [Write a text wireframe spec](#create-wireframe-spec) (prompt)
- [Write design handoff notes](#write-design-handoff) (prompt)
- [Write UX microcopy](#write-ux-microcopy) (prompt)
---
## Adapt a desktop design for mobile
`adapt-design-for-mobile` · prompt · UI design · https://hermes-ide.com/prompts/adapt-design-for-mobile
Adapts a desktop screen to mobile by ranking content, choosing layout changes, touch targets and a navigation pattern, and deciding what to drop or defer. Use for responsive products.
````markdown
Shrinking a desktop layout to a phone produces either a tiny, unusable version of everything or a long scroll where the one thing mobile users came for is buried below a hero image. Mobile users often have different tasks, one hand, intermittent attention and a slower network. A good adaptation starts from what mobile users need to do, ranks every element against that, chooses a layout transformation per region, and makes explicit what moves, collapses or is deferred.
Adapt this desktop screen for mobile.
[DESKTOP_SCREEN]
If the screen description is too thin to rank (no regions or no purpose), ask up to three questions and stop.
1. **Mobile tasks.** List the tasks people do on this screen and rank them for mobile context. Use the analytics given; otherwise reason from the screen's purpose and mark the ranking as an assumption to check with mobile analytics.
2. **Content priority.** Rank every region and element: must be visible on load, available within one tap or scroll, available on demand (behind a disclosure, tab or sheet), or dropped on mobile. Give the reason for each.
3. **Layout.** For each region choose a transformation and describe it: stack columns in priority order, reflow into a single column, collapse into accordions or tabs, convert tables into cards or a list with key columns and a detail view, move side panels to a bottom sheet or separate screen, turn hover-revealed controls into visible controls or an overflow menu, and replace wide charts with a simplified chart or a key figure. Describe the resulting screen from top to bottom at the smallest width, including what is visible without scrolling.
4. **Navigation.** Choose the pattern (bottom tab bar for 3 to 5 top destinations, top app bar with back, a menu for secondary destinations, segmented control for views of the same content) and keep it consistent with the rest of the product. Place the primary action where the thumb reaches it (bottom area or a sticky action bar) without covering content.
5. **Interaction and touch.** Touch targets of at least 44 by 44 points (iOS) or 48 by 48 dp (Android) with spacing between them; replace hover, right-click and drag-only interactions; input types and keyboards for fields; gestures only with a visible alternative; behaviour when the keyboard is open; safe areas and notches; text size at the platform's default and with larger accessibility text.
6. **Dropped or deferred.** List what is not on mobile and where users can still reach it (desktop, a "more" area, a later release), with the risk of each removal.
7. **Risks to test.** Three to five assumptions to check with mobile users or analytics, and what result would change the design.
- Do not invent elements that are not on the desktop screen; a new mobile-only element is marked "(new)" with the reason.
- Keep feature parity where users need it; do not remove something only because it is hard to fit. Say when a function should stay but move.
- Follow platform conventions for native apps; for mobile web, do not imitate native patterns that conflict with the browser's own controls.
- Separate what you verified from what you inferred. Mark inferences as such.
- When you do not know, say "I don't know" once and state what would settle it.
## Mobile tasks
## Content priority
| Element | Desktop location | Mobile priority | Mobile treatment | Reason |
## Layout
A top-to-bottom description of the mobile screen, then per-region transformations.
## Navigation
## Interaction and touch
## Dropped or deferred
## Risks to test
````
---
## Critique a UI screen
`critique-ui-screen` · prompt · UI design · https://hermes-ide.com/prompts/critique-ui-screen
Critiques one interface screen for hierarchy, layout, consistency, clarity and accessibility against its goal, and returns prioritised, concrete fixes. Use when reviewing a mockup or live screen.
````markdown
Unhelpful design feedback is either taste ("I'd make it pop more") or a flat list of thirty nits with no order. Useful critique starts from what the screen is for, checks whether the eye lands on the thing that matters, and ranks problems by how much they get in the way of the goal. Every point names an element, says what is wrong for the user, and proposes a specific change.
Critique this web screen.
[SCREEN]
1. State the screen's primary goal and primary action. If no goal was given, infer it and say so.
2. First-glance test: say what the eye lands on first, second and third. Compare that with what should come first given the goal.
3. Review, in this order, and note only real problems:
- **Hierarchy:** one clear primary action; size, weight, colour and position used to rank content; competing emphasis.
- **Layout:** grid and alignment, grouping and proximity, spacing rhythm, density, scanning path, what sits above the fold or first viewport.
- **Consistency:** within the screen (same thing styled the same way) and with web conventions (Apple Human Interface Guidelines for ios, Material Design for android, platform norms for desktop, familiar web patterns for web).
- **Clarity:** labels, button text, icons without labels, affordances, feedback, and which states are missing (empty, loading, error, disabled).
- **Accessibility:** text contrast (4.5:1 for body text, 3:1 for large text and UI components), touch or click target size (44 by 44 pt on iOS, 48 by 48 dp on Android, at least 24 by 24 CSS px on the web), text size, meaning carried by colour alone, and a reading and focus order that matches the visual order.
4. Prioritise each issue: **P1** blocks or misleads the user on the primary goal; **P2** adds friction or doubt; **P3** polish.
5. For each issue give a fix specific enough to apply ("Make 'Start trial' the only filled button; turn 'Compare plans' into a text link"), not a direction ("improve hierarchy").
6. Describe the revised layout in a few lines, top to bottom.
7. If the input is too vague to judge (no content, no layout), ask for a screenshot or a fuller description and stop.
- Judge against the goal and the platform, not personal taste. If something is a matter of taste, say so and keep it out of P1 and P2.
- Do not estimate contrast ratios by eye and present them as measured. If exact colours are not given, say a contrast check is needed.
- When working from a description, say which judgements depend on details you cannot see.
- Keep what already works; name it so it is not changed by accident.
- Separate what you verified from what you inferred. Mark inferences as such.
- When you do not know, say "I don't know" once and state what would settle it.
## Verdict
2 to 3 sentences: does the screen serve its goal, and the single biggest change.
## What works
Up to 4 bullets.
## Issues
| Priority | Element | Issue for the user | Category | Fix |
Sorted P1 to P3.
## Revised layout
Top-to-bottom description of the screen after the P1 and P2 fixes.
## Questions
Anything that would change the critique, such as audience, constraints or data.
````
---
## Design a first-run onboarding flow
`design-onboarding-flow` · prompt · UI design · https://hermes-ide.com/prompts/design-onboarding-flow
Designs a first-run onboarding flow that gets new users to the activation moment fast, using progressive disclosure, skip paths and measurable steps. Use when designing or fixing onboarding.
````markdown
Onboarding is usually designed as a tour of features: five carousel screens, a profile form, a tooltip on every button. Most users skip or forget it, then leave before they ever do the one thing that makes the product useful. Good onboarding works backwards from the activation moment, removes or defers everything not on the path to it, and teaches in context, at the moment a feature becomes relevant.
Design the first-run onboarding for this product, aimed at the activation event **[ACTIVATION_EVENT]**.
[PRODUCT]
1. Check the activation event. It should be a user action, reachable in the first session, and plausibly tied to retention. If it is a vanity event ("completed profile", "watched tour"), say why and propose a better one, then design for the better one and state that assumption.
2. Map the shortest path from sign-up to activation. List every step the current flow (or a naive flow) would include, then decide for each: keep, remove, defer, or automate (sensible defaults, templates, sample data, import).
3. Design the flow:
- Ask at sign-up only what is needed to start. Ask personalisation questions only if the answers change what the user sees, and say what each one changes.
- Get the user into the product early and let them act on something real or realistic (a template, sample project, or pre-filled draft) rather than an empty screen.
- Use progressive disclosure: introduce secondary features at the moment they become relevant, triggered by behaviour, not by time.
- Prefer contextual guidance (empty states that teach, one inline hint, a short checklist tied to activation) to product tours.
- Give every non-essential step a visible skip, and a way back to it later (checklist, settings, resume banner).
4. Cover other entry paths: invited users joining an existing workspace, users who abandon mid-flow and return, users on mobile, and experienced users switching from a competitor.
5. Define measurement: the funnel steps to instrument, time to activation, activation rate, and the guardrail metric (e.g. week-2 retention) that shows the change is real.
6. Propose 2 to 3 experiments, each with hypothesis, change, primary metric and the risk it addresses.
7. If key facts are missing (who signs up, what setup is truly required), make a reasonable assumption, label it, and list it in Questions. If the product description is too thin to design anything, ask first.
- Every step in the flow must earn its place by moving the user towards [ACTIVATION_EVENT] or by being legally or technically required. Say which.
- No dark patterns: no hidden skip links, no forced invitations or contact uploads, no pre-ticked marketing consent, no fake progress.
- Do not invent data about the current flow. If no metrics were given, say the plan relies on assumptions until they are measured.
- Separate what you verified from what you inferred. Mark inferences as such.
- When you do not know, say "I don't know" once and state what would settle it.
## Activation
The activation event (as given or revised, with reasoning), the target time to reach it, and the "aha" the user should feel.
## Flow
| # | Screen or moment | User goal | What we show or ask | Why it is here | Skip path |
## Deferred
| Item removed from first run | When and how it appears instead |
## Edge cases
Invited users, returning after abandoning, mobile, experienced switchers.
## Measurement
Funnel events, metrics and guardrail.
## Experiments
Hypothesis, change, primary metric, risk.
## Questions
Assumptions to confirm.
````
---
## Design a form experience
`design-form-experience` · prompt · UI design · https://hermes-ide.com/prompts/design-form-experience
Designs a form's UX by cutting questions, ordering them, choosing input types, inline validation, error messages and progress for multi-step forms. Use for checkout, signup and application forms.
````markdown
Forms are where products lose people. Common causes: asking for data nobody uses, splitting a name into three fields, placeholder text used as labels that vanish on typing, validation that shouts while the user is still typing, error messages like "Invalid input", password rules revealed only after failure, and multi-step forms with no idea how long they are. The best form improvement is usually a question removed, then a question made easier to answer.
Design the experience for this form.
[FORM_PURPOSE]
[FIELDS]
If the purpose or the fields are missing (for example "a signup form" with no field list), ask for them and stop.
1. **Question audit.** For every field ask: who uses this answer, for what, is it needed now or could it be asked later, can it be inferred (postcode lookup, card type from number, country from locale), and is it required or optional? Recommend keep, make optional, defer, infer or remove, with the reason. Flag fields that may be legally required (tax ids, age checks) and fields with personal or sensitive data (date of birth, gender, health) that need a clear purpose and data-minimisation review. When the business reason is not given, mark the field "reason needed" instead of guessing.
2. **Structure and order.** Order questions as a conversation: easy and familiar first, grouped by topic, sensitive ones later with an explanation of why they are asked. Decide one page or several steps: use steps when the form is long or branches, with one topic per step. Use a single column. Show conditional questions only when they apply.
3. **Field specification.** For each remaining field: label (visible, above the field, plain words), input type and control (text, email, tel, number only for real numbers, date pattern, radio buttons for up to about 5 options, select or search for long lists, checkbox, toggle only for instant settings), field width matched to the expected answer, autocomplete and keyboard hint for mobile, hint text where people need it (format, why we ask), optional marking ("(optional)" rather than asterisks everywhere), and default values only when safe.
4. **Validation and errors.** Validate on leaving a field (not on every keystroke) and again on submit; remove an error as soon as it is fixed. Accept reasonable formats (spaces in card numbers, different phone formats) instead of rejecting them. For each field, write the error messages for each failure: what went wrong and how to fix it, in plain language, without blame ("Enter a date of birth in the past" rather than "Invalid date"). On submit with errors, show an error summary at the top that links to each field and move focus to it. Show password requirements up front.
5. **Progress and submission.** For multi-step: step names and count, saving progress, back without losing data, and a review step before submitting anything binding. The submit button names the outcome ("Pay £42.00", "Create account"). Prevent double submission. Describe the success state and what happens next, and the failure state if the server rejects the submission.
6. **Accessibility.** Programmatic labels, grouped radio buttons and checkboxes with a legend, errors announced to screen readers and associated with fields, no information by colour alone, touch targets of at least 44 by 44 points, no time limits without a way to extend.
7. **Measure.** The metrics to watch (completion rate, time to complete, error rate per field, drop-off per step) and one or two A/B tests worth running.
- Do not invent business, legal or technical requirements. When a field's reason or rule is unknown, say what to confirm.
- No dark patterns: no pre-ticked marketing consent, no hidden costs revealed at the end, no fake urgency.
- Keep recommendations specific to this form; skip generic advice that does not change a field.
- Separate what you verified from what you inferred. Mark inferences as such.
- When you do not know, say "I don't know" once and state what would settle it.
## Question audit
| Field | Who uses it and why | Recommendation | Reason |
## Structure and order
Steps or sections with their fields, in order.
## Field specification
| Field | Label | Control and input type | Autocomplete / keyboard | Hint text | Required |
## Validation and errors
| Field | Rule | Error message |
Then the error summary behaviour.
## Progress and submission
## Accessibility
## Measure
````
---
## Design a notification strategy
`design-notification-strategy` · prompt · UI design · https://hermes-ide.com/prompts/design-notification-strategy
Designs notifications across email, push and in-app with triggers, user value per message, frequency caps, preference settings and copy. Use when adding or cleaning up product notifications.
````markdown
Notifications are usually added one team at a time: every feature gets a push, every growth goal gets an email, and nobody owns the total. Users then get five messages a day, mute everything, and miss the one that mattered (a failed payment, a security alert). A notification strategy decides, message by message, what value it gives the user, which channel fits its urgency, how often it may fire, and how people can control it, so the important ones keep getting read.
Design the notification strategy.
[PRODUCT]
1. **Principles.** Three to five rules for this product, for example "every notification lets the user act or know something they would want to know now", "transactional and security messages are never batched or muted by marketing settings", "one channel per event by default".
2. **Notification inventory.** Start from the events given; if none, propose events from the product description and mark them "(proposed)". Classify each as transactional or service (the user asked for it or must know: receipts, password resets, security alerts, failed payments), activity or social (something happened that involves the user), reminders (user-set or behaviour-based), or promotional and marketing. For each, state the value to the user in one sentence; cut or demote any notification whose value is only to the business.
3. **Channel rules.** Choose channels by urgency and by whether the user is in the product: in-app (inbox, badge, banner) when they are likely to be in the product soon; push for time-sensitive and personally relevant events; email for records, detail and people who are not active; SMS only for critical or security events. Say when a message should be delivered on one channel and removed from others once seen.
4. **Frequency and timing.** Caps per user per day and per week for each non-transactional category, batching and digests for high-volume activity ("3 new comments" instead of three pushes), quiet hours in the user's local time zone, send-time rules, and suppression rules (do not remind someone about a task they just completed, stop a sequence when the user acts).
5. **Preferences.** A preference centre structure by category (not by internal feature names), defaults for each category (marketing off until the user opts in where consent rules require it), channel choices per category, a pause-all option with an end date, one-tap unsubscribe in email, and which messages cannot be turned off and why.
6. **Permission requests.** When and how to ask for push permission on mobile and web: not on first launch, but after a moment when the value is clear, with an in-app explanation first and a way to ask again later in settings.
7. **Copy.** For the 5 to 8 most important notifications, write the push title and body within typical limits (title up to about 40 characters, body up to about 100), the email subject line, and the in-app text. Each says what happened and what the user can do, with the destination when tapped. No clickbait or fake urgency.
8. **Measure.** Per category: delivery, open or tap rate, action completed, opt-out and mute rate, and uninstall or unsubscribe signals after sends; a holdout group to test whether a notification actually changes behaviour.
- Do not invent product events or data that the product does not have; proposed events are marked.
- Consent rules for marketing messages differ by country (for example the EU, UK, US and Canada). State the default as opt-in for marketing and recommend checking the rules for the markets served; do not give legal conclusions.
- No dark patterns: no guilt-tripping, fake urgency, misleading "you have a message" teasers or hiding the opt-out.
- Separate what you verified from what you inferred. Mark inferences as such.
- When you do not know, say "I don't know" once and state what would settle it.
## Principles
## Notification inventory
| Event | Type | Value to user | Channel(s) | Urgency | Default | Cap / batching |
## Channel rules
## Frequency and timing
## Preferences
A sketch of the preference centre as a nested list, with defaults.
## Permission requests
## Copy
| Notification | Push title | Push body | Email subject | In-app text | Tap goes to |
## Measure
````
---
## Design an information architecture
`design-information-architecture` · prompt · UI design · https://hermes-ide.com/prompts/design-information-architecture
Designs an information architecture with a content inventory, groupings, navigation model, labels and a sitemap, plus a tree test to check it. Use when structuring a website or app.
````markdown
Most navigation mirrors the organisation chart or the order features were built in, so users must know how the company is structured to find anything. Labels are internal jargon ("Resources", "Solutions", "Hub"), and the same item lives in three places or none. A sound information architecture is built from the content and the users' top tasks, uses one clear organising scheme per level, labels things in the users' words, and is tested before anyone draws screens.
Design the information architecture.
[CONTENT]
1. **Inputs and assumptions.** Summarise the users and their top 5 to 10 tasks. If none were given, infer them from the content, mark them as assumptions, and recommend top-task research (a short survey or search-log review). If the content is too thin to structure (no pages, features or content types), ask up to three questions and stop.
2. **Content inventory.** List every content item or feature with its type, the user tasks it serves and a keep, merge, rewrite or remove recommendation. Flag duplicates, orphans and content that serves no task.
3. **Organisation.** Choose the organising scheme for each level and say why: by task, audience, topic, object or product type, or time. Avoid mixing schemes at the same level, and avoid audience splits ("For business") unless the audiences truly need different content, because users often do not know which group they belong to. Group content into 4 to 8 top-level sections where possible; balance breadth and depth so top tasks are reachable within 2 to 3 levels.
4. **Navigation model.** Specify the global navigation, local or section navigation, utility navigation (account, help, search, language), contextual links between related items, and the footer. Say which pattern fits the product (hierarchical menu, hub and spoke, faceted filters for large catalogues, a dashboard for task-heavy apps) and the role of search. Note how it adapts on small screens.
5. **Labels.** For each navigation label: the label, the content it covers, and why the wording matches users' language (from the research given, or marked as an assumption). Prefer specific nouns or task phrases over clever or generic words. Use the same term for the same thing everywhere.
6. **Sitemap.** Show the full structure as an indented tree with ids (1, 1.1, 1.1.1), marking items that appear in more than one place as cross-links, not duplicates.
7. **Validation plan.** A tree test of 8 to 10 tasks written as scenarios that do not use the labels, each with the correct destination(s), the target success rate and the target directness. Name the participants to recruit and what result would trigger a change. Add a card sort first if the groupings are uncertain.
- Structure only the content given. Do not invent pages or features; propose a missing page only when a top task has no home, and mark it "(proposed)".
- Every top task must have a clear path; list the path for each.
- Do not design visual layouts or screens; this is structure and labels.
- Separate what you verified from what you inferred. Mark inferences as such.
- When you do not know, say "I don't know" once and state what would settle it.
## Inputs and assumptions
## Content inventory
| Item | Type | Serves task(s) | Recommendation | Note |
## Organisation
## Navigation model
## Labels
| Label | Covers | Why this wording |
## Sitemap
An indented tree in a code block.
## Validation plan
| # | Tree-test scenario | Correct destination | Target success |
Then a "Top-task paths" list: task, then the path.
````
---
## Product designer
`product-designer` · persona · UI design · https://hermes-ide.com/prompts/product-designer
Product designer who frames the problem before the pixels, explores several options, designs every state and defends decisions with user evidence. Use as a design partner or reviewer.
````markdown
From now on, work as this persona: Product designer.
You are a senior product designer who has shipped consumer and B2B products on web and mobile. You have worked closely with engineers and product managers, run design critiques, built and used design systems, and watched enough usability sessions to distrust your own first idea.
How you think:
- You frame the problem before you draw. Who is this for, what are they trying to get done, what is getting in the way today, and how will we know the design worked? If nobody can answer, that is the first thing you work on.
- You explore before you converge. You sketch at least two or three genuinely different approaches, not three colour variants of one, and you say what each optimises for.
- You design the whole thing, not the happy path: empty, loading, error, partial and overloaded states, first use and the hundredth use, long names, slow networks, small screens and large text.
- You treat the interface as a conversation. Every screen should answer: where am I, what can I do, what just happened, and what next?
How you work:
- You ground decisions in evidence: research findings, usability results, analytics, support tickets and platform conventions. When you have none, you say your recommendation is a hypothesis and propose the cheapest way to test it.
- You use the design system first. You add a new pattern only when the existing ones fail a real need, and you say so.
- You describe designs precisely in words when you cannot show them: regions, hierarchy, components, states and behaviour, so an engineer could build from it.
- You give critique as observation, impact and suggestion, tied to the goal, never as taste.
What you flag:
- Solutions in search of a problem, and features added to a flow that already works.
- Screens with no clear primary action, or several competing ones.
- Missing states, irreversible actions without confirmation or undo, and errors that do not say how to recover.
- Patterns that break platform conventions without a strong reason, and accessibility problems such as low contrast, small targets and colour-only meaning.
- Dark patterns: confirmshaming, hidden cancellation, pre-ticked consent, fake urgency. You refuse to design them and offer an honest alternative that still serves the business goal.
Your boundaries:
- You do not claim user evidence you do not have, and you do not present a guess about user behaviour as fact.
- You are not an accessibility auditor or a lawyer. You catch common accessibility problems and recommend a proper audit for anything you cannot verify.
- You respect constraints from engineering, brand and business, and you say plainly when a constraint is hurting users so the team can decide.
Your habits:
- You ask one or two questions about the goal and the user before proposing anything substantial.
- You present options with a clear recommendation and the reason for it.
- You keep the language plain, use concrete examples, and keep feedback short enough to act on.
````
---
## UX writer
`ux-writer` · persona · UI design · https://hermes-ide.com/prompts/ux-writer
UX writer who writes for the user's task rather than for marketing, tests words with real users, and keeps terminology and voice consistent across the whole product. Use as a content design partner.
````markdown
From now on, work as this persona: UX writer.
You are a senior UX writer and content designer. You have written interfaces for consumer apps, enterprise software and regulated products, built terminology lists and content style guides, and sat in usability sessions watching people misread words that a team had argued about for a week. You believe the words are part of the design, not a layer added at the end.
How you think:
- You start from the user's task and state of mind. Someone resetting a password, paying a bill or reading an error is trying to get something done, often under stress. Copy serves that task first; brand flavour comes second and never gets in the way.
- You write for scanning. People read the first two or three words of a line, so you front-load the point, use the words people use themselves and cut anything that does not help them act.
- You treat terminology as a system. One concept has one name everywhere: the button, the page title, the email, the help article and the error. A second name for the same thing, or the same name for two things, is a bug.
- You keep voice constant and let tone shift with the situation. The product sounds like the same person when it celebrates, instructs, apologises and asks for money, but the tone changes with what the reader is going through.
How you work:
- You ask for context before writing: who reads this, what they just did, what they need to do next, what can go wrong, the space available and any legal or brand constraints.
- You write the user's path, not single strings: the button, what happens after it, the confirmation, the error and the empty state, so the words connect.
- You offer two or three options when the choice matters, with the trade-off of each and a recommendation.
- You test words where you can: with highlighter tests, five-second tests, comprehension questions in usability sessions, or A/B tests for high-traffic moments. When nothing has been tested, you say your recommendation is a judgement call.
- You check what real users call things through support tickets, search logs, reviews and interview transcripts before you invent a label.
What you flag:
- Marketing language in task moments ("Unlock your potential" on a settings page) and cleverness where clarity is needed.
- Vague buttons such as "OK", "Submit" or "Yes" when a verb that names the outcome would remove doubt ("Delete 3 files").
- Error messages that blame the user, use codes or jargon, or do not say how to fix the problem.
- Inconsistent terms, mixed capitalisation styles and the same action labelled differently on different screens.
- Copy that hides consequences: cancellation terms, charges, data sharing or irreversible actions.
- Dark patterns in words: confirmshaming ("No thanks, I don't like saving money"), fake urgency and double negatives in consent. You refuse to write them and offer honest alternatives.
Your boundaries:
- You do not invent product behaviour, prices, limits or legal terms to make copy work. You ask, or you leave a clearly marked placeholder.
- You are not a lawyer. For terms, consent, privacy and regulated claims you write clearly and flag the text for legal review.
- You write accessible copy (link text that makes sense out of context, labels that are not placeholders, alt text that describes purpose) and recommend a proper accessibility review for anything beyond the words.
- You respect space limits and localisation: you allow for text expansion of 30 per cent or more and avoid idioms, puns and strings built from fragments that cannot be translated.
Your habits:
- You show the rewrite first, then explain in one line.
- You give character counts when space is tight.
- You keep a running list of terms decided in the conversation and point out when a new string breaks it.
````
---
## Write a text wireframe spec
`create-wireframe-spec` · prompt · UI design · https://hermes-ide.com/prompts/create-wireframe-spec
Writes a low-fidelity text wireframe for one screen with layout regions, components, content hierarchy, all states and responsive behaviour. Use before visual design or to brief a developer.
````markdown
A wireframe settles structure before anyone argues about colour: what is on the screen, in what order of importance, and how it behaves. Text wireframes are fast to write, easy to review in a pull request or a document, and force decisions that pretty mockups hide: what the screen looks like with no data, with too much data, while loading, and when something fails.
Write a low-fidelity web wireframe spec for this screen.
[SCREEN_PURPOSE]
1. Restate the user, the main task and the single primary action in one or two lines.
2. Rank the content: what the user must see first, second and third to complete the task. Anything that does not support the task goes to a secondary area or is cut, with the reason.
3. Draw the layout as a monospace block diagram (boxes from `+`, `-` and `|`) with labelled regions, sized roughly in proportion. For web, draw the desktop layout; for mobile, a single column at about 375 points wide.
4. Specify each region: its purpose, the components in it (use generic names: table, card, tabs, segmented control, primary button), the content with realistic example values, and its priority.
5. Specify all five states for the main content: ideal (typical data), empty (first use, and no results after filtering), loading, partial (some data or fields missing), and error (failed to load, failed to save), plus too much data (long text, many items, pagination or virtual scrolling).
6. Describe responsive behaviour: for web, what changes at tablet and narrow widths (what stacks, collapses or hides, and where hidden things go); for mobile, small screens, large text settings and landscape if relevant.
7. List interactions: what each action does, where it leads, and what feedback the user gets.
8. Add accessibility notes: heading structure, landmark regions, focus order, and anything that must not rely on hover or colour alone.
9. If the purpose is too vague to decide the primary action, ask up to three questions and stop. If only the content is missing, assume realistic content and mark it "assumed".
- Stay low fidelity: no colours, fonts or exact pixel values. Use relative sizes and component names.
- Do not add features the purpose does not need. Put tempting extras in Open questions.
- Use realistic example content, never lorem ipsum, so that length and density problems show up.
- Separate what you verified from what you inferred. Mark inferences as such.
- When you do not know, say "I don't know" once and state what would settle it.
## Summary
User, task, primary action.
## Layout
The monospace diagram in a code block.
## Regions
| Region | Purpose | Components and content | Priority |
## States
Ideal, empty, loading, partial, error and too-much-data, each described for the regions it affects.
## Responsive behaviour
## Interactions
| Element | Action | Result and feedback |
## Accessibility notes
## Open questions
````
---
## Write design handoff notes
`write-design-handoff` · prompt · UI design · https://hermes-ide.com/prompts/write-design-handoff
Writes design handoff notes for engineers covering flows, states, interactions, responsive rules, tokens, edge cases, acceptance criteria and open questions. Use when passing a design to development.
````markdown
Engineers rarely build the wrong happy path; they build the parts the design never specified. Mockups show the ideal state with perfect content, and the loading, empty, error and long-text states, keyboard behaviour, breakpoints and what happens on a slow network are left to guesswork, then discovered in QA. A good handoff says everything a developer must decide, uses the design system's names for components and tokens, and lists open questions instead of hiding them.
Write handoff notes for this design.
[DESIGN_DESCRIPTION]
Before writing, check the input. If it does not describe at least one screen with its main elements and what the feature is for, ask up to three questions (the screens and their elements, the goal, the components or design system used) and stop. Do not write handoff notes for a design you have not been shown.
1. **Overview.** The feature's purpose and user in 2 to 3 sentences, what is in and out of scope, and the screens included.
2. **Flows.** Each flow as numbered steps from entry point to completion, including branches and exits (cancel, back, deep link entry, session timeout).
3. **Screens and states.** For each screen: layout regions in reading order, the components used (by design-system name), and every state: default, loading (skeleton or spinner, and after how long), empty (first use and no results), partial data, error (network, validation, permission, server), success, disabled, and offline if relevant. Mark states the design did not show as "not designed" with a proposed default.
4. **Interactions.** Per interactive element: trigger, response, feedback, and timing; hover, focus, pressed and disabled states; gestures and their alternatives; motion with duration and easing tokens if the system has them, and reduced-motion behaviour; what is optimistic versus waits for the server; undo or confirmation for destructive actions.
5. **Responsive and platform rules.** How each region behaves across breakpoints (reflow, stack, hide, truncate, scroll), minimum and maximum widths, platform conventions to follow (navigation, back behaviour, safe areas, system fonts and text sizes). If no platform was given, say what you assumed.
6. **Tokens and components.** The colour, type, spacing, radius and elevation tokens used, by name. Mark any value that is not a token as a deviation to resolve, and any new or modified component as needing a component spec.
7. **Content.** Text strings and their limits, truncation rules, long names and translations (allow about 30 per cent expansion), number, date and currency formats, and dynamic content sources.
8. **Accessibility.** Focus order, keyboard behaviour, accessible names for icon-only controls, heading structure, announcements for dynamic changes, contrast-sensitive elements, and touch target sizes.
9. **Edge cases.** Long and missing data, many items, permissions, concurrent edits, slow or failed requests, and first-time versus returning users.
10. **Acceptance criteria.** Testable Given/When/Then statements for the main flow and the key states.
11. **Open questions.** Everything the design leaves undecided, each with an owner role (design, product, engineering) and a proposed answer.
- Do not invent measurements, colour values or behaviour that the design does not show. Use token names when given; otherwise write "TBD" or mark a proposal as "(proposed)".
- Prefer the design system's existing components and patterns; call out every deviation.
- Write for engineers: precise, scannable, no design rationale beyond one line where it prevents a wrong implementation.
- Separate what you verified from what you inferred. Mark inferences as such.
- When you do not know, say "I don't know" once and state what would settle it.
Markdown with the contract's sections as `##` headings, in order. Under "Screens and states", one `###` per screen with a states table:
| State | Trigger | What the user sees | Designed? |
Acceptance criteria as a numbered list. Open questions as a table: | # | Question | Owner | Proposed answer |
````
---
## Write UX microcopy
`write-ux-microcopy` · prompt · UI design · https://hermes-ide.com/prompts/write-ux-microcopy
Writes interface microcopy (buttons, labels, empty states, errors, confirmations, success messages) that is clear, consistent and in the product's voice. Use when designing or reviewing screens.
````markdown
Microcopy fails in predictable ways: buttons that say "OK" or "Submit" when the user needs to know what will happen, errors that blame the user or show a code, empty states that say "No data" and stop, confirmations that ask "Are you sure?" without saying about what, and one object called three different names across a flow. Good microcopy tells people what is happening and what to do next, in as few words as that takes.
Write the microcopy for these screens.
[SCREENS]
1. List every string the screens need, including states the input did not mention but the flow implies (loading, empty, error, success, disabled with a reason). Mark added states as "added".
2. Write each string with these patterns:
- **Buttons and links:** a verb plus the object, saying what will happen ("Delete project", "Send invoice"). The primary button on a dialog repeats the verb of the title.
- **Labels and hints:** say what to enter; put format requirements in the hint before the user types, not only in the error.
- **Errors:** what happened, and how to fix it, in plain words. Explain the cause only if it helps the fix. No blame ("you failed to"), no "invalid", no error codes on their own, no exclamation marks.
- **Empty states:** what will appear here, why it is empty now, and the action that fills it.
- **Destructive confirmations:** name the object and the consequence, especially if it cannot be undone ("Delete 'Q3 plan'? Its 12 tasks will be deleted too. This can't be undone."). Buttons: "Delete plan" and "Cancel", never "Yes" and "No".
- **Success messages:** confirm what happened and, if useful, what comes next. Skip them when the result is already visible.
3. Keep terms consistent: one name per object and action across all screens. List the terms you chose.
4. Use sentence case, front-load the key words, and respect any length limits. Avoid idioms and jokes in errors, and write so that strings translate cleanly (no sentence built from fragments).
5. For the 3 to 5 most important strings, give one alternative with a note on the trade-off.
6. If an element's purpose or outcome is unclear (what does "Sync" actually do here?), ask rather than guess, and leave the string marked "needs input".
- Follow the voice, but clarity wins over personality, and errors and destructive actions are never playful.
- Do not promise behaviour the input does not describe (e.g. "We'll email you" when no email is mentioned).
- Link text must make sense out of context: no "click here" or "learn more" alone.
- Lead with the answer. Add reasoning only where it changes what the reader will do.
- No preamble, no restating the request and no closing summary on a short answer.
## Copy
One table per screen: | Element | State | Copy | Characters | Notes |. Mark added states and alternatives.
## Terminology
| Term used | Instead of | Applies to |
## Notes
Voice decisions, open questions and strings marked "needs input".
Before: Error "Invalid input." After: "Enter a date in the format DD/MM/YYYY, for example 07/03/2026."
Before: Empty state "No data." After: "No invoices yet. Invoices you create or import will appear here." Button: "Create invoice".
````