I am building social media post mockups for a community outreach campaign competition page. Each pos...

I am building social media post mockups for a community outreach campaign competition page. Each post is displayed inside a CSS phone frame (dark bezel, rounded corners, notch). The posts simulate three platforms: a photo-sharing platform (like Instagram), a microblog platform (like Twitter/X), and a community feed (like Facebook). The problem: the 'photo-sharing platform' post has a media area (200px tall, dark gradient background) that currently renders AI-generated text describing an imaginary photograph — text like 'Image shows a smiling senior boarding a free shuttle van with Healthcare Navigator branding outside Austin Community Health Center.' This looks like a broken image alt-text, not a real social media post. I need a comprehensive solution. How do real community health organizations, food banks, and social service programs design their social media posts? Specifically: what percentage of their Instagram/Facebook posts use photographs vs branded text graphics (Canva-style)? When they use text graphics, what do they look like — solid color background with large white text? Gradient background with a data statistic? Split layout with accent stripe? I need to know the realistic visual language of community outreach social media so the mockups look authentic. Show examples from CDC social media campaigns, local health department Instagram accounts, or food bank marketing materials. CSS-only techniques for creating visually compelling social media 'image areas' that look intentional rather than like broken image placeholders. I need techniques for: (a) gradient backgrounds that look like branded social graphics (not just linear-gradient — something that looks designed, with multiple color stops or radial gradients); (b) geometric patterns using CSS background-image with repeating shapes; (c) combining a large data statistic (like '47,300 displaced') with a colored background to create an infographic-style card; (d) using CSS mix-blend-mode or background-blend-mode for visual texture. The design must work within a 200px tall container, in a dark glassmorphism theme, inside a phone mockup frame. Include complete working CSS examples. Controlling LLM output for specific Pydantic schema fields when using the Instructor library with Claude. The field image_desc gets interpreted as 'describe a photograph' no matter how I phrase the Field description. Research approaches: (a) renaming the field to something that doesn't suggest 'image' or 'description' — like media_caption, card_tagline, or visual_label; (b) using Pydantic field_validator to reject outputs longer than N characters or containing words like 'Image shows', 'Photo of', 'smiling', 'holding'; (c) using Instructor's json_schema_extra to add few-shot examples directly in the JSON schema; (d) adding a system-level instruction in the prompt that says 'image_desc must be under 6 words — it is displayed as visible text, NOT an image alt-text'; (e) removing the field entirely and generating the content deterministically in Python. Which approach is most reliable for competition-day robustness? Pydantic model_validator and field_validator patterns for sanitizing LLM output. If Claude generates 'Image shows a smiling senior boarding a shuttle van outside Austin Community Health Center', I want a validator that: (a) detects this is a photo description (not a short caption); (b) extracts the location name from it ('Austin Community Health Center'); (c) returns just the location name as the field value. What regex or heuristic reliably distinguishes photo descriptions from short captions? How do I write a @field_validator in Pydantic v2 that transforms the value (not just validates it)? Include a complete working validator with test cases. Design patterns for social media mockups in marketing competition submissions. When design agencies or marketing students present social media mockup decks without actual photographs, what do they put in the image area? Options I've seen: (a) solid color with large emoji; (b) gradient with program logo/name; (c) abstract geometric pattern with text overlay; (d) data visualization snippet (mini chart or large number); (e) placeholder with 'Image' text (which looks lazy). Which approach scores highest on perceived professionalism and effort? Which looks most like a real campaign that could actually be deployed? Making each of three phone mockups visually distinct while using a deterministic (non-LLM) approach for the media area. If I generate the media area background deterministically in CSS (no Claude-generated content), how do I make three posts look different from each other? Options: (a) use three different gradient color combinations derived from the accent color (original, complementary, analogous); (b) use three different geometric patterns (diagonal stripes, dots, chevrons); (c) vary the layout (left-aligned text, centered text, right-aligned with icon); (d) use the post's platform type to determine the style (photo platform gets a gradient card, microblog gets no media area, community feed gets a data card). How do professional social media template kits handle visual variety across platforms? Should the 'microblog platform' and 'community feed' posts also have media areas, or should only the 'photo-sharing platform' have one? On real Twitter/X, most community health posts are text-only with hashtags. On real Facebook, community organizations often post text with a link preview card (which has a small image). On real Instagram, every post has an image. How should each platform's mockup handle the media area differently to look authentic? Should I conditionally show/hide the media area based on the platform type? Using CSS custom properties and Jinja2 template variables to create per-post visual variety. If I have three posts and want each to have a different gradient background in the media area, I could: (a) define three CSS classes (.media-style-1, .media-style-2, .media-style-3) with different gradients; (b) use the loop index in Jinja2 to assign the class ({% if loop.index == 1 %}...); (c) derive gradient colors from the main accent color using CSS color-mix() or hsl() calculations. Which approach is most maintainable and produces the best visual results? Include CSS examples using the accent color #8b5cf6 (purple) as the base.