見積もりツールのホームページ
フリーランスデザイナーが見積もりの作成、スコープ変更の合意、クライアント承認の取得方法を理解できるよう支援します。
ブランドアセット料金設定FAQ コピー
プロンプト全文を見る ↗スキルがガイドする内容
- 01ビジュアルの方向性を見つける
プロダクトに結びついたパレット、タイプ階層、レイアウト。
- 02プランをレビューする
制作前にブリーフに照らして方向性を確認します。
- 03制作と洗練
明確なアクションとアクセシブルな状態を持つレスポンシブなインターフェース。
frontend-design作者 AnthropicFrontend Design スキル。
Claude Code と Codex のための独自の UI デザインスキル：意図を持って選ばれたタイポグラフィ、カラー、レイアウトを実現します。
DESIGN DIRECTION / 01BRIEF → INTERFACE
AaTYPE WITH INTENT
A quieter palette.
A clearer hierarchy.
A clearer hierarchy.
● ● ●homepage.html ↗
scope®Made for independent designers
LESS ADMIN. MORE MAKING.Good work.
Clear scope.
Clear scope.
A considered space for your next project, from the first quote to the final yes.
Create your quote ↗YOUR NEXT PROJECTBrand &
website design
website design
01 Define the work
02 Agree on the scope
03 Get the go-ahead
Ready when you are. ↗
THE STARTING POINT
“A quoting tool for freelance designers.
Make the next step feel clear.”
01 ブリーフからインターフェースへ
ブリーフからインターフェースへ：フロントエンドデザインタスク
Claude Code または Codex にプロダクト、オーディエンス、コンテンツを伝えれば、frontend-design スキルがビジュアルの判断を行います。
02 適合性を確認
frontend-design スキルを使うべきとき
視覚的な判断が作業の一部である場合（Claude Code や Codex で構築する新しいページ、テンプレート的に見えるインターフェースの再デザイン）には frontend-design スキルを使用してください。
適している場合
- ブリーフから新しいページやサイトを制作ランディングページ、プロダクトサイト、ポートフォリオ、小規模アプリなど、最初の質問が「これはどう見えるべきか？」となるもの。
- 既存インターフェースの視覚的な再デザイン動作する UI があるがテンプレート的に見え、プロダクトの主題に根ざした方向性が欲しい場合。
- タイポグラフィと階層の修正フレームワークのデフォルトではなく、意図を持って設定されたタイプスケール、行の長さ、ウェイト、スペーシング。
- 実際のコンテンツを含むブリーフこのスキルはブリーフの実際のコピーと主題を使って構築します。より多くの実際の素材を提供するほど、より具体的な結果が得られます。
境界を知る
- デザインシステムが既にある場合そのルールとコンポーネントを提供してください。スキルはあなたのブリーフに従い、まだ開かれている視覚的選択肢の範囲内で動作すべきです。
- 作業がロジック、データ、バックエンド中心の場合このスキルはビジュアルデザインに焦点を当てています。アプリケーションロジック、API、機能テストには独自の実装作業が必要です。
- コンポーネントライブラリやテンプレートをお探しの場合このスキルは既製のコンポーネントライブラリやページテンプレートではなく、デザインの指示を提供します。
- 完成したUIのレビューが必要な場合自己評価は自身のプランを対象としています。他者のインターフェースを監査する場合は、以下の関連スキルを参照してください。
提供すべきもの
- プロダクトの主題プロダクトが何であり、どの業界に属するか。これを省略すると、スキルが提案して確認を求めます。
- ターゲットユーザーページが誰のためのものか。これが視覚的なトーンを最も左右します。
- ページの目的ページが果たすべき一つの役割と、主要なアクション。
- 実際のコンテンツ見出し、コピー、価格、FAQ の回答など。プレースホルダーテキストはプレースホルダーのようなデザインを生み出します。
- ブランドアセットと制約ロゴ、パレット、フォント、すでに決定されているもの。ブリーフ自体の言葉が常に優先されます。
03 意図を持ってデザインする
スキルがUIデザインにもたらすもの
frontend-design スキルが Claude Code または Codex に実行させる4つのこと、そしてそれぞれが入力を何に変えるか。
主題に根ざした視覚的な方向性
エージェントは何かを選択する前に、プロダクトが何であり、誰にサービスを提供し、その世界がどのようなものかを理解します。8歳児向けのおもちゃとアナリスト向けのダッシュボードは、同じ見た目であってはなりません。
- 提供するもの
- プロダクトの主題、オーディエンス
- 得られるもの
- コードが書かれる前に承認または方向転換できる方向性
意図を持って選ばれたタイプ、カラー、レイアウト
実際のスケールを持つ1つまたは2つの書体、16進数で指定された4〜6色のカラーパレット、配置ルールを持つレイアウトコンセプト。罫線、番号付け、ラベルなどの構造的デバイスは、情報を伝える場合にのみ使用されます。
- 提供するもの
- ブランドアセット、制約
- 得られるもの
- ページを構成するコンパクトなトークンシステム
構築前に、ブリーフと照らし合わせたプラン
このスキルは2段階で動作します。まずプランを作成し、次に各部分を「これは類似のページでも制作するか？」という問いに照らして確認し、定型的な内容を修正します。変更内容とその理由を明示します。コードはその後に生成されます。
- 提供するもの
- ブリーフ
- 得られるもの
- トランスクリプトで確認できる、文書化されたプランと簡潔なセルフレビュー
依頼されなくても基準品質を実現
モバイルまで対応したレスポンシブ、視認可能なキーボードフォーカス、モーション縮減設定の尊重、アクセシブルなカラー、そしてユーザーの視点で書かれた明快でアクティブな言葉による文章。
- 提供するもの
- アクセシビリティ要件
- 得られるもの
- モバイルとキーボード操作のためのガイダンス
04 実際に使う
Claude Code または Codex に frontend-design をインストール
npx skills add コマンドを1回実行し、エージェントにブリーフを渡して、最初の結果をチェックリストで確認します。
Claude Code、Codex、または使用中のエージェントに frontend-design を追加
プロジェクト内でコマンドを実行し、インストーラーのエージェント選択に従い、エージェントが frontend-design を検出できることを確認します。
Terminal
npx skills add https://github.com/anthropics/skills --skill frontend-designコマンドの参照元：skills.sh の frontend-design エントリ。インストーラーに従い、エージェントにスキルが表示されることを確認してください。
スキルに最初の UI デザインタスクを与える
このブリーフを製品の詳細に合わせて調整し、参照するブランドアセットを添付して、Claude Code または Codex で実行してください。
Example prompt
Use the frontend-design skill to design the homepage for a project-quoting tool for freelance designers. Goal: visitors should understand three things — how quotes are built, how scope changes are confirmed, and how clients approve — and then start creating a quote. Content: use the attached brand colors and logo. Include a hero, how it works, features, pricing, and FAQ. Use the real pricing tiers and FAQ answers I have provided; do not invent numbers or testimonials. Process: propose a visual direction that fits freelance designers and this product first, then build the desktop and mobile pages. Keep clear calls to action, visible keyboard focus, and a reduced-motion experience.最初の結果を確認
良好な初回実行は容易に判別できます。ページを承認する前に、トランスクリプトと出力で以下を確認してください：
- プランがコードより先に作成され、パレット値と書体の役割が明示されている。
- セルフレビューで、置き換えた定型表現が少なくとも1つ挙げられ、その理由が説明されている。
- 実際のコピー、価格、ブランドアセットがそのまま表示されます。
- 1つの要素が印象的で、ページの残りの部分は控えめである。
- ページが 390px で動作し、タブ操作で視認可能なフォーカスリングが表示され、モーションが OS 設定を尊重している。
- 何かが一般的に感じられる場合は、どの部分かを指摘してください。このスキルはその批評を受けて修正するように作られています。
OpenDesign をお使いですか？ frontend-design は OpenDesign に同梱されています。Plugins → Skills を開き、上部バーで選択すると、その SKILL.md が DESIGN.md と一緒にプロンプトに組み込まれます。作業は Claude Code、Codex、Cursor、または OpenCode が行います。
05 オープンソースで追跡可能
ソース、ライセンス、検証
このページの情報の出所と、最終確認日時です。
- Author
- Anthropic
- Repository
- github.com/anthropics/skills ブランチ
main - スキルファイル
skills/frontend-design/SKILL.md検証時に記録されたコンテンツチェックサム、コミット34040c9- License
- Apache-2.0 skills/frontend-design/LICENSE.txt より。SKILL.md には「完全な条項は LICENSE.txt に記載」と明記されています。リポジトリルートに別のライセンスの宣言はありません。
- リポジトリスター数
- 176,183 GitHub スナップショットは 2026-09-14 に anthropics/skills リポジトリ全体に対して取得されました。このリポジトリには多数のスキルが含まれています。frontend-design の評価や利用数ではありません。
- OpenDesign により検証済み
- 2026-09-14 ソースファイル、パス、ライセンステキスト、スター数を確認しました。OpenDesign main にバンドル済み（2026-08-28 確認）。OpenDesign での実行記録はまだこのページに記録されていません。
スキル自身による説明
「新しい UI を構築したり既存の UI を再構築したりする際の、独特で意図的なビジュアルデザインのガイダンス。美的方向性、タイポグラフィ、テンプレート的なデフォルトに見えない選択を行うことをサポートします。」
Front-matter description from SKILL.md. The full instructions are about 9,400 characters and cover subject grounding, design principles, a plan → review → build → critique process, restraint, and writing in design. GitHub で完全なファイルを読む.
Frontend Design
デザインする価値のあるブリーフをエージェントに与えましょう。
frontend-design スキルは OpenDesign に同梱されています。アプリをダウンロードし、Plugins → Skills でスキルを選択し、サンプルプロンプトを貼り付けて、コードの前にプランを読んでください。
ターミナル
npx skills add https://github.com/anthropics/skills --skill frontend-design