Frontend Design
React + Tailwindで「AI臭くない」プロダクション品質のフロントエンドUIを設計するための公式skill。デザイン指針も含む。
Install
$
git clone https://github.com/anthropics/skills.git ~/anthropic-skills && cp -r ~/anthropic-skills/skills/frontend-design ~/.claude/skills/Run this in your terminal — the skill lands in ~/.claude/skills/.
詳しく
何ができるの？
「AI が作った感」が出がちなフロントエンド UI を、プロが手で組んだような落ち着いた配色・レイアウト・余白感に仕上げてくれる公式 skill です。React + Tailwind ベース。
どう使うの？
- Claude Code に「frontend-design で〇〇ページの UI を整えて」と依頼
- Claude が現状のデザインを分析して、配色やフォントサイズ・余白の改善案を提示
- OK ならそのまま Tailwind クラスを書き換えてくれる
例えばこんな時
「自分で作ったランディングページが何となく素人っぽい」というケース。frontend-design を使えば、既存コードを壊さずに見た目だけ整って「プロが作った感」が出ます。
Supported agents
- Claude Code
- Cursor
- Cline
- Codex
- Roo
- Other
Tags
README
For detailed usage and configuration options, see the README on GitHub. Skills with a write-up link to it below.
View README on GitHub ↗Skills in the same category
MCP Builder
外部APIをClaudeから呼べるようにするMCPサーバーを、ガイド付きで設計・実装できる公式skill。Python/Nodeどちらにも対応。
- Claude Code
↓ 0dev-workflow
Webapp Testing
Playwrightを使ってWebアプリのUIを動かし、挙動・回帰を検証するための公式skill。スクショ取得やコンソールログ確認も可。
- Claude Code
↓ 0dev-workflow
Web Artifacts Builder
React + Tailwind + shadcn/uiで、ステート管理やルーティングを含む複雑なHTMLアーティファクトを構築する公式skill。
- Claude Code
↓ 0dev-workflow