Stats
Actions
Tags
From ditto-brand
Use this skill to generate well-branded interfaces and assets for Ditto (the CSR & compliance copilot) — production code or throwaway prototypes/mocks. It bundles the full Ditto design system: brand guidelines, color and type tokens, self-hosted fonts, brand assets (logo, illustrations, shapes, icons), a marketing-site UI kit, and a slide-template system. Reach for it on requests like "build a Ditto landing page", "mock an on-brand dashboard", "make a branded prototype", or "design something that looks like Ditto".
How this skill is triggered — by the user, by Claude, or both
Slash command
/ditto-brand:ditto-designThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
The full Ditto design system is bundled **inside this skill**. Read
README.mdassets/brand-icons/customer-success.pngassets/brand-icons/expertise.pngassets/brand-icons/growth.pngassets/brand-icons/icon-1.pngassets/brand-icons/icon-2.pngassets/brand-icons/icon-3.pngassets/brand-icons/icon-4.pngassets/brand-icons/icon-5.pngassets/brand-icons/icon-6.pngassets/brand-icons/sales.pngassets/cert-ecovadis.pngassets/ditto-logo-navy.pngassets/ditto-logo-navy.svgassets/ditto-logo.svgassets/favicon.svgassets/feature-expertise.jpgassets/feature-platform.jpgassets/feature-questionnaire.jpgassets/hero-bg.pngThe full Ditto design system is bundled inside this skill. Read
README.md (the complete brand guide) first, then explore the other files below
before designing anything.
If creating visual artifacts (slides, mocks, throwaway prototypes), copy the assets you need out and create static HTML files for the user to view. If working on production code, copy assets and read the rules here to become an expert in designing with this brand.
If the user invokes this skill without further guidance, ask them what they want to build, ask a couple of scoping questions, and act as an expert designer who outputs HTML artifacts or production code, depending on the need.
README.md — the complete brand guide: voice, color, type, imagery (the
three pillars), shape/elevation, buttons, motion, layout, iconography.colors_and_type.css — import this; everything keys off its CSS variables
(--navy, --yellow, --tan, the accent/neutral ramps, type classes
.h1–.h4, .text-*, radii, warm shadows, spacing). styles.css is a thin
starter on top.fonts/ — Hedvig Letters Serif (display/headings) + Inter (body/UI),
self-hosted and wired up via @font-face in colors_and_type.css.assets/ — ditto-logo.svg (currentColor wordmark), favicon.svg,
illustrations/ (pillar 1: risograph brand illustrations), shapes/ (pillar 2:
overlapping geometric marks, multiply-blend), brand-icons/, cert-ecovadis.png,
and product-app screenshots (hero-bg.png, hero-fg.png).ui_kits/website/ — the marketing site (ditto.com) as reusable JSX: logo,
pill buttons, header w/ mega-menu, hero, feature rows, testimonials, footer.
Open index.html for the interactive prototype.slides/ — the on-brand deck-template system (1920×1080, auto-scaling,
print-to-PDF) split into themed decks (covers, chapters, agendas, quotes,
closings, stats, content). See slides/README.md. The companion
deck-designer skill encodes the rules for routing and building slides.preview/ — Design-System preview cards (foundations + components).README.md; the brand-copywriting
skill encodes it for copy work.)#EFF2E5); the app lives on near-white
(#FAFAFA). Text on navy is tan, not white.999px). Primary = navy/tan, Secondary = yellow/navy,
Tertiary = transparent.assets/shapes/), (3)
photography (reserved, direction TBD). Don't mix shapes over photography or
illustration.https://unpkg.com/lucide@latest).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