`, `

`). 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: "conference stage audience" orientation: "horizontal" luminance: "dark" limit: 4 ``` Then apply images to your designs: - Image node: `add_node` with `type: "image"`, `src: ""`, `alt: "..."`, `className: "w-full h-[400px] object-cover rounded-2xl"` - Background fill: `set_fill` with `fill: { type: "image", url: "", size: "cover" }` - In JSX: `` Tips for graphic design: Match `orientation` to your artboard (vertical for posters/stories, horizontal for banners/presentations, square for social cards). Use `luminance: "dark"` for dark-themed designs. Search before designing — build layouts around real images, not empty gray boxes. --- ## Shader Nodes & Visual Effects Add visual effects to graphic designs with shader nodes. Use `add_node` with `type: "shader"`. ### Generative Backgrounds Create eye-catching backgrounds without images: ``` add_node parentId: "" type: "shader" shaderType: "meshGradient" className: "w-full h-full" ``` Shader types: `meshGradient` (organic blending), `dotGrid` (tech/data), `voronoi` (organic cells), `liquidMetal` (premium), `chrome` (reflective), `pulsar` (energy), `blackHole` (dramatic), `glass` (frosted), `spiral` (playful), `particles` (atmospheric), `fireworks` (celebration). ### Apply Effects to Images Process photos with ASCII, dither, halftone, glitch, or art effects: ``` search_images query: "portrait" orientation: "vertical" limit: 1 add_node parentId: "" type: "shader" inputType: "image" mediaInput: { mediaUrl: "", mediaType: "image", objectFit: "cover" } effectId: "halftone-mono" effectEnabled: true className: "w-full h-full" ``` Effect categories: ASCII (`ascii-standard`, `ascii-dense`, `ascii-minimal`, `ascii-blocks`), Dither (`dither-floyd-steinberg`, `dither-atkinson`), Halftone (`halftone-mono`, `halftone-cmyk`), Glitch (`glitch-vhs`, `glitch-digital`), Art (`art-kuwahara`, `art-crosshatch`, `art-lineart`, `art-engraving`, `art-stipple`). ### Post-Processes Stack additional effects: `grain`, `vignette`, `bloom`, `scanlines`, `noise`, `pixelate`, `sepia`, `color-tint`. ``` add_node parentId: "" type: "shader" shaderType: "meshGradient" postProcesses: [ { type: "grain", enabled: true, settings: { intensity: 0.3 } }, { type: "vignette", enabled: true, settings: { intensity: 0.5 } } ] className: "w-full h-full" ``` Best for: Presentation backgrounds, poster visuals, event graphics, blog hero images, OG cards with distinctive visual treatments. --- ## Native Animation Graphic assets can use native Efecto layer animations when the user asks for motion, slides, reels, or presentation playback. Do not use Tailwind `animate-`, `transition-`, or `duration-*` classes. Workflow: inspect the target, call `list_animation_presets`, then apply a compact plan with `apply_animation_plan`. Animate hierarchy first: background or hero visual, headline, supporting detail, CTA or event details, then secondary ornaments. Use `update_artboard` with `timelineDuration` when the motion needs a deliberate ending. Good defaults: 0.35-0.6s for hero/title motion, 0.18-0.35s for smaller details, 0.04-0.12s stagger, `ease-out` entrances, `ease-in` exits. For title text, use `appearBy: "word"` or `"line"`; reserve `"char"` for kinetic poster moments. For poster, slide, and frame reveals, prefer explicit mask presets (`mask-in`, `fade-mask-in`, `slide-mask-in`, `scale-mask-in`) and set `maskStyle`, `maskDirection`, or `maskOrigin` when the reveal shape matters. --- ## Mindset: Design for the Context Every graphic has a context that dictates the rules: - Presentation slides are projected or screen-shared — big text, simple layouts, one idea per slide - Event posters are scanned quickly — bold headline, essential details (date, place, CTA), strong visual identity - Email headers are 600px wide and compete with dozens of other emails — punchy, branded, action-oriented - Blog hero images set the tone for an article — atmospheric, typographic, or illustrative - OG/share cards are the first impression of a link — they need to work at thumbnail size AND full size The common thread: less is more. Every element must earn its place. --- ## Presentations & Pitch Decks ### Artboard Sizes | Format | Width | Height | Use Case | |--------|-------|--------|----------| | Standard (16:9) | 1920 | 1080 | Presentations, screen share | | Widescreen (16:10) | 1920 | 1200 | Mac-native presentations | | Classic (4:3) | 1440 | 1080 | Traditional slides, projectors | ### Slide Design Rules 1. One idea per slide. If you need bullet points, each bullet should be its own slide. 2. 30pt rule. At 1920px width, nothing smaller than `text-3xl` (`30px`). If projected, even `text-4xl` is the minimum. 3. 6 words per line, 6 lines max. Less is better. If you have a paragraph, you have a document, not a slide. 4. Full-bleed visuals. When using an image, let it fill the entire slide. Overlay text on a solid dark block (not a gradient — use solid colors). 5. Consistent grid. Pick a layout system and stick with it across all slides. Title always in the same position. 6. Slide numbers. Subtle but present — helps navigation during Q&A. ### Slide Types #### Title Slide ```jsx
Q4 2026 Update
Building the Future of Design

