Frontend Design

Turns a UI request into a design and code with a clear visual personality, with care for layout, typography, color and detail.

How to use it

Install it with the open Skills CLI (needs Node.js), then restart your agent:

npx skills add anthropics/skills --skill frontend-design
  1. Download the ZIP from this page and unzip it.
  2. Put the frontend-design folder in .claude/skills/ inside your project (or ~/.claude/skills/ for all projects).
  3. Restart Claude Code and call it with /frontend-design.

بالعربي

تحول طلب الواجهة إلى تصميم وكود لهما شخصية بصرية واضحة، مع اهتمام بالتخطيط والخطوط والألوان والتفاصيل.

More for ui design

  • Web Design Guidelines: Reviews web interfaces against usability, accessibility and interaction-quality guidelines, with notes tied to the code.
  • UI UX Pro Max: Helps pick a design system, colors, fonts, UX patterns and accessibility for web and mobile, using a searchable local dataset.