different-ai

demoify-skill

@different-ai/demoify-skill
different-ai
152
21 forks
Updated 1/6/2026
View on GitHub

Demoify Skill: Create clean, professional demo screenshots by modifying live web pages via Chrome DevTools MCP.

Installation

$skills install @different-ai/demoify-skill
Claude Code
Cursor
Copilot
Codex
Antigravity

Details

Path.opencode/skill/demoify-skill/SKILL.md
Branchmain
Scoped Name@different-ai/demoify-skill

Usage

After installing, this skill will be available to your AI coding assistant.

Verify installation:

skills list

Skill Instructions

Demoify Skill

Create clean, professional demo screenshots by modifying live web pages via Chrome DevTools MCP.

Use Cases

  • Tweet screenshots (side-by-side format)
  • Product demos
  • Marketing materials
  • Investor decks

Twitter Image Ratios

FormatRatioUse Case
Single image16:9 (1200x675)Wide screenshots, dashboards
Two images side-by-side~250x290 each (~1:1.16)Before/after, flow demos
Four imagesSquare-ishMultiple steps

For two-image tweets: Use tall/narrow format, NOT wide. Resize browser to ~500-600px width.

Quick Workflow

1. Setup

// Open target URL in Chrome DevTools MCP
chrome_new_page({ url: 'https://example.com' });

// For side-by-side tweets, resize to narrow format
chrome_resize_page({ width: 600, height: 700 });

2. DOM Edits - Text Replacement

chrome_evaluate_script({
  function: `() => {
    const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT);
    let node, changes = [];
    while (node = walker.nextNode()) {
      if (node.textContent.includes('OLD_TEXT')) {
        node.textContent = node.textContent.replace(/OLD_TEXT/g, 'NEW_TEXT');
        changes.push('replaced');
      }
    }
    return changes.length + ' changes';
  }`,
});

3. DOM Edits - Link Text

chrome_evaluate_script({
  function: `() => {
    document.querySelectorAll('a[href*="old-pattern"]').forEach(link => {
      link.textContent = 'new text';
    });
    return 'done';
  }`,
});

4. Hide UI Elements (Safe Method)

Use visibility: hidden instead of display: none to avoid layout shifts:

chrome_evaluate_script({
  function: `() => {
    // Hide by selector
    const el = document.querySelector('.sidebar');
    if (el) el.style.visibility = 'hidden';
    
    // Hide by role
    const nav = document.querySelector('[role="navigation"]');
    if (nav) nav.style.visibility = 'hidden';
    
    return 'hidden';
  }`,
});

5. Take Screenshot

// Viewport only
chrome_take_screenshot({ filePath: '/path/to/screenshot.png' });

// Full page
chrome_take_screenshot({ filePath: '/path/to/screenshot.png', fullPage: true });

// Specific element
chrome_take_screenshot({
  uid: 'element_uid',
  filePath: '/path/to/screenshot.png',
});

Common Patterns

Gmail Demo

// 1. Change sender name
const firstSender = document.querySelector('[role="gridcell"]');
firstSender.textContent = 'New Name';

// 2. Change email addresses
document.querySelectorAll('a[href*="mailto:"]').forEach((link) => {
  link.textContent = 'new@email.com';
});

// 3. Hide sidebar
document.querySelector('[role="navigation"]').style.visibility = 'hidden';
document.querySelector('iframe[title="Chat"]').style.visibility = 'hidden';
document.querySelector('[role="banner"]').style.visibility = 'hidden';

Invoice/Dashboard Demo

// Change names, emails, amounts
const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT);
let node;
while ((node = walker.nextNode())) {
  node.textContent = node.textContent
    .replace(/Real Name/g, 'Demo Name')
    .replace(/real@email.com/g, 'demo@company.co')
    .replace(/\$1,234/g, '$10,000');
}

Tips

  1. Open multiple tabs - Keep original in one tab so you don't lose edits if you break something
  2. Use visibility:hidden - Safer than display:none, preserves layout
  3. Reload to reset - If you break something, just reload the page
  4. Save incrementally - Take screenshots after each successful edit
  5. Test side-by-side - Open Twitter composer to verify images look good together

Realistic Demo Data

Names (diverse, professional)

  • Patrick Chen, Sarah Martinez, James O'Brien, Priya Sharma, Marcus Johnson

Emails

Companies

  • Chen Design Co, Martinez Legal, O'Brien Consulting

Amounts

  • $10,000, $25,000, $50,000 (round numbers look more intentional)

Avoid

  • "Acme Corp" - too cliché
  • "John Doe" - too fake
  • "test@test.com" - unprofessional
  • Hiding too much UI - page goes blank
  • Using display:none on parent containers - breaks layout