C✳CODEZ.WIN
🌐 日本語

ローカライズされた読書ガイド

frontend-design目的、用途、および情報源

独自性のある、本番環境レベルのフロントエンドインターフェースを、高いデザイン品質で作成します。このスキルは、ユーザーが Web コンポーネント、ページ、成果物、ポスター、またはアプリケーション (Web サイト、ランディング ページ、ダッシュボード、React コンポーネント、HTML/CSSレイアウト、またはstyling/beautifyingあらゆるウェブUIに対応)。汎用的なAIの美学を避け、創造的で洗練されたコードとUIデザインを生成します。

ソースを取得しました:

出典リポジトリ
vercel-labs/open-agents
SKILL.md
.agents/skills/frontend-design/SKILL.md
リポジトリの Star
5,871
リポジトリの最終更新
2026-08-29
能力分類
デザイン
最終収集時刻

ライセンス: MIT

ワークフローの抜粋は、Codezによる実行可能な指示ではなく、あくまでも参考資料です。このページを作成するために、サードパーティ製のスキルは実行されていません。

以下の目的とワークフローに関する記述は、上流工程に関する資料であり、読みやすいように整理・翻訳されています。これらは、別途ラベル付けされたCodez編集分析とは区別されます。

このスキルが何をするか

独自性のある、本番環境レベルのフロントエンドインターフェースを、高いデザイン品質で作成します。このスキルは、ユーザーが Web コンポーネント、ページ、成果物、ポスター、またはアプリケーション (Web サイト、ランディング ページ、ダッシュボード、React コンポーネント、HTML/CSSレイアウト、またはstyling/beautifyingあらゆるウェブUIに対応)。汎用的なAIの美学を避け、創造的で洗練されたコードとUIデザインを生成します。

上流ワークフローの仕組み

概要

このスキルは、ありきたりな「AIの粗雑さ」を避け、独自性のある、実用レベルのフロントエンドインターフェースを作成するのに役立ちます。美的ディテールと創造的な選択に細心の注意を払いながら、実際に動作するコードを実装します。ユーザーは、構築するコンポーネント、ページ、アプリケーション、またはインターフェースといったフロントエンドの要件を提供します。これには、目的、対象ユーザー、技術的な制約に関するコンテキストが含まれる場合があります。

上流への航路 · L6 ↗

デザイン思考

コーディングを始める前に、コンテキストを理解し、大胆な美的方向性を決定してください。目的:このインターフェースはどのような問題を解決しますか?誰が使用しますか?

上流への航路 · L10 ↗

フロントエンドの美的ガイドライン

タイポグラフィ:美しく、個性的で、魅力的なフォントを選びましょう。ArialやInterのようなありきたりなフォントは避け、フロントエンドの美観を高めるような、個性的で意外性のあるフォントを選びましょう。特徴的なディスプレイフォントと洗練された本文フォントを組み合わせましょう。色とテーマ:統一感のある美観を追求しましょう。一貫性を保つためにCSS変数を使用しましょう。控えめで均等に配置されたパレットよりも、鮮やかなアクセントカラーを使ったメインカラーの方が効果的です。

上流への航路 · L26 ↗

要件とセットアップ

このファイルから要件定義の短い記述が選択されませんでした。これは、スキルに依存関係がないという意味ではありません。リポジトリの設定手順と参照ファイルを確認してください。

制限事項と品質チェック

このファイルからは、個別の制限に関する記述は選択されていません。これは、このスキルがあらゆる入力や環境において安全であることを意味するものではありません。ソースコード全体を確認し、ご自身で結果を検証してください。

まずは安全なトライアルから始めましょう

  1. サポートされているホストとリポジトリのインストール手順を確認してください。スキルディレクトリと、それに関連付けられているスクリプト、アセット、ドキュメントはまとめて保管してください。SKILL.md単独では依存関係を省略できる場合があります。
  2. エージェントに実際の入力、希望する出力、および受け入れ基準を指定してください。呼び出し構文と利用可能なツールはホストによって異なります。このサイトは、汎用的なインストールコマンドを前提としていません。
  3. 使い捨てプロジェクトまたはコピーで、元のワークフローを試してみてください。ファイル、リモートサービス、または課金対象リソースを変更する操作は、許可する前に必ず確認してください。
  4. 出力結果をソースの品質チェックおよび独自の要件と照らし合わせて検証してください。トリガーが成功したことやリポジトリのスター数が多いことだけでは、正しい結果とは言えません。

スキルフォーマットとディレクトリの仕様 ↗

詳細は出典元をご覧ください。

翻訳と範囲

この読書ガイドは、ピン留めされた上流からの抜粋を選りすぐっていますSKILL.md翻訳は補助的なものです。完全なマニュアルではなく、互換性テスト済みであることを保証するものでもありません。ご使用前に原文および参照ファイルをお読みください。

この紹介文は、下記に固定表示されているバージョンに関するものです。現在のリポジトリのアクティビティと収集時間は別途表示されます。

ピン留めされたソース
原文を読む ↗
ソースを取得しました
ソースコミット
cf865e94de7729751c747171785b6ce57e7b178c
ソースSHA-256
1bb3263d490c2585bf64a4e399ab28650a5034d7705abdbbe82a5a9dce1e6873
スキルカタログ全体に戻る