CtrlK
BlogDocsLog inGet started
Tessl Logo

web-design-analyzer

网页与数字界面设计师和网页开发工程师在需要逆向分析网页截图时,使用本技能一键提取配色、排版及组件特征,自动生成结构化 Design System 数据与 AI Coding Prompt,让设计还原与前端开发更高效。

63

Quality

75%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

SecuritybySnyk

Low

Low-risk findings worth noting

Fix and improve this skill with Tessl

tessl review fix ./skills/web-design-analyzer/web-design-analyzer/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

71%Weight 40%Scale 1-5

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

A well-structured skill body with genuinely runnable commands, a clear step sequence, and exemplary one-level-deep reference signaling to real bundle files. Weaknesses are redundancy (duplicated capability list and dependency declaration), narrated rather than executable examples, vague error-recovery guidance, and leftover malformed lines at the end of the file.

Suggestions

Conciseness: delete the stray lines and dangling code fence after 示例 3 (SKILL.md lines 103-106), and state the Pillow dependency once (frontmatter or 前置准备, not both).

Conciseness: replace the 任务目标 capability bullet list, which restates the frontmatter description, with a single-sentence purpose statement.

Workflow clarity: turn the API-failure branch into an explicit recovery loop (check the error message → verify API key and image format → re-run the script) instead of the current vague '提供错误信息和可能的解决方案'.

DimensionReasoningScore

Conciseness

Mostly efficient, but the 任务目标 capability list duplicates the frontmatter description, the Pillow dependency is declared twice (frontmatter and 前置准备), the examples are padded with dialogue-style comments, and stray trailing lines ("# 1. 调用脚本分析图片..." plus a dangling fence) remain after 示例 3. Not 4: these are more than minor trimmable instances; not 2: the body is not padded with concepts Claude already knows.

3 / 5

Actionability

Concrete, runnable commands are given ("python scripts/analyze_design.py --image ./uploads/landing-page.png") and both scripts' inputs/outputs are documented with flags (--input/--output). Not 5: 示例 2 and 示例 3 are narrated comment outlines rather than copy-paste-ready commands, and no sample output is shown.

4 / 5

Workflow Clarity

A clear three-step sequence (接收图片 → 调用分析脚本 → 展示结果) with optional branches including API failure and a result-usage path. Not 5: the failure branch only says to provide error info and possible solutions without an explicit validate/retry checkpoint loop; not 3: the sequence and branch conditions are explicit, not implicit.

4 / 5

Progressive Disclosure

The body is an overview that points one level deep to real bundle files — scripts/analyze_design.py, scripts/convert_to_roadshow_style.py, references/api-spec.md, references/roadshow-export-guide.md (all verified to exist) — each annotated with its purpose, parameters, or a "何时读取" (when to read) trigger, plus a "仅在需要时读取参考" note. This matches the 5 anchor exactly.

5 / 5

Total

16

/

20

Passed

Description

78%Weight 40%Scale 1-5

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

A specific, well-scoped description that names its audience, an explicit trigger situation, and multiple concrete capabilities. Main gaps are slightly thin trigger phrasing (no user-utterance-style triggers or file extensions) and omission of the export capability described in the body.

DimensionReasoningScore

Specificity

"一键提取配色、排版及组件特征" and "自动生成结构化 Design System 数据与 AI Coding Prompt" list several concrete actions (extract colors/typography/components, generate structured data, generate coding prompt). Not 5 because coverage omits the roadshow-export capability stated in the body and mentions no file formats; clearly above the 3 anchor of only 1-2 actions.

4 / 5

Completeness

The 'what' is explicit (extract design features, generate Design System data and Coding Prompt) and the 'when' is stated ("在需要逆向分析网页截图时" plus the audience 网页设计师/前端工程师). Not 5 because the 'when' names an audience/situation rather than concrete trigger phrases like 'use when the user uploads a screenshot and asks to analyze its design'; clearly better than the weak-or-missing-'when' anchors 2-3.

4 / 5

Trigger Term Quality

Natural terms include "网页截图", "配色", "排版", "Design System", "AI Coding Prompt", "设计还原", "前端开发" — phrases users would plausibly say. Not 5 because synonyms and extensions (PNG/JPG, 截图分析/风格提取) are missing; well above the generic-keyword anchors 2-3.

4 / 5

Distinctiveness Conflict Risk

A clear niche — reverse-engineering webpage screenshots into a design system — with distinct triggers (截图逆向分析, Design System 提取) that are unlikely to fire competing skills. It matches the 5 anchor exactly and is more narrowly scoped than the 4 anchor's 'minor overlap risk'.

5 / 5

Total

17

/

20

Passed

Validation

93%

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation — 15 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

frontmatter_unknown_keys

Unknown frontmatter key(s) found; consider removing or moving to metadata

Warning

Total

15

/

16

Passed

Repository
anbeime/skill
Reviewed

Table of Contents

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.