Stats
Actions
Tags
From ditto-brand
Use this skill whenever the user wants to create, design, or restyle a Ditto slide deck or presentation — e.g. "make a Ditto deck", "design slides for our webinar", "build a pitch deck on-brand", "turn these notes into a Ditto presentation", or "fix this slide to match our brand". It encodes Ditto's deck design system: slide-type routing, typography (Hedvig Letters Serif + Inter), the tan/yellow color rules, corner elements, left-aligned/top-anchored layout, image-forward covers and closers, and the requirement that output be native, editable Canva objects. Apply it to every slide.
How this skill is triggered — by the user, by Claude, or both
Slash command
/ditto-brand:deck-designerThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Design Ditto decks that look unmistakably like Ditto. These rules are the priorities and prohibitions. They are fixed — everything else is open to creative direction.
Design Ditto decks that look unmistakably like Ditto. These rules are the priorities and prohibitions. They are fixed — everything else is open to creative direction.
All exact values — type sizes, colors (hex), corner padding, content margins, the spacing scale, and slide dimensions — live in the Ditto design system template slides, bundled with this plugin in the sibling ditto-design skill:
../ditto-design/slides/ — one deck per section (covers.html, chapters.html, agendas.html, quotes.html, closings.html, stats.html, content.html), all keyed off slides/slide-system.css (the single source of truth for canvas, type, spacing, and every slide layout). See slides/README.md.../ditto-design/colors_and_type.css and ../ditto-design/fonts/ (Hedvig Letters Serif + Inter).../ditto-design/assets/ — logo, favicon, illustrations, overlapping-shapes marks, brand icons.Pull every measurement from slide-system.css and the template decks. Do not invent or approximate measurements; match the templates. Copy a <section> from the matching deck and swap the copy for fast on-brand slides.
If the user provides their own image assets, use those. If a specific image source can't be accessed, leave a clearly labeled placeholder — never drop in generic stock to fill the gap.
The deliverable is an editable deck, not a flat picture. Build every slide as discrete, native elements: each text block is its own live text box, each image/icon its own placed element, each color block or divider a native shape. Never merge multiple things into one object or one image. Text is always live text, separate from any image behind it. For any photo you can't place as a discrete image, leave a labeled image placeholder — don't render it into the slide art. Goal: every text box, image, and shape can be clicked and edited on its own in Canva.
Every slide must be built from one of the design system's slide sections. Route by content:
Match the chosen section's layout, scale, and structure.
Two fonts ONLY:
Use the sizes from the design system. Fallback: if Hedvig can't be applied, the only substitute is Georgia (also a serif). NEVER substitute a sans-serif for a display/header role. Any headline-scale text must be the serif — never Inter at that size.
Body must stay large enough to read on a shared screen during a webinar or Google Meet; use the design-system body size, don't go smaller. Heroes and stat numbers must DOMINATE — treat the system's sizes as floors and scale UP to fill the space, never down. On stat slides the numeral is the hero: units/symbols (%, ×, +) set much smaller than the numeral, with a short Inter label beneath.
Avoid orphans/widows. Hard-break hero lines on purpose for rhythm. Text is NEVER colorful.
Four fixed items, per the design system's corner placement and padding:
Corner text uses the corner style from the design system. Color: black on tan for the most part. Hide any corner element if content crowds it (e.g. a full-bleed image running to that edge) — legibility wins.
Logo size: the Ditto logo runs at the design system's standard corner size on regular slides. On covers, closing slides, and sometimes chapter titles, scale the logo UP — it's a brand moment on these slides, not just a corner marker. Use the larger logo size from the design system for these slide types.
Horizontal: all main content is LEFT-ALIGNED on the design system's content grid (left margin). This is the deck's voice. The horizontal left start has NO exception.
Vertical: standard content slides are TOP-ANCHORED — the top of the first element (textbox / overline / title, whichever comes first) sits on the top margin from the design system, the same fixed line on every slide, like the left margin.
Exempt (vertical only): covers, chapter/section dividers, single-stat heroes, closing pages, and other intentionally creative slides — top, center, or bottom alignment is fine. A centered or drifting STANDARD content slide is a failure; the exemptions above are the only place centering belongs.
These carry the first and last impression. Push scale, composition, and color hardest here, and run the logo larger.
Place a real image (from the provided assets or the design system) as a discrete element per the section's layout. If none fits, leave a labeled placeholder — never ship a bare text-only slide as a cover or closer, and never drop in generic stock. If the cover or closer could belong to any generic SaaS deck, redo it.
Backgrounds are TAN by default and stay consistent across regular slides — a wall of steady tan is correct, not monotonous. A change in background color must signify a change in meaning or importance; never alternate tone for visual variety alone.
Reserve YELLOW for high-impact, meaning-bearing slides — chapter dividers, single-stat heroes — to mark a shift, not decoration. Accent is yellow: highlights, callouts, labels.
Use the design system's spacing scale between elements. Corners follow their own padding rules.
Icons from Lucide (https://lucide.dev) — consistent line style and stroke weight across the deck. Photography/illustration: use assets the user provides or pull directly from the bundled design system (../ditto-design/assets/ — illustrations and overlapping-shapes marks). If you can't access an image source, leave a clearly labeled placeholder — do NOT drop in generic stock.
The rules above are fixed; everything else is open. Play with scale hard — very large type against deliberate empty space. Use the accent boldly or sparingly. Variety keeps the brand fresh, but within the constraints. If a slide could appear in any generic SaaS template, it's wrong — redo it.
Creates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.
npx claudepluginhub beavrtech/ditto-internal-plugin-marketplace --plugin ditto-brand