--- name: cocoloop-skill-factory description: 用于创建或升级多平台 Agent Skill 的 Meta Skill。适用于用户想把模糊想法收敛成可生成最终 Skill 的稳定方案、需要结合 Cocoloop 与 ClawHub 搜索参考、选择平台模板、组织原子能力、补齐脚本化规划，并明确平台兼容与发布边界时。 version: 0.3.5 author: tanshow --- # CocoLoop Skill Factory ## Overview `cocoloop-skill-factory` 是一个面向 `codex`、`claude code`、`openclaw`、`copaw`、`molili`、`hermes agent` 的 Meta Skill。它负责把用户的想法推进成一份稳定 spec，并把构建方向、模板选择、原子能力、脚本化策略和平台兼容边界整理清楚，最终服务于 Skill 生成与交付。当用户出现这些诉求时使用本 Skill： - 想从零创建一个新 Skill - 想升级、改造、移植一个已有 Skill - 想先找现成 Skill，再判断复用、改造还是新做 - 想把平台差异、脚本化能力、模板选择和 benchmark 规划统一起来 ## Factory Rules 整个流程都围绕这几条规则执行： 1. 先判定任务域，再继续调研平台、依赖和执行面。 2. 先形成 spec，再进入构建与交付判断。 3. 调研和设计都保持双钻节奏，先发散，再收敛。 4. **分步询问：对话每次只推进一个关键问题，严禁一次性列出所有问题等待用户回答。必须等用户回答后再问下一个问题。** 5. **问题预算：进入调研后要先规划整轮交互的问题预算，默认总问题数不得超过 10 个。能用默认值、环境检测、已有上下文或确认题解决的，不再追加开放式追问。** 6. **环境 gate：在目标运行环境没有确认前，不得开始写 Skill 正文、模板、脚手架、实现步骤或构建命令。必须先拿到环境检测结果，再确认“当前环境是否就是目标环境”；如果不是，要同时写清当前环境和目标环境。** 7. `cocoloop`、`clawhub` 与 `github` 搜索在正常环境下默认进入流程；通用社区检索按需补充；不可用时允许降级，但要记录缺口。 8. 平台兼容声明必须以公开标准或已核实的本地协议为依据，不能凭经验口头承诺。 9. 推荐外部方案时，要同时给出接入方式、依赖门槛、风险和替代路径。 10. `benchmark` 是可选阶段，只在适合比较的任务里进入，并且默认按任务域判断是否适合进入。 ## Workflow 命令运行约定： - 如果当前目录是 `cocoloop-skill-factory/`，使用 `python3 utils/cli/ """ def main(): if len(sys.argv) < 3: print("Usage: python3 export-html-slides.py [metadata.json] [--theme dark|light|gradient]") sys.exit(1) md_path = sys.argv[1] output_path = sys.argv[2] meta_path = None theme = "gradient" for i, arg in enumerate(sys.argv[3:], 3): if arg == '--theme' and i + 1 < len(sys.argv): theme = sys.argv[i + 1] elif not arg.startswith('--') and arg.endswith('.json'): meta_path = arg metadata = None if meta_path and Path(meta_path).exists(): with open(meta_path, 'r', encoding='utf-8') as f: metadata = json.load(f) data = parse_markdown_slides(md_path) if not data['slides']: print("ERROR: No slides found in markdown", file=sys.stderr) sys.exit(1) html = generate_html(data, metadata, theme) with open(output_path, 'w', encoding='utf-8') as f: f.write(html) print(f"✅ HTML slides saved: {output_path} ({len(data['slides']) + 1} slides, theme: {theme})") if __name__ == '__main__': main() FILE:output/clawhub-infographic-ppt-deep-dive/source-skills/ai-presentation-maker/references/export-pptx.py #!/usr/bin/env python3 """ export-pptx.py — Convert a Presentation Maker markdown deck to PPTX. Requires: python-pptx (pip install python-pptx) Usage: python3 export-pptx.py [metadata.json] """ import sys import re import json from pathlib import Path try: from pptx import Presentation from pptx.util import Inches, Pt from pptx.enum.text import PP_ALIGN except ImportError: print("ERROR: python-pptx not installed. Run: pip install python-pptx", file=sys.stderr) sys.exit(1) def parse_markdown_slides(md_path: str) -> list: """Parse markdown file into slide objects.""" with open(md_path, 'r', encoding='utf-8') as f: content = f.read() slides = [] current_slide = None for line in content.split('\n'): # Title slide (# heading) if line.startswith('# ') and not line.startswith('## '): if current_slide: slides.append(current_slide) current_slide = { 'type': 'title', 'title': line[2:].strip(), 'content': [], 'speaker_notes': [] } # Regular slide (## heading) elif line.startswith('## '): if current_slide: slides.append(current_slide) # Extract slide title (remove "Slide N: " prefix if present) title = line[3:].strip() title = re.sub(r'^Slide \d+:\s*', '', title) current_slide = { 'type': 'content', 'title': title, 'content': [], 'speaker_notes': [] } # Speaker notes marker elif current_slide and ('**Speaker Notes' in line or '**Say:**' in line or '**What to say' in line): current_slide['_in_notes'] = True elif current_slide and line.startswith('---'): if current_slide.get('_in_notes'): current_slide.pop('_in_notes', None) elif current_slide: if current_slide.get('_in_notes'): # Clean markdown formatting for notes clean = re.sub(r'\*\*([^*]+)\*\*', r'\1', line.strip()) clean = re.sub(r'^>\s*', '', clean) if clean: current_slide['speaker_notes'].append(clean) else: clean = line.strip() if clean and not clean.startswith('>'): current_slide['content'].append(clean) if current_slide: slides.append(current_slide) # Clean up internal flags for s in slides: s.pop('_in_notes', None) return slides def create_pptx(slides: list, output_path: str, metadata: dict = None): """Generate a PPTX file from parsed slides.""" prs = Presentation() # Set slide dimensions (widescreen 16:9) prs.slide_width = Inches(13.333) prs.slide_height = Inches(7.5) for slide_data in slides: if slide_data['type'] == 'title': # Title slide layout = prs.slide_layouts[0] # Title Slide layout slide = prs.slides.add_slide(layout) title = slide.shapes.title if title: title.text = slide_data['title'] title.text_frame.paragraphs[0].font.size = Pt(36) # Add subtitle from metadata if metadata and slide.placeholders: for ph in slide.placeholders: if ph.placeholder_format.idx == 1: # Subtitle speaker = metadata.get('speaker', {}) subtitle_parts = [] if speaker.get('name'): subtitle_parts.append(speaker['name']) if speaker.get('title'): subtitle_parts.append(speaker['title']) ph.text = ' — '.join(subtitle_parts) break else: # Content slide layout = prs.slide_layouts[1] # Title and Content layout slide = prs.slides.add_slide(layout) # Set title title = slide.shapes.title if title: title.text = slide_data['title'] title.text_frame.paragraphs[0].font.size = Pt(28) # Set content content_text = '\n'.join(slide_data['content']) # Clean markdown formatting content_text = re.sub(r'\*\*([^*]+)\*\*', r'\1', content_text) content_text = re.sub(r'\*([^*]+)\*', r'\1', content_text) content_text = re.sub(r'^- ', '• ', content_text, flags=re.MULTILINE) content_text = re.sub(r'^\d+\. ', '• ', content_text, flags=re.MULTILINE) for ph in slide.placeholders: if ph.placeholder_format.idx == 1: # Content area ph.text = content_text for para in ph.text_frame.paragraphs: para.font.size = Pt(18) break # Add speaker notes if slide_data['speaker_notes']: notes_text = '\n'.join(slide_data['speaker_notes']) notes_slide = slide.notes_slide notes_slide.notes_text_frame.text = notes_text prs.save(output_path) print(f"✅ PPTX saved: {output_path} ({len(slides)} slides)") def main(): if len(sys.argv) < 3: print("Usage: python3 export-pptx.py [metadata.json]") sys.exit(1) md_path = sys.argv[1] output_path = sys.argv[2] meta_path = sys.argv[3] if len(sys.argv) > 3 else None metadata = None if meta_path and Path(meta_path).exists(): with open(meta_path, 'r', encoding='utf-8') as f: metadata = json.load(f) slides = parse_markdown_slides(md_path) if not slides: print("ERROR: No slides found in markdown file", file=sys.stderr) sys.exit(1) create_pptx(slides, output_path, metadata) if __name__ == '__main__': main() FILE:output/clawhub-infographic-ppt-deep-dive/source-skills/ai-presentation-maker/references/slide-templates.py #!/usr/bin/env python3 """ slide-templates.py — Premade slide templates with theme support. Generates individual per-slide HTML files OR a combined deck. Each slide type has a layout optimized for stage presentations (1280x720). THEMES: terminal — Dark + green accent, terminal window frames (hacker/tech vibe) executive — Dark navy + gold, clean lines (corporate/boardroom) spark — Gradient purple/teal, modern curves (startup/founder) clean — White + charcoal, Swiss-style minimal (professional/universal) SLIDE TYPES: title — Hero title + subtitle + speaker name section — Section divider with large heading text — Simple text slide (bullets or paragraphs) text_and_image — Split layout: text left, image right big_number — One massive stat as the hero element comparison — Side-by-side columns (before/after, us/them) screenshot — Full-width image with caption overlay quote — Large pull quote with attribution timeline — Horizontal or vertical timeline steps qr_code — QR code hero with call to action closing — Final CTA slide with links/contact Usage: python3 slide-templates.py --list-themes python3 slide-templates.py --list-types python3 slide-templates.py --theme terminal --type title --title "My Talk" --subtitle "The Real Story" --speaker "Jeff J Hunter" --output slide_01.html python3 slide-templates.py --theme spark --type big_number --number "71" --label "Leads Imported" --context "In under 5 minutes" --output slide_04.html """ import sys import argparse from html import escape # ══════════════════════════════════════════════ # THEME DEFINITIONS # ══════════════════════════════════════════════ THEMES = { "terminal": { "name": "Terminal", "description": "Dark + green accent, terminal window frames. Hacker/tech vibe.", "bg": "#1A1A1A", "card_bg": "#252525", "text": "#FFFFFF", "muted": "#B3B3B3", "accent": "#00E676", "accent_dark": "#00C853", "border": "#333333", "font_heading": "'Roboto', sans-serif", "font_body": "'Roboto', sans-serif", "font_mono": "'Roboto Mono', monospace", "google_fonts": "Roboto:wght@400;700;900&family=Roboto+Mono:wght@400;700", "has_terminal_frame": True, "heading_transform": "uppercase", "heading_spacing": "2px", }, "executive": { "name": "Executive", "description": "Dark navy + gold, clean lines. Corporate/boardroom.", "bg": "#0D1B2A", "card_bg": "#1B2838", "text": "#FFFFFF", "muted": "#8899AA", "accent": "#FFB700", "accent_dark": "#E5A500", "border": "#2D3F52", "font_heading": "'Playfair Display', serif", "font_body": "'Source Sans 3', sans-serif", "font_mono": "'Source Code Pro', monospace", "google_fonts": "Playfair+Display:wght@700;900&family=Source+Sans+3:wght@400;600&family=Source+Code+Pro:wght@400;600", "has_terminal_frame": False, "heading_transform": "none", "heading_spacing": "0", }, "spark": { "name": "Spark", "description": "Gradient purple/teal, modern curves. Startup/founder.", "bg": "#0f0c29", "card_bg": "rgba(255,255,255,0.06)", "text": "#F0F0F0", "muted": "#A0B0C0", "accent": "#24C6DC", "accent_dark": "#514A9D", "border": "rgba(255,255,255,0.1)", "font_heading": "'Space Grotesk', sans-serif", "font_body": "'Inter', sans-serif", "font_mono": "'JetBrains Mono', monospace", "google_fonts": "Space+Grotesk:wght@400;700&family=Inter:wght@400;600&family=JetBrains+Mono:wght@400;600", "has_terminal_frame": False, "heading_transform": "none", "heading_spacing": "-0.02em", }, "clean": { "name": "Clean", "description": "White + charcoal, Swiss-style minimal. Professional/universal.", "bg": "#FFFFFF", "card_bg": "#F8F8F8", "text": "#1A1A1A", "muted": "#666666", "accent": "#E63946", "accent_dark": "#C5303C", "border": "#E0E0E0", "font_heading": "'DM Sans', sans-serif", "font_body": "'DM Sans', sans-serif", "font_mono": "'DM Mono', monospace", "google_fonts": "DM+Sans:wght@400;700&family=DM+Mono:wght@400", "has_terminal_frame": False, "heading_transform": "none", "heading_spacing": "-0.01em", }, } # ══════════════════════════════════════════════ # SLIDE TYPE DEFINITIONS # ══════════════════════════════════════════════ SLIDE_TYPES = { "title": { "name": "Title Slide", "description": "Hero opening slide with title, subtitle, and speaker name", "fields": ["title", "subtitle", "speaker"], }, "section": { "name": "Section Divider", "description": "Large heading to introduce a new section of the talk", "fields": ["title", "subtitle"], }, "text": { "name": "Simple Text", "description": "Text slide with heading and bullet points or paragraphs", "fields": ["title", "body"], }, "text_and_image": { "name": "Text + Image", "description": "Split layout: text on left, image on right", "fields": ["title", "body", "image_path", "image_caption"], }, "big_number": { "name": "Big Number", "description": "One massive stat as the hero element with context", "fields": ["number", "label", "context"], }, "comparison": { "name": "Comparison", "description": "Side-by-side columns (before/after, old/new)", "fields": ["title", "left_title", "left_items", "right_title", "right_items"], }, "screenshot": { "name": "Screenshot", "description": "Full-width image with header and caption overlay", "fields": ["title", "subtitle", "image_path", "caption"], }, "quote": { "name": "Quote", "description": "Large pull quote with attribution", "fields": ["quote_text", "attribution"], }, "timeline": { "name": "Timeline", "description": "Step-by-step process or chronological events", "fields": ["title", "steps"], }, "qr_code": { "name": "QR Code", "description": "QR code hero with call to action text and link", "fields": ["title", "subtitle", "qr_image_path", "link_text", "cta_text"], }, "closing": { "name": "Closing / CTA", "description": "Final slide with call to action, links, contact info", "fields": ["title", "cta_text", "links", "speaker", "contact"], }, } # ══════════════════════════════════════════════ # BASE STYLES (shared across all themes) # ══════════════════════════════════════════════ def base_css(t): """Generate base CSS from a theme dict.""" return f""" * {{ margin: 0; padding: 0; box-sizing: border-box; }} body {{ background-color: {t['bg']}; font-family: {t['font_body']}; overflow: hidden; color: {t['text']}; }} .slide {{ width: 1280px; min-height: 720px; background-color: {t['bg']}; display: flex; flex-direction: column; padding: 60px; position: relative; }} .slide.center {{ justify-content: center; align-items: center; text-align: center; }} h1 {{ font-family: {t['font_heading']}; font-size: 64px; font-weight: 900; color: {t['text']}; text-transform: {t['heading_transform']}; letter-spacing: {t['heading_spacing']}; line-height: 1.1; }} h2 {{ font-family: {t['font_heading']}; font-size: 48px; font-weight: 700; color: {t['text']}; line-height: 1.2; }} .subtitle {{ font-size: 28px; color: {t['muted']}; font-family: {t['font_mono']}; }} .accent {{ color: {t['accent']}; }} .muted {{ color: {t['muted']}; }} .accent-line {{ height: 3px; width: 80px; background: {t['accent']}; margin: 20px auto; }} .header-bar {{ border-bottom: 2px solid {t['accent']}; padding-bottom: 20px; margin-bottom: 40px; display: flex; justify-content: space-between; align-items: flex-end; }} .body-text {{ font-size: 32px; line-height: 1.6; color: {t['muted']}; }} .body-text li {{ margin-bottom: 12px; list-style: none; padding-left: 1.5em; position: relative; }} .body-text li::before {{ content: "▸"; color: {t['accent']}; position: absolute; left: 0; }} .card {{ background: {t['card_bg']}; border: 1px solid {t['border']}; border-radius: 8px; padding: 30px; }} @media print {{ .slide {{ page-break-after: always; }} body {{ background: {t['bg']}; -webkit-print-color-adjust: exact; print-color-adjust: exact; }} }} """ def terminal_frame(t, terminal_path="~/presentation"): """Generate the terminal window wrapper (only for terminal theme).""" if not t.get('has_terminal_frame'): return "", "" open_html = f"""

