CtrlK
BlogDocsLog inGet started
Tessl Logo

frontend-design

网页与数字界面设计师在构建Web页面或应用组件时,若受够了千篇一律的AI味设计,请用此技能。一键生成极具视觉冲击力、排版独特、动效惊艳的生产级前端代码,告别平庸,打造令人难忘的高品质数字界面。

59

Quality

68%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

SecuritybySnyk

Passed

No findings from the security scan

Fix and improve this skill with Tessl

tessl review fix ./skills/frontend-design/frontend-design/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.

The body is a well-structured, concrete instruction set for distinctive frontend design with a clear think-then-build workflow and good section organization. Main weakness is motivational fluff that slightly undermines token efficiency.

Suggestions

Delete the closing motivational paragraph ("Remember: Claude is capable of extraordinary creative work…") and the filler phrase "There are so many flavors to choose from." to tighten conciseness.

Add one short inline code snippet (e.g. a CSS-variable palette or animation-delay stagger example) to push actionability from concrete guidance toward copy-paste ready.

Consolidate the repeated intentionality message (stated in both the CRITICAL note and the IMPORTANT note) to remove redundancy.

DimensionReasoningScore

Conciseness

Mostly efficient actionable guidance with no beginner-concept padding, but includes unnecessary exhortation ("There are so many flavors to choose from." and the closing "Remember: Claude is capable of extraordinary creative work. Don't hold back…") that could be trimmed.

3 / 5

Actionability

Gives concrete directives — avoid Arial/Inter and pair display+body fonts, CSS variables with dominant+accent colors, Motion library for React with animation-delay staggered reveals, specific background techniques (gradient meshes, noise textures) — with only minor gaps and no copy-paste code examples.

4 / 5

Workflow Clarity

A clear two-phase sequence (Design Thinking: Purpose/Tone/Constraints/Differentiation, then implement against explicit criteria) is present; no validation checkpoints are needed since the skill produces creative output rather than destructive or batch operations.

4 / 5

Progressive Disclosure

Under 50 lines with no bundle files and no need for external references; content is well-organized into "Design Thinking" and "Frontend Aesthetics Guidelines" sections with clear bold sub-points, satisfying the simple-skill exception.

5 / 5

Total

16

/

20

Passed

Description

65%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 conveys a clear niche and an explicit use-when clause, but is weighed down by marketing buzzwords and over-claims, and uses second-person voice. Trimming fluff and adopting third-person voice would lift specificity.

Suggestions

Rewrite in third person (e.g. "Generates distinctive production-grade frontend code…") and drop the second-person "请用此技能" to satisfy the voice rule.

Replace marketing adjectives ("极具视觉冲击力"、"告别平庸"、"令人难忘") with concrete deliverables (typography, motion, layout) to reduce fluff and over-claims.

Make the trigger clause crisper, e.g. "Use when building web pages or UI components that need a distinctive, non-generic aesthetic."

DimensionReasoningScore

Specificity

Names the domain (frontend/web interfaces) and one concrete action ("一键生成…生产级前端代码") but surrounds it with marketing fluff ("极具视觉冲击力"、"告别平庸"、"令人难忘的高品质"), and the second-person imperative "请用此技能" triggers the voice penalty, reducing the base of 3 by one.

2 / 5

Completeness

Answers both what (generate distinctive production-grade frontend code) and when ("构建Web页面或应用组件时…请用此技能"), but the when clause is wrapped in audience framing and an emotional hook rather than being a crisp trigger.

4 / 5

Trigger Term Quality

Includes natural terms a user would say ("构建Web页面"、"应用组件"、"前端代码"、"数字界面") with good coverage, though a few common synonyms (UI/界面设计/组件库) are missing.

4 / 5

Distinctiveness Conflict Risk

The anti-generic-AI-aesthetic niche is mostly distinct from a plain frontend-dev skill, though minor overlap risk remains with general frontend/build tasks.

4 / 5

Total

14

/

20

Passed

Validation

100%

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

Validation16 / 16 Passed

Validation for skill structure

No warnings or errors.

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.