{"id":"vis-pm-empty-state-illustration","audience":"product-managers","category":"image-video","track":"visual","technique":"context","title":"Get an empty-state illustration that matches your design system","free":false,"task":"Your app's empty Projects screen needs an illustration, made with ChatGPT images. Get Claude to write one paste-ready prompt, plain text, under 100 words: a prompt paragraph and a last line starting \"Avoid:\". It must follow the design system (line style, 2px strokes, the 2 hex colors as codes), say square 1:1 on a transparent or plain white background, match the friendly tone of the screen, and include no text or UI.","materialLabel":"The brief (attached to your prompt automatically)","material":"Design system notes - Northstar app (v3)\n\nIllustration style: single-weight line art, 2px strokes, rounded line ends, one accent fill color only. No gradients, no shadows, no 3D.\nColors: ink #1F2937 for lines, accent coral #FF6B57 for fills.\n(v2 used blue #2563EB accents; retired in September.)\n\nScreen: Projects - empty state. Shown when a new user has no projects yet. Copy under the image (already written): \"No projects yet. Start one and invite your team.\"\n\nTone: friendly, encouraging, a little playful. Not sad or lonely.\n\nIdea for the image: an empty desk with a small plant and a blank notebook, or a paper airplane taking off.\n\nSize: shown at 200 x 200 on screen, so simple shapes only.\n\nThe app ships in 9 languages.\n\nA designer suggested a cute version of a famous cartoon dog sitting at the desk.","rules":[{"type":"maxWords","max":100},{"type":"plainText"}],"mistakes":[{"title":"Ignoring the design system","why":"The AI picks its own style, with gradients and shading.","fix":"Add: \"Single-weight line art, 2px strokes, #1F2937 lines, #FF6B57 fills.\"","checks":["r0"]},{"title":"Using the retired color","why":"The notes mention v2 blue, and the AI may use it.","fix":"Add: \"No blue.\"","checks":["r0"]},{"title":"Sad empty state","why":"\"Empty\" pushes the AI toward lonely or sad scenes.","fix":"Add: \"Friendly and encouraging.\"","checks":["r1"]},{"title":"Text in the image","why":"The AI writes \"No projects\" into the art, which breaks translation.","fix":"Add: \"Avoid: text, letters, UI, characters.\"","checks":["r2"]},{"title":"Write-up with headings","why":"The AI explains empty-state best practices.","fix":"Add: \"Output only the prompt and Avoid line.\"","checks":["plainText","maxWords"]}],"promptHints":[{"label":"Gives the line style","patterns":["2\\s?px","line art"]},{"label":"Gives the hex colors","patterns":["#1F2937","#FF6B57"]},{"label":"Sets shape and background","patterns":["1\\s*:\\s*1","transparent|white background"]},{"label":"Sets the mood","patterns":["friendly","encourag"]},{"label":"Adds an Avoid line","patterns":["avoid"]}],"hint":"Product illustrations must match the design system and translate cleanly. Give the exact style rules, the tone, and say no text.","rubricLabels":["Asks for single-weight line art with 2px strokes and gives both hex codes (#1F2937 and #FF6B57), not the old blue","States square 1:1 on a transparent or plain white background and a friendly, encouraging mood","Ends with an 'Avoid:' line that rules out text and UI elements (and famous or cartoon characters)"]}