design-system-extraction-cowork-wrapup

Document design system friction points and generate side-by-side HTML comparisons.

1|Updated Mar 30, 2026
One-click install
npx skills add https://github.com/AndrejKiri/prometheus-design-system --skill design-system-extraction-cowork-wrapup
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-system-extraction-cowork-wrapup
Source: https://github.com/AndrejKiri/prometheus-design-system/tree/main/.claude/skills/design-system-extraction-cowork-wrapup
Command: npx skills add https://github.com/AndrejKiri/prometheus-design-system --skill design-system-extraction-cowork-wrapup

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill facilitates post-session documentation by recording friction points, analyzing differences between output and reference design systems, and generating visual comparison tools.

Core Features & Use Cases

  • Friction Point Documentation: Automatically logs encountered issues and proposed fixes during the cowork process.
  • Design Comparison Analysis: Compares the generated design system documentation against a reference site, highlighting discrepancies.
  • Visual Side-by-Side HTML Generation: Creates a self-contained HTML viewer for pixel-perfect comparison of two design system versions.
  • Use Case: After receiving a design handoff zip, engineers can run this Skill to systematically identify gaps, report inconsistencies, and prepare visual comparison dashboards for review.

Quick Start

Provide the project folder containing the handoff zip, run identifier, and optional reference URL to generate all documentation and comparison artifacts.

Frequently Asked Questions about design-system-extraction-cowork-wrapup

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I document design system discrepancies after a cowork session?

To document design system discrepancies after a cowork session, provide the project folder, run ID, and optional reference URL to automatically log friction points and analyze site differences.

Can I generate a visual side-by-side comparison of two design system versions?

Yes, you can generate a visual side-by-side comparison of two design system versions. The process creates a self-contained HTML viewer for pixel-perfect comparison of output against a reference site.

What is the best way to log friction points and issues from a design handoff zip?

The best way to log friction points from a design handoff zip is to run an automated documentation process that records encountered issues and proposed fixes during the cowork workflow.

What do I need to prepare for a design system audit and visual comparison?

For a design system audit and visual comparison, you need to prepare a project folder containing the handoff zip, a run identifier, and optionally a reference URL for discrepancy analysis.

Does this design comparison analysis support reference URLs for live site discrepancy checks?

Yes, design comparison analysis supports reference URLs for live site discrepancy checks. Specifying a reference URL allows the tool to highlight differences against the generated design system documentation.

When should I use automated documentation for design system outputs?

You should use automated documentation for design system outputs when engineers need to systematically identify gaps, report inconsistencies, and prepare visual comparison dashboards for product team review.