Skills design-spec-extraction

📦

design-spec-extraction

Name: design-spec-extraction
Author: Cygnusfear

Content revision r1 Medium Risk 🌐 Network access⚙️ External commands

Extract UI Design Specs from Screenshots

Manual design handoff from screenshots is slow and inconsistent. This skill extracts tokens, components, layout, and accessibility notes into structured design-spec files.

Supports: Claude Codex Code(CC)

📊 66 Adequate

Install with my Agent

Copy this request to your Agent. It includes the canonical Skill page and manifest.

Agent request

Review the Skillstore skill "design-spec-extraction" from https://skillstore.io/skills/cygnusfear-design-spec-extraction.md and its manifest at https://skillstore.io/api/skills/cygnusfear-design-spec-extraction/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.

Your Agent should still show its plan and request any confirmation required by the security policy.

Agent-readable resources

Use these links when an AI agent, crawler, or script needs clean context instead of reading the full page.

Markdown detail GET /skills/cygnusfear-design-spec-extraction.md Signed manifest GET /api/skills/cygnusfear-design-spec-extraction/manifest Signed lockfile GET /api/skills/cygnusfear-design-spec-extraction/lockfile

Test it

Using "design-spec-extraction". A landing page screenshot with hero, cards, and a call to action.

Expected outcome:

Extracted 24 colors with primitive and semantic groupings.
Identified a 12-column desktop grid with 24px gutters.
Cataloged hero, card, navigation, and button components.
Flagged two contrast issues and suggested accessibility fixes.

Using "design-spec-extraction". A dashboard mockup with sidebar navigation and data cards.

Expected outcome:

Mapped header, sidebar, content regions, and card containers.
Detected typography roles for headings, labels, metrics, and body text.
Extracted spacing and radius tokens for repeated card patterns.

Using "design-spec-extraction". A set of button state images for a design system.

Expected outcome:

Grouped button variants by primary, secondary, disabled, and focus states.
Recorded visible color, border, shadow, and focus indicator differences.
Produced component notes suitable for implementation review.

Security Audit

Medium Risk

v11 • 7/9/2026 Open versioned report

Most static findings are false positives caused by markdown code fences, inline design-spec paths, design grid terminology, and schema or documentation URLs. The screenshot references describe user-provided visual inputs, not covert capture or upload. Two mkdir examples are confirmed as limited command-use risks, and one semantic finding covers unsafe project-name substitution.

Files scanned

3,387

Lines analyzed

Review items

False positives ignored

Confirmed security concerns (1)

Medium

SKILL.md:36-40 SKILL.md:1257-1267

Unsanitized Project Name In Paths And Shell Command

The skill tells users to create .design-specs/{project-name} and replace {project} with an actual project name, but it does not require slug validation. A project name containing path traversal or shell metacharacters could write outside the intended directory if copied into the bash command.

The bash mkdir examples and raw project placeholder are explicit. The impact depends on whether an agent substitutes untrusted text into a shell command, so this is a contextual risk.

Capability review items (2)

These are real local capabilities that may be expected for this skill, so they require review but are not counted as confirmed malicious behavior.

Medium

SKILL.md:38-40

Ruby/shell backtick execution

```bash

This fenced bash example tells the agent to run mkdir with a project-name placeholder. The command is limited to directory creation, but unsanitized substitution could be unsafe in a shell context.

Medium

SKILL.md:1258-1260

Ruby/shell backtick execution

```bash

This fenced bash example tells the agent to run mkdir with a project-name placeholder. The command is limited to directory creation, but unsanitized substitution could be unsafe in a shell context.

Risk Factors

🌐 Network access (4)

references/design-tokens-schema.json:2 references/design-tokens-schema.json:3 SKILL.md:1159 SKILL.md:1391

⚙️ External commands (50)

