`, `

`). Never ship generic names such as `Frame`, `Text`, or `Icon`; unnamed purely decorative leaves are the only exception. - Declare nested layout. Every frame with two or more children must explicitly include `flex` or `grid` in `className`, including nested wrappers. Add the matching direction, alignment, gap, and wrapping classes; do not rely on implicit block flow. - Meet WCAG AA contrast. Normal text must reach 4.5:1 and large text 3:1. Evaluate text against its effective rendered background: use its own background when present, otherwise walk through ancestor frames to the artboard, including opacity/alpha compositing. Resolve semantic theme tokens in the active mode before judging contrast. - Audit until clean. After building or editing, call `audit_design`. Fix every `contrast-ratio`, `implicit-block-container`, and `generic-layer-name` finding with `batch_update` or `replace_section`, then call `audit_design` again. If you use `repair_design`, inspect its changes and re-audit. Do not declare completion until all three finding types are zero, and use `get_document` to confirm meaningful layers retain semantic names. --- ## Images — Use Real Photos, Not Placeholders Use `search_images` to find free, high-quality stock photos from Lummi. No session required — call it anytime. ``` search_images query: "team celebration" orientation: "square" luminance: "bright" limit: 4 ``` Then apply images to your designs: - Image node: `add_node` with `type: "image"`, `src: ""`, `alt: "..."`, `className: "w-full h-full object-cover"` - Background fill: `set_fill` with `fill: { type: "image", url: "", size: "cover" }` - In JSX: `` Tips for social media: Match `orientation` to the platform format — `square` for Instagram/LinkedIn posts, `vertical` for Stories/Reels/TikTok, `horizontal` for YouTube thumbnails/Twitter. Use `luminance: "dark"` for dramatic social content. Real photos make social media content feel authentic — avoid empty placeholder boxes. --- ## Shader Nodes & Visual Effects Make social media content stand out with shader nodes. Use `add_node` with `type: "shader"`. ### Generative Backgrounds Eye-catching backgrounds without images — perfect for quote cards, carousels, and story slides: ``` add_node parentId: "" type: "shader" shaderType: "meshGradient" className: "w-full h-full" ``` Shader types: `meshGradient` (organic), `liquidMetal` (premium), `chrome` (bold), `pulsar` (energy), `particles` (ambient), `fireworks` (celebration). ### Apply Effects to Photos Process images with ASCII, dither, halftone, or glitch effects for scroll-stopping visuals: ``` search_images query: "team photo" orientation: "square" limit: 1 add_node parentId: "" type: "shader" inputType: "image" mediaInput: { mediaUrl: "", mediaType: "image", objectFit: "cover" } effectId: "ascii-standard" effectEnabled: true className: "w-full h-full" ``` Best effects for social: `ascii-standard` (tech/dev content), `dither-atkinson` (retro), `halftone-mono` (print/zine), `glitch-vhs` (nostalgic), `art-kuwahara` (painterly), `glitch-digital` (edgy). ### Post-Processes Add film grain, vignette, or scanlines for texture: ``` postProcesses: [ { type: "grain", enabled: true, settings: { intensity: 0.3 } }, { type: "scanlines", enabled: true, settings: { intensity: 0.2 } } ] ``` --- ## Native Animation Social posts, stories, reels, and carousel slides can use native Efecto layer animations. Do not use Tailwind `animate-`, `transition-`, or `duration-*` classes. Workflow: inspect the selected artboard or nodes, call `list_animation_presets`, then use `apply_animation_plan`. Animate the hook first: background/photo, hero headline, supporting line, swipe cue or CTA, then decorative details. For carousel/story motion, add exits only when the user asks for an outro or a video-style sequence. Good defaults: 0.35-0.6s for the headline or hero image, 0.18-0.35s for badges/icons/details, 0.04-0.1s stagger. Use `pop-spark`, `bounce-in`, `mask-in`, `fade-mask-in`, `slide-mask-in`, or `scale-mask-in` when the brand needs thumb-stopping energy; set `maskStyle` to `linear`, `diagonal`, or `iris` and use `maskDirection`/`maskOrigin` when the reveal needs to feel intentional. Otherwise keep it to `fade-in`, `slide-in`, and `scale-in`. --- ## Mindset: Think Poster, Not Website When you design a website, you're writing for someone who stopped scrolling and is reading. On social media, you have 1-2 seconds to communicate before they scroll past. This changes everything: - Type big. The canvas is 1080px wide but renders at ~375px on a phone screen. A `text-base` paragraph that's perfectly legible on a website becomes unreadable squished into an Instagram card. Default to `text-xl` or `text-2xl` where you'd normally use `text-base`. - Write less. If a slide has more than 2-3 short lines, it has too much text. Cut ruthlessly. One idea per slide. - Think like a billboard. Would you put a paragraph on a highway billboard? No. Same energy. --- ## Typography for Social Media Choose font sizes based on the role, not a formula. The canvas is large (1080px+) but the content is consumed small — so sizes need to be generous. | Role | Size | Weight | Example | |------|------|--------|---------| | Hero / Impact | `text-7xl` to `text-8xl` | `font-extrabold` or `font-black` | A single punchy statement | | Slide headline | `text-4xl` to `text-5xl` | `font-bold` or `font-extrabold` | The main point of each slide | | Supporting text | `text-2xl` to `text-3xl` | `font-medium` or `font-normal` | One sentence of context | | Labels / tags | `text-lg` to `text-xl` | `font-semibold` | Category labels, @handles | | Smallest allowed | `text-lg` | any | Nothing smaller than this. Ever. | Key insight: Where you'd use `text-base` on a website, use `text-xl` on social. Where you'd use `text-2xl` for a web heading, use `text-4xl` to `text-5xl` on social. It's not scaling — it's choosing the right size for a medium that gets consumed at 1/3 the designed resolution. --- ## Copywriting: Gen-Z Designer Energy Social media copy is NOT web copy. Write like a creative director at a streetwear brand, not a SaaS marketing team. Rules: - Max 6-8 words per headline. "Ship faster. Break nothing." not "Our platform helps engineering teams ship code faster while maintaining quality." - One idea per slide. If you need a comma, you probably need two slides. - Kill filler words. No "that", "just", "really", "very", "in order to", "leverage", "utilize". - Use sentence fragments. "Built different." "Zero to launch." "Your next big thing." Complete sentences are optional. - Active voice, present tense. "Build" not "Building". "Ship" not "Shipping". - No paragraphs. If text wraps more than 2 lines on a social media slide, rewrite shorter. - CTAs are 2-3 words. "Follow for more" / "Save this" / "Link in bio" / "Try it free" Bad (website brain): > "Our comprehensive platform provides teams with everything they need to design, build, and deploy modern web applications efficiently." Good (social media brain): > "Design. Build. Ship." --- ## Instagram ### Artboard Sizes | Format | Width | Height | Use Case | |--------|-------|--------|----------| | Post (Square) | 1080 | 1080 | Feed posts, single images | | Portrait Post | 1080 | 1350 | Feed posts (more screen real estate) | | Story / Reel | 1080 | 1920 | Stories, Reels, vertical video covers | | Carousel Slide | 1080 | 1080 | Each slide in a carousel | | Carousel (Portrait) | 1080 | 1350 | Carousel, portrait format | ### Carousel Best Practices 1. Slide 1 = the hook. Bold headline, eye-catching, minimal text. This is the thumbnail in someone's feed — it decides if they stop scrolling. 2. Consistent design system. Same background, type styles, and layout across all slides. Only the content changes. 3. One point per slide. Not three. Not two. One. 4. Number your points. Big, bold numbers (01, 02, 03) anchor each slide and create a sense of progression. 5. Last slide = CTA. "Follow for more" / "Save this for later" / "Link in bio". 6. Swipe cue on slide 1. Arrow, dots, or "Swipe ->" so people know there's more. 7. High contrast only. Subtle color differences get crushed by JPEG compression and small screens. ### Carousel Template ```jsx // Slide 1 — Hook (bold, minimal, scroll-stopping)

Stop designing like it's 2020

Swipe for 5 rules ->

// Slide 2-N — Content (one idea, big number, short text)
01
White space is not wasted space

Let your design breathe. Cramped layouts feel amateur.

// Last Slide — CTA (simple, direct)

Found this useful?

Save it. Share it.

@yourbrand

``` ### Story Template ```jsx
New drop
Your bold statement here

One short sentence of context.

Stop designing like it's 2020

Stop designing like it's 2020

White space is not wasted space

Found this useful?

Your bold statement here

Stop doing this

Your Channel Name

The trick nobody talks about

10 Design Rules Every Beginner Needs

We just launched something big

Hot take incoming

7 lessons from building a design system

Start with your constraints, not your aspirations