Communitygithub.com

kodawarimax/omni-design-studio

Extracts color, composition DNA, and catchphrase deterministically from concept sheets & reference designs (images/URLs/100 human-curated), composites with subscription-free top-tier image models (Codex `image_gen` [gpt-image-2.5-sunburst] or Antigravity `image-generator` [Imagen 4 Ultra]), and generates ①Website, ②300DPI poster (PNG/PDF), ③Package (3D mockup & dieline SVG), ④Promo video (9:16 vertical & 16:9 horizontal MP4) in one command – a 3-step deterministic design skill that delivers identical quality even with lower-tier models.

What is omni-design-studio?

Omni-Design Studio is an integrated design skill that deterministically extracts color, composition DNA, and catchphrases from concept question sheets and reference designs (images, URLs, or 100 human-curated samples using `curate_human_designs.py`). It composites these with subscription-free top-tier image models – Codex’s built-in `image_gen` (gpt-image-2.5-sunburst) or Antigravity’s `image-generator` (Imagen 4 Ultra) – to produce four deliverables in one command: a responsive website (HTML with inline WYSIWYG editor), a 300 DPI poster (PNG/PDF), a package design (3D mockup PNG & dieline SVG), and a promo video (9:16 vertical & 16:9 horizontal MP4) with editable captions (SRT/VTT). The core innovation is a “Formula-First” deterministic Python pipeline (`build_omni_design.py`) that encapsulates all complex decisions (color extraction, catchphrase composition, asymmetric editorial typesetting, 300 DPI PDF/SVG dieline generation, 24fps video easing & voice synthesis) into a single script. AI agents, whether top-tier or budget models, only need to follow a strict 3-step state machine: ① Ask concept questions or extract DNA with `--print-image-prompts`, ② Generate three studio-quality product photos using the subscription-free top-tier model, ③ Run the final build command with `--auto-codex-images` or explicit image paths to generate all outputs instantly. The generated deliverables come with a built-in WordPress-style visual editor (CMS Editor Runtime) that allows designers to edit text, images, layout blocks, and video captions directly in the browser without any external tools. This makes the skill suitable for rapid prototyping, production-ready marketing materials, and client presentations – at zero additional subscription cost beyond the agent platform’s base subscription.

Works with✓Claude Code✓Codex CLI~Cursor✓Antigravity
npx skills add kodawarimax/omni-design-studio
View original→Browse all skills

Ask in your favorite AI

Open a new chat with this agent skill pre-loaded.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentation

Omni-Design Studio (3-Step Deterministic Design & Promo Video Integration Skill)

🎯 Design Philosophy (Why even low-tier models produce professional quality?) All complex decisions – color extraction, catchphrase composition, asymmetric editorial typesetting, 300 DPI PDF/SVG dieline generation, 24fps video easing & voice synthesis – are encapsulated in a single deterministic Python pipeline (build_omni_design.py, Formula-First). AI agents (both high-end and low-end models) only need to execute the following "3 Steps (① Prepare ➔ ② Generate 3 Photos ➔ ③ Batch Build)" in order to consistently output human-designer-quality deliverables.

🗺️ Overall Architecture Diagram (3-Step State Machine)

