본문으로 건너뛰기
cccskills
무료GitHub에 공개

social-card-image-led

图片主导的社交卡 — 图是证据 / 氛围 / 产品 / 物件 / 地点 / 钩子,文字让位。骨架:全出血 + 安全标题块 / 大图井 + 编辑标题 / 图片裁切 + caption 账本 / 产品物件照 + 三个证据点 / 旅行地点 + 地图或位置元数据。必须保护人脸 / 产品 / UI / 关键细节不被文字盖住。

触发:"做个图片卡 / 照片封面 / 产品图卡 / 旅行卡 / 物件卡 / 证据图卡"。NOT 没图片只能补 stock 装饰,NOT 用蒙版强行救烂图。

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

설치 방법 보기

포함된 파일(2)

  • SKILL.md2.2 KB
  • pattern.html2.8 KB

SKILL.md(원문)

설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.

Social Card Image-Led Template

Use when the image is the evidence, mood, product, object, place, or hook.

Core Rule

The image must do real work. If it is only decoration, choose another template.

Structure Options

  • full-bleed image + safe title block
  • large image well + editorial title
  • image crop + caption ledger
  • product/object photo + three evidence points
  • travel/place image + map or location metadata

Must Do

  • Protect faces, products, UI, and important image details from text overlay.
  • Use overlays only when contrast is genuinely needed.
  • Keep title and image in a clear relationship.
  • If image quality is poor, crop less aggressively or switch to a text-led recipe.

Avoid

  • Text covering faces or key product areas.
  • Dark overlay as a lazy fix for all images.
  • Decorative stock image with no content relation.
  • Tiny image thumbnails on a portrait canvas.

Related Pattern

Use social-card-editorial as the closest pattern if a visual reference is needed.

Pattern Source Rule

Read this SKILL.md first. Do not read pattern.html by default.

Read pattern.html only when you need concrete layout rhythm, spatial relationships, or interaction/annotation behavior that this markdown cannot fully specify. When read, extract patterns only; do not copy DOM, CSS classes, exact spacing, placeholder copy, or styling wholesale.

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

댓글

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

같은 저장소의 스킬

agentic

무료

Conversational AI-first interface with minimal controls, clear outcomes, and delegated task flows for agentic workflows.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

WyvernCW/Monich32026년 6월 20일 업데이트

ant

무료

Structured, enterprise-focused design system emphasizing clarity, consistency, and efficiency for data-dense web applications.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

WyvernCW/Monich32026년 6월 20일 업데이트

App dashboard with purple-themed aesthetic, top-bar navigation, card-based layouts, and developer-first workflows.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

WyvernCW/Monich32026년 6월 20일 업데이트

artistic

무료

High-contrast, expressive style with creative typography and bold color choices for visually striking interfaces.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

WyvernCW/Monich32026년 6월 20일 업데이트

Generate a single-file product landing page with a layered ASCII cosmos hero (rotating ASCII planet, drifting irregular asteroids, comet trails, nebula gas clouds — each in its own harmonious color) plus full marketing sections (about / features grid / showcase / spec / pricing / CTA / footer). Takes a natural-language description of one product (any kind — a note app, a coffee subscription, a CLI tool, an indie hardware, a hosting service…) and outputs ONE working .html file with deep-space dark or warm-letterpress theme. Runs in BOTH Claude Code (writes to ~/Desktop) and GLM / online chat (outputs HTML inline). Trigger phrases: "做个宇宙风产品落地页", "生成 ASCII 产品官网", "ascii-cosmos-gen ...", "做个独立软件 / 独立硬件落地页", or when user drags this skill folder into chat asking for an atmospheric product landing page.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

WyvernCW/Monich32026년 6월 20일 업데이트

Magazine-grade, collage-driven editorial system: warm paper canvas, surreal plaster-and-architecture imagery, oversized display type, hairline rules, and Roman-numeral section markers.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

WyvernCW/Monich32026년 6월 20일 업데이트

WyvernCW의 스킬 모두 보기

이 스킬의 문제 신고