技能 design-spec-extraction

📦

design-spec-extraction

內容修訂 r1 中風險 🌐 網路存取⚙️ 外部命令

從螢幕截圖擷取 UI 設計規格

從螢幕截圖進行手動設計交付既緩慢又不一致。此技能會將設計 Token、元件、版面配置與無障礙備註擷取為結構化的設計規格檔案。

支援: Claude Codex Code(CC)

Maintain this Skill? Claim it 📊 66 尚可

使用我的智慧代理安裝

將此請求複製給你的智慧代理，其中包含權威 Skill 頁面和清單。

智能體請求

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.

你的智慧代理仍應顯示其計畫，並依安全政策請求必要確認。

Agent 可讀資源

當 AI Agent、爬蟲或腳本需要乾淨脈絡、而不是讀取完整頁面時，請使用這些連結。

Markdown 詳情 GET /skills/cygnusfear-design-spec-extraction.md 已簽名 manifest GET /api/skills/cygnusfear-design-spec-extraction/manifest 已簽名 lockfile GET /api/skills/cygnusfear-design-spec-extraction/lockfile

測試它

正在使用「design-spec-extraction」。包含 hero、卡片與行動呼籲的 landing page 螢幕截圖。

預期結果:

擷取 24 種色彩，並以 primitive 與 semantic 分組。
識別出具有 24px gutter 的 12 欄桌面網格。
編目 hero、卡片、導覽與按鈕元件。
標記兩個對比度問題並建議無障礙修正。

正在使用「design-spec-extraction」。包含側邊欄導覽與資料卡片的 dashboard mockup。

預期結果:

對應 header、sidebar、content regions 與 card containers。
偵測標題、標籤、指標與內文的字體排印角色。
為重複的卡片模式擷取間距與圓角 Token。

正在使用「design-spec-extraction」。設計系統的一組按鈕狀態圖片。

預期結果:

依 primary、secondary、disabled 與 focus 狀態分組按鈕變體。
記錄可見的色彩、邊框、陰影與焦點指示器差異。
產生適合實作審查的元件備註。

安全審計

中風險

v11 • 2026/7/9 開啟版本化報告

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.

4

已掃描檔案

3,387

分析行數

2

複核項目

0

已忽略的誤報

已確認的安全問題 (1)

中

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.

能力複核項目 (2)

這些是真實的本機能力，對此技能而言可能是預期行為，因此需要複核，但不會按已確認的惡意行為計分。

中

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.

中

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.

風險因素

🌐 網路存取 (4)

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