Acme Inc. / October 2026

``` #### Section Divider ```jsx
Part 02
Product Strategy

``` #### Content Slide (Text + Visual) ```jsx

Revenue grew 3x in 12 months

We hit $10M ARR ahead of schedule, driven by enterprise adoption and a 95% retention rate.

``` #### Big Number / Stat Slide ```jsx
3x
Revenue growth in 12 months

$3.2M to $10M ARR

``` #### Quote Slide ```jsx

"The best tool we've adopted this year. Our design velocity doubled."

Jamie Rivera Head of Design, Linear

``` #### Closing / CTA Slide ```jsx

Let's build together

hello@acme.com

Acme Inc.

``` ### Pitch Deck Flow (10 slides) 1. Title — Company name, tagline, date 2. Problem — What pain exists (one stat or quote) 3. Solution — What you do (one sentence + visual) 4. Demo / Product — Screenshot or mockup (full-bleed) 5. Market — TAM/SAM/SOM or market size stat 6. Traction — Key metrics (big numbers) 7. Business Model — How you make money (simple diagram) 8. Team — Founders + key hires (photos + one-line bios) 9. Ask — What you need (funding amount, partnerships) 10. Closing — Contact info, thank you ### Speaker Notes Every slide artboard has a `speakerNotes` field — plain text the presenter sees in Efecto's Present + Control mode. Set it whenever you author a slide. - Pass `speakerNotes` to `create_artboard` and `update_artboard`. - Read existing notes via `list_artboards` (the field appears in the result) or `get_document` (rendered as a `speakerNotes="..."` attribute on the Artboard tag). - Write the speaker's script, not the slide content. The slide is the headline; the notes are what gets said out loud. - 2–4 sentences per slide. Anchor the point + transition to the next slide. - Leave blank when the slide is self-explanatory (title cards, one-word statement slides). ``` create_artboard: name: "03 — Traction" width: 1920 height: 1080 backgroundColor: "#0a0a0a" className: "flex flex-col" speakerNotes: "Walk through the 3x ARR growth. Highlight that 80% came from enterprise upgrades, not net-new logos. Set up the next slide on retention by saying 'and the reason this is durable is...'." ``` ### Presentation Playback The end user launches a deck from the Play dropdown in Efecto: Prototype (in-app emulator), Present (single-window fullscreen), or Present + Control (audience window + speaker controller with current slide, next slide, notes, timer). Slide order follows the layer-panel order by default; the controller has a visual (y, x) toggle for spatially-laid-out decks. Your job is to author slides + notes — the user picks playback mode. --- ## Event Posters & Flyers ### Artboard Sizes | Format | Width | Height | Use Case | |--------|-------|--------|----------| | Digital Poster | 1080 | 1350 | Online events, sharing | | A4 Portrait | 794 | 1123 | Print posters (210x297mm at 96dpi) | | Letter Portrait | 816 | 1056 | US letter print (8.5x11in at 96dpi) | | Wide Banner | 1920 | 600 | Website event banners | | Square | 1080 | 1080 | Multi-purpose, adaptable | ### Event Poster Hierarchy Every event poster needs these 4 elements in this priority order: 1. What — The event name (largest text, the visual anchor) 2. When — Date and time (second-largest, must be instantly readable) 3. Where — Location or "Online" (clear and prominent) 4. CTA — "Register now" / "Get tickets" / "RSVP" (button or highlighted text) Everything else (speakers, sponsors, descriptions) is secondary. ### Event Poster Template ```jsx

Design Conf 2026

The Future of Interface Design

March 15, 2026

San Francisco / Moscone Center

Your Title Here

Building the Future of Design

Product Strategy

Revenue grew 3x in 12 months

Revenue growth in 12 months

Let's build together

The Future of Interface Design

Designing with AI: What Changes and What Doesn't

What we shipped this week

How we reduced build times by 80%

How we reduced build times by 80%

Advanced Design Systems