CtrlK
BlogDocsLog inGet started
Tessl Logo

web-design-analyzer

分析网页截图,提取设计系统(Design System)并生成结构化数据和可用的 AI Coding Prompt。适用于 UI/UX 设计师和前端工程师需要从现有网页设计中提取设计规范、配色方案、排版系统和组件风格的场景。

60

Quality

71%

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

67%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 body is well-structured with executable commands, a clear workflow, and well-signaled references to real bundle files. Its main weakness is conciseness: a repeated dependency block and a copy-paste artifact at the end of the examples add noise.

Suggestions

Remove the stray duplicate comment lines after example 3 (lines 103-106) and the redundant Pillow dependency block in 前置准备 that duplicates the frontmatter.

Add a brief validation checkpoint after the API call (e.g., confirm the returned JSON is well-formed before presenting) to formalize the implicit error branch.

DimensionReasoningScore

Conciseness

Mostly efficient and free of concept over-explanation, but the 前置准备 section repeats the Pillow dependency already in frontmatter and the 使用示例 section ends with stray duplicate comment lines (103-106) from example 2, indicating padding that could be tightened.

3 / 5

Actionability

Provides concrete, copy-paste-ready commands (e.g., 'python scripts/analyze_design.py --image ./uploads/landing-page.png') with real arguments, covering the common cases with only minor gaps.

4 / 5

Workflow Clarity

The 操作步骤 gives a clear 3-step sequence (receive → analyze → display) with an explicit error-handling branch; checkpoints are implicit rather than formal, but the skill is non-destructive so the destructive-cap does not apply.

4 / 5

Progressive Disclosure

The 资源索引 section cleanly signals one-level-deep references (api-spec.md, roadshow-export-guide.md) and scripts with '何时读取' guidance and real bundle files, with only minor organization gaps from the duplicated example artifact.

4 / 5

Total

15

/

20

Passed

Description

75%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 third-person, concrete, and covers both capability and trigger scenario well, with strong natural keyword coverage. It stops short of anchor 5 because the 'when' is persona-framed and lacks file-extension synonyms.

Suggestions

Add an explicit 'Use when...' trigger phrase with concrete user utterances (e.g., 'Use when the user uploads a webpage screenshot and asks to extract its design system or generate a coding prompt').

Include common synonyms and file extensions (PNG/JPG screenshots, design tokens) to broaden natural trigger coverage.

DimensionReasoningScore

Specificity

Lists several concrete actions (分析网页截图, 提取设计系统, 生成结构化数据, 生成 AI Coding Prompt) plus sub-elements (配色方案, 排版系统, 组件风格), but '设计系统' as the headline domain is slightly abstract, leaving minor coverage gaps versus the anchor-5 example.

4 / 5

Completeness

Clearly states 'what' (extract design system + generate structured data/coding prompt) and provides an equivalent 'when' via '适用于...的场景', though the trigger is persona-framed rather than an explicit 'Use when...' phrase.

4 / 5

Trigger Term Quality

Includes natural terms users would say (网页截图, 设计系统, 配色方案, 排版, 组件风格, 设计规范), but omits common synonyms and file extensions (PNG/JPG) that anchor 5 expects.

4 / 5

Distinctiveness Conflict Risk

The web-screenshot-to-design-system niche is mostly distinct with clear triggers, with only minor overlap risk against general design/prompting skills.

4 / 5

Total

16

/

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.