⚙️ 外部命令 (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

審計單位: codex 檢視審計紀錄 →

分享與引用此報告

分享版本化評估報告、中性徽章、嵌入卡片與引用。Skillstore 只報告證據，不判斷該 Skill 是否安全。

開啟版本化報告

安全評估

複製報告連結

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

Markdown 徽章

[![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 徽章

<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>

嵌入卡片

<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>

學術引用 (APA · BibTeX · CFF)

APA 引用

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 引用

@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 評分

評分依據證據置信度: 高

41

架構

85

可維護性

87

內容

73

社群

78

規範符合度

你可以打造什麼

建立實作 Token

將提供的 UI 螢幕截圖轉換為設計 Token 與元件備註，供前端實作使用。

記錄既有介面

從已核准的產品畫面中擷取可重複使用的色彩、文字樣式、間距與元件模式。

審查視覺無障礙

從設計圖片中識別對比度問題、觸控目標疑慮、焦點狀態與語意結構。

試試這些提示

基本螢幕截圖擷取

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 匯出交付

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

無障礙導向審查

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

多狀態元件稽核

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

最佳實務

使用高解析度且經使用者授權的圖片，讓色彩與間距估算更可靠。
為輸出路徑使用由字母、數字與連字號組成的安全 project slug。
當 hover、focus、disabled 與 responsive 狀態的細節很重要時，請提供個別圖片。

避免

不要分析包含機密、憑證或私人客戶資料的機密畫面。
不要在 shell commands 或輸出路徑中重複使用未清理的專案名稱。
在未審查估算值與無障礙發現之前，不要將最終規格送入程式碼生成流程。

常見問題

這項技能需要哪些輸入？

它需要使用者提供的螢幕截圖、Figma 匯出檔、mockup 或已核准的網站擷取畫面。

它會自動擷取我的螢幕嗎？

不會。它只會分析使用者提供的視覺檔案或圖片。

輸出包含哪些內容？

輸出包含 Token、版面資料、元件階層、無障礙備註、信心分數與建議。

它能識別精確的字型與色彩嗎？

除非來源檔提供精確的設計中繼資料，否則它會從圖片中估算。

檔案會寫入哪裡？

此工作流程會在 .design-specs 專案目錄下寫入本機 pass 檔案與最終設計規格。

結果是否已可用於正式生產？

它是強而有力的交付起點，但團隊應在正式生產使用前審查估算值並驗證 Token。

開發者詳細資訊

作者

授權

MIT

Skillstore 修訂

r1

版本提示

作者未聲明版本。

儲存庫

https://github.com/Cygnusfear/claude-stuff/tree/main/skills/design-spec-extraction

引用

3e4b6c31a74a3bd1a291c98cf585d720cb9fbc88

維護新鮮度

2026/7/20

使用量

16 次下載 · 421 次瀏覽

檔案結構

📁 references/

📄 design-tokens-schema.json

📄 extraction-patterns.md

📄 audit_output.json

Cygnusfear 的更多技能

writing-clearly-and-concisely

用清晰的風格規則改善文章

技術寫作常變得冗長、含糊或難以快速瀏覽。此技能會將簡潔的風格規則套用到草稿、文件、訊息和使用者介面文案。

寫作與內容查看

update-docs

安全地更新專案文件

過時的文件會拖慢審查流程，並造成錯誤的專案假設。此技能會根據程式碼庫稽核文件，並在進行事實性更新時保留重要脈絡。

executing-plans

透過檢查點執行實作計畫

冗長的實作計畫在任務未經審查就執行時可能偏離方向。此技能會引導 Claude、Codex 和 Claude Code 進行分批執行、驗證與回饋檢查點。

程式開發查看

dispatching-parallel-agents

調度並行除錯代理

當故障彼此獨立時，循序除錯會拖慢團隊速度。此技能示範如何將有範圍的任務拆分給 Claude、Codex 和 Claude Code 代理。

程式開發查看

create-plan

為程式碼變更建立實作計畫

當需求、檔案和驗證步驟不清楚時，大型程式碼變更就會失敗。此技能會引導 Claude、Codex 和 Claude Code 在工作開始前產生結構化的實作計畫。

程式開發查看

check-plan

檢查計畫實作進度

實作計畫經常會與完成後的程式碼產生偏差。此技能會引導 Claude、Codex 或 Claude Code 透過結構化稽核，檢查進度、缺口、移除項目與驗證狀態。

程式開發查看

figma-to-tailwind

將 Figma 變數轉換為 Tailwind CSS

由 Crearize

Figma MCP 輸出可能包含難以維護的設計變數與行內樣式。此 skill 會將這些值對應到標準 Tailwind CSS 類別與專案 token。

設計與創意查看

ui-design-system

產生 UI 設計系統

由 alirezarezvani

團隊在手動定義顏色、間距與字體排印時，往往會失去一致性。此技能可協助 Claude、Codex 與 Claude Code 產生清晰的設計權杖與交接指引。

設計與創意查看

design-system

Build Consistent Design Systems and Slides

由 nextlevelbuilder

Inconsistent tokens and components make design handoffs difficult. This skill structures tokens, validates usage, and generates brand-aligned presentation assets.

設計與創意查看

design-lint

Check designs with deterministic CSS rules

由 cubha

Design reviews can vary between reviewers and slow down delivery. This skill applies repeatable checks to HTML and CSS so teams can catch token, layout, and accessibility issues before release.

設計與創意查看

core-components

建構一致的核心元件介面

由 sickn33

UI 工作可能逐漸變成硬編碼的間距、顏色與原始平台元件。這項技能會引導 Claude、Codex 和 Claude Code 使用核心元件、權杖與可重用版面配置。

設計與創意查看

extract

萃取可重用的設計系統模式

由 pbakaus

團隊經常在整個應用程式中重複建立 UI 元件、Token 和版面配置模式。這項技能可協助 Claude、Codex 或 Claude Code 找出可重用模式，並將其整合到可維護的設計系統中。

設計與創意查看