CtrlK
BlogDocsLog inGet started
Tessl Logo

web-design-analyzer

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

60

Quality

70%

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

72%

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 concrete executable commands and clean progressive disclosure to real bundle files. Its main weaknesses are minor redundancy affecting conciseness and the absence of explicit validation/verification feedback loops in the workflow.

Suggestions

Add an explicit validation/retry checkpoint after the analyze script runs (e.g. verify the returned JSON is well-formed and contains expected keys before presenting or passing it downstream; retry on API errors).

Remove the duplicate trailing lines after 示例 3 and drop the restated Pillow dependency in 前置准备 since it is already declared in frontmatter.

Trim generic notes in 注意事项 that restate what the scripts already do automatically.

DimensionReasoningScore

Conciseness

Mostly efficient and well-organized, but carries redundancy — the Pillow dependency is restated in 前置准备 despite being in frontmatter, 注意事项 adds light padding, and a duplicate block of trailing lines appears after 示例 3 — so it could be tightened toward the lean anchor-3 ideal.

2 / 3

Actionability

Provides concrete, copy-paste-ready commands with real arguments ('analyze_design.py --image <path>', 'convert_to_roadshow_style.py --input --output') and worked bash examples referencing verified script paths, matching the fully-executable anchor.

3 / 3

Workflow Clarity

The standard flow is clearly sequenced with an API-failure branch, but for an external-API-driven operation feeding downstream code/roadshow generation there is no explicit validation or verify-then-retry feedback loop, which caps workflow clarity at 2.

2 / 3

Progressive Disclosure

The body is a concise overview with a well-signaled one-level-deep 资源索引 section giving purpose and '何时读取' triggers for real, verified reference and script files, matching the clear-overview-with-easy-navigation anchor.

3 / 3

Total

10

/

12

Passed

Description

67%

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 clearly conveys concrete capabilities and a distinct niche, but relies on implied rather than explicit trigger phrasing and uses somewhat design-jargon-heavy terms. Adding a 'Use when...' clause with natural user phrasing would raise completeness and trigger-term quality.

Suggestions

Add an explicit 'Use when...' trigger clause (e.g. 'Use when analyzing a webpage screenshot to extract its color scheme, typography, and component styles, or when applying a webpage's design to a roadshow video').

Replace or pair jargon like '设计系统 (Design System)' with plain terms a user would naturally say, such as '网页配色', '网页排版', '仿站/复刻设计'.

Trim the long capability enumeration into a tighter lead sentence so the description stays scannable.

DimensionReasoningScore

Specificity

Lists multiple concrete actions — '提取设计系统', '生成结构化数据', '生成可用的 AI Coding Prompt' — alongside specific elements like 配色方案、排版系统、组件风格, matching the 'lists multiple specific concrete actions' anchor.

3 / 3

Completeness

The 'what' is strong, but 'when' is only implied via '适用于...的场景' with no explicit 'Use when...' trigger clause, which per the judging guidelines caps completeness at 2.

2 / 3

Trigger Term Quality

Contains some natural terms ('网页截图', '分析', '设计规范', '配色方案') but leans on design jargon ('设计系统 Design System') and lacks the natural phrasing variations a user would say, falling short of full anchor-3 coverage.

2 / 3

Distinctiveness Conflict Risk

Occupies a clear niche — web-screenshot design-system extraction tied to roadshow-video brand export — with distinct triggers unlikely to conflict with other skills.

3 / 3

Total

10

/

12

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.