Frontend Design Visual Direction
Creates distinctive, intentional visual direction for non-templated web interfaces.
The skill provides only frontend-design guidance and declares no tool calls, file access, external network use, credential handling, or destructive operations, indicating low privilege and low external impact; it does not specify user confirmation, data flows, rollback, or sensitive-content handling, and its license reference lacks concrete terms, so points are deducted.
The guidance is internally coherent and covers planning, critique, building, responsive behavior, keyboard focus, and reduced motion; however, it includes no scripts, tests, dependency notes, abnormal-input handling, or explicit failure feedback. The score remains within the static-review ceiling and is reduced because key paths cannot be reproduced.
It clearly targets creating or reshaping web interfaces and specifies subject, audience, page purpose, non-template direction, and accessibility concerns; it lacks precise trigger conditions, non-fit boundaries, input/output contracts, Chinese-language support, and mainland-China environment guidance, so points are deducted.
The document has useful thematic and process layering, including design tokens, ASCII wireframes, writing guidance, known quality requirements, and maintainability hints; installation/dependency notes, parameter naming, concrete examples, FAQs, versioning, changelog, and maintenance/update ownership are incomplete, while the license is only delegated to repository terms, so points are deducted.
It offers an actionable framework for visual direction, covering color, typography, layout, signature elements, copy, and accessibility; the outcome remains subjective, with no representative outputs, acceptance criteria, or comparative evidence against manual or alternative approaches, so substantial review and implementation work remain.
The skill is an auditable primary instruction document whose recommendations are traceable; it contains no committed tests, CI coverage, third-party execution evidence, or independent reproduction, warranting only limited static verifiability credit.
- This is design guidance rather than a verifiable implementation workflow; add concrete requirements, acceptance criteria, and post-build accessibility and responsive testing.
- License details, versioning, changelog, and maintenance/update responsibility are not explicit in the skill file; verify repository terms and ongoing maintenance before adoption.
- The skill provides no Chinese-copy or mainland-China network adaptation guidance, so Chinese products and restricted-network scenarios require manual assessment.
What it does & when to use it
This is a guidance skill for designing or reshaping web interfaces with deliberate visual choices grounded in the subject. It covers color, typography, layout, copy, motion, responsive behavior, keyboard focus, and reduced-motion preferences. The workflow calls for brainstorming, planning, critique, revision, and only then implementation, with explicit checks against common generative design defaults. It fits projects that need a recognizable visual identity, but it does not replace project-specific design judgment or implementation tooling.
It directs the designer to define the subject, audience, and page goal, then create a design plan containing a four-to-six-color palette, two or more type roles, a layout concept, and one memorable signature element. It uses prose and ASCII wireframes to compare ideas, reviews the plan for generic choices, revises it, and then implements the revised direction. It also guides interface copy, error and empty states, responsive behavior, visible keyboard focus, and reduced-motion support.
- A frontend developer is starting a new webpage and needs a concrete color, type, and layout direction.
- A product team is reshaping an existing interface to reduce templated visuals and establish a stronger identity.
- A designer has a defined subject but an open visual direction and needs a specific design angle.
- An interface writer needs clear, consistent labels, error messages, and empty-state copy.
- A frontend team wants to compare, critique, and revise a design before implementation.
Pros & cons
- Provides a complete workflow from subject definition through pre-implementation critique.
- Covers core decisions across color, typography, layout, copy, and motion.
- Explicitly challenges common cream-and-serif, dark-and-bright-accent, and broadsheet defaults.
- Calls for mobile responsiveness, visible keyboard focus, and reduced-motion support.
- It is primarily a design process and principles document, with no reusable components, scripts, or assets.
- Results depend on the user's judgment about the subject and visual tradeoffs.
- The source includes no test suite, example project, or framework-specific guidance.
- The source does not document installation or activation of the individual skill.
How to install
The source documents installation of Claude Code as a whole, not installation or activation of this individual skill. To install Claude Code, run curl -fsSL https://claude.ai/install.sh | bash on macOS/Linux, or use brew install --cask claude-code; on Windows, run irm https://claude.ai/install.ps1 | iex, or use winget install Anthropic.ClaudeCode. The skill is located at plugins/frontend-design/skills/frontend-design/SKILL.md; the source does not document how to copy, register, or enable it separately.
How to use
In a client that supports the skill, apply it as design guidance when creating or revising a webpage. A suitable starting request is: “Create a non-templated visual direction for this product page; first propose the palette, typography, layout, and signature element, then critique and revise the plan.” The source does not provide a dedicated slash command, parameter format, or invocation syntax.