flowchart TD
    Start(["👤 User Request"]) --> Check{"Are the concept & reference images specified?"}

    %% Step 1
    Check -- "Not specified (vague request)" --> Ask["【Step 1A】Present 5 Core Questions<br>`build_omni_design.py --ask-concept`"]
    Ask --> UserAns["User answers / fill sheet"]
    Check -- "Specified / Answered" --> PromptGen["【Step 1B】Extract DNA & Output 3 Photo Prompts<br>`build_omni_design.py --print-image-prompts`<br>(`--ref-image / --ref-url / --concept-sheet`)"]
    UserAns --> PromptGen

    %% Step 2
    PromptGen --> Harness{"Execution Environment (Harness)?"}
    Harness -- "Codex (Primary)" --> CodexImg["【Step 2A】Codex Built-in image_gen Tool × 3<br>(gpt-image-2.5-sunburst / $0 subscription)<br>Auto-saves to ~/.codex/generated_images/"]
    Harness -- "Antigravity" --> AgyImg["【Step 2B】image-generator Sub-agent × 3 images<br>(Imagen 4 Ultra / $0 subscription)"]
    Harness -- "User provides images / none" --> DirectBuild

    %% Step 3
    CodexImg --> DirectBuild["【Step 3】One-command Full Media Build<br>`build_omni_design.py --auto-codex-images --with-promo-video`"]
    AgyImg --> DirectBuild

    DirectBuild --> Out(["📦 Fully Editable Complete Package ($0)<br>① website.html / poster.html / packaging_mockup.html<br>（Built-in WordPress-style Visual Block & Canvas Editor）<br>② website_preview.png / poster_300dpi.png / poster_print.pdf / packaging_3d_mockup.png / packaging_dieline.svg<br>③ promo_video_vertical_9x16.mp4 / landscape_16x9.mp4<br>④ promo_video_studio_9x16.html / 16x9.html (Browser-based subtitle & timeline editing studio)<br>⑤ promo_captions.srt / .vtt (Premiere / CapCut subtitles) & promo_audio_track.wav"])

⚡ "3-Step Execution Rule" – Never Hesitate, Even with Lower-Tier Models

Always use only the following single script path (all sub-scripts are called automatically internally): SCRIPT="$HOME/.codex/skills/omni-design-studio/scripts/build_omni_design.py"

Step 1: Confirm Concept & Get 3 Photo Generation Prompts

  1. If the catchphrase or concept is undecided, first run the following to ask the user 5 questions (Target, 3 Benefits, Who × By What × Becomes How, Destroy Old Premise ➔ True Solution, Before-After): 
    python3 "$SCRIPT" --ask-concept
    (Master template: templates/CONCEPT_QUESTION_SHEET.md)
  2. Once the brand name, reference image (--ref-image / --ref-url) are decided, run with --print-image-prompts to get 3 photo prompts (JSON) harmonized with the color & taste DNA: 
    python3 "$SCRIPT" \
  --brand "Brand Name" \
  --category "Product Category (e.g., Earrings, Fine Jewelry)" \
  --ref-image "/path/to/reference.jpg" \
  --print-image-prompts
    *(If no reference image, omit --ref-image; the default human-curated DNA organic_editorial color scheme & taste will be used)

Step 2: Generate 3 Photo Assets Using $0 Subscription Top-Tier Model (Text-Free Photos)

Using the 3 prompts output from Step 1 (hero_image_prompt, poster_image_prompt, pack_image_prompt), generate 3 pure commercial studio photos without any text (No API key pay-as-you-go charges; use only within the subscription):

  • 🅰️ If running in Codex (1st Priority: gpt-image-2.5-sunburst): Call Codex's built-in image_gen tool 3 times (auto-saved to ~/.codex/generated_images/).
  • 🅱️ If running in Antigravity (Imagen 4 Ultra / Nano Banana 2.1): Call invoke_subagent(TypeName="image-generator") to generate 3 images and receive the save paths.
  • 🅲 If the user prepares images: Directly convey the "📋 Asset Request from Agent (required photo compositions, recommended sizes, AI prompt suggestions)" output by Step 1 (run without --print-image-prompts) to the user.

Step 3: One-Command Output of All Designs & Promo Videos

Just run the following single command to complete all deliverables: 3 HTML files that allow free editing of images, text, elements, and layouts in the browser like WordPress, high-resolution PNG/PDF/SVG files, and a full promo video package where captions and video can be freely edited later:

