Imported from het8802/OpenNolan (skills/social-media/editorial-ai-product-design-system/SKILL.md). Install upstream with npx skills add het8802/OpenNolan --skill editorial-ai-product-design-system. Copyright stays with the author.

Editorial AI Product Design System

Source pattern

Learned from Greg Isenberg Reel DYSBWggx31N / Hyperagent-style explainer: a soft editorial AI/product motion system combining abstract workflow diagrams, stylized UI mockups, a recurring agent mascot, serif storytelling copy, and clean product labels.

Core principle: make AI feel like a designed product system, not generic neon robot content. Use warm negative space, tactile editorial typography, abstracted product UI, and simple recurring symbols for input → evaluation → output.

Global schema

Canvas + spacing

• Primary format: 1080×1920 vertical.
• Background: warm off-white canvas with large negative space.
• Use oversized assets cropped by frame edges to imply camera pans through a larger designed canvas.
• Keep one hero idea per beat/slide; avoid dense dashboards or text walls.

Palette

Rules:

• Keep red rare so it means “fail/reject.”
• Use green for both brand/system energy and approval.
• Avoid purple, violet, lavender, and obsidian/crystal accents for your Greg-theme reels; they read like a different reference world. Use sage/warm-gray UI depth or gold value accents instead.

Typography

• Pair editorial serif + modern sans.
• Serif: narrative statements, human words, price/metaphor copy, captions (Georgia, Caslon, Garamond, or similar high-contrast serif).
• Sans: product names, functional labels, badges, bracketed variables (Inter, Satoshi, Manrope, Helvetica Now).
• Italic serif/script can be used inside circular badges for crafted words like “skill.”
• Uppercase/small-caps for pill labels: USE CASE + QUALITY STANDARDS.
• Bold bracketed variables: [use case], [quality standards].

Shape language

• Rounded rectangles for UI panels, input fields, process nodes, and status tabs.
• Pills for labels and compact metadata.
• Circles/arcs/semicircles for decorative anchors and motion rhythm.
• Dashed rounded containers for “system boundary” or automation zones.
• Thin black orthogonal connector lines for workflows.
• Dotted connector lines for association between a label and a character/object.

Motion grammar

• Pan/zoom across an oversized designed canvas, revealing cropped UI cards and props.
• Sequentially draw diagrams: nodes → connectors → checklist/status.
• Switch states with green check/red X tabs and dots.
• Slide UI cards from edges with slight motion blur.
• Reveal editorial phrases in short beats, not paragraph captions.
• Motion should clarify input → filter/evaluate → output, not decorate every object equally.

Asset schemas

1. Workflow diagram asset

Use for process, automation, routing, validation, or “agent does the work.”

Design:

• Dashed rounded system container.
• Stacked rounded process blocks in mint/forest/red.
• Tiny document/checklist icons between steps.
• Thin black right-angle connector lines.
• Optional green/red terminal nodes for approved/rejected branches.

Rules:

• Green = accepted/approved/active.
• Red = failed/rejected/off-track.
• Checklist/document = quality criteria or validation.
• Animate as a sequential path, not a static full diagram.

2. Editorial metaphor prop asset

Use for price, time, shipping, attention, or real-world analogy.

Examples from source:

• Uber Eats bag for “less than your order.”
• Retro CRT computer with “to ship.”
• Human head silhouette with vision beam.

Design:

• Place physical/retro props on the warm paper canvas.
• Pair with large serif copy.
• Add simple arcs/circles/lines to integrate the prop into the system.

Rules:

• The prop must explain the idea; no generic decoration.
• Use one prop per beat.
• Props can be photographic/collage-like, but should be simplified and cleanly cut out.

3. Product input UI asset

Use when showing the user configuring an AI agent or entering a task.

Design:

• Large white rounded panel.
• Sage or warm-gray border plus soft warm-gray offset shadow.
• Bottom prompt/input bar.
• Gray circular send button with white up-arrow.
• Optional left vertical toolbar for product realism.
• Text examples: “describing your [use case]” / “defining your [quality standards]”.

Rules:

