design-context-extract vs design-ship

Two General Claude Code skills, side by side. Pick the right skill for your workflow with a side-by-side look at metadata, sample code, and install commands.

Side-by-side

Tag overlap

Sample code from each SKILL.md

/ork:design-context-extract /tmp/screenshot.png       # From screenshot
/ork:design-context-extract https://example.com        # From live URL
/ork:design-context-extract current project            # Scan project's existing styles

/ork:design-ship https://claude.ai/design/abc123     # From handoff URL
/ork:design-ship /tmp/handoff-bundle.json            # From local file

When to choose each

design-context-extract — Extract design DNA from existing app screenshots or live URLs using Google Stitch. Produces color palettes, typography specs, spacing tokens, and component patterns as design-tokens.json or Tailwind config. Use when…

design-ship — End-to-end Claude Design handoff to pull request: imports a handoff bundle from claude.ai/design, generates Storybook stories and Playwright tests, runs diff-aware browser verification, and opens a PR with the bundle…

Both are free to install. If you're unsure, install both — Claude Code skills are isolated by filename and only collide if their trigger phrases overlap (rare). The richest signal is the SKILL.md body itself — open both skill pages and read the first paragraph of each.

Other comparisons in this category

• 42-title-optimizer vs design-context-extract
• 42-title-optimizer vs design-import
• 42-title-optimizer vs design-ship
• 42-title-optimizer vs distributed-systems
• 42-title-optimizer vs langchain-eval-harness
• design-context-extract vs design-import

See all Claude Code skill comparisons · Browse all General skills · Top 100