Claude におしゃれな UI を作らせる「frontend-design Skill」が1週間前に更新されていて、AIにアイデアを出させる際のコツが沢山含まれていたのでシェア。 Skill のテーマと AI の振る舞いについて テーマは、デザインの理由を持たせることで、AI がよく出す “それっぽいUI” ではなく、「そのサービスにしか存在しないUIを作れ」というもの。 AIには、「どのクライアントにも同じ見た目を提案しない、小さなデザインスタジオのデザインリード」として振る舞わせる。 「テンプレっぽい提案は何度も却下されている」という前提を置き、色・タイポグラフィ・レイアウトの全てに対して、「なぜそのデザインなのか」を説明できるレベルで判断させている。 依頼内容が曖昧な場合の振る舞い ・何のサービスなのか ・誰向けなのか ・ページの目的は何か を先に定義し、そのテーマの世界観からデザインを組み立てさせている。 デザイン原則について ・ヒーローセクションは「主張」である ・タイポグラフィに人格を持たせる ・構造に意味を持たせる ・アニメーションは目的を持たせる ・ビジョンに応じて複雑さを選ぶ。 ・コピーライティングもデザインの一部 作業プロセスの進め方 ① Brainstorm（アイデア出し） ② Explore（方向性検討） ③ Plan（設計） ④ Critique（自己レビュー） ⑤ Build（実装） ⑥ Critique Again（再レビュー） という流れ。 また実装前には設計書を作り、 ・これは本当にこのプロダクトのためのデザインか？ ・他の案件にもそのまま流用できるデザインではないか？ を自己レビューさせ、後者ならやり直しさせる。ここは Loop にも似た考え方。 UI文言のルール ・ユーザー視点で書き、内部実装を見せない ・動詞を使い、何が起きるか明確にする ・エラーは原因と対処を書く ・空状態の時は、次の行動を示す https://github.com/anthropics/claude-code/blob/main/plugins/frontend-design/skills/frontend-design/SKILL.md [claude-code/plugins/frontend-design/skills/frontend-design/SKILL.md at main · anthropics/claude-code](https://t.co/jXCJIvvoaA)