Design Communication & Image Prompting
Chinese description → structured English prompt
Turn the Chinese description below into an English image-generation prompt. Structure: subject and action → materials and environment → style → lighting → composition and camera → aspect-ratio parameter (--ar). Requirements: be specific enough that it can actually be drawn; do not use words like 'beautiful' or 'premium feel'.
[Chinese description]
Design Communication & Image Prompting
Find usability problems instead of debating whether it looks good
Here is my UI design description: [description]. Review it from a usability perspective and list the problems: 1) Is the information hierarchy clear — what does the user see first? 2) Can the primary action be found easily? 3) Where does the user have to recall or guess? 4) How should the empty, error, and loading states each be designed? Do not comment on whether the color scheme looks good.
Design Communication & Image Prompting
The developer who picks it up should not need to ask you anything
Turn the requirement below into a design spec (no code). Include: 1) The actions the user must complete, in order; 2) The UI elements and states at each step; 3) Exceptions and edge cases; 4) What not to do (explicit exclusions); 5) Acceptance criteria.
[requirement]
Design Communication & Image Prompting
Translate 'I want it to feel premium' into executable requirements
I need to create [thing] and brief a designer, but I don't know design terminology. Write me a visual brief: 1) What this design is for and who it is for; 2) The feeling I want to convey (3 adjectives + concrete references); 3) Elements that must appear; 4) Elements that must never appear; 5) Deliverables list and sizes.
Design Communication & Image Prompting
Turn an image you like into a reproducible prompt, not just a saved link
This is a reference image I found: [image description, or attach the image]. Reverse-engineer a prompt that could reproduce this style: 1) Break down the composition — subject and materials, light direction and color temperature, lens and depth of field, where the visual weight sits; 2) Extract style cues — brushwork or texture, the closest genre and medium, traces of post-processing; 3) Write one English prompt in the order subject → environment → style → lighting → camera → parameters; 4) List the 3 features most likely to come out wrong, with matching negative prompts; 5) Give an acceptance checklist: which features must be present for the result to count as a successful reproduction. Do not just stack adjectives.
Design Communication & Image Prompting
Not hex codes — a palette you can derive and adjust
I need a color scheme for [product/page], but I don't want to just receive a few hex codes. Give me a scheme I can derive: 1) First rank the goals the colors must serve (readability, mood, brand recognition) and explain the ranking; 2) Explain why the primary color is that hue, and on what basis; 3) Give the logic of the neutral scale — how much lightness separates background, card, divider, and secondary text; 4) Set a usage quota for the accent color: at most how many appearances per screen, and only on which elements; 5) Give the adjustment rules for switching to dark mode. Do not use unactionable terms like 'premium gray'.
Design Communication & Image Prompting
What the interface should say when there is no data or loading fails
Write the empty-state and error-state copy for [page/feature], across five scenarios: 1) First use, no data yet; 2) No results after filtering; 3) Failed but retryable; 4) No permission; 5) Network down. For each scenario give three things: main copy (within 12 words, saying what happened), a supporting line (why it happened, and what to do next), and a button label (starting with a verb). Rules: don't blame the user, don't say 'Something went wrong' — it carries no information, no cutesy tone, no exclamation marks. At the end, mark which scenarios can share one set of copy.
Design Communication & Image Prompting
Count how much a user has to remember and decide on one form
Here is my form design: [field list and grouping]. Review it for cognitive load: 1) Count how many pieces of information the user must hold at once, and point out where that exceeds 3; 2) Which fields can be deferred, merged, or filled in by the system; 3) Which choices require looking something up elsewhere before they can be answered; 4) When do validation errors appear, and would they wipe out what has already been entered; 5) Reclassify the fields as required / can be added later / can be removed. Finally, give a trimmed field order and say what replaces each removed field.
Design Communication & Image Prompting
Turn 'young, professional, warm' into sentences you can make tradeoffs with
Our brand tone is: [3 adjectives + a short description]. Turn it into 4 design principles. Each one must: 1) Be a sentence usable for making tradeoffs, e.g. 'Better to drop one entry point than to make the primary action something users have to hunt for'; 2) Come with one good example and one counterexample, down to UI elements; 3) Name which other principle it conflicts with, and which one wins; 4) Describe how it is most likely to be misused. Do not output a list of adjectives, and do not write 'user-centered' or anything else that applies to every product.
Design Communication & Image Prompting
Find the icons whose stroke width, corner radius, or visual weight does not match
These are the icons used in my interface: [icon list or screenshot]. Check them for consistency: 1) Is stroke width uniform — how many pixels does it differ by when scaled to the same size; 2) Are corner radii and line caps handled the same way; 3) Is visual weight balanced — which icon looks too heavy or too light at the same size; 4) Are the metaphors consistent, or is one concept drawn two ways; 5) Name the 2–3 that must be redrawn, and give the specs for redrawing (canvas, stroke width, corner radius, negative space). Do not judge whether the icons look good.
Design Communication & Image Prompting
Write spacing, type size, and hierarchy so developers do not have to guess
Turn this design into specs a developer can use directly: [design description or screenshot]. Requirements: 1) Define a spacing scale (e.g. 4/8/12/16/24/32) and state which steps this page actually uses; 2) By section, list the outer margin, section gap, element padding, and the gap between text and icons; 3) Specify the hierarchy of font size, line height, and weight, plus which text may wrap and how it aligns after wrapping; 4) Mark which values must be exact and which can be flexible; 5) Give the values for narrow screens. Do not just say 'keep spacing consistent'.
Design Communication & Image Prompting
Extract what to change from a pile of complaints — and what not to act on
Here is the raw user feedback: [paste feedback]. Turn it into a design change list: 1) First merge it into no more than 6 problem categories, each with an occurrence count; 2) Separate what users say from what they actually run into — mark which are wording problems and which are flow problems; 3) Give one change action per item and note whether it changes the UI, the flow, or the copy; 4) Sort by 'people affected × cost of the fix'; 5) List which suggestions should not be followed, and why. Do not treat feedback as requirements, and do not rank something first just because it was said loudly.
Design Communication & Image Prompting
Break "this looks good" into rules for grid, hierarchy, and density
Here is a reference image I like: [attach or describe]. I don't want to replicate this image; I want it broken into rules I can apply to other pages. Extract six layers: 1) grid and content width; 2) spacing rhythm, annotated in multiples of 4 or 8; 3) type scale and line height; 4) colour roles — how much area goes to background, surface, text, and accent; 5) corner radius, border, and shadow values; 6) information density — how many visual blocks share one screen. Write every rule as a number or a testable condition. Also flag what is incidental to this image (the photo's content, the length of its copy) and cannot become a rule. Finish by describing a page with completely different content using these rules.
Design Communication & Image Prompting
Re-rank the first screen around the one task the user came for
This is my page: [screenshot or content inventory]. Review the information priority of the first screen: 1) List what is actually visible above the fold and rank its current visual weight by area and contrast; 2) Decide the single task the user came to this page for, and name the one element the eye should land on first — only one; 3) Point out what competes for attention without earning it — decoration, duplicate entry points, promotional blocks; 4) Give a reordered version using four levers, size, contrast, position, and negative space, and annotate each change; 5) Run a cover test: if only three elements could remain, which three, and why. Do not use the word 'clearer'.
Design Communication & Image Prompting
Fix grid, stroke, and radius as numbers so the next 20 icons need no debate
I am defining an icon system for [product]. More than 20 icons will be drawn, possibly by a contractor. Write a spec that can be executed directly: 1) Canvas and live area, for example a 24×24 canvas with a 20 live area and 2 of bleed on each side; 2) Stroke width values, and whether they scale with the icon; 3) Corner radius and line-cap treatment; 4) Optical weight compensation — how circles, squares, and triangles are adjusted at the same size; 5) Naming and export, including sizes, formats, and dark-mode variants; 6) A five-item acceptance checklist, each one tickable. Finish with one correct and one incorrect example described in words, naming where people most often get it wrong. Do not write adjectives like clean and consistent.
Design Communication & Image Prompting
What should happen in the 400ms after the user taps New
Scenario: a list page is empty on first use. The user taps New, submits, and the first item is created. Design the transition from empty state to content: 1) The state sequence — empty, submitting, skeleton, partial appear, complete; 2) Duration and easing for each step, keeping the whole thing under 400ms; 3) How to prevent layout shift, including reserving height and keeping skeleton dimensions identical to real content; 4) Where focus and scroll position go; 5) Accessibility — what changes under prefers-reduced-motion, and whether aria-live is needed; 6) The three things this transition must confirm to the user. Give a timing table showing what the user sees at each step.
Design Communication & Image Prompting
Fix what the user actually hit, not what they asked you to fix
The user's exact words: [paste complaint]. Do not implement it as stated. Break it down: 1) Fill three columns — what they said, what they actually did, what they actually ran into; 2) List three possible interface causes, ranked by likelihood, each with its evidence; 3) For the most likely one, give the smallest change and say whether it touches copy, a control, or the flow; 4) Point out what new problem the literal request would introduce; 5) Give a way to verify — which metric, and for how long before calling it fixed; 6) Write one sentence back to the user that promises nothing you cannot deliver.
Design Communication & Image Prompting
Measure contrast, glow, and elevation instead of eyeballing a dark theme
This is my dark-mode palette: [values or screenshot]. Assess readability risk and give numbers for each item: 1) Contrast ratios for body text, secondary text, placeholder, and disabled states against their backgrounds — flag anything under 4.5:1; 2) Whether the background should be pure black or an elevated surface like #121212, with the tradeoff; 3) Which saturated colours vibrate against a dark ground and need desaturating or lightening; 4) Shadows are nearly invisible in dark mode — what should carry elevation instead; 5) How to handle images, illustrations with white backgrounds, and 1px dividers; 6) Where fatigue sets in after ten minutes of reading. Finish with a revised palette.
Design Communication & Image Prompting
Put every field on trial instead of squeezing the form tighter
These are my form fields: [list and what each is for]. Put every field on trial for deletion, answering four questions each: 1) If it were gone, could the user still finish the task; 2) Could this information come from somewhere else — the account, a previous entry, the device, a third party; 3) Could it be asked later, in settings, on a second visit, or on the result page; 4) What does it buy (compliance, fraud control, personalisation, marketing), and is that worth one more abandonment. Then give four columns: must delete, can merge, can defer, must keep. Finish with the trimmed field count and order, and an estimate of how completion rate moves. Do not cut for the sake of cutting.
Design Communication & Image Prompting
Break it into contrast, tap target, competing elements, and position
My primary button on [page] has been reported as not obvious enough. Break that into measurable items: 1) Contrast between the label and the button fill, and between the button and the page background — give the current and target values for each; 2) Tap target size, and whether it reaches 44×44; 3) How many elements on the same screen are brighter, larger, or more saturated than it — list them; 4) Where it falls in the user's scan path, which visual stop it is; 5) Whether the screen has exactly one primary action. Then give three change options, each naming the single variable it changes, the expected effect, and how to verify it, such as time to first click or task completion rate. Do not just say 'make it bigger and bolder'.