ckm:design

Generate brand identity, design tokens, UI styling, CIP mockups, and HTML presentations.

Updated Apr 9, 2026
One-click install
npx skills add https://github.com/DatTran26/KienTruThiHanh --skill ckm-design-dattran26
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ckm:design
Source: https://github.com/DatTran26/KienTruThiHanh/tree/main/.agents/skills/design
Command: npx skills add https://github.com/DatTran26/KienTruThiHanh --skill ckm-design-dattran26

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires google-genai, pillow, and includes scripts (resource) and references (resource) components.

What problem does it solve?

Design pipelines for modern brands are often fragmented across multiple tools and asset types, making it hard to maintain a single, cohesive design language.

Core Features & Use Cases

  • Brand identity: establish a coherent brand voice, visual language, and asset library that scales across platforms.
  • Tokens & UI styling: generate design tokens and UI styling guidelines to ensure consistent implementation in codebases.
  • CIP & deliverables: produce corporate identity program mockups and standardized deliverables (logos, stationery, signage, apparel).
  • Presentations & banners: assemble HTML slide decks and branded banners for web, ads, and social.
  • Iconography & social visuals: create icon sets and social-ready imagery (HTML → screenshot workflows).
  • References & scripts: provide curated references and scripts to automate asset generation.

Quick Start

Prompt the AI to generate a complete design package including brand identity, design tokens, UI styling, CIP mockups, HTML slides, banners, icons, and social visuals.

Frequently Asked Questions about ckm:design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate design tokens and UI styling guidelines for my codebase?

Generate design tokens and UI styling guidelines by prompting the AI to establish a coherent brand visual language that scales across platforms. The Skill outputs structured tokens to ensure consistent implementation within codebases.

What is the best way to create a cohesive brand identity and CIP mockups?

Creating a cohesive brand identity and CIP mockups is best handled through an end-to-end design workflow that produces standardized deliverables. This Skill generates corporate identity program mockups including logos, stationery, signage, and apparel.

Can I use HTML presentations and banners for web and social media automatically?

Yes, you can assemble HTML slide decks and branded banners for web, ads, and social media. The Skill provides scripts to automate output, using HTML to screenshot workflows for social-ready imagery.

Does this design workflow enforce a structured schema for asset consistency?

Yes, the workflow enforces a structured schema with YAML frontmatter, front-facing instructions, and optional resource directories to guide asset creation. This ensures consistency across identity, tokens, UI components, and marketing deliverables.

Do I need google-genai and pillow to automate asset generation?

Yes, you need google-genai and pillow as dependencies to automate asset generation. The Skill uses these libraries within its scripts and references directories to generate logos, banners, icons, and social photos.

How to automate logo generation and social photo creation with scripts?

Automate logo generation and social photo creation by utilizing the provided scripts and curated references within the Skill. These resources automate output for icon sets, social-ready imagery, and standardized brand deliverables.