• Use stylized mockups, not literal screenshots, unless proof requires a real screenshot.
• Crop large panels at the frame edge for movement.
• Keep placeholder content abstract; only the input text should be readable.

4. Agent mascot asset

Use as recurring anchor for the AI system/product.

Design:

• Simple geometric green square/rounded-square face.
• Two black circular eyes.
• Dark forest lower shadow/body.
• Optional role accessory: white curly judge wig for evaluator/quality-control persona.
• Can sit inside a white rounded square card under a product title like “Hyperagent.”

Rules:

• Mascot expresses role via accessories, not facial detail.
• Keep it minimal enough to work as an icon, sticker, or animated character.
• Reuse consistently across Reel beats and carousel slides for continuity.

5. Quality standards / state asset

Use for evaluation, filtering, approval, or inbox triage.

Design:

• Pill label: USE CASE + QUALITY STANDARDS with a small forest-green circular icon.
• Green check tab on left/top for approved.
• Coral red tab with white X for rejected.
• Small colored dots above mascot to show active state.
• Dotted connector from label to agent/user.

Rules:

• Always pair pass/fail visuals with a criterion label; otherwise the status feels decorative.
• Use quick state switching for Reels; use side-by-side cards for carousels.

6. Output/inbox UI asset

Use when showing what lands in the user’s workspace after filtering.

Design:

• Tall rounded white product panel, often cropped.
• Sage/warm-gray border/shadow system.
• Left toolbar with small icons.
• Warm-gray or sage generated document block with white placeholder lines.
• Bottom input bar with serif sentence fragments like “By the time anything lands in your inbox,”.

Rules:

• Show output as a clean artifact/card, not a busy app screen.
• Use large readable narrative copy around the UI to explain why it matters.

7. Attention/insight beam asset

Use to show human perception, AI scanning, focus, or analysis.

Design:

• Simple side-profile silhouette in charcoal/gray.
• Single eye as focal point.
• Translucent sage/forest-green cone projecting toward a UI panel.

Rules:

• Use sparingly for moments about attention, cognition, or “seeing the signal.”
• Keep the beam soft and geometric; avoid sci-fi laser clichés or purple glow.

8. Talking-head editorial caption asset

Use for Greg-style podcast/advice clips where the source is a direct-to-camera or podcast crop.

Design:

• Warm bookshelf/studio background with shallow depth of field.
• Subject centered or slightly right-of-center; microphone visible in lower foreground when available.
• Large white editorial serif phrases placed in left/upper-left negative space.
• One key word can be mint/teal and italicized.
• Optional slim top chapter/progress bar for tutorials (Intro, Docs, Setup, Skills, etc.).

Rules:

• Avoid generic TikTok subtitle boxes; captions should feel like designed editorial headline type.
• Keep phrases short and stacked; do not cover eyes/mouth.
• Use subtle shadow only for contrast; no heavy meme-outline text.

9. Retro software/internet prop asset

Use for internet history, old-vs-new workflow, browser demos, or startup-nostalgia metaphors.

Design:

• Beige/gray retro desktop computer or browser window.
• Pixel/voxel or simplified 3D object style.
• Muted background, dark screen area, small UI details.
• Minimal or no text; let the prop carry the hook when it is visually strong.

Rules:

• Use as a deliberate metaphor, not random decoration.
• Pair with one short headline/caption if the concept is not obvious.

10. Product/ad output card asset

Use when demonstrating AI-generated ads, landing pages, content, or product outputs.

Design:

• Small green agent/robot badge at top.
• Floating rounded output card beneath with soft shadow.
• Warm paper canvas, centered object composition, lots of negative space.
• Product/ad/UI mockup should be simplified and readable at mobile size.

Rules:

• Keep inner copy large enough to read; if the output is only proof texture, add a separate readable label.
• Use the mascot/badge to imply “AI generated this,” not as decoration.

Reel structure template

