Communitygithub.com

AdamJ/trailpeakdesign

このスキルを使用すると、Trail Peak(Adam Jolicoeurのポートフォリオ、iOS、デザインシステム)向けにブランド力のあるインターフェースやアセットを生成できます。プロダクション用途から、使い捨てのプロトタイプやモックまで対応します。デザインガイドライン、カラー、タイポグラフィ、フォント、アセット、UIキットコンポーネントが含まれています。

trailpeakdesign とは?

このスキルは、Adam Jolicoeurのポートフォリオ、iOSアプリ、デザインシステムであるTrail Peakの一貫したビジュアルアイデンティティを維持しながら、デザインやプロトタイピングを支援するために設計されています。スライド、モック、使い捨てプロトタイプなどのビジュアルアーティファクトを作成する場合、アセットをコピーしてユーザーが表示できる静的HTMLファイルを生成します。プロダクションコードに取り組む場合は、アセットをコピーし、このブランドでのデザインエキスパートになるためのルールを読み込むことができます。ユーザーが他のガイダンスなしでこのスキルを呼び出した場合、何を構築またはデザインしたいか尋ね、いくつか質問をし、エキスパートデザイナーとして、ニーズに応じてHTMLアーティファクトまたはプロダクションコードを出力します。主なファイルには、ブランドコンテキストのREADME.md、CSS変数定義、Webフォント(Inter、Playfair Display、Fira Code、Pirata One)、ロゴや画像のアセット、コンポーネント見本、ポートフォリオサイトのJSXレプリカが含まれます。特徴的なスタイルは、アースカラーの暖色パレット、ぼかしなしのフラット4~12pxオフセットシャドウ、1pxのバークボーダー、丸みを帯びた12~20pxの角、Playfair見出し+Inter本文+Fira Code等幅+Pirata Oneディスプレイ、中央揃えのダイヤモンド付きセクションヘッダー、微妙なcubic-bezierトランジションです。Phosphor IconsはCDN経由で使用します。

対応~Claude Code~Codex CLI~Cursor
npx skills add AdamJ/trailpeakdesign

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

このスキル内の README.md を読み、他の利用可能なファイルも参照してください。

ビジュアルアーティファクト(スライド、モック、使い捨てプロトタイプなど)を作成する場合は、アセットをコピーして、ユーザーが表示できる静的HTMLファイルを作成します。プロダクションコードに取り組む場合は、アセットをコピーし、ここのルールを読んでこのブランドでのデザインエキスパートになりましょう。

ユーザーが他のガイダンスなしでこのスキルを呼び出した場合は、何を構築またはデザインしたいか尋ね、いくつか質問をし、エキスパートデザイナーとして、ニーズに応じてHTMLアーティファクト または プロダクションコードを出力します。

主要ファイル

  • README.md — ブランドコンテキスト、コンテンツの基本、ビジュアルの基礎、アイコノグラフィー
  • colors_and_type.css — カラー、タイポグラフィ、スペーシング、角丸、シャドウ、イージングのCSS変数
  • fonts/ — Webフォント(Inter、Playfair Display、Fira Code、Pirata One)
  • assets/ — ロゴ + 画像
  • preview/ — 小さなコンポーネント/トークンの見本
  • ui_kits/marketing_site/ — ポートフォリオサイトのJSX再現

シグネチャームーブ

  • アースカラーの暖色パレット
  • ぼかしなしのフラット4~12pxオフセットシャドウ
  • 1pxの「bark」ボーダー
  • 丸みを帯びた12~20pxの角
  • Playfairセリフ見出し + Inter本文 + Fira Code等幅 + Pirata Oneディスプレイ
  • 中央揃えのダイヤモンド付きセクションヘッダー
  • 微妙な cubic-bezier(.22,.61,.36,1) トランジション
  • CDN経由のPhosphor Icons(Regular + Fill)

関連スキル