Cold-IQInstall Design Packages
Pick your agent. Every command is ready to paste.
npx skills add Cold-IQ/ColdIQ-s-GTM-Skills --skill design-packagesThe open skills CLI detects your agents (Claude Code, Cursor, Codex and 70+ more) and installs to the right folder. Add -g to install globally.
01
Install it
Run the command above, or upload the folder in Claude.
02
Ask naturally
Describe the task. Your agent loads design-packages when the request matches its description.
03
Name it if needed
If it does not trigger, say “use the design-packages skill”. In Codex, type $design-packages.
The skill itself
SKILL.md
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
- Browse: read
INDEX.mdhere — one line per package (name, description, size). - 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-*). - Read the shortlisted
DESIGN.mds — they contain the reasoning, not just tokens. - Preview: open
html/preview.html(or screenshot it headless) to judge visually. - Apply: port tokens and patterns from
css/system.cssinto 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.
Tips for Design Packages
- • Start a fresh session after installing so your agent picks up the new skill.
- • It is part of a pack with 40 skills. Install only the ones you need with --skill to keep triggers precise.
- • If two skills overlap, mention the one you want by name.
Questions about Design Packages
What does the Design Packages skill do?
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.
How do I install Design Packages?
Run "npx skills add Cold-IQ/ColdIQ-s-GTM-Skills --skill design-packages" in your project. The skills CLI installs it for Claude Code, Cursor, Codex and 70+ other agents. In Claude on the web, upload the skill folder as a ZIP under Customize > Skills.
Does Design Packages work in Cursor and Codex?
Yes. Design Packages uses the open SKILL.md format, so it works in Claude Code, Claude, Cursor, OpenAI Codex, Gemini CLI, GitHub Copilot and other agents that support agent skills.
Is Design Packages free?
Design Packages is open source on GitHub. It is free to install; check the license before commercial use.
Who made Design Packages?
Design Packages is published by Cold-IQ in the Cold-IQ/ColdIQ-s-GTM-Skills repository, together with 39 other skills.
