Prompts / brief_to_ui
Brief a model to design UI without the slop Free
Turns a product idea into a design brief a model can build from: point of view, type, colour, layout, content and constraints, so the result is not the generic template.
Run it
- Claude Code:
/mcp__designers__brief_to_ui - Claude Desktop and claude.ai: plus menu, Add from Designers, Brief a model to design UI without the slop
- Any app: Use the brief_to_ui prompt from the Designers server on what is being designed, for whom, and why.
Arguments
| Name | Meaning |
|---|---|
idea * | What is being designed, for whom, and why |
references | Sites or work you admire, and what you admire about them |
stack | Framework or tool the result will be built in |
tool | The generator you will paste it into: Claude, Figma Make, v0, Stitch, Lovable or other |
* required
What your assistant is told to do
The full instructions, so you can see exactly what you are asking for:
Write a design brief that another model can build a screen from without defaulting to the generic template. Then, if the person agrees, build it.
Idea: <idea>
References: <references>
Stack: <stack>
Generator: <tool>
Read resource designers://reference/slop-tells first. A model told "clean and modern" produces the median interface. Give it a point of view instead.
Produce the brief in these sections:
1. Purpose and person: who, what they are trying to do, in what state of mind. One paragraph.
2. Point of view: three words for the feel and two things it must not feel like. Name real references and the specific thing taken from each (a grid, a scale of type, a way of using colour), not "inspired by".
3. Type: one display face with character, one text face built for reading, one for UI if needed; sizes on a scale with a big jump between headline and body; weights. Name real typefaces and fallbacks.
4. Colour: one dominant colour, one sharp accent, neutrals. Give hex values and the contrast of each text and background pair; call check_contrast to verify rather than asserting. No gradients unless one is asked for.
5. Layout: where the grid is broken on purpose (offset columns, one oversized element, uneven sizes), and how it collapses on a phone. Forbid the centred hero then three equal cards.
6. Content: the real copy, or the real data shapes. Never lorem ipsum. Give actual lengths, including the longest name and the empty state.
7. Components and states: only what the screen needs, with default, focus, error, empty and loading.
8. Motion: one or two moves with a purpose, under 300ms, honouring reduced motion.
9. Hard constraints: WCAG 2.2 AA, 44px touch targets, no emoji or eyebrows or glow blobs, text a person would actually say.
10. Acceptance checks the result must pass: run detect_design_slop on the built page, check_contrast on the final colours, review_ui_copy on the strings, audit_page_accessibility on the markup.
Keep the brief under 600 words. A short brief with real decisions beats a long one with adjectives.
Adapt it to the generator named above: tools that take a short prompt (Figma Make, v0, Lovable, Stitch) want the point of view, type, colour and the never-list in the first paragraph, one screen at a time, with real copy pasted in; Claude and other coding agents can take the full brief and a DESIGN.md. Say which version you are giving.