Skip to content
cccskills
FreePublished on GitHub

project-design-language

【穴埋め雛形】このプロジェクト固有の「存在設計・体験設計」のSSOT。judgment-harness のプロジェクト層スキルとして、立ち上げ時に本ファイルを埋めて使う(雛形のままなら未確定=推測で決めない)。デザイン/UI/モーション/コピーの方針判断、見た目や体験のトーン決め、画面・コンポーネント設計の前段で必ず参照する。

The English summary is being prepared. Showing the original description.

See how to install

Files included (1)

  • SKILL.md8.4 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

project-design-language — このプロジェクトの存在設計・体験設計 SSOT(穴埋め雛形)

このスキルは、このプロジェクトに固有の決定(what / why)を1か所に束ねるプロジェクト層スキル。 汎用の判断軸(how)は既存スキルに委譲し、ここにはこのプロジェクトだけの値・方針を書く。

使い方(雛形の埋め方):

  • プロジェクト立ち上げ時に {...} を対話で埋める(judgment-harness の発酵ループ参照)。
  • 推測で埋めない。決まっていない項目は TBD と明記し、確定したものから反映する。
  • プロジェクトに合わせて name / description / 本文の呼称を書き換えてよい(例: design-language)。

発火条件(適用タイミング)

  • デザイン/UI/トーン&マナー/コピー/モーションの方針判断をするとき
  • 画面・コンポーネント設計の前段(汎用スキルを当てる前に、固有の前提を確認する)
  • 「らしさ」「世界観」「雰囲気」「ブランド」「印象」に関わる相談
  • 固有値(色/フォント/余白/動き/語り口)を決める・参照するとき

参照(howは汎用スキルに委譲)

固有の決定を下すときの「判断ロジック」は以下を併用する。重複して書かない。

観点委譲先スキル
描く瞬間の規律(コンセプト導出線/材質/引き算/シグネチャ表現)art-direction
情報設計・状態・コンポーネント/トークン化ui-designer
なぜ動かす/どう動かす(モーションの原則)animation-principles
音・触覚・空間など視覚外チャネルsensory-design
表現品質(動き/触感/視線誘導)の実装制約化creative-coder
デザインツール→壊れない実装への翻訳frontend-implementation
アクセシビリティ(セマンティクス/コントラスト/操作)accessibility-engineer
認知負荷・エラー防止・学習コストusability-psychologist
想定ユーザー像の言語化persona-designer
視覚テイスト等の固有の作法(演出層スキルを作った場合){演出層スキル名 / なければ削除}

ルール: 「どう判断するか」は上記。「このプロジェクトでは結局どう決めたか」は本ファイル。

外部デザイン知識ベース(任意)

個人・組織のデザイン判断基準(例: design-brain)を持っている場合にパスを記入する。 テンプレートには「欄」だけを置き、中身は各自の環境に属する(OSS配布物に個人の審美眼を埋め込まない)。 未記入なら本セクションはスキップしてよい。

  • 知識ベースのパス: {例: /path/to/design-brain} | 未使用
  • 読み込みの優先順: {例: personal-style → anti-patterns → principles → patterns → references → trends} | TBD
  • 必読: {例: personal-style/core.md(判断の核)と anti-patterns/(禁止事項)} | TBD
  • 還流: プロト・実装で「効いた/効かなかった」が出たら知識ベース側の {例: feedback/} へ記録する

基本方針(存在設計の核)

  • 誰のためのプロダクトか: {想定ユーザー像。複数いる場合は優先関係も}
  • 何を良しとするか(一言): {このプロジェクトの北極星}
  • 核となる構造: {例: 来訪者タイプ間の衝突をどう解くか、第一印象と導線の関係 等}
  • 単一メタファー宣言: {依頼文・ドメイン・雰囲気語から拾った手がかりを1つのメタファーへ束ねる(例:「◯◯の世界」)。以後の全表現判断の単一光源にする。手がかりが弱ければ推測せず候補提示→人間選定}: {…} | TBD

体験原則(迷ったらこの順で優先)

規範(守る)と逸脱(意図的に外す)を対で書く。"らしさ"は逸脱から生まれる(judgment-harness 参照)。

  1. {原則1}
  2. {原則2}
  3. {原則3 …確定するたびに追記。検証中のものは「ドラフト」と明記}

固有値レジストリ(このプロジェクトの決定)

確定するたびにここを更新する。値が入るまでは実装で勝手に決めない(推測禁止)。 確定した値は最終的に doc/input/design/ のSSOT(tokens等)と同期する。

ビジュアル言語

項目決定状態
全体の質感ワード(3語){…}TBD
材質(コンセプトの手触り。影/ハイライト/彩度の導出元){例: マット・紙・水彩}TBD
背景・基調トーン{…}TBD
キーカラー / アクセント{…}TBD
角丸・線・影の方針{…}TBD
余白の刻み(spacing scale){…}TBD
タイポ(見出し / 本文 / 和欧){…}TBD

