Communitygithub.com

mark-hallam/design-direction

新しい製品のルックを見つけ、デザインの方向性を選び、ブランドに沿ったバリエーションを作成します。共有のブリーフから最大4つの完全な1ページHTML方向性を構築し、各方向性をデスクトップとスマートフォン、ライトとダークの両方でキャプチャし、比較ページと推奨事項を作成します。選択後は、ロックされたルックに基づいた構造のみのバリエーションを構築し、各ラウンドは番号付きの質問で終了し、選択されたトークンをブランドファイルにロックします。

design-direction とは?

このスキルは、デザインプロジェクトの最初の週をコマンドラインツールとして再現し、製品のルックを見つけて決定するプロセスを自動化します。共有のブリーフから最大4つの完全に機能するHTML方向性を並行して構築し、各方向性をデスクトップとスマートフォン、ライトとダークの両方でスクリーンショットとしてキャプチャします。その後、比較ページと推奨事項を作成し、ユーザーが選択した方向性に基づいて、構造のみを変更したバリエーションを最大3つまで作成します。最後に、選択されたトークン(色、フォント、ラジウスなど)をbrand.jsonファイルにロックし、マルチ評価ツールに引き継ぎます。このスキルはClaude CodeやCursorなどのAIエージェント向けに設計されており、Python 3.9以降とスクリーンショット用のNode.js 18以降、Google Chromeを必要とします。ユーザーがすべての決定を下し、AIは推奨と構築を行います。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/mark-hallam/mstack/tree/HEAD/skills/design-direction

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

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

ドキュメント

デザイン方向性:ルックを見つけてロックする

マルチ評価ツール(multi-evaluator)は、すでにルックが決まっている製品を改善します。このスキルはルックを見つけます。これは、優れたデザインプロジェクトの最初の週をコマンドラインツールとして再現したものです。つまり、厳格なルールを持つ共有ブリーフ、並行して構築されるいくつかの完全な動作方向性、推奨事項付きの比較ページ、ユーザーによる選択、その後構造のみが異なり番号付きの質問で終わるバリエーション、そしてロックされたブランドファイルです。エージェントが構築と推奨を行います。ユーザーが決定します。

1つのツール、scripts/direction.py(このファイルの隣)を使用します。以下では、DIRはpython3 <このスキルのフォルダ>/scripts/direction.pyを意味します。すべてのコマンドは--dir <フォルダ>と--jsonを受け付け、status --jsonは常に現在の方向性の場所と次に行うべきことを示します。Python 3.9以降、標準ライブラリのみを使用します。shotsはNode.js 18以降とGoogle ChromeまたはChromium、およびこのスキルの隣にあるマルチ評価スキル(ブラウザドライバを保持)も必要とします。

開始前(すべてのmStackスキル共通)

  • ~/.mstack/config.jsonの`

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

関連スキル