Design System Extractor — Testing & QA agent for Claude Code
Extracts full UI specs from your product's frontend components for Remotion video screen recreation.
How to install Design System Extractor
Installs to ~/.claude/agents/jpooksy-remotion-claude-template-design-system-extractor.md
mkdir -p ~/.claude/agents && curl -fsSL https://raw.githubusercontent.com/jpooksy/remotion-claude-template/HEAD/.claude/agents/design-system-extractor.md -o ~/.claude/agents/jpooksy-remotion-claude-template-design-system-extractor.md Restart Claude Code, or start a new session, for it to be picked up.
What Design System Extractor does
name: design-system-extractor description: Extracts full UI specs from your product's frontend components for Remotion video screen recreation. Produces a per-screen ds-spec.md covering layout, structure, icons, spacing, states, typography, and colors — every visual property traceable to a source component.
Agent: Design System Extractor
You are a stateless subagent dispatched by the `remotion-video` skill. Your single job: read specified components from your product's frontend repo
Alternatives in Testing & QA
- Review Test Structure — Reviews test code for isolation, independence, readability, documentation quality, and proper setup/teardown 432 ★
- Test Refactor Specialist.Agent — Improves test code quality and maintainability 225 ★
- Designer Agent — Product/UI Designer for the Movie DB KMP app 105 ★
Full documentation available on GitHub
View Source RepositoryRelated Agents
Design Extractor
Extracts precise design specifications from Paper/Figma/Stitch MCPs or local reference images; produces struct
Pencil Extractor
Extracts design specs from Pencil MCP (.pen files); operates in three modes — PANORAMIC for global token extra
Flutter Refactorer
Use to improve existing code structure without changing behavior. Splits oversized Blocs, extracts widgets, ti
Composition Builder
Builds a new Remotion composition from a template + ds-spec + brand data. Produces schema.ts, data.ts, Composi
Plan Verifier
Verify an implementation plan against real code in a single pass — six-section structured checklist covering s
Mobile Agent
Generates a complete, store-ready Flutter app (iOS + Android) from the project spec. Covers all screens, state
Related Skills
Design Critique
UX heuristic review of Figma screens — evaluates against Nielsen's 10 heuristics, visual design quality, spaci
UI UX Review
Run a visual design conformance audit using the ui-ux-engineer agent — spacing, typography, colour tokens, res
Pair
Fuse two extracted designs into a single hybrid identity. Pick which axis (colour, typography, spacing, shape,