bytekite-design-system

스타11

포크3

업데이트2026년 3월 27일 15:02

Layout pattern guidance for BYTE&KITE creatives — 11 layout types, composition rules, background diversity systems, and format-specific adaptations (square 1080×1080, story 1080×1920, landscape 1200×628). Use this skill before choosing any layout for a BYTE&KITE creative, when adapting content across formats, or when building multi-slide carousels. Trigger alongside bytekite-brand-creatives for any BYTE&KITE visual creation task. Pair with bytekite-brand-creatives for colors, fonts, and logo rules.

설치

Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.

출처

Lozovoi-Rodion

Lozovoi-Rodion/Claude-Skills

GitHub 저장소 열기 Creator 저장소 보기

다운로드

BYTE&KITE Design System

Pair with: ../bytekite-brand-creatives/skill.md for colors, fonts, and logo rules.

Reference files to load on demand:

Layout specs: references/layout-01-meme-collage.md through references/layout-11-integration-map.md
Background systems + CSS: references/backgrounds.md
Composition rules + format adaptation: references/composition.md
Brand assets: assets/ref_01.png – assets/ref_06.png (primary examples; ref_07–ref_25 available)

1. Formats

Format	Size	Ratio	Usage
Square	1080×1080	1:1	Instagram feed, carousel
Story	1080×1920	9:16	Stories, Reels, vertical video
Landscape	1200×628	~1.9:1	LinkedIn, Facebook, ads

Design format-first — not a cropped version of another format.

2. Universal Elements (present on every creative)

Corner accent: black triangle top-right (clip-path: polygon(100% 0, 0 0, 100% X%)), kite icon inside. Omit triangle on dark bgs — place kite icon directly.

Arrow button: bottom-right corner. Black square (48–64px), lime arrow inside. Inverted (lime bg, black arrow) on lime backgrounds.

Background pattern: light bgs → subtle cross-hatch grid (36px). Dark bgs → lime dot grid (28px, 12–18% opacity). See references/backgrounds.md for full CSS.

Background diversity (carousels): NEVER repeat the same bg on two adjacent slides. 3–5 slides → min 3 different systems. See references/backgrounds.md for the 7 systems (A–G).

Headline fonts: Satoshi Black (default) or Roboto Mono Bold (social proof / tech posts). Lime keyword highlight on dark bgs.

Lime accent: present on every slide — as gradient band, text highlight bar, tag bg, separator line, or diagonal split.

3. Layout Types

Pick the layout, then load its reference file for full specs and ASCII diagrams.

#	Layout	When to use	Reference file
1	Meme/Collage	Fun listicles, "who is X?" posts, scattered image grids	`references/layout-01-meme-collage.md`
2	Media + Analysis	Educational content, case studies, social proof carousels	`references/layout-02-media-analysis.md`
3	Story/Reels Overlay	Video covers, story posts, Reels thumbnails	`references/layout-03-story-reels-overlay.md`
4	Dashboard/Product Showcase	ClickUp features, product demos, "still using X?" posts	`references/layout-04-dashboard-product-showcase.md`
5	Floating Cards	Feature comparisons, "one tool replaces X" posts	`references/layout-05-floating-cards.md`
6	Stats/Numbers	Case study results, before/after, achievement highlights	`references/layout-06-stats-numbers.md`
7	Social Proof Collage	Engagement proof, reactions, comment-driven slides	`references/layout-07-social-proof-collage.md`
8	Brand Cover	Carousel cover slides, brand announcements	`references/layout-08-brand-cover.md`
9	Pain Point Collage	Problem→solution flows, "still doing X?" posts	`references/layout-09-pain-point-collage.md`
10	Blog Article Banner	Blog covers, LinkedIn/Facebook landscape banners	`references/layout-10-blog-article-banner.md`
11	Integration Map	ClickUp integrations, ecosystem diagrams	`references/layout-11-integration-map.md`

Content → Layout quick reference:

Content type	Primary	Alternative
Fun listicle	Meme/Collage	—
Case study / ad analysis	Media + Analysis	Stats/Numbers
Video/Reels cover	Story Overlay	—
ClickUp feature	Dashboard	Floating Cards
Tool comparison	Floating Cards	Dashboard
Stats / results	Stats/Numbers	Dashboard
Engagement proof	Social Proof Collage	Media + Analysis
Carousel cover	Brand Cover	Dashboard
Problem→solution	Pain Point Collage	Dashboard
Blog article cover	Blog Article Banner	Brand Cover
Integration visual	Integration Map	Floating Cards
CTA / final slide	(any with lime bg)	—

4. Output Checklist

Part of the Byte&Kite Skills Collection

이 저장소의 다른 Skills

같은 저장소

b2b-gtm-launch

Lozovoi-Rodion/Claude-Skills

Full B2B SaaS go-to-market system — 7 sequential prompts that take a product from undefined ICPs to a running Meta ad campaign with a demo script and follow-up sequences. Use this skill when the user wants to launch a B2B SaaS product, build a GTM strategy, define ICPs, create a product brief, write Meta ad creatives, build a landing page, prepare a demo, or write post-demo emails. Trigger on "launch", "GTM", "go-to-market", "ICP", "product brief", "Meta ads", "demo script", "post-demo emails", or any request to take a product to market. Each prompt builds on the previous one — guide the user through them in order.

2026-03-2711

clickup-feature-creator

Lozovoi-Rodion/Claude-Skills

Creates well-structured EPIC and Feature tickets in ClickUp for software development projects. Trigger when the user wants to: plan a feature, break down work into tickets, create an epic, write ticket descriptions, define acceptance criteria, or set up tasks in ClickUp. Also trigger when the user describes a product feature idea and seems to want it turned into actionable development work, even without explicitly mentioning ClickUp or tickets.

2026-03-2711

bytekite-brand-creatives

Lozovoi-Rodion/Claude-Skills

Generates on-brand BYTE&KITE visual creatives as self-contained HTML/SVG — social media posts, banners, carousels, cards, and web hero sections following the BYTE&KITE brand guidelines (black/lime palette, Satoshi+Roboto Mono fonts, dot grid patterns). Use this skill whenever creating ANY visual for BYTE&KITE — Instagram posts, LinkedIn banners, promotional graphics, carousel slides, or web sections. Trigger on "create a post", "make a banner", "design a creative", "Instagram post", "carousel", or any request to produce a BYTE&KITE visual asset. Always pair with bytekite-design-system for layout structure.

2026-03-2711