# Use the Claude front-end design skill

Published: 2025-12-01T00:00:00.000Z
Canonical: https://wow.pjh.is/journal/claude-front-end-design-skill

[Claude Skills](https://wow.pjh.is/journal/claude-skills) are powerful. Anthropic released a [front-end design skill](https://github.com/anthropics/claude-code/blob/main/plugins/frontend-design/skills/frontend-design/SKILL.md) recently.
It's just one page of instructions in a Markdown file, but it completely transforms Claude's ability to design beautiful UIs.

For example, I wanted to make a simple spaced repetition app to help me learn Cuban Salsa figures.

Here's the output without the front-end design skill:

![Claude design](https://wow.pjh.is/static/images/blog/salsa-srs-no-claude-skill.jpeg)

And here's the output with the front-end design skill:

![Claude design](https://wow.pjh.is/static/images/blog/salsa-srs-claude-skill.jpeg)

And if I ask for something more fun:

![Claude design](https://wow.pjh.is/static/images/blog/salsa-srs-claude-skill-fun.jpeg)

Not perfect, but good enough to [bring joy](https://vibe.pjh.is/salsa).

The skill is now included by default on the Claude consumer app and Claude Code. Just make sure to say "use your front-end design skill", as it doesn't always activate when it should.

Anthropic's [blog post](https://www.claude.com/blog/improving-frontend-design-through-skills) explains why this works so well.

## Appendix 1. The prompt I used

Voice dictation, vibe coding FTW:

**Prompt**

```
All right, I'd like to make a little spaced repetition style app to help me learn Salsa figures. I'm going to give you a CSV file which has the name of a Salsa move, and then a YouTube video link which shows me the move. What I want is to just have the kind of spaced repetition style cards so you know I will see the name of the move and then I press SPACE PAR or CLICK or TAP and then it will show me the video. This can be a really simple HTML one pager. I want it to look nice so please do something fun, but do **not** use your front end design skill. But the logic can be super simple: we can just randomly load the cards every time the page loads, we can just sort them randomly, and there's no need to track state or remember anything.
```

I provided a CSV file with the figure names and links to YouTube videos that demonstrate the figures. So I flip the cards, I get the video.

![Claude design](https://wow.pjh.is/static/images/blog/salsa-srs-claude-skill-2.jpeg)