{"id":87237,"plugin_id":"plugin_asdk_app_6ad8bade38cc8191b8bbd302b4fd08bd","kind":"skill","collection_source":"plugin_package","comparison_source":null,"observed_at":"2026-11-09T12:08:00.505Z","digest":"74f7f419365da1f218f49a7d68313e1524c8e85e479c006d67f56501c2efdb7f","against":null,"payload":{"description":"Create, reproduce, adapt or fix editable designs in Abyssale through the Abyssale MCP connector — static, animated, print or multipage — from a brief, a brand URL, a reference or an existing design, including AI images and cut-outs. Works in Claude, ChatGPT and Codex. Use whenever the user wants to create or change an Abyssale design, template, banner, ad set or format variations; not for simply finding a design or rendering one unchanged.","included_files":[{"relative_path":"agents/openai.yaml","size_in_bytes":433},{"relative_path":"references/capabilities.md","size_in_bytes":10740},{"relative_path":"references/examples.md","size_in_bytes":1650},{"relative_path":"references/examples/auto-layout-min-font-control.json","size_in_bytes":1686},{"relative_path":"references/examples/native-components-multiformat.json","size_in_bytes":5050},{"relative_path":"references/examples/scratch-ai-design.json","size_in_bytes":1072},{"relative_path":"references/icons/feather.txt","size_in_bytes":2652},{"relative_path":"references/icons/material-icons.txt","size_in_bytes":28333},{"relative_path":"references/import-and-mcp.md","size_in_bytes":17006},{"relative_path":"references/mcp-limits.md","size_in_bytes":952},{"relative_path":"references/native-layers.md","size_in_bytes":15747},{"relative_path":"references/runtime-claude.md","size_in_bytes":8335},{"relative_path":"references/runtime-codex.md","size_in_bytes":4254},{"relative_path":"references/runtime-no-shell.md","size_in_bytes":2517},{"relative_path":"references/specialized-layers.md","size_in_bytes":6306},{"relative_path":"references/visual-workflow.md","size_in_bytes":15242}],"name":"abyssale-design","skill_md_contents":"---\nname: \"abyssale-design\"\ndescription: \"Create, reproduce, adapt or fix editable designs in Abyssale through the Abyssale MCP connector — static, animated, print or multipage — from a brief, a brand URL, a reference or an existing design, including AI images and cut-outs. Works in Claude, ChatGPT and Codex. Use whenever the user wants to create or change an Abyssale design, template, banner, ad set or format variations; not for simply finding a design or rendering one unchanged.\"\n---\n\n# Design and produce in Abyssale\n\nPreserve artistic intent and intended use through an **editable, native structure** that survives new copy, new formats and later corrections. No style, industry, number of formats, subject type or advertising composition is prescribed; the product and the channel set the technical limits.\n\n## Scopes\n\nThe Abyssale MCP server must be connected with the scopes for the tools you use: `read:design`, `read:project`, `read:font`, `import:design` and `generate:banner`; `read:credits` to report credits; `write:project` to create a project; `write:design` to rename or move a design; `delete:design` to delete drafts. If a call fails with an insufficient-scope error, tell the user to reconnect the connector and grant that scope.\n\n## 0. Identify the runtime first\n\nThis skill is shared by several agents. The Abyssale contract is the same for all of them; what differs is how images are produced, how files move and how renders are inspected.\n\n| You are running in… | Read first |\n|---|---|\n| **Codex** (native ImageGen, local shell and image viewer) | [runtime-codex.md](references/runtime-codex.md) |\n| **Claude** with a shell — Cowork, Claude Code, claude.ai with code execution (no native raster generation) | [runtime-claude.md](references/runtime-claude.md) |\n| **No shell** — ChatGPT web/app, claude.ai without code execution, other chat clients | [runtime-no-shell.md](references/runtime-no-shell.md) |\n| Anything else | Check the tools actually present (shell, web access, image viewing, image generation), then use the closest runtime file |\n\nRule of thumb: **Codex makes images with ImageGen; Claude makes images with Abyssale's own AI through a scratch design** (text to image, remove background, expand); without a shell, images come from URLs, Abyssale's AI or native illustrations. Steps that need a shell (downloading, scripts, local previews) apply only when one is available — the no-shell file gives the alternative for each. Everything else below is common.\n\n## Read only the relevant references\n\n| Need | Reference |\n|---|---|\n| Runtime-specific tools, image generation, uploads, render inspection | runtime-codex.md / runtime-claude.md / runtime-no-shell.md |\n| Verified native catalog: shapes, patterns, masks, filters, gradients, illustrations, text/button props, image AI, format presets, auto-layout | [Capabilities](references/capabilities.md) |\n| Creative direction, fidelity, depth, assets, adaptation by format | [Design and decomposition](references/visual-workflow.md) |\n| Layer types, typography, rotation, Button, markup, SVG lettering | [Layers and text](references/native-layers.md) |\n| JSON, tools, fonts, uploads, tracking, troubleshooting | [Import and MCP](references/import-and-mcp.md) |\n| Rating, Illustration, Video, Audio, animation | [Specialized layers](references/specialized-layers.md) |\n| Settings not available through the MCP | [MCP limits](references/mcp-limits.md) |\n| Small working payloads | [Examples](references/examples.md) |\n\nWhere a behavior isn't proven, the references say so (\"check the render\", \"check after importing\"). The import contract is Alpha: read tool schemas before first use, read `version` from `get_design_as_import` instead of assuming one, and re-check what the result depends on.\n\n## 1. Choose the workflow\n\nIdentify objective, exact content, references, assets, formats, medium and expected editability. Decide ordinary choices yourself; ask only what materially changes the result. Never invent offers, figures, performance numbers, data or official assets.\n\n| Request | Starting point |\n|---|---|\n| Open-ended creation | Brand research → direction → mockup (runtime image path, vector mockup, or a first native import) |\n| Reproducing a reference | Treat it as the target; do not regenerate what must be preserved |\n| Targeted correction | Read the design + full export; change only the cause |\n| Format adaptation | Preserve invariants and recompose for the new formats |\n| Dynamic template | Separate fixed/variable content; plan long/short copy, languages, image swaps |\n\nEstablish the output type: static, animated, print or multipage. Typographic, editorial or abstract visuals need no photo, cut-out or CTA. Before a structural change to an existing design, read its formats and its full export (take `.payload` from `get_design_as_import` and add a `target`). Then fix it through the MCP: change the exported JSON and re-import it as a new version (see §5). A re-import creates a new object; a generation override never modifies the saved design.\n\n## 2. Define the visual target\n\n**Brand research from a URL.** Official CSS is the most reliable source of tokens: download the page and extract CSS custom properties (`--color-*`, `--font-*`), dominant hex colors, logo SVG and font files. Check logo fills against the planned background (a navy wordmark vanishes on navy), open candidate images, copy official taglines verbatim, note mandatory legal mentions. Look for the brand font among workspace fonts (`list_fonts(name=…, type=\"custom\")`) before substituting a Google font; disclose substitutions.\n\n**Regulated sectors** (finance, health, alcohol, gambling, credit…): mandatory risk mention on every format, non-promissory benefit wording, only figures the brand publishes, compliance validation flagged to the user.\n\nDefine hierarchy, composition, palette, typographic intent and rhythm. Keep creative freedom at mockup stage (no font or specimen imposed unless the brief requires it). From the chosen direction, list visible invariants — text silhouette and weight, colors and punctuation, size ratios, angles, motifs, placements, front/back relations. A clean but weaker rebuild is not a faithful one. When feedback is \"too plain\", change a real lever (composition, title mass, illustration, contrast, iconography), not random ornaments.\n\n## 3. Derive the structure\n\nRun the [depth and overlap analysis](references/visual-workflow.md#depth-and-overlap-analysis) when elements intersect. Choose each editable unit by behavior:\n\n- Format background for flat, linear- or radial-gradient fills — not an Image layer.\n- Text for editable copy, with partial styles via markup in one layer.\n- Button for label + background that change together; Shape for independent geometry (capsule = rectangle `radius: 999`, exact circle = `circle`).\n- **Illustration layers** (feather, material_icons, undraw — recolorable with `primary_color`) for icons and flat scenes that must stay editable. Take names from `references/icons/*.txt` — with a shell, search them with `grep` (never read the lists whole); otherwise search the file's text. Use undraw only with a known name.\n- Image for photos, textures, complex art, custom SVG; Logo for supplied logos.\n- **Group with `auto_layout`** for anything that must stack or align (headline → subline → bullets → CTA; icon + label rows).\n\nHighly stylized lettering without a close font may become outlined SVG in an Image layer; keep other text native and disclose the loss of text editing. Record decisions (stable layer names, role, type, z-order, per-format geometry, variations) in the build script, or in your notes without a shell.\n\n## 4. Adapt formats and content\n\nRecompose each ratio: reading axes, crops, line breaks, relative sizes, motifs, content zones. Use the format presets and safe zones in [capabilities.md](references/capabilities.md#format-presets). On small formats hide optional elements before shrinking everything; never drop mandatory mentions.\n\n### Safe zones constrain content, never the decor (full bleed)\n\nEvery format has two geometries: the **canvas** (edge to edge) and the **safe area** (inside margins and platform-UI zones, e.g. story top ~250 px / bottom ~340 px). They govern different things:\n\n- **Safe area → important content only**: headline, offer, CTA, logo, legal mentions, key face or product. These stay inside it.\n- **Canvas → everything that is decor**: photo, illustration, scene, sky, ground, texture, color fields, decorative shapes. These **always continue to all four edges**, including through the unsafe zones.\n\nConsequences:\n\n- **Never leave dead space outside the safe area.** No flat empty band, no plain-color margin, no letterbox left behind because content was pulled inward. If a zone outside the safe area holds nothing important, the scene continues there (the image keeps going, the illustration's sky/floor/background extends, the pattern runs off the edge).\n- **Decor image boxes cover the whole canvas** (they may overflow it). When the source image does not cover the new ratio — a square scene in a 9:16 story, a portrait photo in a 1.91:1 landscape — *extend the image*: outpaint it (`expand` through the scratch pipeline / ImageGen), generate it at the target ratio, or recompose with a wider/taller source. Never shrink it and fill the rest with background color.\n- **Illustrations and vector scenes**: draw the scene to the full format (one SVG per ratio, or an oversized canvas with the key subject in the safe center) so background elements bleed off every edge.\n- **Text panels / color blocks** are allowed as deliberate composition, but they must reach the canvas edges they touch *and* be filled by content or decor. If part of a panel ends up empty (typically the bottom of a story below the legal mention), let the image continue behind instead: shorten the panel to its content, or replace it with an overlay/gradient over the continuing image (Image `overlay`, or a gradient Shape) that keeps the text legible.\n- Cut-outs, pop-outs and overlaps are welcome in the unsafe zones (a subject can cross into them); text and CTAs are not.\n\nTwo rules that prevent most layout defects:\n- **Auto-layout stacks** instead of hand-placed blocks: the vertical order follows the member layers' order in `layers[]`, **reversed** (last in `layers[]` = top of the stack); `layer_ids` order has no effect (observed, not documented — check on the first render).\n- **`min_font_size` on every variable text**, so longer copy shrinks to fit its box.\n\nFor animation and print, apply the medium-specific checks; a preview PNG is not enough (print: decor extends into the bleed too). For display formats, offer an animated HTML5 variant when a simple motion idea exists.\n\n## 5. Build and save\n\nWith a shell, generate the payload with a script (template in [capabilities.md](references/capabilities.md#payload-builder-template)); without one, start from `get_design_import_example` or `get_design_as_import` and always run `validate_only` first ([runtime-no-shell.md](references/runtime-no-shell.md)). Follow the [MCP protocol](references/import-and-mcp.md). Fragile points:\n\n- Resolve real font UUIDs and variants; add an explicit `target`.\n- Multi-format: key every `layout` and `properties` by format name; `default` only for shared values. Give hidden Text/Button layers a realistic box.\n- Import properties ≠ generation attributes.\n- `validate_only` checks structure only — it does **not** fetch image URLs or resolve fonts.\n- Assets, in order: Abyssale-hosted URLs (reuse those returned by `get_design_as_import` or by a generation — no upload, and no risk of a site blocking Abyssale's fetcher) → public HTTPS (brand sites behind a WAF may return 502 to Abyssale) → data URI (base64, 100 KB max, read from the file by a tool — never typed) → local file upload, only if you can run the returned `upload_command` yourself. Never hand upload commands to the user.\n- Keep the `import_id`; imports are not idempotent. Read all warnings.\n- AI steps cost AI credits that vary by model: never estimate a cost in advance. Before more than a few AI calls, say how many you plan; afterwards report the credits actually used (`get_remaining_credits` before and after).\n- **The connector can't edit a design's content.** Every re-import creates a new design: validate the layout before the first import (a local mockup of every format is cheap), iterate cheaply with generation overrides, and name versions clearly. Once the final version is approved, offer to delete the drafts with `delete_design` — after the user confirms, as there is no undo — and to rename (`rename_design`) or move (`move_design`) the final design. A corrected version has a new ID: tell the user, since links or integrations using the old design must be updated. The scratch design used for AI images can be kept for later tasks.\n\nSome settings aren't available through the MCP ([MCP limits](references/mcp-limits.md)): say so instead of inventing a property.\n\n## 6. Verify and deliver\n\nRender the **saved** design (one `generate_banners_async` for several formats, or `generate_static_banner` per format) and inspect every format as an image — a contact sheet helps. Check exact copy, graphic impact, real rendered font sizes, holes left by wrapping, margins and safe zones, crops, contrast of key objects, legal mentions, overlaps, CTA box vs label. **Check the edges**: along each border (especially story top/bottom and landscape sides), the decor must continue — any flat empty band or unused panel area outside the safe zone is a defect to fix, not a margin. `DONE` and zero warnings prove nothing visually. Test a long-copy variant on the most constrained format. Fix causes, re-render affected formats, then stop iterating.\n\nDeliver: link/id and project, a real preview, formats produced, substitutions (fonts, assets), non-editable parts (SVG art, vector lettering), which images are AI-generated and AI credits used, drafts and test designs to delete (the scratch design can be kept), items needing brand or compliance validation. Keep the payload, SVGs and assets as files. Distinguish prepared / imported / saved / rendered / inspected. Remove construction leftovers hidden everywhere; in targeted fixes, only clean what your change made useless."},"changes":[],"summary":"First saved snapshot. No earlier version is available for comparison.","summary_kind":"deterministic","summary_metadata":{}}