frontend-design

前端界面设计原则：视觉层次、布局、色彩、间距、响应式和避免“AI 味”页面。

Quality

66%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Passed

No findings from the security scan

Fix and improve this skill with Tessl

tessl review fix ./skills/frontend-design/SKILL.md

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.

The body is a lean, well-organized overview with a coherent workflow ending in a verification step, and its single-file structure is appropriate for a skill of this size. Its main weakness is actionability — the guidance stays at the level of high-level directives without concrete design values or examples — plus a small amount of irrelevant provenance meta-content.

Suggestions

Add concrete design guidance to lift actionability: an example spacing scale (e.g. 4/8/12/16/24px), a sample type-scale ratio, or a short before/after example of a generic 'AI-look' card vs. a deliberately designed one.

Remove or relocate the 'PilotDeck Migration Note' section — provenance about the Anthropic source skill adds tokens without helping Claude execute the skill.

Strengthen the verification step into a real checkpoint with acceptance criteria, e.g. 'Verify: screenshot the result at 375px and 1280px widths and check it against the Review Checklist before finishing'.

Dimension	Reasoning	Score
Conciseness	The ~25-line body is lean with no explanations of concepts Claude already knows, but the 'PilotDeck Migration Note' section ("Source inspiration: Anthropic frontend-design skill... This is a PilotDeck-native draft") is provenance meta-content irrelevant to executing the skill and could be trimmed, matching the efficient-with-minor-excess anchor.	4 / 5
Actionability	Directives like "Establish visual hierarchy before writing code" and "Choose a deliberate visual direction instead of generic gradients and cards" are high-level hints with no concrete values, example token sets, or before/after examples; the checklist ("Components align to a consistent grid", "The UI works at common mobile/tablet/desktop widths") adds some concrete criteria, placing this between the vague-hints and incomplete-guidance anchors.	3 / 5
Workflow Clarity	The six-step Workflow is a coherent sequence from clarifying context through verification, ending with an explicit checkpoint ("Verify the result in a browser or preview surface when available"); it is not 5 because the verification step is soft ('when available') and lacks any fix-and-retry feedback loop.	4 / 5
Progressive Disclosure	The skill is under 50 lines with no bundle files (references/, scripts/, assets/ are absent) and no paths cited in the body, and its sections (Workflow, Review Checklist) are clearly headed and well organized, so per the rubric's simple-skill guideline well-organized sections alone earn the top score.	5 / 5
	Total	16 / 20 Passed

Description

61%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 clearly identifies the frontend-design domain with specific topical keywords and good distinctiveness, but it reads as a topic list rather than a capability statement and omits any 'Use when...' trigger guidance. Adding an explicit trigger clause and framing the topics as actions would lift the two capped dimensions.

Suggestions

Add an explicit trigger clause, e.g. "Use when creating or reviewing web pages, UI components, or frontend layouts where visual quality matters" — its absence currently caps completeness at 3.

Reframe the topic list as concrete actions, e.g. "Designs and reviews frontend interfaces: establishes visual hierarchy, applies consistent spacing and type scales, chooses color systems, and avoids generic 'AI-look' patterns".

Include common synonyms and trigger words users would naturally say — UI, 界面, web 页面, CSS, 样式, 视觉设计 — to improve trigger-term coverage.

Dimension	Reasoning	Score
Specificity	Names the domain plus six concrete topical areas ("视觉层次、布局、色彩、间距、响应式" and avoiding "AI 味" pages), but presents them as principles/topics rather than describing any actions the skill performs, so it falls between anchor 3 and 4 without reaching comprehensive action coverage.	3 / 5
Completeness	The description gives a clear 'what' (the six design-principle areas) but has no 'Use when...' trigger clause, which per the rubric caps completeness at 3; it is not 4 because the 'when' is entirely absent rather than merely under-specified.	3 / 5
Trigger Term Quality	Includes natural keywords users would say — "前端界面设计" (frontend UI design), "布局" (layout), "色彩" (color), "响应式" (responsive) — but misses common synonyms like "UI", "界面", "CSS", "样式", or "web 页面", matching the good-coverage-with-a-few-missing anchor rather than comprehensive coverage.	4 / 5
Distinctiveness Conflict Risk	Distinctive markers like "视觉层次", "间距", and avoiding "AI 味" pages carve out a recognizable frontend-design niche with only minor overlap risk against general web-dev/CSS/styling skills, fitting the 'mostly distinct' anchor but not the minimal-conflict anchor 5.	4 / 5
	Total	14 / 20 Passed

Validation

100%

Warnings & errors only

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

Validation — 16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository: OpenBMB/PilotDeck
Path: skills/frontend-design/SKILL.md
Commit: 66bfd09

Reviewed: 2 days ago

Table of Contents

Discovery Implementation Validation

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.