design-system-extractor
Extracts tokens, typography, spacing, component states, assets, layout, responsive rules, and interactions from a UI reference.
Skill by Mesteriis
Install
Works with Claude Code, Claude apps, Codex, Cursor, Gemini CLI, GitHub Copilot, VS Code, OpenCode, Goose, Windsurf. Read the repository before you give any tool access to your data.
npx agentmarket install skill/mesteriis-design-system-extractor
Asks which of your tools to add it to (Claude Code, Codex, Cursor, VS Code, Windsurf, Gemini CLI, Claude Desktop) and shows the change first. See https://agentmart.dev/cli.
Get the weekly diff
The weekly diff: one email a week with new agent tools, notable updates and grade changes, plus security alerts for tools you follow. Double opt-in, one-click unsubscribe.
About
Use cases: design, frontend
Reviews
Write a reviewNo reviews yet. Installed it? Reviews come from verified installers only. How reviews work
Permissions
What this skill can do and what it asks for, from its SKILL.md. Checked Oct 25, 2026.
- Tools
- No tools found
- Secrets
- None asked for
- Install scripts
- None found
Network hosts it talks to 1
codeload.github.com· found in install command
Files it touches
~/.claude/skills/design-system-extractor
What's inside
- Skill name
design-system-extractor- Description
- Extracts tokens, typography, spacing, component states, assets, layout, responsive rules, and interactions from a UI reference.
- License
- MIT
- Instructions
- 25 lines in SKILL.md · view on GitHub
Files (2)
- SKILL.md
- openai.yaml · agents/
SKILL.md (first lines)
# Design System Extractor Turn a visual reference into implementable constraints. ## Workflow 1. Identify the authoritative reference: Figma, screenshot, concept, codebase, Storybook, or existing design system. 2. Extract color tokens, type scale, spacing, radii, borders, shadows, icons, assets, layout grid, and responsive behavior. 3. Map repeated elements to components and variants. 4. Record intentional deviations and unknowns. 5. Feed the result into `ui-build`, `figma-to-code`, or `playwright-visual-qa`. ## Output - tokens - typography - components and variants - layout/responsive rules - asset inventory - interaction states - unresolved gaps
From Mesteriis/Engineering-Bible-AI, MIT.
More from Mesteriis/Engineering-Bible-AI
- 0.567score
architecture-normalizer
Mesteriis
Decomposes large modules, god files, classes, or packages in reviewable steps while preserving public APIs.
SkillAFreshness: AClaude Code +9 - 0.564score
code-wiki-ru
Mesteriis
Builds and validates Russian Obsidian repository wikis, architecture docs, and code/docs/ADR drift reports.
SkillAFreshness: AClaude Code +9 - 0.561score
architecture-principles
Mesteriis
Guides module boundaries, dependency direction, and domain structure.
SkillAFreshness: AClaude Code +9 - 0.561score
accessibility-ui-review
Mesteriis
Reviews UI accessibility: keyboard, focus, semantics, labels, contrast, motion, forms, dialogs, tables, and screen readers.
SkillAFreshness: AClaude Code +9 - 0.561score
code-quality
Mesteriis
Reviews cohesion, naming, responsibility, complexity, and maintainability.
SkillAFreshness: AClaude Code +9 - 0.561score
agent-retrospective
Mesteriis
Analyzes repeated agent failures or noisy routing and proposes evidence-backed changes to instructions, skills, gates, or runbooks.
SkillAFreshness: AClaude Code +9 - 0.561score
authz-boundary-review
Mesteriis
Reviews authorization, tenant isolation, roles, ownership, row access, admin boundaries, sharing, and privilege escalation.
SkillAFreshness: AClaude Code +9 - 0.561score
agent-squad
Mesteriis
Plans parallel agents or worktrees with isolated ownership, validation lanes, and merge rules.
SkillAFreshness: AClaude Code +9 - 0.558score
dependency-advisory-audit
Mesteriis
Triages CVEs and advisories for affected versions, reachability, exploitability, upgrades, and validation.
SkillAFreshness: AClaude Code +9 - 0.558score
code-to-figma
Mesteriis
Routes code-to-Figma work to original native Code Connect or design-generation skills with owner scope rules.
SkillAFreshness: AClaude Code +9 - 0.558score
core-engineering
Mesteriis
General implementation only when no narrower task or ecosystem skill fits.
SkillAFreshness: AClaude Code +9 - 0.558score
deserialization-parser-review
Mesteriis
Reviews parsers, deserialization, uploads, archives, YAML/JSON/XML/pickle, paths, templates, SSRF, and unsafe loaders.
SkillAFreshness: AClaude Code +9
Signals
- Stars
- 0
- Forks
- 0
- Open issues
- 0
- Last commit (this folder)
- Jul 10, 2026 (3 months ago)
- Last release
- Oct 3, 2026 (26 days ago)
From GitHub (fetched Oct 24, 2026).
Details
- License
- MIT
- First seen
- Oct 24, 2026
- Last checked
- Oct 24, 2026
- Source
- GitHubgithub-graphql
More from Mesteriis
- 0.591score
TG multi-account MCP
Mesteriis
Self-hosted, consent-based access to Telegram accounts and bots for MCP clients
ConnectorAFreshness: ARemote↓ 76/wk - 0.567score
architecture-normalizer
Mesteriis
Decomposes large modules, god files, classes, or packages in reviewable steps while preserving public APIs.
SkillAFreshness: AClaude Code +9 - 0.564score
code-wiki-ru
Mesteriis
Builds and validates Russian Obsidian repository wikis, architecture docs, and code/docs/ADR drift reports.
SkillAFreshness: AClaude Code +9 - 0.561score
agent-retrospective
Mesteriis
Analyzes repeated agent failures or noisy routing and proposes evidence-backed changes to instructions, skills, gates, or runbooks.
SkillAFreshness: AClaude Code +9 - 0.561score
authz-boundary-review
Mesteriis
Reviews authorization, tenant isolation, roles, ownership, row access, admin boundaries, sharing, and privilege escalation.
SkillAFreshness: AClaude Code +9 - 0.561score
agent-squad
Mesteriis
Plans parallel agents or worktrees with isolated ownership, validation lanes, and merge rules.
SkillAFreshness: AClaude Code +9
Cite this page
design-system-extractor skill. Agent Mart. https://agentmart.dev/skills/mesteriis-design-system-extractor (last updated 2026-10-24)