CtrlK
BlogDocsLog inGet started
Tessl Logo

web-design-analyzer

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

56

Quality

64%

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

61%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.

The content is well-structured with executable script calls and properly signaled references to real bundle files, but it lacks explicit validation checkpoints in the workflow and carries some redundancy and stray trailing content that hurts conciseness.

Suggestions

Add an explicit validation step after the analysis API call (e.g. confirm the returned JSON parses and contains required fields) before proceeding to display or convert results.

Remove the duplicate Pillow dependency block in 前置准备 and the stray trailing lines 103-106 to tighten conciseness.

Trim generic 注意事项 advice (e.g. '充分利用智能体的语言理解和展示能力') that Claude already knows, replacing it with skill-specific operational guidance.

DimensionReasoningScore

Conciseness

The body is mostly efficient with well-organized sections, but the 前置准备 duplicates the Pillow dependency already in frontmatter, the 注意事项 includes generic advice Claude already knows, and trailing stray lines (103-106) are leftover duplicated content that should be removed.

3 / 5

Actionability

Provides concrete, executable script invocations like `scripts/analyze_design.py --image <图片文件路径>` and `convert_to_roadshow_style.py --input ... --output ...` with parameter explanations; only minor gaps such as omitted expected output schema keep it from fully copy-paste ready.

4 / 5

Workflow Clarity

The standard flow lists a clear 3-step sequence and an optional branch for API failure, but there is no explicit validation checkpoint confirming the API succeeded or that generated JSON is well-formed before downstream conversion — a checkpoint gap for a batch/API-driven workflow.

3 / 5

Progressive Disclosure

Good structure with the body as an overview and clearly signaled one-level-deep references to real files (scripts/analyze_design.py, scripts/convert_to_roadshow_style.py, references/api-spec.md, references/roadshow-export-guide.md), each annotated with when to read; only minor organization gaps remain.

4 / 5

Total

14

/

20

Passed

Description

67%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.

The description is specific and answers both what and when, but its trigger-term coverage is narrow and lacks common synonyms or file extensions. It is distinct but could broaden natural trigger phrasing.

Suggestions

Add natural trigger phrases and synonyms users would say, e.g. '截图', 'UI', 'design tokens', and common image formats (PNG/JPG), to improve trigger_term_quality.

Expand the 'when' clause into an explicit 'Use when...' sentence with concrete triggers such as analyzing a webpage screenshot or extracting a design system.

List a few more extracted elements (font weights, shadows, radii) in the description to round out capability specificity.

DimensionReasoningScore

Specificity

Names concrete actions — '一键提取配色、排版及组件特征' and '自动生成结构化 Design System 数据与 AI Coding Prompt' — but stops short of enumerating the full set of extracted elements (font weights, shadows, radii) covered in the body, leaving minor coverage gaps.

4 / 5

Completeness

Clearly answers 'what' (extract design system, generate structured data and coding prompt) and 'when' ('在需要逆向分析网页截图时'), but the trigger clause is tied to a narrow niche and could be more explicit with concrete trigger phrases.

4 / 5

Trigger Term Quality

Relevant natural phrases like '逆向分析网页截图', '配色', '排版' appear, but common synonyms and file/format terms users might say (e.g. '截图', 'UI', 'design tokens', PNG/JPG) are absent, so coverage is partial.

3 / 5

Distinctiveness Conflict Risk

The web-screenshot design-extraction niche with roadshow export integration is mostly distinct from other skills, with only minor overlap risk against generic image or design tools.

4 / 5

Total

15

/

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.

Validation15 / 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.