アートディレクション(判断軸は art-direction)

項目決定状態
タグライン(体験を一文で。画面にも打つ){…}TBD
シグネチャ表現(テーマ由来の固有表現を主要インタラクションのどこに){…}TBD
引き算の禁止則(このプロジェクト固有。無ければ art-direction の既定を使う){例: 情報はカードで囲わない / 塗りは主CTAのみ}TBD

モーション言語(判断軸は animation-principles)

項目決定状態
モーションの役割(演出主体 / 補助のみ){…}TBD
基準デュレーション / イージング{…}TBD
遷移の質感(カット / フェード / 連続変形 など){…}TBD
reduced-motion 時の代替挙動{…}TBD

声・トーン(コピーの語り口)

項目決定状態
一人称 / 二人称 / 文体{…}TBD
語り口(ユーザータイプ別にあれば分ける){…}TBD
多言語方針{…}TBD

判断軸(具体の決めごとで迷ったとき)

  • {例: 価値Aと価値Bで割れたら → その画面の主目的を先に決める。両取りしようとして薄めない}
  • トーンが揺れたら → 固有値レジストリに照合。レジストリに無いなら"まだ決めていない"=この場で勝手に決めず確認 or 暫定明記。
  • アクセシビリティと表現が衝突したら → 表現側を作り替える(諦めるのではなく、誰も置き去りにしない形に再設計)。

進め方(最初に確認する問い)

  • この画面/要素の主対象は誰か?立てたい第一印象(らしさ)の一言は?
  • 固有値レジストリに必要な値はあるか?無ければ今決めるか、TBDで進めるか?

出力フォーマット(方針提示時)

  1. 対象ユーザーと画面の主目的
  2. 適用した体験原則(番号で)と固有値(レジストリ参照、TBDは明示)
  3. 具体提案(汎用スキルへの委譲点を明記)
  4. アクセシビリティ/パフォーマンス上の留意
  5. 次アクション(プロトタイプ→値の確定→SSOT同期)

よくある落とし穴

  • 固有値が未確定なのに、実装側がその場の勘で色やフォントを決める(→ プロダクト全体が揺れる)。本ファイル/SSOTに集約する。
  • 演出を「すごいから」入れて、意味の伝達や操作性を犠牲にする。
  • 複数の価値を1画面で両取りしようとして、どちらにも刺さらない無難なデザインになる。
  • reduced-motion / コントラスト / キーボード操作を後回しにし、表現と両立できなくなってから慌てる。

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

セマンティックHTML/JSXとWAI-ARIAを「最小で正しく」適用し、キーボード操作・スクリーンリーダ・コントラスト等を満たす実装を作るための判断軸。ネイティブ要素優先、ARIAの過剰使用を避ける。

The English summary is being prepared. Showing the original description.

mae616/ai-template9Updated Oct 6, 2026

Agent Browser(Headlessブラウザ自動化CLI)を使ったUI検証・E2Eテスト・スクリーンショット取得の判断軸。アクセシビリティツリーベースの要素選択を優先し、壊れにくいテスト設計を目指す。

The English summary is being prepared. Showing the original description.

mae616/ai-template9Updated Oct 6, 2026

ディズニーの12原則とジブリ的自然運動をベースに、UIアニメーションの「なぜ動かすか」「どう動かすか」を判断する。アニメーション/モーション/トランジション設計の相談で、ツール非依存の概念的判断軸として使う。

The English summary is being prepared. Showing the original description.

mae616/ai-template9Updated Oct 6, 2026

アーキテクチャ設計(境界/依存/データフロー/非機能/運用)を、制約とトレードオフで言語化し、ADR-liteで合意形成しながら段階的に形にする。doc/input/rdd.md にアーキテクチャ/非機能/運用の要求がある、または設計判断(分割/責務/インタフェース/データ整合/観測性/スケール)相談で使う。

The English summary is being prepared. Showing the original description.

mae616/ai-template9Updated Oct 6, 2026

事業仮説を支える一次/二次情報を整理し、意思決定に足る「根拠」「不確実性」「次の調査」を可視化する。でたらめな引用や推測の断言を避け、出典の実在を重視する。

The English summary is being prepared. Showing the original description.

mae616/ai-template9Updated Oct 6, 2026

体験品質(動き/触感/視線誘導)を「実装可能な制約」に落とし、アクセシビリティとパフォーマンスを犠牲にせずに表現を実現する。UIの表現・アニメーション・インタラクション設計/実装の相談で使う。

The English summary is being prepared. Showing the original description.

mae616/ai-template9Updated Oct 6, 2026

See all skills by mae616

Report a problem with this skill