# Create Distinctive Frontend Designs

Generic interface patterns can make products feel interchangeable and poorly matched to their users. This skill guides intentional choices in typography, color, layout, motion, copy, and responsiveness.

## Install

```bash
npx skillstore add anthropics/frontend-design
```

## Metadata

- Status: approved
- Slug: frontend-design
- Skillstore revision: r2
- Version status: missing
- Tree hash: 906e25bc4b8264589a3f9427a3713993ee5d11a1b7ca0af8a247a4f83816a4ce
- Author: anthropics
- GitHub username: anthropics
- License: Complete terms in LICENSE.txt
- Repository: https://github.com/anthropics/claude-code/tree/main/plugins/frontend-design/skills/frontend-design
- Ref: adcb3549b15782055d0beb6d29f113d20de08f92
- Supported tools: Claude, Codex, Claude Code
- Audit status: complete
- Agent install advisory: allowed
- Manual install advisory: allowed
- Artifact signature: available
- Audit attestation: unavailable
- Human verification: not\_verified
- Quality score: 79
- Quality tier: bronze
- Public page: https://skillstore.pages.dev/skills/frontend-design
- Manifest: https://skillstore.pages.dev/api/skills/frontend-design/manifest

## Capabilities

- Defines a subject-specific visual direction from the audience, content, and page objective.
- Creates compact design tokens for color, typography, layout, and a signature element.
- Uses ASCII wireframes to compare layout concepts before implementation.
- Reviews design plans for generic patterns and revises weak choices.
- Guides responsive implementation, keyboard focus, reduced motion, and CSS specificity.
- Improves interface labels, actions, errors, empty states, and supporting copy.

## Use Cases

- Launch a Product Page: Create a memorable product page with a focused hero, relevant visual language, responsive behavior, and clear interface copy.
- Refresh an Existing Interface: Replace generic visual defaults with a coherent direction while preserving the product requirements and established workflows.
- Define a Visual System: Turn a creative brief into practical color, typography, layout, motion, and content decisions before implementation begins.

## Prompt Templates

### Choose a Design Direction

```
Design a [page type] for [subject] serving [audience]. Define the page objective, palette, typography, layout concept, and one signature element.
```

### Plan a Responsive Interface

```
Create a responsive design plan for [product]. Include named colors, type roles, desktop and mobile wireframes, motion choices, and accessibility considerations.
```

### Redesign a Generic Page

```
Review the existing [page or component] against this brief: [brief]. Identify generic choices, propose specific replacements, then implement the revised direction.
```

### Lead a Full Design Critique

```
Act as design lead for [project]. Build two directions, compare their relevance, select one, implement it, inspect screenshots, and refine weak details.
```

## Limitations

- Does not provide a component library, starter project, or reusable code package.
- Does not replace accessibility testing, browser testing, or user research.
- Requires a clear brief or permission to define the subject, audience, and page objective.
- Visual quality still depends on available assets, fonts, framework constraints, and implementation tools.

## Best Practices

- Provide the real subject, audience, page objective, content, and technical constraints.
- Review the design plan before implementation and explain revisions to generic choices.
- Inspect desktop and mobile results, including keyboard focus, reduced motion, text fit, and CSS conflicts.

## Anti Patterns

- Do not request a distinctive design while withholding all subject and audience context.
- Do not select familiar palettes, typefaces, cards, or effects without connecting them to the brief.
- Do not add motion, decoration, or copy that lacks a clear functional or thematic purpose.

## Security Audit

- Audited at: 2026-07-23T17:50:23.306\+00:00
- Summary: The only static alert is a false positive caused by ordinary interface-writing guidance on SKILL.md line 47. The skill contains design instructions only, with no malicious intent or executable behavior.

## Stats

- Views: 419
- Downloads: 467
- Favorites: 3
- Popularity score: 0