1. Price/status hook: large serif claim + real-world prop + small process motif.
2. Shipping/product metaphor: retro/object beat that makes the promise tangible.
3. Brand/product reveal: product name in bold sans + mascot card.
4. Input/configuration: prompt UI asking for use case + quality standards.
5. Agent evaluation: mascot receives criteria; green check/red X states switch.
6. Output/inbox payoff: stylized UI shows only qualified output reaching the user.
7. Human insight close: user/attention metaphor shows why the system matters.

New-channel / ads-platform variant

Use this variant when the script is about a new AI distribution channel, ads platform, or growth workflow rather than an AI-agent product:

1. Status hook: pill label like NEW AD CHANNEL, large serif claim, tilted product/browser card, and one simple mascot or badge.
2. Expectation beat: compare the old mental model versus the new one side-by-side, e.g. Google = keywords vs ChatGPT = conversations.
3. Setup walkthrough: one large clean product UI card with 3–5 numbered setup steps.
4. Intent examples: prompt/chat bubbles showing concrete buyer moments; keep them short and readable.
5. Official proof cards: 2–3 source-backed capability cards, each with one highlighted capability.
6. System map: simple connector diagram turning the idea into a framework.
7. CTA board: audience checklist + large comment keyword block.

Asset sourcing rule for Greg-theme video production

When turning scripts into Greg/editorial AI-product Reels, do not produce only animated text and generic UI cards. Build an asset evidence kit first:

• Extract cropped screenshot receipts from any relevant links, articles, product pages, reports, repos, docs, tweets/posts, or social proof. Use them as layered proof cards with readable OpenNolan/Remotion overlay text.
• Source relevant commercial-safe b-roll or public-domain/project-corpus footage for concrete beats: founders working, coding, dashboards, offices, data centers, social feeds, product workflows, etc.
• Treat YouTube footage as reference unless the user owns it or licensing/permission is clear; if not clear, recreate the beat with stock footage or generated visuals.
• Generate AI images/UI mockups for abstract or product-specific beats: hero backdrops, workflow boards, agent/evaluation scenes, founder metaphor props, output/profile/proof boards.
• For a 45–60s reel, target roughly 2–4 screenshot receipts, 2–4 b-roll/footage inserts, 3–6 generated/stylized images or UI mockups, plus reusable overlays/icons.
• Track source URL/tool, license/provenance, scene_id, and role (proof, broll, generated_hero, ui_mockup, texture, overlay) in the asset manifest.

Motion learnings from the Pixel RPG / Obsidian workflow reference — Greg-theme adaptation

Use these as editorial motion grammar, not as visual motifs. Do not bring over pixelated RPG characters, purple crystals, obsidian-dark fantasy objects, or violet glow. Translate the underlying edit logic into warm Greg-style product scenes.

Structure transfer

1. World-state hook without fantasy props

   • Open with a designed problem state: a large serif claim, a simple prop, a workflow map, or stacked proof receipts.
   • Replace “avatar runs to crystal/portal” with “cursor/agent badge/receipt card triggers the first system reveal.”
   • Threat labels can still crash in (layoffs, AI agents, budget cuts, competition), but style them as warm-paper stickers or sans pills, not game labels.

2. Proof-window storm

   • Stack 2–4 source cards/browser receipts with slight offsets, soft shadows, and one highlighted phrase per card.
   • Use this to prove the premise before teaching the workflow.
   • Cards slide from different edges, overlap, and settle quickly; avoid long crossfades.

3. Chaptered level logic, renamed as steps or layers

   • Keep the “3 levels” clarity, but render as Greg-style steps, standards, layers, or system nodes.
   • Use large editorial serif captions for the chapter line; important nouns get mint/forest/gold emphasis.

4. Tool-connection diagram

   • Show app/tool A → connector → agent/system → output artifact.
   • Draw dashed or orthogonal connectors over 0.3–0.6s; pop nodes after the line reaches them.
   • Use rounded white cards, dark/forest nodes, and sage shadows.

5. Trend / industry map

   • Keep the radial “niche map” mechanic: central topic with pills around it.
   • Render as a clean dark-forest or charcoal circular board on warm canvas, with mint/sage pills.
   • Use a slow digital push/tilt across the board to imply exploration.

