ローカライズされた読書ガイド
frontend-design目的、用途、および情報源
新しいUIを構築したり、既存のUIを再構築したりする際に、個性的で意図的なビジュアルデザインを実現するためのガイダンス。美的方向性、タイポグラフィ、そしてテンプレートのデフォルト設定に見えない選択をするのに役立ちます。
ソースを取得しました:
- 出典リポジトリ
- anthropics/skills
- SKILL.md
skills/frontend-design/SKILL.md- リポジトリの Star
- 185,373
- リポジトリの最終更新
- 2026-10-29
- 能力分類
- デザイン
- 最終収集時刻
ライセンス: ライセンスファイル未検証
ワークフローの抜粋は、Codezによる実行可能な指示ではなく、あくまでも参考資料です。このページを作成するために、サードパーティ製のスキルは実行されていません。
以下の目的とワークフローに関する記述は、上流工程に関する資料であり、読みやすいように整理・翻訳されています。これらは、別途ラベル付けされたCodez編集分析とは区別されます。
このスキルが何をするか
新しいUIを構築したり、既存のUIを再構築したりする際に、個性的で意図的なビジュアルデザインを実現するためのガイダンス。美的方向性、タイポグラフィ、そしてテンプレートのデフォルト設定に見えない選択をするのに役立ちます。
上流ワークフローの仕組み
プロセス：計画、概要との照合、構築、批評
キャリブレーションのために、AI が生成するデザインは現在、いくつかの特徴を中心にクラスター化しています: 温かみのあるクリーム色の背景 (#F に近い)4F1EA) コントラストの高いセリフ表示とテラコッタまたは温かみのある粘土色のアクセント (多くの場合 #D 付近)97757— Anthropic独自のClaudeインタラクションアクセント（ユーザーのブリーフィングでは、それが特徴として読み取れる））；ほぼ黒の背景に、明るいアシッドグリーンまたは朱色のアクセントが1つ；ヘアラインの罫線、ゼロのボーダー半径、密集した新聞のようなカラムを備えたブロードシートスタイルのレイアウト；
上流への航路 · L36 ↗フロントエンドデザイン
この案件は、あらゆるクライアントに他社と間違われることのない独自のビジュアルアイデンティティを提供することで知られるデザインスタジオのデザインリーダーとして取り組んでください。このクライアントは、ありきたりな提案やテンプレートを使った提案を既に却下しており、独自の視点を求めています。そのため、配色、タイポグラフィ、レイアウトに関して、この案件に特化した、意図的で明確な意見に基づいた選択を行い、正当な理由があれば美的リスクを冒すことも厭わないでください。
上流への航路 · L7 ↗デザインは題材に基づいて行う
ブリーフィングで製品や主題が特定されていない場合は、デザインを始める前に自分で特定し、クライアントに確認してください。提案書として、具体的な主題、デザインのターゲット層、デザインの主な役割を一つ提示することができます。クライアントの好みや、彼らが構築しているものに関する背景情報など、記憶に残っている情報があれば、それをヒントとして活用してください。主題の業界、主題、素材、そして慣習的な表現は、独特な視覚的選択の源泉となります。例えば、10代の女の子向けの玩具のデザインなどです。8–11金融アナリスト向けのダッシュボードとは、見た目が大きく異なるものになるでしょう。ブリーフに記載されている実際のコンテンツと主題に基づいて、全体を通して構築してください。
上流への航路 · L11 ↗要件とセットアップ
このファイルから要件定義の短い記述が選択されませんでした。これは、スキルに依存関係がないという意味ではありません。リポジトリの設定手順と参照ファイルを確認してください。
制限事項と品質チェック
このファイルからは、個別の制限に関する記述は選択されていません。これは、このスキルがあらゆる入力や環境において安全であることを意味するものではありません。ソースコード全体を確認し、ご自身で結果を検証してください。
まずは安全なトライアルから始めましょう
- サポートされているホストとリポジトリのインストール手順を確認してください。スキルディレクトリと、それに関連付けられているスクリプト、アセット、ドキュメントはまとめて保管してください。SKILL.md単独では依存関係を省略できる場合があります。
- エージェントに実際の入力、希望する出力、および受け入れ基準を指定してください。呼び出し構文と利用可能なツールはホストによって異なります。このサイトは、汎用的なインストールコマンドを前提としていません。
- 使い捨てプロジェクトまたはコピーで、元のワークフローを試してみてください。ファイル、リモートサービス、または課金対象リソースを変更する操作は、許可する前に必ず確認してください。
- 出力結果をソースの品質チェックおよび独自の要件と照らし合わせて検証してください。トリガーが成功したことやリポジトリのスター数が多いことだけでは、正しい結果とは言えません。
詳細は出典元をご覧ください。
関連スキル
翻訳と範囲
この読書ガイドは、ピン留めされた上流からの抜粋を選りすぐっていますSKILL.md翻訳は補助的なものです。完全なマニュアルではなく、互換性テスト済みであることを保証するものでもありません。ご使用前に原文および参照ファイルをお読みください。
この紹介文は、下記に固定表示されているバージョンに関するものです。現在のリポジトリのアクティビティと収集時間は別途表示されます。
- ピン留めされたソース
- 原文を読む ↗
- ソースを取得しました
- ソースコミット
ca45fc496a3436251f191354091d557da31c15b5- ソースSHA-256
d91970639e9f5c37682ac7ab60094d35f1c7c1f38d731bd56396563aee10c1d3