user@stage:{escape(terminal_path)}

""" close_html = """

""" return open_html, close_html # ══════════════════════════════════════════════ # SLIDE GENERATORS # ══════════════════════════════════════════════ def google_font_link(t): return f'' def fa_link(): return '' def html_doc(t, body_content, extra_css="", center=False): """Wrap content in a full HTML document.""" cls = "slide center" if center else "slide" return f""" {google_font_link(t)} {fa_link()}

{body_content}

""" def gen_title(t, title="Title", subtitle="", speaker=""): tf_open, tf_close = terminal_frame(t, "~/keynote") cursor = '' % t['accent'] if t.get('has_terminal_frame') else "" blink_css = "@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }" if t.get('has_terminal_frame') else "" body = f""" {tf_open}

{escape(title)}{cursor}

{escape(subtitle)}

{escape(speaker)}

{tf_close} """ return html_doc(t, body, blink_css, center=True) def gen_section(t, title="Section", subtitle=""): body = f"""

{escape(subtitle)}

{escape(title)}

""" return html_doc(t, body) def gen_text(t, title="Heading", body=""): items = [l.strip() for l in body.split('\n') if l.strip()] if items: list_html = '\n'.join(f'

{escape(item.lstrip("- •"))}

' for item in items) content = f'

{list_html}' else: content = f'

{escape(body)}

' body_html = f"""

{escape(title)}

{content}

""" return html_doc(t, body_html) def gen_big_number(t, number="0", label="", context=""): body = f"""

{escape(context)}

{escape(str(number))}

{escape(label)}

""" return html_doc(t, body) def gen_comparison(t, title="Comparison", left_title="Before", left_items=None, right_title="After", right_items=None): left_items = left_items or [] right_items = right_items or [] def col_html(col_title, items, is_accent=False): color = t['accent'] if is_accent else t['muted'] lis = '\n'.join(f'

{escape(i)}

' for i in items) return f"""

{escape(col_title)}

{lis}

""" body = f"""

{escape(title)}

{col_html(left_title, left_items, False)}

{col_html(right_title, right_items, True)}

""" return html_doc(t, body) def gen_screenshot(t, title="Demo", subtitle="", image_path="", caption=""): body = f"""

{escape(title)}

{escape(subtitle)}

'+escape(caption)+'

' if caption else ''}

""" return html_doc(t, body) def gen_quote(t, quote_text="", attribution=""): body = f"""

“

{escape(quote_text)}

— {escape(attribution)}

""" return html_doc(t, body) def gen_timeline(t, title="Timeline", steps=None): steps = steps or [] steps_html = "" for i, step in enumerate(steps): label = step.get("label", f"Step {i+1}") desc = step.get("description", "") active = "border-color:" + t['accent'] if i == len(steps) - 1 else "" steps_html += f"""

{i+1}

{escape(label)}

{escape(desc)}

""" body = f"""

{escape(title)}

{steps_html}

""" return html_doc(t, body) def gen_qr_code(t, title="Scan Me", subtitle="", qr_image_path="", link_text="", cta_text=""): body = f"""

{escape(title)}

{escape(subtitle)}

{escape(link_text)}

{escape(cta_text)}

""" return html_doc(t, body) def gen_closing(t, title="Thank You", cta_text="", links=None, speaker="", contact=""): links = links or [] links_html = '\n'.join( f'{escape(l.get("label",""))}' for l in links ) body = f"""

{escape(title)}

{escape(cta_text)}

{links_html}

{escape(speaker)}

{escape(contact)}