SKILL.md:38-40 SKILL.md:40-46 SKILL.md:46-47 SKILL.md:47-48 SKILL.md:48-49 SKILL.md:49-50 SKILL.md:50-51 SKILL.md:51-52 SKILL.md:52-70 SKILL.md:70-93 SKILL.md:93-103 SKILL.md:103-109 SKILL.md:109-191 SKILL.md:191-193 SKILL.md:193-203 SKILL.md:203-209 SKILL.md:209-211 SKILL.md:211-216 SKILL.md:216-332 SKILL.md:332-334 SKILL.md:334-344 SKILL.md:344-350 SKILL.md:350-353 SKILL.md:353-354 SKILL.md:354-360 SKILL.md:360-361 SKILL.md:361-521 SKILL.md:521-523 SKILL.md:523-533 SKILL.md:533-539 SKILL.md:539-542 SKILL.md:542-543 SKILL.md:543-544 SKILL.md:544-550 SKILL.md:550-551 SKILL.md:551-552 SKILL.md:552-718 SKILL.md:718-720 SKILL.md:720-730 SKILL.md:730-736 SKILL.md:736-739 SKILL.md:739-740 SKILL.md:740-746 SKILL.md:746-747 SKILL.md:747-874 SKILL.md:874-876 SKILL.md:876-886 SKILL.md:886-892 SKILL.md:892-895 SKILL.md:895-896

Audited by: codex View Audit History →

Share & cite this report

Share the versioned assessment report, neutral badge, embed card, and citations. Skillstore reports evidence without deciding whether this Skill is safe.

Open versioned report

Copy report link

https://skillstore.io/skills/cygnusfear-design-spec-extraction/audits/11?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdown badge

[![Skillstore security assessment](https://skillstore.io/badges/skills/cygnusfear-design-spec-extraction/security.svg)](https://skillstore.io/skills/cygnusfear-design-spec-extraction?utm_source=security_passport_badge)

HTML badge

<a href="https://skillstore.io/skills/cygnusfear-design-spec-extraction?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/cygnusfear-design-spec-extraction/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

Embed card

<iframe src="https://skillstore.io/embed/skills/cygnusfear-design-spec-extraction.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>

Academic citations (APA · BibTeX · CFF)

APA citation

Cygnusfear. (2026). design-spec-extraction security audit report (audit version 11) [Author version unspecified]. Skillstore. https://skillstore.io/skills/cygnusfear-design-spec-extraction/audits/11

BibTeX citation

@techreport{cygnusfear-cygnusfear-design-spec-extraction-2026,
  author = {Cygnusfear},
  title = {design-spec-extraction security audit report (audit version 11)},
  institution = {Skillstore},
  year = {2026},
  number = {11},
  url = {https://skillstore.io/skills/cygnusfear-design-spec-extraction/audits/11},
  note = {Author version unspecified}
}

CITATION.cff

cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "design-spec-extraction security audit report (audit version 11)"
version: "unspecified"
type: report
authors:
  - name: "Cygnusfear"
date-released: "2026-07-09"
url: "https://skillstore.io/skills/cygnusfear-design-spec-extraction/audits/11"
identifiers:
  - type: other
    value: "skillstore:cygnusfear-design-spec-extraction:audit:11"
    description: "Skillstore immutable audit report identifier"

Skillstore Score

Why this score Evidence Confidence: High

Architecture

Maintainability

Content

Community

Spec Compliance

What You Can Build

Create Implementation Tokens

Turn a provided UI screenshot into design tokens and component notes for frontend implementation.

Document Existing Interfaces

Extract reusable colors, type styles, spacing, and component patterns from approved product screens.

Review Visual Accessibility

Identify contrast issues, touch target concerns, focus states, and semantic structure from design images.

Try These Prompts

Basic Screenshot Extraction

Use design-spec-extraction on the attached screenshot. Create a safe project slug and produce the final design specification with layout, colors, typography, and components.

Figma Export Handoff

Analyze this Figma export with design-spec-extraction. Focus on design tokens, component hierarchy, spacing, and developer handoff notes.

Accessibility-Focused Review

Run design-spec-extraction on this screen and emphasize accessibility. Report contrast issues, focus indicators, touch targets, labels, and recommended fixes.

Multi-State Component Audit

Use design-spec-extraction across these default, hover, active, and disabled state images. Compare states and consolidate variants into one component specification.

Best Practices

Use high-resolution, user-authorized images so color and spacing estimates are more reliable.
Use a safe project slug with letters, numbers, and hyphens for output paths.
Provide separate images for hover, focus, disabled, and responsive states when those details matter.

Avoid

Do not analyze confidential screens that contain secrets, credentials, or private customer data.
Do not reuse unsanitized project names in shell commands or output paths.
Do not send the final specification into code generation without reviewing estimates and accessibility findings.