Turn design references into a useful brief

Give conflicting references clear jobs, then turn them into decisions an AI coding tool can act on.

Start with the work someone needs to do

A collection can contain three excellent designs that would make a poor screen together. One earns its space through large photographs; another puts twenty records in view; a third keeps one decision in focus. Asking an agent to combine their styles leaves the important choices unresolved.

Consider a hypothetical shift-planning app. A manager needs to find unfilled shifts, assign available staff, and check the week before publishing. The current page already has a schedule, an employee picker, and a publish button. The brief should improve that sequence. It does not need a new visual identity.

Give each reference one job

For this example, imagine a collection called Weekly staffing with three saved images: an editorial travel page, a compact issue tracker, and a billing form. Choose what each image contributes before asking for a layout.

  1. On the travel page, note: “Use the separation between sections to distinguish days. The photography, large headlines, and full-width cards are unrelated to this task.”
  2. On the issue tracker, note: “Use alignment to compare time, role, and assigned person across rows. Keep enough room for long names; do not copy its tiny text.”
  3. On the billing form, note: “Make the next action easy to locate. An unfilled shift needs an Assign action beside it. Publishing the whole week remains a separate decision.”

Resolve the conflict where it occurs

The travel page suggests generous spacing; the issue tracker suggests density. Both can help if they apply at different levels. Put breathing room between days and use compact, aligned rows within each day. That is a layout decision. “Somewhere between airy and dense” is still an unanswered question.

The billing form may show one prominent button because it contains one task. A weekly schedule contains many small tasks. Repeating that button treatment on every row could make them all compete. Keep the existing secondary action style for Assign and reserve the primary treatment for Publish. The reference supplies an idea about hierarchy; the product determines where it belongs.

Check what the agent actually received

Ask for a brief before implementation. The agent should read the selected references and available notes, then inspect the current screen and project components. If it only received a title or extracted description, it cannot reliably judge the screenshot’s spacing. Have it identify missing context while there is still time to correct the brief.

Writing a brief in your coding conversation does not require Taste’s collection-brief generator. That optional tool can generate and cache a brief; a new generation can use a credit. Ordinary collection and reference reads are enough for the workflow here.

Try this prompt

Find my Weekly staffing collection in Taste. Read its references and available annotations, then inspect this project’s schedule page and existing components. Report which images you actually viewed and any missing context. Draft a design brief in this conversation. Do not invoke collection-brief generation or edit code yet. For each proposed change, identify its reference, the relevant note, and the existing component it could use.

Make the brief specific enough to disagree with

A useful draft names the task, the changes, the constraints, and the checks. Here is a possible brief for the hypothetical staffing screen. Replace its names and details with your own before using it.

Help managers find and fill open shifts before publishing the week. Group shifts by day, with more space between days than between rows. Align time, role, and assigned person so rows can be compared. Keep unfilled status visible in text and place Assign beside that status. Preserve the current employee picker, navigation, type scale, colors, and publishing behavior. Use our secondary button for Assign and our existing primary button for Publish. Do not add photography, decorative cards, or new fonts. Check a full week, a day with no shifts, an unavailable employee, and a long employee name. Confirm that every assignment remains reachable by keyboard.

Review the decisions before polishing them

Read the draft for choices you did not make. Did “clearer status” become a new color system? Did grouping days remove information needed to compare staff across the week? Correct those decisions before asking the agent to implement the agreed brief.

After implementation, revisit the original task: can a manager find an open shift, assign someone, and understand what publishing will do? A screen can resemble every reference and still fail that sequence. If a reference led to the wrong decision, revise the relevant note so the next pass has better direction.

Try this prompt

Review the proposed staffing brief against the current screen. Identify any new behavior, removed information, or component replacement it would require. Explain unresolved tradeoffs. Revise the brief to preserve existing behavior before we implement it.