""" return html_doc(t, body, center=False) # ══════════════════════════════════════════════ # CUSTOM STYLE INSTRUCTION SUPPORT # ══════════════════════════════════════════════ def build_theme_from_instruction(si: dict) -> dict: """ Build a theme dict from a style_instruction object. style_instruction format (from OpenClaw dev guide): { "aesthetic_direction": "A stark, high-contrast design for maximum stage presence.", "color_palette": "Background: #1A1A1A, Title: #FFFFFF, Body: #B3B3B3, Accent: #00E676", "typography": "Font Family: Inter. Headline: 64px, Body: 32px, Caption: 18px." } """ import re # Parse color palette palette_str = si.get("color_palette", "") colors = {} for pair in palette_str.split(","): pair = pair.strip() match = re.match(r'(\w+)\s*:\s*(#[0-9A-Fa-f]{6})', pair) if match: colors[match.group(1).lower()] = match.group(2) bg = colors.get("background", "#1A1A1A") title_color = colors.get("title", "#FFFFFF") body_color = colors.get("body", "#B3B3B3") accent = colors.get("accent", "#00E676") # Parse typography typo_str = si.get("typography", "") font_match = re.search(r'Font Family:\s*([^.]+)', typo_str) font_family = font_match.group(1).strip() if font_match else "Inter" # Build google fonts URL-safe name gf_name = font_family.replace(" ", "+") # Determine if dark or light background bg_brightness = sum(int(bg.lstrip('#')[i:i+2], 16) for i in (0, 2, 4)) is_dark = bg_brightness < 384 return { "name": "Custom", "description": si.get("aesthetic_direction", "Custom style"), "bg": bg, "card_bg": _adjust_brightness(bg, 15 if is_dark else -10), "text": title_color, "muted": body_color, "accent": accent, "accent_dark": _adjust_brightness(accent, -20), "border": _adjust_brightness(bg, 30 if is_dark else -20), "font_heading": f"'{font_family}', sans-serif", "font_body": f"'{font_family}', sans-serif", "font_mono": "'JetBrains Mono', monospace", "google_fonts": f"{gf_name}:wght@400;700;900&family=JetBrains+Mono:wght@400", "has_terminal_frame": False, "heading_transform": "none", "heading_spacing": "-0.01em", } def _adjust_brightness(hex_color: str, amount: int) -> str: """Lighten or darken a hex color by amount (positive = lighter).""" hex_color = hex_color.lstrip('#') if len(hex_color) != 6: return "#333333" r = max(0, min(255, int(hex_color[0:2], 16) + amount)) g = max(0, min(255, int(hex_color[2:4], 16) + amount)) b = max(0, min(255, int(hex_color[4:6], 16) + amount)) return f"#{r:02x}{g:02x}{b:02x}" # ══════════════════════════════════════════════ # PLACEHOLDER TEMPLATE SUPPORT # ══════════════════════════════════════════════ def generate_placeholder_template(slide_type: str, theme_name: str = "terminal") -> str: """ Generate an HTML template with {{PLACEHOLDER}} tokens for a given slide type. This follows the OpenClaw dev guide pattern for injectable templates. Returns HTML with placeholders like {{TITLE}}, {{SUBTITLE}}, {{BODY_TEXT}}, etc. that can be replaced via string substitution. """ t = THEMES.get(theme_name, THEMES["terminal"]) placeholder_map = { "title": {"title": "{{TITLE}}", "subtitle": "{{SUBTITLE}}", "speaker": "{{SPEAKER}}"}, "section": {"title": "{{TITLE}}", "subtitle": "{{SUBTITLE}}"}, "text": {"title": "{{TITLE}}", "body": "{{BODY_TEXT}}"}, "big_number": {"number": "{{NUMBER}}", "label": "{{LABEL}}", "context": "{{CONTEXT}}"}, "screenshot": {"title": "{{TITLE}}", "subtitle": "{{SUBTITLE}}", "image_path": "{{IMAGE_SRC}}", "caption": "{{CAPTION}}"}, "quote": {"quote_text": "{{QUOTE_TEXT}}", "attribution": "{{ATTRIBUTION}}"}, "qr_code": {"title": "{{TITLE}}", "subtitle": "{{SUBTITLE}}", "qr_image_path": "{{QR_IMAGE_SRC}}", "link_text": "{{LINK_TEXT}}", "cta_text": "{{CTA_TEXT}}"}, "closing": {"title": "{{TITLE}}", "cta_text": "{{CTA_TEXT}}", "speaker": "{{SPEAKER}}", "contact": "{{CONTACT}}"}, } kwargs = placeholder_map.get(slide_type, {}) kwargs['t'] = t gen_func = GENERATORS.get(slide_type) if gen_func: return gen_func(**kwargs) return "" # ══════════════════════════════════════════════ # DISPATCH # ══════════════════════════════════════════════ GENERATORS = { "title": gen_title, "section": gen_section, "text": gen_text, "big_number": gen_big_number, "comparison": gen_comparison, "screenshot": gen_screenshot, "quote": gen_quote, "timeline": gen_timeline, "qr_code": gen_qr_code, "closing": gen_closing, "text_and_image": gen_screenshot, # Alias — uses same layout } def main(): if '--list-themes' in sys.argv: print("Available themes:") for key, t in THEMES.items(): print(f" {key:12s} — {t['description']}") return if '--list-types' in sys.argv: print("Available slide types:") for key, s in SLIDE_TYPES.items(): fields = ', '.join(s['fields']) print(f" {key:18s} — {s['description']}") print(f" {'':18s} Fields: {fields}") return # Support --style-instruction JSON for custom themes (handle before argparse) cleaned_argv = list(sys.argv[1:]) if '--style-instruction' in cleaned_argv: idx = cleaned_argv.index('--style-instruction') if idx + 1 < len(cleaned_argv): import json as _json try: si = _json.loads(cleaned_argv[idx + 1]) custom = build_theme_from_instruction(si) THEMES['custom'] = custom print(f"Custom theme loaded: {si.get('aesthetic_direction', 'custom')}") except Exception as e: print(f"ERROR: Invalid style_instruction JSON: {e}", file=sys.stderr) sys.exit(1) # Remove from argv so argparse doesn't choke del cleaned_argv[idx:idx+2] parser = argparse.ArgumentParser(description='Generate themed slide HTML') parser.add_argument('--theme', default='terminal', help='Theme name (terminal/executive/spark/clean/custom)') parser.add_argument('--type', required=True, choices=list(SLIDE_TYPES.keys())) parser.add_argument('--output', default='slide.html') parser.add_argument('--placeholder-mode', action='store_true', help='Generate template with {{PLACEHOLDER}} tokens instead of content') # Common fields parser.add_argument('--title', default='') parser.add_argument('--subtitle', default='') parser.add_argument('--speaker', default='') parser.add_argument('--body', default='') parser.add_argument('--number', default='') parser.add_argument('--label', default='') parser.add_argument('--context', default='') parser.add_argument('--image-path', default='') parser.add_argument('--caption', default='') parser.add_argument('--quote-text', default='') parser.add_argument('--attribution', default='') parser.add_argument('--link-text', default='') parser.add_argument('--cta-text', default='') parser.add_argument('--contact', default='') args = parser.parse_args(cleaned_argv) if args.theme not in THEMES: print(f"ERROR: Unknown theme '{args.theme}'. Available: {', '.join(THEMES.keys())}", file=sys.stderr) sys.exit(1) t = THEMES[args.theme] # Placeholder mode: generate injectable template if args.placeholder_mode: html = generate_placeholder_template(args.type, args.theme) with open(args.output, 'w', encoding='utf-8') as f: f.write(html) print(f"✅ {args.output} (PLACEHOLDER TEMPLATE — {THEMES[args.theme]['name']} / {SLIDE_TYPES[args.type]['name']})") return gen_func = GENERATORS.get(args.type) if not gen_func: print(f"ERROR: Unknown type: {args.type}", file=sys.stderr) sys.exit(1) # Build kwargs based on type kwargs = {'t': t} if args.title: kwargs['title'] = args.title if args.subtitle: kwargs['subtitle'] = args.subtitle if args.speaker: kwargs['speaker'] = args.speaker if args.body: kwargs['body'] = args.body if args.number: kwargs['number'] = args.number if args.label: kwargs['label'] = args.label if args.context: kwargs['context'] = args.context if args.image_path: kwargs['image_path'] = args.image_path if args.caption: kwargs['caption'] = args.caption if args.quote_text: kwargs['quote_text'] = args.quote_text if args.attribution: kwargs['attribution'] = args.attribution if args.link_text: kwargs['link_text'] = args.link_text if args.cta_text: kwargs['cta_text'] = args.cta_text if args.contact: kwargs['contact'] = args.contact html = gen_func(**kwargs) with open(args.output, 'w', encoding='utf-8') as f: f.write(html) print(f"✅ {args.output} ({THEMES[args.theme]['name']} / {SLIDE_TYPES[args.type]['name']})") if __name__ == '__main__': main() FILE:output/clawhub-infographic-ppt-deep-dive/source-skills/article-to-infographic/SKILL.md --- name: article-to-infographic description: Transform articles, blog posts, reports, or any text content into visually stunning, self-contained HTML infographics. Use when the user wants to convert text into an infographic, create a visual summary of an article, make a data visualization from written content, or generate an infographic from a URL, file, or pasted text. Supports multiple infographic styles (timeline, statistics, comparison, process flow, listicle) with distinctive, non-generic aesthetics. --- # Article to Infographic Transform any article or text content into a visually compelling, self-contained HTML infographic. Output is a single HTML file with inline CSS/JS -- zero dependencies, opens in any browser, print-ready for PDF export. ## Core Philosophy 1. **Content-First** -- Analyze the article before choosing layout. 2. **Smart Layout** -- Match infographic type to content type automatically. 3. **Distinctive Design** -- No generic AI aesthetics. Every infographic feels custom-crafted. 4. **Zero Dependencies** -- Single HTML file with inline CSS/JS. 5. **Print-Ready** -- Include print media queries for clean PDF export. --- ## Workflow Overview **Strict 3-Step Confirmation Process:** ``` Step 1: Outline Confirmation (BLOCKING) ↓ User must confirm Step 2a: Layout Selection (BLOCKING) ↓ User must confirm Step 2b: Style Selection (BLOCKING) ↓ User must confirm Step 2c: Illustrations (BLOCKING) ↓ User must confirm Step 3: Output Format (BLOCKING) ↓ User must confirm Generation Phase (automatic) ``` **CRITICAL RULE**: Each step requires explicit user confirmation before proceeding. Do NOT batch confirmations. Do NOT proceed to next step until current step is confirmed. --- ## Detailed Workflow 1. Acquire and analyze article content 2. Extract key information and classify content type 3. **Step 1: Present outline → Get explicit confirmation** 4. **Step 2a: Present layout options → Get explicit confirmation** 5. **Step 2b: Present style options → Get explicit confirmation** 6. **Step 2c: Present illustration options → Get explicit confirmation** 7. **Step 3: Present output format options → Get explicit confirmation** 8. Generate the HTML infographic (only after all confirmations) 9. Export to PNG if selected in Step 3 10. Deliver the final output ## Confirmation Flow Summary (For AI Reference) When executing this skill, follow this EXACT sequence: | Phase | Step | Action | User Confirmation Required | |-------|------|--------|---------------------------| | 1 | Content Acquisition | Get article URL/file/text | ❌ No | | 2 | Content Analysis | Extract info, classify type | ❌ No | | 2.5 | **Step 1** | Present outline table | ✅ **MUST CONFIRM** | | 3a | **Step 2a** | Present layout options | ✅ **MUST CONFIRM** | | 3b | **Step 2b** | Present style options | ✅ **MUST CONFIRM** | | 3c | **Step 2c** | Present illustration options | ✅ **MUST CONFIRM** | | 4 | **Step 3** | Present output format options | ✅ **MUST CONFIRM** | | 5 | Generation | Create HTML | ❌ Automatic | | 6 | Delivery | Present results | ❌ Automatic | | 7 | PNG Export | If selected in Step 3 | ❌ Automatic | **FORBIDDEN ACTIONS:** - ❌ Never combine Step 1 + Step 2 confirmations - ❌ Never combine Step 2a + 2b + 2c into one question - ❌ Never combine Step 2 + Step 3 confirmations - ❌ Never proceed to generation without all 3 steps confirmed --- ## Phase 1: Content Acquisition Determine the content source: - **URL** -- Use WebFetch to retrieve article content - **File** -- Read the file directly - **Pasted text** -- Use as-is If content is ambiguous or too short, ask for clarification. --- ## Phase 2: Content Analysis Extract from the article: 1. **Title and subtitle** -- Main topic and secondary context 2. **Key statistics** -- Numbers, percentages, data points 3. **Key points** -- 4-8 most important takeaways 4. **Quotes** -- Notable statements 5. **Comparisons** -- Before/after, pros/cons, A vs B 6. **Sequential steps** -- Process flows, timelines, chronological events 7. **Categories** -- Natural groupings 8. **Entities** -- People, organizations, places Classify the best infographic type: | Content Signal | Infographic Type | |---|---| | Dates, milestones, chronological events | **Timeline** | | Numbers, percentages, survey data | **Statistics Dashboard** | | A vs B, pros/cons, before/after | **Comparison** | | Step-by-step, how-to, tutorial | **Process Flow** | | Multiple independent tips/facts | **Listicle / Card Grid** | | Mixed content types | **Magazine / Editorial** | --- ## Phase 2.5: Step 1 - Outline Confirmation (BLOCKING) **⚠️ CRITICAL: Must get explicit user confirmation before proceeding to Phase 3.** After content analysis, present the user with a structured outline in table form: ``` | Block | Content | Notes | |---|---|---| | Header | Title + subtitle | Top section | | Hero Stats (3) | [stat1] / [stat2] / [stat3] | Key data highlights | | ... | ... | ... | ``` **DO NOT proceed until user explicitly confirms.** Using AskUserQuestion: - Header: "Step 1/3: Outline Confirmation" - Question: "Please review the outline above with [N] blocks. Confirm to proceed or request changes:" - Options: - "✅ Outline confirmed - proceed to style selection" -- ONLY THEN go to Phase 3 - "📝 Need adjustments" -- User specifies changes (add/remove/modify blocks), then RE-CONFIRM - "🔄 Simplify to core blocks" -- Auto-trim to core blocks only, then RE-CONFIRM **Hard rule**: If user chooses adjustments, update the outline and return to this same confirmation step. Do NOT proceed to Phase 3 until "✅ Outline confirmed" is selected. --- ## Phase 3: Step 2 - Style Selection (BLOCKING) **⚠️ CRITICAL: Must get explicit user confirmation for BOTH layout AND style before proceeding to Phase 4.** This phase requires **TWO separate confirmations**: ### Step 2a: Layout Selection (BLOCKING) Using AskUserQuestion: - Header: "Step 2a/3: Layout Selection" - Question: "Based on your article, I recommend a **[detected type]** layout. Confirm your choice:" - Options: - "✅ [detected type] - recommended" - "📊 Statistics Dashboard" - "📅 Timeline" - "⚖️ Comparison" - "🔄 Process Flow" - "📝 Listicle / Card Grid" - "📖 Magazine / Editorial" **STOP HERE**. Wait for user selection. Do NOT show style options yet. ### Step 2b: Style Selection (BLOCKING) ONLY after layout is confirmed, present style options: Using AskUserQuestion: - Header: "Step 2b/3: Visual Style Selection" - Question: "What visual style for the **[confirmed layout]** infographic?" - Options (show 4-5 most relevant): **Standard Styles:** - "🎨 Bold & Vibrant" -- High contrast, saturated colors, strong visual impact - "🌿 Clean & Minimal" -- Whitespace, subtle colors, elegant typography - "🌃 Dark & Techy" -- Dark backgrounds, neon accents, modern feel - "📰 Warm & Editorial" -- Magazine-style, warm tones, serif typography **Premium Styles:** - "🚀 Sci-fi HUD" -- Cyberpunk terminal, particle network, neon glow - "💎 Premium Magazine" -- Luxury editorial, massive serif typography - "🔮 Glassmorphism Aurora" -- Frosted glass, animated aurora blobs **STOP HERE**. Wait for user selection. ### Step 2c: Illustrations (optional, but ASK) Using AskUserQuestion: - Header: "Step 2c/3: Illustrations (Optional)" - Question: "Add illustrations to the **[confirmed style]** infographic?" - Options: - "🚫 No illustrations - text and data only" - "🔹 Decorative icons - small SVG icons next to headings" - "👤 Character illustrations - full SVG characters from open-source libraries" **ONLY after all 2a→2b→2c are confirmed, proceed to Phase 4.** For detailed color palettes and font pairings per style, see [references/style-presets.md](references/style-presets.md). --- ## Phase 4: Step 3 - Output Format Confirmation (BLOCKING) **⚠️ CRITICAL: Must get explicit user confirmation for output format BEFORE generating anything.** Using AskUserQuestion: - Header: "Step 3/3: Output Format" - Question: "How would you like to receive the **[confirmed style]** infographic?" - Options: - "📄 HTML only - single file, opens in browser" - "🖼️ HTML + PNG - include high-res image export" - "📦 Both formats - explicit delivery of both files" **ONLY after output format is confirmed, proceed to Phase 5 (Generation).** --- ## Phase 5: Generate Infographic ### HTML Architecture Single self-contained HTML file: ```html [Infographic Title]

...

``` ### Design Rules **Typography:** - Distinctive Google Fonts or Fontshare fonts -- NEVER Inter, Roboto, Arial, or system fonts - Display font for headings, clean font for body - Responsive sizing with `clamp()` **Color:** - CSS custom properties for entire palette - Max 3-4 colors: one dominant, one accent, one-two neutrals - WCAG AA contrast for readability **Layout:** - CSS Grid for overall structure, Flexbox for components - Max-width 1200px, centered - **Compact spacing**: Use `2-3rem` between sections, NOT 5rem+. Infographics should feel dense and information-rich, not stretched out. Header padding: 2-2.5rem. Section padding: 2-3rem. Grid gaps: 2-2.5rem. - Responsive: stack on mobile, multi-column on desktop **Data Visualization:** - Pure CSS for simple charts (bar via width%, pie via conic-gradient) - Inline SVG for complex shapes - Animate numbers with counter effect (Intersection Observer) - Always label data clearly **Animations:** - Intersection Observer triggers `.visible` class - Stagger children with animation-delay - Subtle fade + translateY baseline - `prefers-reduced-motion` media query required **Print:** - `@media print` rules: linearize layout, remove animations, ensure readability - Appropriate page breaks between sections ### Layout Patterns **Timeline:** - Vertical center line, alternating left/right entries - Date badges on line, content cards offset - Mobile: single-column stack **Statistics Dashboard:** - Hero stat at top (large number + context) - Grid of stat cards (2-3 columns) - CSS bar/pie charts where appropriate - Counter animation on scroll **Comparison:** - Side-by-side columns with central divider - Matching rows, color-coded sides - Mobile: vertical stack with labels **Process Flow:** - Numbered steps with connecting lines/arrows - Icon + title + description per step - Progress indicator **Listicle / Card Grid:** - Numbered/icon cards in responsive grid (2-3 cols desktop, 1 mobile) - Each card: icon/number + title + description - Hover effects **Magazine / Editorial:** - Mix of full-width, card grids, pull quotes, stat highlights - Alternate dense and spacious sections - Strong typographic hierarchy ### Anti-Patterns -- NEVER - Purple gradient on white background - Generic card layouts with no visual character - Font Awesome or emoji spam as decoration - Flat, lifeless color schemes - Walls of small text (defeats infographic purpose) - Charts without labels - Cookie-cutter layouts --- ## Phase 6: Delivery **All 3 confirmation steps completed. Generating final output...** Write the HTML file and present a summary: ``` ✅ Infographic generated! 📄 File: [filename].html 📐 Layout: [confirmed layout] 🎨 Style: [confirmed style] 🖼️ Illustrations: [confirmed option] 📦 Output: [confirmed format] 📊 Sections: [count] Open in browser to view. Ctrl+P / Cmd+P to save as PDF. ``` **Generation is complete. No further confirmations needed.** --- ## Edge Cases **Short articles (< 200 words):** Compact single-section, 3-5 key points as cards. **Long articles (> 3000 words):** Summarize to 6-10 key sections max. Prioritize data and takeaways. **No statistics:** Focus on quotes, process flows, or listicle. Use icons instead of charts. **Technical/code-heavy:** Code snippet sections, architecture diagrams with CSS shapes, conceptual flow. **Non-English content:** Set `lang` attribute correctly on ``. Use appropriate fonts for CJK, RTL, etc. --- ## Phase 7: PNG Export (if selected in Step 3) After generating the HTML, if PNG was selected in Step 3, proceed with export: ### Method A: Browser tool (preferred in Claude Code / HappyCapy) If a `browser` CLI tool is available: 1. Start a local HTTP server serving the HTML file 2. Navigate browser to the page 3. Force all `.reveal` elements to visible state (skip scroll animations) 4. Force all bar fills and counters to final values 5. Take a full-page screenshot 6. Close browser ```javascript // JS to inject before screenshot: document.querySelectorAll('.reveal').forEach(el => { el.classList.add('visible'); el.style.opacity = '1'; el.style.transform = 'none'; }); document.querySelectorAll('.ba-fill, .bar-fill').forEach(bar => { const w = bar.dataset.width; if (w) bar.style.width = w + '%'; }); document.querySelectorAll('[data-counter]').forEach(el => { const target = el.dataset.counter; const suffix = el.dataset.suffix || ''; el.textContent = parseInt(target).toLocaleString() + suffix; }); ``` ### Method B: Playwright script (standalone environments) Run the bundled script: ```bash python3 scripts/html_to_png.py infographic.html output.png --width 1200 --scale 2 ``` The script uses headless Chromium via Playwright. It auto-installs dependencies if needed. Arguments: - `--width` : viewport width in px (default 1200) - `--scale` : HiDPI scale factor (default 2, produces 2400px wide image) ### When to export PNG Ask the user after HTML delivery: - Header: "Export" - Question: "Want a PNG image export as well?" - Options: - "Yes, export PNG" -- Run export - "HTML only is fine" -- Skip --- ## OpenClaw / Non-Interactive Adaptation When deploying to environments without interactive question-answer support (e.g., OpenClaw, API-only setups), the skill operates in **parameterized mode** where ALL options must be specified upfront. **⚠️ CRITICAL**: In parameterized mode, you MUST provide ALL confirmations in a single prompt because the system cannot ask follow-up questions. ### Parameterized Invocation (Single Prompt) Users must specify ALL 3 confirmation steps in one prompt: ``` Generate an infographic from [article source]. STEP 1 - OUTLINE: [Provide your preferred outline structure, or "use auto-generated outline"] STEP 2 - STYLE: Layout: [timeline|statistics|comparison|process|listicle|magazine] Style: [bold-vibrant|clean-minimal|dark-techy|warm-editorial|scifi-hud|premium-magazine|glassmorphism] Illustrations: [none|icons|characters] STEP 3 - OUTPUT: Format: [html|png|both] ``` **Example complete prompt:** ``` Generate an infographic from https://example.com/article. STEP 1: Use auto-generated outline STEP 2: Layout: timeline Style: dark-techy Illustrations: icons STEP 3: Format: both ``` ### Parameter Reference **Style options:** - `bold-vibrant` -- High contrast, saturated colors - `clean-minimal` -- Whitespace, subtle colors, serif typography - `dark-techy` -- Dark background, neon accents - `warm-editorial` -- Magazine-style, warm tones - `scifi-hud` -- Cyberpunk terminal, particle network, neon glow (premium) - `premium-magazine` -- Luxury editorial, massive serif, cream/charcoal/vermillion (premium) - `glassmorphism` -- Frosted glass, aurora blobs, Apple-inspired depth (premium) **Layout options:** - `timeline` -- Chronological events - `statistics` -- Data dashboard - `comparison` -- Side-by-side - `process` -- Step-by-step flow - `listicle` -- Card grid - `magazine` -- Mixed editorial (default for complex articles) - `auto` -- Let the skill decide based on content analysis **Outline adjustments** (natural language): - "remove [block name]" - "add [block description]" - "replace [block] with [new content]" - "simplify" / "expand" **Export options:** - `html` -- HTML only (default) - `png` -- HTML + PNG export - `both` -- Explicitly output both ### Fallback Behavior If no style/layout is specified and AskUserQuestion is not available, use these defaults: - **Layout**: `auto` (detect from content) - **Style**: `dark-techy` for technical content, `warm-editorial` for narrative content, `bold-vibrant` for data-heavy content - **Export**: `html` only ### Font CDN for China Deployment When deployed behind the GFW, replace Google Fonts CDN: ```html ``` Alternatively, for CJK-heavy content, use system fonts as fallback: ```css --font-heading: 'Noto Serif SC', 'STSong', 'SimSun', serif; --font-body: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif; ``` FILE:output/clawhub-infographic-ppt-deep-dive/source-skills/article-to-infographic/Skills/article-to-infographic-README.md # article-to-infographic v2.0.0 发布包 ## 文件说明 - `article-to-infographic-v2.0.0.tar.gz` - Skill 完整发布包 ## 内容清单 - SKILL.md - 主技能文档（三步确认流程） - skill.json - 元数据（版本 2.0.0） - references/style-presets.md - 6种视觉样式预设 - references/illustrations-guide.md - 插图集成指南 - scripts/html_to_png.py - PNG 导出脚本 ## ClawHub 发布命令 ```bash clawhub publish article-to-infographic-v2.0.0 \ --slug "article-to-infographic" \ --name "Article to Infographic" \ --version "2.0.0" \ --changelog "3-step workflow, Premium Magazine style, CJK optimization" ``` ## 特性亮点 ✅ 强制三步确认流程（大纲/风格/输出） ✅ 容错PNG导出（4种方法回退） ✅ 中文字体优化 ✅ 6种视觉风格（含Premium Magazine高级风格）生成时间: 2026-02-24 作者: 龙虾 × 麦虾 FILE:output/clawhub-infographic-ppt-deep-dive/source-skills/article-to-infographic/_meta.json { "ownerId": "kn79n26pppbktn95ky47wvxdyx81r2hb", "slug": "article-to-infographic", "version": "1.0.0", "publishedAt": 1771936036689 } FILE:output/clawhub-infographic-ppt-deep-dive/source-skills/article-to-infographic/references/illustrations-guide.md # Illustration Integration Guide How to add character/cartoon illustrations to infographics for a more engaging, editorial feel. ## Recommended Libraries (CC0 / Free Commercial Use) | Library | License | Style | Count | Best For | |---------|---------|-------|-------|----------| | **Open Peeps** | CC0 | Hand-drawn line art, modular | 584K+ combos | Character avatars, busts | | **Open Doodles** | CC0 | Casual hand-drawn, pink accent | 40+ | Fun, informal infographics | | **unDraw** | Open (free commercial) | Flat minimalist, customizable color | 1,200+ | Scenario illustrations | | **ManyPixels** | Free, no attribution | 5 distinct styles | 20,000+ | Widest variety | | **Illustrations.co** | Free, no attribution | Retro/contemporary | 120+ | Tech themes | | **Lukasz Adam** | CC0 | Flat, tech-focused | 100+ | Developer/tech content | | **DrawKit** | Free + Pro | Hand-drawn 2D & 3D | Varies | Professional presentations | ### Where to Download - **Open Peeps**: https://www.openpeeps.com/ (Gumroad download) - **Open Doodles**: https://www.opendoodles.com/ (direct SVG downloads) - **unDraw**: https://undraw.co/ (SVG with color customization) - **ManyPixels**: https://www.manypixels.co/gallery - **Illustrations.co**: https://illlustrations.co/ - **Lukasz Adam**: https://lukaszadam.com/illustrations ### Libraries to Avoid (Licensing Issues) - **Storyset/Freepik** -- Requires attribution for free use - **Blush.design** -- SVG requires paid Pro subscription (free = PNG only) - **Absurd Design** -- Attribution required, SVG is membership-only - **Sapiens/UI8** -- Paid product --- ## Embedding Method: Inline SVG For self-contained HTML infographics, **always use inline SVG**: ```html

``` ### Why Inline SVG - Zero external dependencies (everything in one file) - Full CSS/JS control (can re-color, animate, respond to hover) - No additional HTTP requests - Best accessibility (ARIA labels, `` elements) - No encoding overhead (unlike base64) ### SVG Optimization Before Embedding 1. **Run through SVGOMG** (https://jakearchibald.github.io/svgomg/): - Remove metadata, comments, editor artifacts - Optimize paths and transforms - Minify CSS/attributes - Typical reduction: 30-70% file size 2. **Ensure unique IDs** across all SVGs in the HTML: - Prefix gradient/pattern/clip IDs with section name - Example: `id="s1-gradient"`, `id="s2-gradient"` 3. **Remove XML declaration** (`<?xml version="1.0"?>`) -- not needed inline 4. **Remove fixed width/height** -- use `viewBox` for responsive sizing ### Avoid These Approaches - **Base64 data URI** -- Adds ~33% size overhead, worse gzip compression - **External `<img src>`** -- Breaks self-contained requirement - **`<object>` or `<iframe>`** -- Unnecessary complexity, poor CSS control --- ## Layout Patterns ### Pattern A: Alternating Text + Illustration Best for 3-5 section infographics. Text and illustration alternate sides. ```css .section { display: flex; align-items: center; gap: 4rem; } .section:nth-child(even) { flex-direction: row-reverse; } .section-text { flex: 1; } .section-illustration { flex: 0 0 280px; } .section-illustration svg { width: 100%; height: auto; } @media (max-width: 768px) { .section, .section:nth-child(even) { flex-direction: column; } .section-illustration { flex: 0 0 auto; max-width: 200px; } } ``` ### Pattern B: Illustration as Section Background Large, semi-transparent illustration behind text. ```css .section { position: relative; } .section-illustration { position: absolute; right: -5%; top: 50%; transform: translateY(-50%); width: 40%; opacity: 0.08; pointer-events: none; } ``` ### Pattern C: Small Decorative Icons Hand-coded mini SVGs (64-80px) as section markers alongside headings. ```css .section-icon { width: 64px; height: 64px; display: inline-flex; vertical-align: middle; margin-right: 0.75rem; } ``` ### Pattern D: Hero Character Large character illustration in the header/hero area. ```css .hero { display: grid; grid-template-columns: 1fr 1fr; align-items: center; } .hero-illustration { max-width: 400px; margin: 0 auto; } ``` --- ## Custom Mini SVG Icons When full illustrations are too heavy (~50-100KB each), create lightweight custom icons: ### Monitor/Dashboard Icon (Runtime/Monitoring) ```svg <svg viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg"> <rect x="8" y="12" width="64" height="44" rx="4" fill="none" stroke="currentColor" stroke-width="2"/> <rect x="30" y="56" width="20" height="4" rx="1" fill="currentColor" opacity="0.3"/> <polyline points="16,44 28,32 36,38 52,24 64,30" fill="none" stroke="var(--accent-1)" stroke-width="2.5" stroke-linecap="round"/> <circle cx="52" cy="24" r="3" fill="var(--accent-1)"/> </svg> ``` ### Gear/Code Icon (Automation/Code Generation) ```svg <svg viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg"> <circle cx="40" cy="40" r="20" fill="none" stroke="currentColor" stroke-width="2"/> <circle cx="40" cy="40" r="8" fill="var(--accent-1)" opacity="0.2"/>  <rect x="37" y="8" width="6" height="12" rx="2" fill="currentColor" opacity="0.5"/> <rect x="37" y="60" width="6" height="12" rx="2" fill="currentColor" opacity="0.5"/> <rect x="8" y="37" width="12" height="6" rx="2" fill="currentColor" opacity="0.5"/> <rect x="60" y="37" width="12" height="6" rx="2" fill="currentColor" opacity="0.5"/>  <text x="32" y="45" font-family="monospace" font-size="16" fill="var(--accent-1)">{ }</text> </svg> ``` ### Brain/Document Icon (Memory/Knowledge) ```svg <svg viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg"> <rect x="12" y="8" width="40" height="52" rx="3" fill="none" stroke="currentColor" stroke-width="2"/> <line x1="20" y1="20" x2="44" y2="20" stroke="currentColor" stroke-width="1.5" opacity="0.3"/> <line x1="20" y1="28" x2="44" y2="28" stroke="currentColor" stroke-width="1.5" opacity="0.3"/> <line x1="20" y1="36" x2="36" y2="36" stroke="currentColor" stroke-width="1.5" opacity="0.3"/>  <circle cx="56" cy="52" r="14" fill="var(--accent-1)" opacity="0.15"/> <path d="M56,42 Q64,48 60,56 L52,56 Q48,48 56,42Z" fill="none" stroke="var(--accent-1)" stroke-width="2"/> <line x1="52" y1="60" x2="60" y2="60" stroke="var(--accent-1)" stroke-width="2" stroke-linecap="round"/> </svg> ``` --- ## Color Matching When embedding illustrations, match them to the infographic's palette: ### For CSS-controllable SVGs (inline) Use `currentColor` and CSS custom properties: ```css .illustration svg { color: var(--text-secondary); /* currentColor inheritance */ } .illustration svg .accent { fill: var(--accent-1); } ``` ### For Open Doodles / Open Peeps These typically use black strokes with a single accent fill. Override via CSS: ```css .illustration svg path[fill="#FF5678"] { fill: var(--accent-1); /* Replace pink with your accent */ } ``` ### For unDraw unDraw allows color customization before download. Choose your `--accent-1` color. --- ## Size Guidelines | Illustration Type | Recommended Size | Max File Size | |---|---|---| | Hero character | 300-400px wide | 80KB | | Section illustration | 200-300px wide | 60KB | | Decorative icon | 48-80px | 2KB | | Background watermark | 40% of section width | 60KB | **Total illustration budget per infographic: ~200-300KB** to keep the HTML file under 500KB. --- ## Accessibility Always include: ```html <svg role="img" aria-labelledby="illust-title-1"> <title id="illust-title-1">Person monitoring system dashboard ``` For decorative-only illustrations: ```html ``` FILE:output/clawhub-infographic-ppt-deep-dive/source-skills/article-to-infographic/references/style-presets.md # Style Presets Detailed color palettes, font pairings, and design tokens for each infographic style. ## Bold & Vibrant ```css :root { --bg-primary: #1a1a2e; --bg-secondary: #16213e; --bg-card: #0f3460; --text-primary: #ffffff; --text-secondary: #a8b2d1; --accent-1: #e94560; --accent-2: #f5c518; --accent-3: #00d2ff; --font-display: 'Clash Display', sans-serif; --font-body: 'Satoshi', sans-serif; } ``` - **Fonts:** Clash Display + Satoshi (Fontshare) or Space Grotesk + DM Sans (Google) - **Feel:** High energy, confident, impactful - **Best for:** Statistics dashboards, listicles, comparison infographics - **Background:** Dark base with vibrant accents; use gradient meshes or subtle geometric patterns - **Cards:** Semi-transparent with border glow on accent color - **Charts:** Use accent-1 for primary bars, accent-2 for secondary, accent-3 for highlights ## Clean & Minimal ```css :root { --bg-primary: #fafaf9; --bg-secondary: #f5f5f0; --bg-card: #ffffff; --text-primary: #1c1917; --text-secondary: #78716c; --accent-1: #0ea5e9; --accent-2: #e11d48; --accent-3: #d4d4d4; --font-display: 'Cormorant Garamond', serif; --font-body: 'Source Sans 3', sans-serif; } ``` - **Fonts:** Cormorant Garamond + Source Sans 3 (Google) or Zodiak + General Sans (Fontshare) - **Feel:** Refined, trustworthy, editorial - **Best for:** Timelines, process flows, magazine layouts - **Background:** Off-white or warm gray; avoid pure white - **Cards:** Subtle box-shadow, thin borders, generous padding - **Charts:** Single accent color with opacity variations ## Dark & Techy ```css :root { --bg-primary: #0a0a0f; --bg-secondary: #12121a; --bg-card: rgba(255, 255, 255, 0.04); --text-primary: #e4e4e7; --text-secondary: #71717a; --accent-1: #00ffcc; --accent-2: #a855f7; --accent-3: #0ea5e9; --font-display: 'JetBrains Mono', monospace; --font-body: 'Inter Tight', sans-serif; } ``` - **Fonts:** JetBrains Mono + Inter Tight (Google) or Nippo + Switzer (Fontshare) - **Feel:** Futuristic, technical, cutting-edge - **Best for:** Tech articles, statistics, process flows - **Background:** Near-black with subtle grid pattern or scanline overlay - **Cards:** Glass-morphism (backdrop-blur + semi-transparent bg), neon border glow - **Charts:** Neon accent colors with glow effects (box-shadow) ## Warm & Editorial ```css :root { --bg-primary: #fef7ed; --bg-secondary: #fdf2e4; --bg-card: #fffbf5; --text-primary: #292524; --text-secondary: #78716c; --accent-1: #c2410c; --accent-2: #15803d; --accent-3: #b45309; --font-display: 'Fraunces', serif; --font-body: 'Outfit', sans-serif; } ``` - **Fonts:** Fraunces + Outfit (Google) or Boska + Cabinet Grotesk (Fontshare) - **Feel:** Warm, approachable, storytelling - **Best for:** Editorial content, comparisons, listicles - **Background:** Warm cream/paper tone; optional subtle noise texture - **Cards:** Rounded corners, warm shadow, paper-like feel - **Charts:** Earth tones with muted saturation --- ## Sci-fi HUD / Cyberpunk (Premium) ```css :root { --bg-primary: #030308; --bg-secondary: #0a0f1e; --bg-card: rgba(10, 15, 30, 0.6); --text-primary: #e0e6ed; --text-secondary: #8892a0; --accent-1: #00f0ff; /* cyan */ --accent-2: #ff2d78; /* magenta */ --accent-3: #f0e040; /* yellow */ --glow-cyan: 0 0 10px rgba(0, 240, 255, 0.4), 0 0 20px rgba(0, 240, 255, 0.2); --glow-magenta: 0 0 10px rgba(255, 45, 120, 0.4), 0 0 20px rgba(255, 45, 120, 0.2); --font-display: 'Orbitron', sans-serif; --font-body: 'Rajdhani', sans-serif; --font-mono: 'Share Tech Mono', monospace; } ``` - **Fonts:** Orbitron + Rajdhani + Share Tech Mono (Google) - **Feel:** Futuristic HUD interface, sci-fi command center, cyberpunk terminal - **Best for:** Tech audits, AI/ML articles, system architecture, data-heavy content - **Background:** Near-black (#030308) with animated canvas particle system (nodes + connecting lines), CSS grid/scanline overlay - **Cards:** Semi-transparent dark cards with cyan border glow, corner bracket HUD decorations (`::before`/`::after` pseudo-elements) - **Charts:** Animated stripe progress bars with cyan fill, scan-line animation sweep - **Special effects:** Canvas particle network (100+ particles with proximity lines), CSS scan-line overlay, fixed "SYSTEM STATUS: ONLINE" badge, neon text-shadow glow on headings - **Section markers:** Magenta left-border on section headings, yellow for warnings - **Timeline:** Vertical line with magenta dot markers, cyan phase titles ## Premium Magazine / Editorial (Premium) ```css :root { --bg-primary: #f5f1eb; /* cream */ --bg-secondary: #1a1915; /* charcoal */ --bg-card: #ffffff; --text-primary: #1a1915; --text-secondary: #6b6b6b; --accent-1: #e83a2c; /* vermillion red */ --accent-2: #d4d0cb; /* light gray */ --font-display: 'Playfair Display', serif; --font-body: 'Libre Franklin', sans-serif; --font-mono: 'IBM Plex Mono', monospace; } ``` - **Fonts:** Playfair Display (9rem hero!) + Libre Franklin + IBM Plex Mono (Google) - **Feel:** Monocle/Bloomberg Businessweek editorial, luxury print magazine - **Best for:** Reports, editorial content, business analysis, thought leadership - **Background:** Alternating full-width cream (#f5f1eb) and charcoal (#1a1915) bands for dramatic contrast - **Cards:** No visible card borders; content flows naturally with generous whitespace - **Charts:** Single vermillion red accent against neutral tones; minimal CSS bars with red fill - **Special effects:** Massive 9rem display typography for hero title, elegant Before/After comparison layout with vermillion vertical dividers, opacity-only fade animations (no transforms) for refined feel - **Section markers:** Small-caps monospace labels ("IMPACT ANALYSIS", "RISK MATRIX") above italic serif headings - **Timeline:** Red vertical line with labeled phases, clean and understated - **3-color discipline:** Strictly cream + charcoal + vermillion — no other hues ## Glassmorphism / Aurora 3D (Premium) ```css :root { --bg-primary: #0c0a14; /* deep purple-black */ --text-primary: #f0eef6; --text-secondary: #a09bb0; --accent-1: #a78bfa; /* violet */ --accent-2: #34d399; /* emerald */ --accent-3: #fb923c; /* amber */ --accent-warn: #f87171; /* red */ --glass-bg: rgba(255, 255, 255, 0.06); --glass-bg-hover: rgba(255, 255, 255, 0.09); --glass-border: rgba(255, 255, 255, 0.1); --glass-border-hover: rgba(255, 255, 255, 0.18); --font-display: 'Sora', sans-serif; --font-body: 'DM Sans', sans-serif; --font-mono: 'JetBrains Mono', monospace; --font-quote: 'Playfair Display', serif; } ``` - **Fonts:** Sora + DM Sans + JetBrains Mono + Playfair Display for pull quotes (Google) - **Feel:** Frosted glass UI, Apple-inspired depth, aurora borealis atmosphere - **Best for:** Modern tech, product showcases, startup content, creative reports - **Background:** Deep purple-black (#0c0a14) with 4 animated aurora gradient blobs drifting over 18-25s cycles (violet, teal, coral, indigo), using CSS `filter: blur(120px)` for soft diffusion - **Cards:** `backdrop-filter: blur(20px) saturate(1.5)` with `rgba(255,255,255,0.06)` background, subtle 1px white-alpha borders; hover raises opacity - **Charts:** Gradient progress bars (violet→emerald) with CSS glow `box-shadow`, monospace value labels - **Special effects:** Pulsing colored dots for risk indicators (red/amber/green), animated aurora blobs that drift continuously, gradient text for stat numbers, frosted timeline with gradient accent line - **Section markers:** Semi-bold Sora headings with no decoration — glass cards provide visual separation - **Color-coded statuses:** emerald = success, amber = warning, red = danger, violet = info --- ## Font Loading Google Fonts example: ```html ``` Fontshare example: ```html ``` --- ## Variation Guidelines These presets are starting points. Vary them per infographic: - Rotate accent colors (swap accent-1 and accent-2) - Try alternative font pairings within the same mood - Adjust background darkness/lightness - Never produce two identical-looking infographics FILE:output/clawhub-infographic-ppt-deep-dive/source-skills/article-to-infographic/scripts/html_to_png.py #!/usr/bin/env python3 """ html_to_png.py - Convert an HTML infographic to a full-page PNG screenshot. Uses Playwright (headless Chromium) to render the HTML and capture a full-page screenshot at a configurable viewport width. Usage: python3 html_to_png.py [output.png] [--width 1200] [--scale 2] Arguments: input.html Path to the HTML file to screenshot output.png Output PNG path (default: same name as input with .png) --width Viewport width in pixels (default: 1200) --scale Device scale factor for retina/HiDPI (default: 2) Requirements: pip install playwright playwright install chromium """ import argparse import os import sys import subprocess def ensure_playwright(): """Install playwright + chromium if not available.""" try: import playwright except ImportError: print("[html_to_png] Installing playwright...", file=sys.stderr) subprocess.check_call( [sys.executable, "-m", "pip", "install", "playwright", "-q", "--break-system-packages"], stdout=subprocess.DEVNULL ) # Check if chromium is installed chromium_check = subprocess.run( [sys.executable, "-m", "playwright", "install", "--dry-run", "chromium"], capture_output=True, text=True ) if chromium_check.returncode != 0 or "chromium" not in chromium_check.stdout.lower(): print("[html_to_png] Installing chromium browser...", file=sys.stderr) subprocess.check_call( [sys.executable, "-m", "playwright", "install", "chromium"], stdout=subprocess.DEVNULL, stderr=subprocess.DEVNULL ) def html_to_png(input_path: str, output_path: str, width: int = 1200, scale: int = 2): """Render HTML file and save full-page PNG screenshot.""" from playwright.sync_api import sync_playwright abs_input = os.path.abspath(input_path) file_url = f"file://{abs_input}" with sync_playwright() as p: browser = p.chromium.launch(headless=True) context = browser.new_context( viewport={"width": width, "height": 800}, device_scale_factor=scale, ) page = context.new_page() # Navigate and wait for fonts + animations to settle page.goto(file_url, wait_until="networkidle") page.wait_for_timeout(1500) # Let animations complete # Force all reveal elements to be visible for the screenshot page.evaluate(""" document.querySelectorAll('.reveal').forEach(el => { el.classList.add('visible'); el.style.opacity = '1'; el.style.transform = 'none'; }); document.querySelectorAll('.ba-fill, .bar-fill').forEach(bar => { const w = bar.dataset.width; if (w) bar.style.width = w + '%'; }); document.querySelectorAll('[data-counter]').forEach(el => { const target = el.dataset.counter; const suffix = el.dataset.suffix || ''; el.textContent = parseInt(target).toLocaleString() + suffix; }); """) page.wait_for_timeout(500) # Full-page screenshot page.screenshot(path=output_path, full_page=True) browser.close() print(f"[html_to_png] Saved: {output_path}") print(f"[html_to_png] Width: {width}px, Scale: {scale}x") # Report file size size_kb = os.path.getsize(output_path) / 1024 if size_kb > 1024: print(f"[html_to_png] Size: {size_kb / 1024:.1f} MB") else: print(f"[html_to_png] Size: {size_kb:.0f} KB") def main(): parser = argparse.ArgumentParser(description="Convert HTML infographic to PNG") parser.add_argument("input", help="Input HTML file path") parser.add_argument("output", nargs="?", default=None, help="Output PNG path") parser.add_argument("--width", type=int, default=1200, help="Viewport width (default: 1200)") parser.add_argument("--scale", type=int, default=2, help="Device scale factor (default: 2)") args = parser.parse_args() if not os.path.exists(args.input): print(f"Error: Input file not found: {args.input}", file=sys.stderr) sys.exit(1) output = args.output or os.path.splitext(args.input)[0] + ".png" ensure_playwright() html_to_png(args.input, output, args.width, args.scale) if __name__ == "__main__": main() FILE:output/clawhub-infographic-ppt-deep-dive/source-skills/article-to-infographic/skill.json { "name": "article-to-infographic", "version": "2.0.0", "description": "Transform articles into visually stunning HTML infographics with PNG export. v2.0 adds mandatory interaction workflow, fault-tolerant PNG export, Chinese typography optimization, and 6 style presets including Movie Poster and Chinese Anime.", "author": "OpenClaw", "entry": "SKILL.md", "files": [ "SKILL.md", "references/style-presets.md", "scripts/html_to_png.py" ], "dependencies": { "optional": [ "playwright", "selenium", "wkhtmltopdf", "cutycapt" ] }, "styles": [ "bold-vibrant", "clean-minimal", "dark-techy", "warm-editorial", "movie-poster", "chinese-anime" ], "features": [ "Mandatory interaction checkpoints (outline + style + export)", "Fault-tolerant PNG export with 4-method fallback chain", "CJK typography optimization with system font fallbacks", "6 distinctive visual styles", "Responsive design (4 breakpoints)", "Print-ready output" ], "changelog": { "2.0.0": [ "Added mandatory interaction workflow (MUST ask user for outline/style/export)", "Implemented fault-tolerant PNG export (Playwright → Selenium → wkhtmltoimage → CutyCapt)", "Added Chinese typography optimization (CJK line-height, punctuation, system fonts)", "Added 2 new styles: movie-poster and chinese-anime", "Improved font CDN with China mirrors (fonts.loli.net, fonts.font.im)", "Added responsive breakpoints for mobile/tablet/desktop" ], "1.0.0": [ "Initial release with 4 base styles", "Basic HTML infographic generation", "Playwright-based PNG export" ] } } FILE:output/clawhub-infographic-ppt-deep-dive/source-skills/baoyu-infographic/SKILL.md --- name: baoyu-infographic description: Generates professional infographics with 21 layout types and 21 visual styles. Analyzes content, recommends layout×style combinations, and generates publication-ready infographics. Use when user asks to create "infographic", "信息图", "visual summary", "可视化", or "高密度信息大图". version: 1.56.1 metadata: openclaw: homepage: https://github.com/JimLiu/baoyu-skills#baoyu-infographic --- # Infographic Generator Two dimensions: **layout** (information structure) × **style** (visual aesthetics). Freely combine any layout with any style. ## Usage ```bash /baoyu-infographic path/to/content.md /baoyu-infographic path/to/content.md --layout hierarchical-layers --style technical-schematic /baoyu-infographic path/to/content.md --aspect portrait --lang zh /baoyu-infographic path/to/content.md --aspect 3:4 /baoyu-infographic # then paste content ``` ## Options | Option | Values | |--------|--------| | `--layout` | 21 options (see Layout Gallery), default: bento-grid | | `--style` | 21 options (see Style Gallery), default: craft-handmade | | `--aspect` | Named: landscape (16:9), portrait (9:16), square (1:1). Custom: any W:H ratio (e.g., 3:4, 4:3, 2.35:1) | | `--lang` | en, zh, ja, etc. | ## Layout Gallery | Layout | Best For | |--------|----------| | `linear-progression` | Timelines, processes, tutorials | | `binary-comparison` | A vs B, before-after, pros-cons | | `comparison-matrix` | Multi-factor comparisons | | `hierarchical-layers` | Pyramids, priority levels | | `tree-branching` | Categories, taxonomies | | `hub-spoke` | Central concept with related items | | `structural-breakdown` | Exploded views, cross-sections | | `bento-grid` | Multiple topics, overview (default) | | `iceberg` | Surface vs hidden aspects | | `bridge` | Problem-solution | | `funnel` | Conversion, filtering | | `isometric-map` | Spatial relationships | | `dashboard` | Metrics, KPIs | | `periodic-table` | Categorized collections | | `comic-strip` | Narratives, sequences | | `story-mountain` | Plot structure, tension arcs | | `jigsaw` | Interconnected parts | | `venn-diagram` | Overlapping concepts | | `winding-roadmap` | Journey, milestones | | `circular-flow` | Cycles, recurring processes | | `dense-modules` | High-density modules, data-rich guides | Full definitions: `references/layouts/.md` ## Style Gallery | Style | Description | |-------|-------------| | `craft-handmade` | Hand-drawn, paper craft (default) | | `claymation` | 3D clay figures, stop-motion | | `kawaii` | Japanese cute, pastels | | `storybook-watercolor` | Soft painted, whimsical | | `chalkboard` | Chalk on black board | | `cyberpunk-neon` | Neon glow, futuristic | | `bold-graphic` | Comic style, halftone | | `aged-academia` | Vintage science, sepia | | `corporate-memphis` | Flat vector, vibrant | | `technical-schematic` | Blueprint, engineering | | `origami` | Folded paper, geometric | | `pixel-art` | Retro 8-bit | | `ui-wireframe` | Grayscale interface mockup | | `subway-map` | Transit diagram | | `ikea-manual` | Minimal line art | | `knolling` | Organized flat-lay | | `lego-brick` | Toy brick construction | | `pop-laboratory` | Blueprint grid, coordinate markers, lab precision | | `morandi-journal` | Hand-drawn doodle, warm Morandi tones | | `retro-pop-grid` | 1970s retro pop art, Swiss grid, thick outlines | | `hand-drawn-edu` | Macaron pastels, hand-drawn wobble, stick figures | Full definitions: `references/styles/ FILE:output/clawhub-infographic-ppt-deep-dive/source-skills/visual-note-card/CONTRIBUTING.md # Contributing Thanks for your interest in contributing to Visual Note Card Generator! ## How to Contribute 1. **Fork** the repository 2. **Create** a feature branch (`git checkout -b feature/my-feature`) 3. **Commit** your changes (`git commit -m 'Add my feature'`) 4. **Push** to the branch (`git push origin feature/my-feature`) 5. **Open** a Pull Request ## Guidelines - Keep the single-file HTML output approach — no build tools or frameworks - Maintain the existing CSS variable system for theming - Test generated cards in multiple browsers (Chrome, Firefox, Safari) - If modifying the template, ensure the export (html2canvas) still works correctly ## Reporting Issues Please open a GitHub issue with: - A clear description of the problem - Steps to reproduce - Expected vs actual behavior - Browser/environment info if relevant ## Code Style - HTML/CSS follows the conventions in `assets/template.html` - SKILL.md uses standard Claude Code skill frontmatter format FILE:output/clawhub-infographic-ppt-deep-dive/source-skills/visual-note-card/README.md # Visual Note Card Generator A custom skill for [Claude Code](https://docs.anthropic.com/en/docs/claude-code) and [OpenClaw](https://openclaw.ai/) that generates professional Chinese visual note cards (视觉笔记卡片/信息图) as single-page HTML infographics. ![Claude Code Skill](https://img.shields.io/badge/Claude_Code-Skill-blue) ![OpenClaw Compatible](https://img.shields.io/badge/OpenClaw-Compatible-purple) ![License](https://img.shields.io/badge/License-MIT-green) ## Overview This skill turns any topic, article, or concept into a beautifully structured visual note card — a poster-style infographic optimized for social media sharing or printing. All output is a single self-contained HTML file with no external dependencies (except Google Fonts and html2canvas CDN). ### Features - **Single HTML output** — no build tools, no frameworks, fully self-contained - **Bilingual support** — Chinese body text with English display titles - **Built-in export** — floating action button with PNG/JPEG export at multiple resolutions (1×, 1.5×, 2×) - **Structured layout** — editorial knowledge card aesthetic with framework grid, dark/light panels, and highlight bar - **Customizable palette** — default teal/orange theme with support for user-requested color schemes ### Example Output ![Demo](demo.png) The card follows a fixed layout structure: ``` ┌──────────────────────────────────────────┐ │ TOPIC LABEL SOURCE LABEL │ ← Top Bar ├────────────────────┬─────────────────────┤ │ English Title │ Thesis statement │ ← Title Area │ 中文标题 │ with key insight │ ├─────┬─────┬─────┬──┴──────────────────────┤ │ M │ P │ D │ G │ │ ← Framework Row (4 cards) ├─────┴─────┴─────┴─────┴──────────────────┤ │ ⚡ Dark Panel │ ★ Light Panel │ ← Two-Column Content │ (narrative/story) │ (numbered insights) │ ├──────────────────────────────────────────┤ │ Formula = M × P × D × G Closing note │ ← Highlight Bar ├──────────────────────────────────────────┤ │ FRAMEWORK LABEL BRAND NAME │ ← Footer └──────────────────────────────────────────┘ ``` ## Installation ### Prerequisites - [Claude Code](https://docs.anthropic.com/en/docs/claude-code) or [OpenClaw](https://openclaw.ai/) installed and configured ### Install Clone this repository into your skills directory: **Claude Code:** ```bash git clone https://github.com/beilunyang/visual-note-card-skills.git ~/.claude/skills/visual-note-card ``` **OpenClaw:** ```bash git clone https://github.com/beilunyang/visual-note-card-skills.git ~/.openclaw/skills/visual-note-card ``` Both tools will automatically detect the skill and use it when you ask for visual notes or knowledge cards. ### Uninstall **Claude Code:** ```bash rm -rf ~/.claude/skills/visual-note-card ``` **OpenClaw:** ```bash rm -rf ~/.openclaw/skills/visual-note-card ``` ## Usage Simply ask Claude Code or OpenClaw to create a visual note card: ``` # Chinese prompts 帮我做一张关于 RAG 架构的视觉笔记把这篇文章做成信息图生成一张知识卡片，主题是微服务 # English prompts Create a visual note about product-market fit Make a knowledge card summarizing this article ``` ### What triggers this skill The skill activates when you mention: - 视觉笔记 / 知识卡片 / 信息图 / 一页纸总结 - visual note / knowledge card / infographic / one-pager summary - Any request to summarize content into a structured visual card format ## Project Structure ``` . ├── SKILL.md # Skill definition and design system specification ├── assets/ │ └── template.html # Canonical HTML/CSS reference template ├── LICENSE ├── CONTRIBUTING.md └── README.md ``` ## Customization ### Color Palette The default palette uses CSS variables defined in the template: | Variable | Default | Usage | |----------|---------|-------| | `--primary` | `#1a7a6d` (teal) | Headers, badges, accents | | `--accent` | `#e8713a` (orange) | Emphasis, secondary badges | | `--bg` | `#f0ebe4` (warm gray) | Page background | | `--black` | `#1a1a1a` | Dark panel, primary text | You can request alternate color schemes when generating cards. The skill will maintain the same structural contrast ratios with your chosen colors. ### Typography - **English display**: Playfair Display (serif) - **Chinese body**: Noto Sans SC - **Monospace/labels**: JetBrains Mono All fonts are loaded via Google Fonts CDN. ## Contributing Contributions are welcome! Please read [CONTRIBUTING.md](CONTRIBUTING.md) for details. ## License This project is licensed under the MIT License — see the [LICENSE](LICENSE) file for details. FILE:output/clawhub-infographic-ppt-deep-dive/source-skills/visual-note-card/SKILL.md --- name: visual-note-card description: Generate professional Chinese visual note cards (视觉笔记卡片/信息图) as single-page HTML infographics with automatic PNG export. Use this skill whenever the user asks to create a visual note, knowledge card, infographic, one-pager summary, visual summary, 知识卡片, 视觉笔记, 信息图, 一页纸总结, or any poster-style knowledge visualization. Also trigger when the user wants to summarize an article, blog post, book chapter, or concept into a structured visual card format, or when they reference an existing visual note and ask to create one in the same style. This skill produces both a self-contained HTML file and a high-quality PNG image, ready for sharing on social media or printing. --- # Visual Note Card Generator Create professional, information-dense visual note cards (视觉笔记/信息图) as self-contained HTML files with automatic PNG export via Playwright. The output is a structured, poster-style infographic with modular card layout, suitable for social media sharing or printing. ## Design System Before writing any code, read the reference template at `assets/template.html` for the canonical HTML/CSS structure. Then adapt the content to the user's topic. ### Core Visual Identity The design follows an **editorial knowledge card** aesthetic — high information density with clear visual hierarchy, inspired by premium magazine layouts and structured note-taking. **Color Palette (CSS Variables):** - `--primary`: Deep teal `#1a7a6d` — headers, badges, accent elements - `--primary-dark`: `#145f54` — bottom highlight bar - `--primary-deep`: `#0d3d36` — deep accent - `--accent`: Orange `#e8713a` — emphasis, secondary badges, important labels - `--bg`: Warm gray `#f0ebe4` — page background - `--bg-light`: `#f5f1ec` — light panel background - `--bg-card`: `#e8e3dc` — framework card background - `--black`: `#1a1a1a` — dark panel, primary text - `--white`: `#ffffff` Users may request alternate color schemes. If so, maintain the same structural contrast ratios: one warm neutral background, one strong primary color, one accent color, and black for dark panels. **Typography:** - English display: `Playfair Display` (serif, 700/900) — main title - Chinese body: `Noto Sans SC` (400/500/700/900) — all Chinese text - Monospace: `JetBrains Mono` (500/700) — labels, URLs, tags - Import via Google Fonts in the `

{{TOPIC_LABEL_EN}} · {{SUBTOPIC_LABEL_EN}}

{{THESIS_LINE_1}}
{{THESIS_LINE_2}}
{{THESIS_KEYWORD}}{{THESIS_LINE_3}}

{{FW1_DESC_LINE1}}
{{FW1_KEYWORD}}{{FW1_DESC_LINE2}}

{{FW2_DESC_LINE1}}
{{FW2_KEYWORD}}{{FW2_DESC_LINE2}}

{{FW3_DESC_LINE1}}
{{FW3_KEYWORD}}{{FW3_DESC_LINE2}}

{{FW4_DESC_LINE1}}
{{FW4_KEYWORD}}{{FW4_DESC_LINE2}}

{{BLOCK1_ITEM1}}
{{BLOCK1_ITEM2}}
{{BLOCK1_ITEM3}}
{{BLOCK1_ITEM4}}

{{BLOCK2_ITEM1}}
{{BLOCK2_ITEM2}}
{{BLOCK2_ITEM3}}
{{BLOCK2_ITEM4}}
{{BLOCK2_ITEM5}}

{{CONCLUSION_TEXT}} {{CONCLUSION_HIGHLIGHT}}

★ {{LIGHT_SECTION_TITLE}}

正在导出…

FILE:output/clawhub-infographic-ppt-deep-dive/source-skills/visual-note-card/scripts/html2png.py #!/usr/bin/env python3 """ html2png.py — 将视觉笔记卡片 HTML 渲染为高清 PNG 图片依赖: pip install playwright && playwright install chromium 用法: python html2png.py [output.png] [--scale=1.5] 示例: python html2png.py card.html # 输出 card.png (1.5x) python html2png.py card.html poster.png # 指定输出文件名 python html2png.py card.html --scale=2 # 2x 超清 python html2png.py card.html poster.png --scale=1 # 1x 标准 """ import sys import argparse from pathlib import Path def html_to_png(input_html: str, output_png: str = None, scale: float = 1.5): """ 用 Playwright 无头 Chromium 将 HTML 渲染为 PNG。只截取 .poster 元素，不包含悬浮按钮等页面外元素。 """ from playwright.sync_api import sync_playwright input_path = Path(input_html).resolve() if not input_path.exists(): print(f"File does not exist: {input_path}") return None if output_png is None: output_png = str(input_path.with_suffix(".png")) output_path = Path(output_png).resolve() print("Rendering...") print(f" Input: {input_path}") print(f" Scale: {scale}x") with sync_playwright() as p: browser = p.chromium.launch(args=["--no-sandbox", "--disable-setuid-sandbox"]) page = browser.new_page( viewport={"width": 1280, "height": 900}, device_scale_factor=scale, ) # 加载 HTML page.goto(f"file://{input_path}", wait_until="networkidle") # 等待 Google Fonts 加载完成 page.wait_for_function( """() => document.fonts.ready.then(() => document.fonts.check('16px "Noto Sans SC"'))""", timeout=15000, ) # 额外等待确保渲染完成 page.wait_for_timeout(500) # 隐藏悬浮按钮和 toast（如果存在） page.evaluate("""() => { const fab = document.querySelector('.fab-wrap'); const toast = document.querySelector('.export-toast'); if (fab) fab.style.display = 'none'; if (toast) toast.style.display = 'none'; }""") # 截取 .poster 元素 poster = page.query_selector(".poster") if poster: poster.screenshot(path=str(output_path), type="png") else: # 回退：截全页 page.screenshot(path=str(output_path), type="png", full_page=True) browser.close() file_size = output_path.stat().st_size size_str = ( f"{file_size / 1024:.0f} KB" if file_size < 1024 * 1024 else f"{file_size / 1024 / 1024:.1f} MB" ) print(f"Export completed: {output_path} ({size_str})") return str(output_path) def main(): parser = argparse.ArgumentParser(description="将视觉笔记 HTML 渲染为 PNG") parser.add_argument("input", help="输入 HTML 文件路径") parser.add_argument("output", nargs="?", default=None, help="输出 PNG 文件路径 (默认同名.png)") parser.add_argument("--scale", type=float, default=1.5, help="缩放倍数 (默认 1.5)") args = parser.parse_args() result = html_to_png(args.input, args.output, args.scale) sys.exit(0 if result else 1) if __name__ == "__main__": main() FILE:output/clawhub-infographic-ppt-deep-dive/spec.md # 本轮规格 ## 范围本规格只约束“如何从参考 Skill 中提炼信息图与演示稿生成能力”。当前不直接改写主 Skill 流程，也不直接新增构建脚本。 ## 规格要求 ### 1. 参考 Skill 必须本地化凡是进入设计决策的参考 Skill，都必须本地拉取到： - `output/clawhub-infographic-ppt-deep-dive/source-skills/` 分析不得只基于搜索摘要或市场页标题。 ### 2. 信息图能力必须区分两条路径后续任何信息图相关能力设计，都要先判断属于哪一类： - `analysis_driven_infographic` - `template_driven_visual_card` 如果需求同时包含两类，应在设计阶段明确主路径和次路径。 ### 3. 演示稿能力必须显式声明输入层和导出层后续任何演示稿相关能力设计，都要至少写清： - 输入层 - `interview` - `markdown` - `raw_text` - `document` - 中间层 - `presentation_brief` - `slide_outline` - `deck_markdown` - 导出层 - `html_slides` - `pptx` - `pdf` - `gamma_markdown` ### 4. 中间层必须可落盘后续如果正式做 capability 或 preset 收口，至少要能保留： #### 信息图 - `analysis.md` - `structured-content.md` #### 演示稿 - `presentation-brief.json` - `slide-outline.json` - `deck.md` ### 5. 视觉结构和审校规则都算能力的一部分后续沉淀能力时，不允许只写“如何生成”。至少还要补齐： - 如何收集信息 - 如何组织大纲 - 如何选择 layout / style / slide type / theme - 如何导出 - 如何做 factual validation 或 overflow check ### 6. 输出能力要单独表达后续能力目录建议单独表达这些导出器，而不是藏在主能力说明里： - `html_to_png` - `html_to_pdf` - `deck_markdown_to_html` - `deck_markdown_to_pptx` ## 当前 open gaps - 还没有把这轮结论正式写回原子能力索引。 - 还没有把 infographic / presentation 的中间层 schema 变成正式协议。 - 还没有把演示稿的 factual validation 规则接进主流程。 FILE:output/design-md-hardening/build-plan.md # 构建计划 ## 当前回合 1. 更新本地 `ref/design-md/` 预设库与索引 2. 新增 `design_md` 协议字段并同步文档 3. 修改生成链，输出 `references/design.md` 与 `references/design-md/` 4. 修改平台校验逻辑，检查设计资产 5. 用独立 `gpt-5.4` 子 agent 生成“研究生毕业答辩 PPT skill”并产出示例 PPT ## 测试产物建议 - `output/design-md-hardening/spec.yaml` - `output/design-md-hardening/test-graduate-defense/` - `spec.yaml` - 渲染出的测试 Skill - 示例 PPT 或其导出结果 ## 后续可选项 - 为 `design_md` 增加更细的品牌 token 结构 - 接入更多设计预设 - 为最终 Skill 增加字体或模板资产复制 FILE:output/design-md-hardening/design-summary.md # 设计摘要 ## 设计目标让视觉任务的设计输入成为正式协议，并在最终 Skill 中稳定落盘。 ## 收口方案 - 新增顶层 `design_md` 协议块，统一服务网页、信息图、展示图、`.pptx`、HTML slides 等视觉排版任务。 - 最终 Skill 固定生成 `references/design.md` 作为默认设计入口。 - 同时复制 `references/design-md/` 预设库，允许用户在官方预设之间切换，或替换成自己的 `DESIGN.md`。 - 生成的 `SKILL.md` 与 `references/spec-summary.md` 明确提示先读 `references/design.md`。 - 平台校验在 `design_md.enabled: true` 时强制检查设计入口和预设目录。 ## 官方预设集合 - IBM - Stripe - Notion - Framer - Figma - Nothing - Apple ## 设计取舍 - 没有把 `design_md` 塞进各任务域补充块，而是提升为顶层协议，避免同一逻辑在 `frontend_design` 和 `document_artifacts` 间重复维护。 - 没有把扩展参考删除，避免破坏现有本地文档资产。 - 没有引入图片、字体或 Figma 资源复制，保持这轮只处理 Markdown 级设计输入。 FILE:output/design-md-hardening/reference-skill-analysis.md # 参考方案分析 ## 外部参考 ### VoltAgent / awesome-design-md - 价值：提供现成的 `DESIGN.md` 风格文档，适合直接作为视觉任务的稳定输入。 - 可复用点：预设式风格选择、面向 AI 友好的纯 Markdown 格式、按品牌拆分的风格说明。 - 本轮采用方式：抽取 7 个区分度高的官方预设进入本地参考库。 ### nothing-design - 价值：补齐 `Nothing` 风格的工业感、黑白层级、字体约束和模式选择规则。 - 可复用点：三层信息层级、黑白单色体系、点阵字与等宽字的使用约束。 - 本轮采用方式：整理为本地 `nothing.md` 风格参考，并允许进入官方预设集合。 ## 本地已有参考 ### Apple - 保留原因：适合高端展示页与极简硬件感页面，和其余预设的气质区分明显。 ### Linear / Vercel - 当前处理：继续作为扩展参考保留。 - 未进入首批默认预设的原因：与 `Nothing`、`Framer`、`IBM` 的区分度不如新增组合明显。 ## 设计判断 - 官方预设需要覆盖企业信息密度、商业感、知识整理、展示冲击、创意工具、工业黑白、高端极简七类方向。 - 最终 Skill 不应只给风格名，而应直接附带 `references/design.md` 的默认实例，减少视觉任务的起步不稳定性。 FILE:output/design-md-hardening/research-summary.md # 研究摘要 ## 本轮目标把 `design.md` 官方实例正式接入 `skill-factory`，用于 PPT、网页信息图、展示图等视觉排版任务。 ## 稳定结论 - 仓库内已经有 `ref/design-md/` 本地风格参考库与“先确认风格来源再做视觉设计”的流程规则。 - 真正缺口在三处：统一协议没有 `design_md` 字段、最终 Skill 不会生成 `references/design.md`、平台校验不检查设计资产。 - `VoltAgent/awesome-design-md` 适合首批沉淀为官方预设的集合，当前收口为 `IBM`、`Stripe`、`Notion`、`Framer`、`Figma`、`Nothing`、`Apple`。 - `Linear` 与 `Vercel` 继续保留为扩展参考，不作为首批默认预设。 ## 本轮研究来源 - `cocoloop-skill-factory/ref/design-md/index.md` - `cocoloop-skill-factory/ref/design.md` - `cocoloop-skill-factory/ref/research.md` - `cocoloop-skill-factory/factory-skill-builder/scripts/render_skill_from_spec.cjs` - `cocoloop-skill-factory/factory-skill-builder/scripts/validate_platform_skill.cjs` - `https://github.com/VoltAgent/awesome-design-md` - `/Users/tanshow/.codex/skills/nothing-design/SKILL.md` ## 当前边界 - 本轮只把 `design_md` 接入协议、文档与最小生成链。 - 不做复杂的品牌资产同步，也不接 Figma 或图片资源复制。 FILE:output/design-md-hardening/spec.md # 本轮统一要求 ## 目标为视觉任务正式接入 `design_md` 协议与官方 `design.md` 实例。 ## 必做项 - 更新 `ref/design-md/` 官方预设集合 - 在 `spec-template.yaml` 中新增 `design_md` - 在协议文档、调研文档、设计文档、构建文档中同步 `design_md` 语义 - 让 `render_skill_from_spec.cjs` 生成 `references/design.md` - 让 `validate_platform_skill.cjs` 校验设计资产 ## 协议字段 - `design_md.enabled` - `design_md.applies_to` - `design_md.source_mode` - `design_md.preset_id` - `design_md.preset_ref` - `design_md.user_provided_ref` - `design_md.custom_style_notes` - `design_md.official_library_ref` - `design_md.prompt_user_to_use_first` - `design_md.output_path` ## 验收条件 - `design_md.enabled: true` 时，渲染结果中存在 `references/design.md` - 渲染结果中存在 `references/design-md/index.md` - `SKILL.md` 明确提示用户先读设计入口 - 协议文档与主流程文档都承认 `design_md` FILE:output/design-md-hardening/spec.yaml spec_version: "0.1" skill_identity: slug: "design-md-hardening" display_name: "Design MD Hardening" id: "cocoloop.design-md-hardening" name: "Design MD Hardening" version: "0.1.0" owner: "tanshow" homepage: "local://cocoloop-skill-factory/output/design-md-hardening" target_platforms: - platform: "codex" support_level: "supported_public" standard_source: "https://developers.openai.com/codex/skills" validation_mode: "public_validator" publish_mode: "plugin" note: "主流程验证平台" - platform: "claude_code" support_level: "supported_public" standard_source: "https://code.claude.com/docs/en/skills" validation_mode: "public_validator" publish_mode: "plugin_skill" note: "兼容验证平台" intent: goal: "为视觉排版任务把 design_md 官方实例接入 skill-factory 的协议、文档和生成链" target_user: "维护 skill-factory 的作者" use_scenarios: - "为 PPT 生成 Skill 附带 DESIGN.md 官方实例" - "为网页信息图 Skill 附带稳定的设计入口" - "让视觉任务的设计输入进入正式协议" scope: must_have: - "design_md 顶层协议" - "7 个官方设计预设" - "最终 Skill 输出 references/design.md" - "平台校验检查设计资产" nice_to_have: - "继续保留扩展风格参考" excluded: - "不处理图片或字体资源复制" inputs: - name: "visual_task_rules" required: true description: "当前视觉任务的流程约束与预设要求" constraints: note: "需要覆盖网页、信息图、演示稿等视觉排版任务" type: "workspace_docs" allowed_values: [] source: "workspace_scan" outputs: - name: "design_md_protocol" format: "yaml+markdown" description: "统一设计输入协议与生成链实现" minimum_contents: - "design_md" - "references/design.md" - "references/design-md/index.md" output_profile: has_visual_output: true visual_output_types: - "webpage" - "infographic" - "ppt" - "showcase_graphic" research_gate: skill_identity: status: "ready" cocoloop_checked: true clawhub_checked: true slug_available: true note: "示例名称已完成双源去重" target_environment: status: "ready" current_environment: "codex / claude code authoring workspace on macOS" target_environment: "codex / claude code authoring workspace on macOS" current_environment_is_target: true note: "本轮主要验证本地 authoring 与渲染链" implementation_approach: status: "ready" selected_execution_plane: "Skill + CLI" note: "需要通过 factory builder 和校验脚本完成渲染链验证" interaction_contract: research: ask_one_question_per_turn: true max_questions: 10 count_confirmation_questions: true overflow_strategy: "write_open_gaps_then_continue" success_criteria: - "视觉任务可在 spec 中稳定表达设计来源" - "渲染结果包含默认 design.md 实例" - "用户可在官方预设和自带 DESIGN.md 之间切换" failure_modes: - mode: "design_input_not_rendered" description: "spec 中存在 design_md，但最终 Skill 没有输出设计入口" user_impact: "视觉任务起步不稳定" fallback_policy: allowed: true summary: "当用户没有提供 DESIGN.md 时，回退到官方预设或自定义风格简报" fallback_outputs: - "references/design.md" dependencies: - name: "design-md library" kind: "reference" required: true note: "本地官方设计预设库" design_md: enabled: true applies_to: - "webpage" - "infographic" - "ppt" - "showcase_graphic" source_mode: "preset" preset_id: "nothing" preset_ref: "cocoloop-skill-factory/ref/design-md/nothing.md" user_provided_ref: "" custom_style_notes: - "允许黑白工业感页面" - "需要正式把官方预设映射到最终 Skill" official_library_ref: "cocoloop-skill-factory/ref/design-md/index.md" prompt_user_to_use_first: true output_path: "references/design.md" research_evidence: coverage_status: status: "covered" note: "已覆盖协议、文档与生成链" evidence_refs: - source_type: "workspace_doc" mechanism: "visual_flow" solution_name: "skill-factory docs" ref: "cocoloop-skill-factory/ref/design.md" note: "提供视觉任务的风格来源规则" - source_type: "web_repo" mechanism: "design preset analysis" solution_name: "awesome-design-md" ref: "https://github.com/VoltAgent/awesome-design-md" note: "提供 DESIGN.md 预设参考" open_gaps: [] primary_domain: "frontend_design" peer_domains: - "document_artifacts" - "docs_research" domain_supplements: engineering_delivery: {} frontend_design: style_constraints: - "视觉任务必须收口到 design_md" browser_ui_testing: {} document_artifacts: style_constraints: - "PPT 类任务允许官方预设或用户自带 DESIGN.md" docs_research: {} workflow_integration: {} deploy_platform_ops: {} security_risk_review: {} adapters: codex: status: "draft" entry_points: - "SKILL.md" - "references/design.md" mapping_notes: - "视觉任务先读 design.md" known_gaps: [] claude_code: status: "draft" entry_points: - "SKILL.md" - "references/design.md" mapping_notes: - "保持与 codex 一致的设计入口" known_gaps: [] openclaw: status: "planned" entry_points: [] mapping_notes: [] known_gaps: [] copaw: status: "planned" entry_points: [] mapping_notes: [] known_gaps: [] molili: status: "planned" entry_points: [] mapping_notes: [] known_gaps: [] source_root: "" active_root: "" activation_strategy: "" verification_steps: [] hermes_agent: status: "planned" entry_points: [] mapping_notes: [] known_gaps: [] FILE:output/design-md-hardening/test-graduate-defense/build-plan.md # 构建计划 ## 当前步骤 1. 编写测试 `spec.yaml` 2. 调用 builder 渲染最小测试 Skill 3. 检查渲染结果中是否包含 `references/design.md` 4. 生成示例 `.pptx` 5. 保留结构化 `slides.md` 作为备用内容稿 ## 当前结果 - 已生成 `graduate-defense-demo.pptx` - 已保留 `slides.md` 作为内容稿 ## 仍存在的限制 - 当前环境没有现成的 PPT 渲染预览工具链 - `slides_test.py` 依赖 `numpy`，本地未安装 FILE:output/design-md-hardening/test-graduate-defense/cocoloop-graduate-defense-ppt/SKILL.md --- "name": "cocoloop-graduate-defense-ppt" "description": "帮助用户制作研究生毕业答辩 PPT，并提供稳定的设计背景与页级内容结构" "version": "0.1.0" "author": "tanshow" "generated_by_cocoloop": true "when_to_use": "帮助用户制作研究生毕业答辩 PPT，并提供稳定的设计背景与页级内容结构. Typical scenarios: 生成毕业答辩 PPT 结构; 确定答辩页面视觉方向; 整理答辩讲稿与实验结果" "user-invocable": true --- # Graduate Defense PPT ## Overview 帮助用户制作研究生毕业答辩 PPT，并提供稳定的设计背景与页级内容结构 ## Use Cases - 生成毕业答辩 PPT 结构 - 确定答辩页面视觉方向 - 整理答辩讲稿与实验结果 ## Inputs - `thesis_topic`: 论文题目或答辩主题 - `research_materials`: 实验结果、图表、结论与摘要材料 ## Outputs - `defense_outline` (markdown): 答辩 PPT 大纲 - `visual_design_input` (markdown): 默认设计背景 - `infographic_slide_set` (pptx_or_markdown): 包含流程、对比和指标卡的答辩版式结果 ## Research Gates - Skill identity status: `ready` - Cocoloop slug check complete: yes - ClawHub slug check complete: yes - Slug available: yes - Target environment status: `ready` - Current environment: codex authoring workspace on macOS - Target environment: codex authoring workspace on macOS - Current environment is target: yes - Implementation approach status: `ready` - Selected execution plane: `Skill + CLI` ## Output Profile - Has visual output: yes - Visual output types: `ppt` ## Interaction Rules - Plan the question budget before asking anything. - The full interaction should normally stay within 10 total questions, including confirmation questions. - Ask only one key question per turn and use defaults, existing context, environment detection, or confirmations to reduce follow-up questions. - Detect the current environment early and use that result to narrow the platform and runtime discussion. - Confirm the target runtime environment before writing any skill content, scaffold, implementation path, or build instructions. - If the current environment might be the target environment, ask the user to confirm that explicitly after environment detection. - If the target environment is still unclear, stop at clarification and do not start drafting the skill body or execution steps. - If the task is already clear, skip redundant questions and move to execution or summary. - If open gaps remain near the question limit, apply `write_open_gaps_then_continue` instead of extending the interview. ## Design Input - For webpage, infographic, PPT, and other visual output tasks, read `references/design.md` before high-fidelity design. - Users can keep the default official preset, switch to another preset in `references/design-md/`, or replace it with their own `DESIGN.md`. - Current source mode: `preset` - Current preset: `apple` ## Visual Storytelling - Artifact family: `visual_narrative_artifact` - Output adapters: `ppt` - Story units: `cover`, `agenda`, `problem`, `contribution`, `method`, `experiment`, `result`, `analysis`, `closing` - Text hierarchy: `kicker`, `headline`, `summary`, `body`, `metric`, `annotation` - Infographic required: yes ## Must Have - 答辩大纲建议 - 页级内容结构 - 默认 DESIGN.md 预设 - 示例 slides 结果 - 明确的文字层级 - 方法流程图、结果对比图和指标卡 ## Excluded - 不负责自动搜集论文原始数据 ## Target Platforms - `codex` (supported_public): 测试渲染平台 - `claude_code` (supported_public): 兼容渲染平台 ## Dependencies - `slides` (reference): 如环境允许，可进一步导出可编辑演示稿 ## Fallback Policy - Allowed: yes - Summary: 缺少可编辑 PPT 依赖时，先交付结构化 slides 结果 FILE:output/design-md-hardening/test-graduate-defense/cocoloop-graduate-defense-ppt/agents/openai.yaml "interface": "display_name": "Graduate Defense PPT" "short_description": "帮助用户制作研究生毕业答辩 PPT，并提供稳定的设计背景与页级内容结构" "default_prompt": "Use $cocoloop-graduate-defense-ppt to help with this task." "policy": "allow_implicit_invocation": true FILE:output/design-md-hardening/test-graduate-defense/cocoloop-graduate-defense-ppt/platform-manifests/claude-code.yaml "install_paths": - "~/.claude/skills/cocoloop-graduate-defense-ppt" - "./.claude/skills/cocoloop-graduate-defense-ppt" "support_level": "supported_public" "standard_source": "https://docs.anthropic.com/en/docs/claude-code/sub-agents" "validation_mode": "public_validator" FILE:output/design-md-hardening/test-graduate-defense/cocoloop-graduate-defense-ppt/references/design-md/apple.md # Apple 风格参考 ## 适合什么 - 高端产品发布页 - 硬件、设备、消费电子类介绍页 - 需要强留白和强产品主角感的页面 ## 视觉关键词 - 大片留白 - 黑白二元节奏 - 电影感大图 - 克制的蓝色交互点 - 展厅式陈列 ## 色彩和气质 - 主背景在纯黑与浅灰之间切换 - 文本多用近黑和纯白 - 蓝色只保留给按钮、链接、焦点态 - 不依赖渐变和装饰纹理 ## 字体和层级 - 大标题压得很紧，像产品海报 - 正文字距也偏紧，整体很精密 - 标题强，正文短，段落不宜拖长 ## 版式信号 - 全宽 section - 居中内容 - 每一屏只讲一个主角产品或一个主卖点 - CTA 简单，通常双按钮即可 ## 组件倾向 - 圆角按钮 - 极少边框 - 阴影很少，用在少量产品卡片 - 导航像一层半透明玻璃 ## 更适合的任务 - 单产品 landing page - 高端营销页 - 视觉节奏慢、讲究镜头感的叙事页面 ## 不适合的任务 - 数据密集 dashboard - 色彩丰富的社区站 - 需要频繁并排比较的大量信息页面 ## 作为风格起点时要问用户 - 要更接近纯白版还是深色版 - 是否允许大面积产品图 - 是否接受极少颜色和极短文案 ## 来源 - Awesome DESIGN.md: https://github.com/VoltAgent/awesome-design-md - Design source: https://getdesign.md/apple/design-md FILE:output/design-md-hardening/test-graduate-defense/cocoloop-graduate-defense-ppt/references/design-md/figma.md # Figma 风格参考 ## 适合什么 - 创意工具官网 - 模块化功能展示图 - 彩色产品说明页 - 工具类 PPT 与产品能力地图 ## 视觉关键词 - 白色展厅 - 彩色模块 - 工具感 - 轻快秩序 - 功能分区明确 ## 色彩和气质 - 白底或浅色底为主 - 彩色用于功能模块、标签和重点分区 - 界面黑白关系稳定，彩色只负责提升识别度 ## 字体和层级 - 标题清楚直接 - 适合短句、标签和功能块标题 - 文案节奏可以比企业官网更轻快 ## 版式信号 - 模块化分区明显 - 适合彩色卡片、功能拼贴、标签导航 - 页面像展厅，不像长篇说明书 ## 组件倾向 - 圆形或大圆角控件 - 标签、pill、轻卡片 - 色块切分和功能模块组合 ## 更适合的任务 - 工具型产品页 - 模块化信息图 - 彩色功能展示型 PPT - 需要把复杂能力拆成多个彩色区域的页面 ## 不适合的任务 - 极冷峻企业方案页 - 金融可信感优先的页面 - 纯黑舞台式视觉 ## 作为风格起点时要问用户 - 彩色块是否可以进入主视觉 - 更强调创意感，还是强调工具理性 - 页面是否需要承载很多产品模块 ## 来源 - Awesome DESIGN.md: https://github.com/VoltAgent/awesome-design-md - Design source: https://getdesign.md/figma/design-md FILE:output/design-md-hardening/test-graduate-defense/cocoloop-graduate-defense-ppt/references/design-md/framer.md # Framer 风格参考 ## 适合什么 - 产品发布页 - 展示感很强的官网首页 - 动效主导的 PPT 封面或章节页 - 需要舞台感和镜头感的展示图 ## 视觉关键词 - 纯黑舞台 - 电蓝强调 - 产品截图主角化 - 强动势 - 锋利节奏 ## 色彩和气质 - 纯黑背景常作为主舞台 - 蓝色与白色负责高亮和交互 - 颜色数量少，但对比强 - 整体偏未来感和秀场感 ## 字体和层级 - 标题压得紧，冲击力强 - 正文简短，不适合长段说明 - 字体和画面共同承担节奏感 ## 版式信号 - Hero 区占比大 - 适合大截图、大标题、少量高价值文案 - 页面节奏快，适合逐屏展示亮点 ## 组件倾向 - 大圆角按钮 - 半透明叠层 - 截图卡片、浮层、渐隐边缘 ## 更适合的任务 - 产品发布页 - 展示型网页信息图 - 视觉优先的 PPT 开场与章节页 - 新功能或新产品亮相页 ## 不适合的任务 - 高密度知识整理页 - 温和阅读型页面 - 需要大量表格与数据说明的场景 ## 作为风格起点时要问用户 - 是否接受纯黑主背景 - 动效和镜头感是不是核心要求 - 页面是让截图当主角，还是让文字当主角 ## 来源 - Awesome DESIGN.md: https://github.com/VoltAgent/awesome-design-md - Design source: https://getdesign.md/framer/design-md FILE:output/design-md-hardening/test-graduate-defense/cocoloop-graduate-defense-ppt/references/design-md/ibm.md # IBM 风格参考 ## 适合什么 - 企业方案页 - 结构化能力地图 - 数据密集型信息图 - 需要显得可靠、严谨、工程化的演示稿 ## 视觉关键词 - 企业蓝 - 强栅格 - 结构先行 - 数据导向 - 清晰层级 ## 色彩和气质 - 白底或浅灰底为主 - 蓝色只作为品牌锚点和关键状态 - 大面积颜色克制 - 靠排版、分区和信息秩序建立可信感 ## 字体和层级 - 标题稳重，避免过度装饰 - 正文与标签层级清楚 - 数字、指标和表格要有稳定的对齐感 ## 版式信号 - 模块边界清楚 - 适合流程、矩阵、表格、图表混排 - 适合一页内承载较多信息，但不能拥挤 ## 组件倾向 - 矩形按钮和规则卡片 - 低圆角或无圆角 - 用分隔、留白和对齐代替装饰性阴影 ## 更适合的任务 - 企业汇报 PPT - 研究型信息图 - 方法论说明页 - 架构与能力介绍页 ## 不适合的任务 - 情绪化营销页 - 强插画消费页 - 需要柔软亲和感的内容社区页 ## 作为风格起点时要问用户 - 蓝色是主品牌，还是只做少量强调 - 是否需要承载较高信息密度 - 页面更偏方案汇报，还是偏产品营销 ## 来源 - Awesome DESIGN.md: https://github.com/VoltAgent/awesome-design-md - Design source: https://getdesign.md/ibm/design-md FILE:output/design-md-hardening/test-graduate-defense/cocoloop-graduate-defense-ppt/references/design-md/index.md # 本地风格参考库这里收的是视觉优先任务可直接引用的本地 `DESIGN.md` 风格参考。用途不是替代用户决策，而是在用户没有现成品牌规范时，给出一组稳定起点。 ## 使用规则只要任务涉及下面任一情况，就先读这里，再继续视觉设计： - 网站视觉 - 落地页或产品页 - 设计感较强的前端页面 - 单页信息图或视觉卡片 - 视觉优先的演示稿进入具体设计前，必须先确认下面四种风格来源之一： 1. 用户明确指定风格名 2. 用户提供自己的 `DESIGN.md` 3. 用户用自然语言详细描述风格 4. 用户从本地参考库中选一份作为起点如果这四项都没有，先停在风格确认，不进入具体排版和视觉实现。 ## 当前官方预设 | 风格 | 适合场景 | 文档 | | --- | --- | --- | | IBM | 企业方案页、结构化信息图、数据密集型说明页 | [ibm.md](./ibm.md) | | Stripe | 金融、支付、企业服务、精致渐变科技页 | [stripe.md](./stripe.md) | | Notion | 温和内容页、知识产品、文档型产品页 | [notion.md](./notion.md) | | Framer | 强展示产品页、动效主导展示页、视觉冲击型发布页 | [framer.md](./framer.md) | | Figma | 创意工具页、模块化功能展示图、彩色产品说明页 | [figma.md](./figma.md) | | Nothing | 黑白工业感页面、信息密度高的技术展示页、极简展示图 | [nothing.md](./nothing.md) | | Apple | 高端产品页、硬件感页面、极简高留白营销页 | [apple.md](./apple.md) | ## 扩展参考这些文档继续保留，适合用户明确点名或需要更窄风格范围时使用： | 风格 | 适合场景 | 文档 | | --- | --- | --- | | Linear | 深色 SaaS、效率工具、精密产品叙事页 | [linear.md](./linear.md) | | Vercel | 开发者产品、基础设施、黑白极简技术站 | [vercel.md](./vercel.md) | ## 来源这些本地参考基于 `VoltAgent/awesome-design-md` 与 `getdesign.md` 提供的公开设计文档整理而来。首批官方预设用于 `skill-factory` 默认视觉任务路由，扩展参考继续作为可选风格起点保留。 - Awesome DESIGN.md: https://github.com/VoltAgent/awesome-design-md - 获取方式：`npx getdesign@latest add

{escape(title)}{cursor}

{escape(title)}

{escape(title)}

{escape(col_title)}

{escape(title)}

{escape(title)}

{escape(title)}

{escape(title)}

{escape(title)}

{{TITLE_EN}} {{TITLE_CN}}

{{INSIGHT1_TITLE}}

{{INSIGHT2_TITLE}}

{{INSIGHT3_TITLE}}

{{INSIGHT4_TITLE}}

CocoLoop Skill Factory

Comments (0)