# For Codex (--auto-codex-images auto-binds the images generated in Step 2)
python3 "$HOME/.codex/skills/omni-design-studio/scripts/build_omni_design.py" \
  --auto-codex-images \
  --target all \
  --with-promo-video \
  --brand "LUMIÈRE & CO." \
  --category "Earrings, Fine Jewelry" \
  --headline "Luminous Craft," \
  --subcopy "An organic earring collection weaving 18K recycled gold and Akoya pearls" \
  --out-dir ~/Downloads/omni_output_pack

# For Antigravity / Claude Code or explicit image path specification
python3 "$HOME/.codex/skills/omni-design-studio/scripts/build_omni_design.py" \
  --target all \
  --with-promo-video \
  --brand "LUMIÈRE & CO." \
  --category "Earrings, Fine Jewelry" \
  --headline "Luminous Craft," \
  --subcopy "An organic earring collection weaving 18K recycled gold and Akoya pearls" \
  --hero-image /path/to/hero.jpg \
  --poster-image /path/to/poster.jpg \
  --pack-image /path/to/pack.jpg \
  --out-dir ~/Downloads/omni_output_pack

🎨 Post-Output WordPress-Style Visual Editing & Video Caption Editing (Built-in Standard)

The 3 generated design files (website.html, poster.html, packaging_mockup.html) and video studio files (promo_video_studio_9x16.html, promo_video_studio_16x9.html) are automatically embedded with a WordPress (Gutenberg)/Studio-style visual editor (✦ OMNI WP-STUDIO) via cms_editor_runtime.py. Just open them in a browser to perform the following edits:

  1. Direct Text Editing (Inline WYSIWYG): Click on headings, body text, badges, or vertical copy to type corrections directly; change font size (A+/A-), text color, and font family (Mincho / Modern Japanese / Gothic / Brutalism / Swiss Grid) with a single click.
  2. Image Replacement & Frame Shape Change: Double-click an image (or drag & drop from your PC) to instantly replace it with another photo. Freely switch frame shapes between "Arch Window (Arch)", "Rounded Card (Bento)", "Sharp (Sharp)", and "Circle (Circle)".
  3. Free Element, Block, & Layout Movement: Move selected elements in all directions (↑/↓/←/→), duplicate blocks (⧉) or delete them (🗑️), add new text/image blocks (＋ Add Text / 🖼️ Add Image), and flip left-right two-column layouts with one click (⇄ Flip Layout).
  4. Save Edited HTML & Export PDF: Use the toolbar's 💾 Save HTML to save the edited state as a single HTML file; use 🖨️ Export PDF to output a high-resolution PDF/print with the toolbar automatically hidden.
  5. Post-Production Video & Caption Editing:
    • promo_video_studio_9x16.html / 16x9.html: Seek and play Scene 1–4 using the timeline bar at the bottom, directly rewrite subtitles (captions), headings, and photos within the video, and use the 📝 Save SRT Subtitles button to immediately export the edited subtitle file.
    • promo_captions.srt / promo_captions.vtt / promo_audio_track.wav: These can be directly imported into Premiere Pro, CapCut, DaVinci Resolve, Final Cut Pro, etc., for subtitle replacement and BGM/narration re-editing.

🛠️ Optional Feature Reference (Use Only When Needed)

What You Want To DoAdditional Flag / Command
Auto-apply copy from a filled concept sheet--concept-sheet /path/to/CONCEPT_QUESTION_SHEET.md
Fully replicate colors, taste, and fonts from reference image/URL--ref-image /path/to/sample.jpg or --ref-url https://...
Manually specify design style (default: organic_editorial)--trend [organic_editorial | japanese_luxury | bento_glass | neo_brutalism | swiss_editorial | cyber_pop]
Generate contact sheet of 100 human-designer pickspython3 .../scripts/curate_human_designs.py --out-dir ~/Downloads/curation_100
Mass production mode (Plan B: DeepSeek + Flux ~¥0.6/unit)--plan plan_b (default: --plan plan_a = $0 subscription)

Related Skills

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community