6. Prompt → result → artifact loop

   • Prompt bars are hero UI objects: black or forest rounded pill, active green rim, typewriter text.
   • Immediately transform output into a tangible artifact: checklist, plan, content grid, profile board, or calendar.
   • Stagger rows/cards one-by-one so the viewer sees utility, not just an AI response.

7. Moral reset + public proof payoff

   • Insert a high-negative-space white beat with one strong sentence when the script pivots.
   • End on proof of work: dashboard, public profile, post grid, receipts, checklist, or outcome board — not a generic “follow for more.”

Text motion

• Captions are phrase collages, not subtitles. Build 2–5 word groups around the focal visual.
• Use y: 14–22px -> 0, blur 2–3px -> 0, opacity 0 -> 1, 0.28–0.45s cubic/power3 ease-out.
• Emphasis words may scale to only 1.03–1.06, italicize, underline, or color-hit in mint/forest/gold.
• Avoid meme bounces, yoyo, random glitches, and purple keyword hits.
• Every 0.5–1.5s should change one meaningful element: word group, proof card, connector, prompt text, result row, or camera crop.

Camera and composition

• Treat the reel as a camera moving across an oversized designed canvas.
• Use three camera states: wide system map, close UI/prompt crop, artifact hero frame.
• Push-ins should be subtle: 3–7% over a scene; snap zooms only for proof hits or prompt submits.
• Crop large cards slightly off-frame to create scale and motion, but keep primary text inside Reels safe zones.
• Layer depth: warm paper background → connector/grid → cards/props → captions → foreground prompt/result UI.

Transition vocabulary

• receipt-stack-in: cards slide 80–180px, rotate -2°→0°, shadow grows.
• phrase-collage-build: staggered caption groups, blur-up settle.
• connector-draw: dashed/orthogonal line draw-on, node pop at endpoint.
• radial-pill-populate: central topic then pills populate in 0.08–0.14s stagger.
• prompt-bar-type: hero prompt pill slides in, cursor types, green rim intensifies.
• response-to-artifact: AI result card shrinks/repositions while checklist/grid rows wipe in.
• proof-board-land: final board scales 0.94→1 with 3–5% camera push.

Carousel adaptation

• Slide 1: editorial serif hook + one prop/metaphor.
• Slide 2: “how the system works” diagram with dashed container.
• Slide 3: product input UI: use case + quality standards.
• Slide 4: mascot/agent role introduction.
• Slide 5: green check vs red X evaluation criteria.
• Slide 6: output/inbox UI showing filtered artifact.
• Slide 7: save-worthy framework: Input criteria → agent evaluates → only signal lands.
• Slide 8: CTA tied to template/comment keyword.

Reusable asset kits

When the user asks for a Greg-style / editorial AI-product Remotion or OpenNolan kit, create a reusable asset directory before building full templates: fonts, palette JSON, original SVG icons, original SVG shapes, 1080×1920 paper backgrounds, SFX placeholders or ElevenLabs-generated SFX, lightweight TSX starter components, asset ledger, zip, and visual preview/contact sheet. See references/greg-style-kit-assets.md for the base structure, QA checks, and SFX fallback.

When the user asks to generate lots of assets/icons/backgrounds for future informational Reels, produce an expanded reusable kit: Codex-native $imagegen PNG backgrounds/hero scenes/UI cards/sticker sheets plus deterministic SVG overlay icons/shapes, Remotion starter primitives, ledger, contact sheet, and zip. Use references/greg-style-expanded-asset-kit.md for the proven directory shape, prompt rules, Codex timeout recovery from ~/.codex/generated_images/<thread_id>/, Python zip fallback, and verification checklist.

Common mistakes

• Using dark neon AI aesthetics; this system is warm editorial/product, not cyberpunk.
• Showing real dense screenshots without abstraction/cropping.
• Mixing too many accent colors; use green/red/sage/gold with strict semantic roles.
• Treating mascot as decorative; it must represent agent role or quality judgment.
• Overfilling frames; negative space is part of the premium look.
• Using red casually; red must mean reject/fail.
• Delivering a zip without a preview/contact sheet; the user needs to inspect the vibe quickly before approving template build-out.