agentic
무료Conversational AI-first interface with minimal controls, clear outcomes, and delegated task flows for agentic workflows.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
WyvernCW/Monich32026년 6월 20일 업데이트
무료GitHub에 공개
social-card-screenshot-explainer
截图 / UI / 工具流解释类社交卡 — 必须给截图一个"舞台"：可读裁切 + 标注层级 + 出现的理由。骨架：封面 + 大截图 + 3 个标注 / 截图裁切 + 放大细节 + 结论 / before-after 截图对 / 产品 UI 框 + 编号 callout / 3 步工作流。
截图要大到手机能看清，箭头节制，加一个 takeaway 标题。触发："做个工具教程卡 / AI 工作流卡 / UI 解释卡 / 截图说明卡 / before-after 卡"。NOT 原图直接丢上画布，NOT 装饰性无关截图。
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
설치 방법 보기포함된 파일(2)
- SKILL.md2.4 KB
- pattern.html4.8 KB
SKILL.md(원문)
설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.
Social Card Screenshot Explainer
Use for tool walkthroughs, product UI explanations, app feature breakdowns, AI workflow screenshots, or before/after UI captures.
Core Rule
Never drop a raw screenshot onto the canvas and call it designed. A screenshot needs a stage, readable crop, annotation hierarchy, and a reason to be there.
Structure Options
- cover + large screenshot + 3 annotations
- screenshot crop + zoomed detail + conclusion
- before / after screenshot pair
- product UI frame + numbered callouts
- 3-step workflow with one screenshot per step
Must Do
- Keep the screenshot large enough to inspect on phone.
- Crop irrelevant browser chrome unless it helps context.
- Use device/browser frames only when they clarify the source.
- Use arrows/callouts sparingly; labels must not cover key UI.
- Add one takeaway title so the card is not just a screenshot.
Avoid
- Tiny unreadable UI captures.
- Too many callout bubbles.
- Fake product screenshots.
- Decorative screenshots unrelated to the point.
Related Pattern
Use social-card-swiss 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.
리뷰
아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.
댓글
로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.
아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.
같은 저장소의 스킬
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일 업데이트