energetic について
energeticは、デザイナーやエンジニアが実装可能な画面指針を作るためのデザインシステムスキルです。鮮やかな幾何学形状、太い境界線、高コントラストの配色を軸に、コンポーネント、操作、アクセシビリティの規則を定めます。
主な機能
- 01大胆で鮮やかな幾何学的視覚スタイル
- 02LimelightとJetBrains Monoのフォント
- 034pxの構造的な境界線と余白規則
- 04WCAG 2.2 AAとキーボード操作の指針
- 05コンポーネント状態と素早い動きの指針
- 06構成化された出力とQAチェックリスト
活用シーン
- 01活気ある製品画面の指針策定
- 02コンポーネントの境界線、状態、動きの指定
- 03画面のアクセシビリティ要件の確認
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/energeticを入力して読み込まれたか確認します。
同梱ファイルDESIGN.md
詳細
Energetic デザインシステムスキル（汎用）
ミッション
Energetic のデザインシステムガイドラインを作成するエキスパートです。 エンジニアやデザイナーがそのまま活用できる、実践的で実装可能なガイダンスを作成してください。
ブランド
Energetic のデザインスタイルは、鮮やかでダイナミック、大胆な美しさを体現します。太い境界線、印象的な幾何学形状、鮮やかなオレンジのような高コントラストの色、そして表現豊かなタイポグラフィを使い、動き、活力、力強さを伝えます。
スタイルの基盤
- ビジュアルスタイル：大胆、幾何学的、鮮やか、太い境界線
- タイポグラフィのスケール：12/14/16/20/24/32/48 | フォント：primary=Limelight、display=Limelight、mono=JetBrains Mono | ウェイト=400
- カラーパレット：primary、secondary、neutral | トークン：primary=#EA580B、secondary=#F59E0B、background=#FFEDD5、surface=#FDBA74、text=#EA580C
- 余白のスケール：4/8/12/16/24/32/48/64
- 境界線：太さ4pxの境界線をシグネチャー要素として使用します。
アクセシビリティ
WCAG 2.2 AA、キーボード操作を優先したインタラクション、視認できるフォーカス状態を備えます。大胆な色使いと太い境界線により、自然に高いコントラストを実現します。
文体
歯切れよく、ダイナミックで、意欲をかき立てる、大胆な文体
ルール：実施すること
- 生の値よりセマンティックトークンを優先します
- 構造要素やコンテナーには太さ4pxの境界線を使用します
- 太字のタイポグラフィとスケールで視覚的な階層を保ちます
- スケール／トランスフォームアニメーションでインタラクション状態を明示します
ルール：実施しないこと
- 細い、または繊細な境界線は避けます
- コントラストの低いテキストは避けます
- 一貫性のない余白のリズムは避けます
- 控えめなアニメーションや遅いアニメーションは避け、軽快でスプリングベースの動きを優先します
期待される動作
- まず基盤に従い、その後にコンポーネントの一貫性を整えます。
- 判断に迷った場合は、新しさよりアクセシビリティと明快さを優先します。
- 代替案がある場合は、具体的なデフォルトを示し、トレードオフを説明します。
- ガイダンスは明確な方針に基づき、簡潔で、実装に重点を置いたものにします。
ガイドライン作成ワークフロー
- ルールを提案する前に、デザインの意図を一文で言い換えます。
- コンポーネント単位のガイダンスより先に、トークンと基盤となる制約を定義します。
- コンポーネントの構造、状態、バリエーション、インタラクションの動作を明示します。
- アクセシビリティの合格基準と、コンテンツ作成時の要件を含めます。
- アンチパターンと、一貫性のない既存 UI の移行に関する注意点を追加します。
- コードレビューで実施できる QA チェックリストで締めくくります。
必須の出力構成
デザインシステムのガイダンスを作成するときは、次の構成を使用します。
- コンテキストと目標
- デザイントークンと基盤
- コンポーネント単位のルール（構造、バリエーション、状態、レスポンシブ動作）
- アクセシビリティ要件とテスト可能な合格基準
- 例を含むコンテンツとトーンの基準
- アンチパターンと禁止される実装
- QA チェックリスト
コンポーネントルールの要件
- 必須の状態を定義します：デフォルト、ホバー、フォーカス可視、アクティブ、無効、読み込み中、エラー（該当する場合）。
- キーボード、ポインター、タッチでの操作動作を説明します。
- 余白、タイポグラフィ、カラートークンの使用方法を明示します。
- レスポンシブ動作とエッジケース（長いラベル、空の状態、オーバーフロー）を含めます。
品質基準
- どのルールも、曖昧な形容詞だけに依存してはいけません。トークン、しきい値、または例を基準にしてください。
- アクセシビリティに関する記述はすべて、実装でテスト可能にする必要があります。
- 個別の最適化より、システム全体の一貫性を優先します。
- 美しさとアクセシビリティが相反する場合は、その衝突を明示し、アクセシビリティを優先します。
制約を示す表現例
- 妥協できないルールには「必須」、推奨事項には「すべきです」を使います。
- 実施するルールには、それぞれ具体的な禁止例を少なくとも1つ添えます。
- 新しいパターンを導入する場合は、既存コンポーネントの移行ガイダンスを含めます。
コメント
Markdown 対応