Skip to content
Marketing
Skill

/design-packages

Use when choosing an art direction, visual style, or complete design system for a new page, landing, or site — or when the user asks to browse, compare, or apply one of the 44 local design packages (frosted glass, retro terminal, editorial bento, dark infrastructure,

BOOST
From plugin
coldiq-s-gtm-skills
30184 skills
Install
$ npx -y skills add cold-iq/coldiq-s-gtm-skills --skill design-packages --agent claude-code

How it fires

How this skill gets triggered: by you, by Claude, or both.

  • Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.Auto-invocation is when the right skill fires by itself at the right moment, driven by a FLOW.md router and a hook, instead of you invoking it by name. It is the difference between a skill being installed and a skill actually getting used.Read the full definition →
  • You can call itInvoke it directly when you want it.
  • Slash command/design-packages

Context preview

The summary Claude sees to decide when to auto-load this skill.

Use when choosing an art direction, visual style, or complete design system for a new page, landing, or site — or when the user asks to browse, compare, or apply one of the 44 local design packages (frosted glass, retro terminal, editorial bento, dark infrastructure,

SKILL.md

design-packages.SKILL.md
name: design-packages
description: Use when choosing an art direction, visual style, or complete design system for a new page, landing, or site — or when the user asks to browse, compare, or apply one of the 44 local design packages (frosted glass, retro terminal, editorial bento, dark infrastructure, paper-and-ink…). Each package ships a full CSS system and HTML preview.

Design Packages — 44 complete design systems, local

What this is

44 self-contained design systems stored in this folder, one directory each. They are ART DIRECTIONS to pick from — not components. For ColdIQ house rules, see the `design-pack` skill; for sourcing animated components from external galleries, see `design-stack`.

Structure of every package

<name>/
├── DESIGN.md        # written spec: concept, type, color, spacing, motion rules
├── metadata.json    # name + one-line description
├── css/system.css   # the complete CSS system, ready to adapt
├── html/preview.html + cover.html   # full demo pages
└── images/ or screenshots/

Workflow

1. **Browse**: read `INDEX.md` here — one line per package (name, description, size). 2. **Shortlist 2–3** directions matching the brief's tone (e.g. finance SaaS → `verda-finance`, `lumenwave-finance`, `voltline-analytics`; editorial/studio → `folio`, `boldcase`, `frame-field`; dark technical → `forge`, `cairn-2`, `fuzzy-duck-40-*`). 3. **Read the shortlisted `DESIGN.md`s** — they contain the reasoning, not just tokens. 4. **Preview**: open `html/preview.html` (or screenshot it headless) to judge visually. 5. **Apply**: port tokens and patterns from `css/system.css` into the project's stack — adapt naming to the codebase, keep the system's proportions, type pairings, and motion constants intact.

Rules

  • Never mix two packages' tokens on one page — pick one direction and commit.
  • These are starting systems, not brand law: ColdIQ brand constraints (see `design-pack`) win on conflicts.
  • When the user asks "montre-moi des directions", present 3 contrasting options with one-line rationales, not the full list of 44.
Read more
Ships withcoldiq-s-gtm-skills

A complete library of Claude Code skills for Go-To-Market teams — 6 master skills (43 sub-skills) + 31 standalone skills.

Get the whole plugin

Other skills on coldiq-s-gtm-skills.