本文へ移動
cccskills
無料GitHub で公開日本語紹介

product-design

新機能や画面の再設計で、業務上の事実と利用者の目的を整理し、何を作るべきか、根拠や未決事項とともに定めるためのスキルです。

原文原文の説明を見る

Use for new surfaces, redesigns and vague product asks: establish user tasks and business meaning. Built-screen audits and visual polish have separate skills.

lobehub/lobehubスター 83,504(GitHub 83,504 + cccskills 0)

実行スコア 未検証

インストール方法を見る

こんなときに便利

  • 新しい画面で解決する課題を定めたいとき
  • 曖昧な再設計依頼を整理したいとき
  • 業務の実態と画面構成を照らしたいとき
  • 仕様書に進む前に根拠と範囲を決めたいとき

日本語での紹介

できること

新しい画面や既存機能の再設計に取り組む前に、「何を作るか」と「なぜ必要か」を整理します。業務上の概念、状態、役割、各操作が生む出来事を手掛かりに、製品が実際に扱う事実を確認します。そのうえで、利用者が探すものや判断したいことに沿って情報のまとめ方を考え、観察できた事実と仮説を分けて記録します。画面の構造に根拠ある問題があるかを診断し、推奨案、判断に必要な証拠、影響する範囲や未決事項を整理できます。必要に応じて仕様書やプロトタイプへ進むための枠組みも示します。

こんなときに便利

依頼内容が「画面を分かりやすくしたい」のように曖昧なときや、既存の画面構成が業務の実態や利用者の仕事に合っているか見直したいときに向いています。実装や見た目の調整に入る前に、画面で解決する課題やスコープを関係者と揃えたい場合にも使えます。

使い方の例

  • 「この画面の再設計に向けて、業務上の事実と利用者の目的を整理して」
  • 「この曖昧な要望から、画面で解決する課題と未決事項をまとめて」
  • 「仕様書に進む前に、必要な機能と根拠を整理して」

注意点

プロトタイプや仕様書の作成は、依頼された場合、または不確実性を解消する必要がある場合に行います。画面監査や見た目の調整は別スキルの対象です。

この紹介文は、公開されている SKILL.md をもとに AI(OpenAI Codex)が作成しました。正確な仕様は下の原文を確認してください。

資料チェック

SKILL.md の記述から、注意が要る操作と導入の前提を AI が確認しました。点数は実際に動かした結果(実行検証)だけで付けています。

安全面送信・削除・コマンド実行などの扱いが明示されているか
A良好成果物は依頼時のみ作成し、読み取り作業では仮定と証拠を回答で示す。
導入のしやすさ必要なツールや API キーが少ないか、書かれているか
A良好外部サービスやキーの前提は示されず、調査範囲に応じて参照資料を読む。

点数には入れていません。 2026年10月26日 時点で AI(OpenAI Codex)が判定しました。目安なので、入れる前に原文も確認してください。

評価が違うと思ったら、見直しを依頼する

どの項目が、なぜ違うと思うかを書いてください。ログインは不要です。内容を SKILL.md と照らし合わせて評価を作り直し、この欄に反映します。

このフォームは reCAPTCHA で保護されており、Google のプライバシーポリシーと利用規約が適用されます。

含まれるファイル(7)

  • SKILL.md10.1 KB
  • references/canon.md4.4 KB
  • references/layer-model.md7.3 KB
  • references/pattern-base.md20.5 KB
  • references/trace-schema.md7.6 KB
  • references/worked-example.md7.4 KB
  • templates/design-spec.md3.4 KB

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

Product Design

Decide what to build and why before arguing about spacing.

Two rules are non-negotiable:

Never design from the surface. Establish what the business actually models first.

Never turn the business model into the information architecture. The domain constrains what the surface may claim; the user's retrieval and decision task determines how the surface is organized. (P-14)

This skill handles product meaning first. It may hand a grounded frame to ux or design-prototype, but discovery does not require implementation or a prototype. Strip out every framework, table and component name: if no product insight remains, the finding belongs in an engineering skill.

Relationship to other skills

SkillQuestionWhen
product-designWhat should this surface be, and why?Before or during framing
uxHow should the interaction behave and feel?While designing or building
ux-auditDoes the built surface honor those rules?After it exists
design-prototypeHow can a materialized interaction be tested?When a prototype is useful

Select the smallest run mode

ModeFinish line
DiscoverEvidence map, business model, user-model hypotheses and structural diagnosis
FrameDiscover + view model, information architecture, scope and open decisions
MaterializeFrame + a requested spec and/or prototype

Do not create or modify artifacts unless the user asked for a design artifact, prototype or repository change.

For a substantial run, read references/pattern-base.md and references/layer-model.md in full. For a narrow question, inspect only the relevant patterns and state what scope was checked.

Step 1 — Ground the business model

Establish what is true before diagnosing the surface. For broad repositories, parallelize independent evidence areas when delegation is available and useful; the primary agent remains responsible for reconciling contradictions.

Produce:

  • Concepts, roles and states, including variants the current surface hides (P-04).
  • Who produces the terminal business fact and what closes the lifecycle (P-12).
  • What each state obliges someone to do (P-01).
  • What business event each action produces (P-02).
  • Concepts the business does not have (P-06).
  • Evidence sources, contradictions and confidence.

Treat domain types and state machines as strong evidence, not the sole source of truth. Check relevant service behavior, permissions, policy, production facts and user evidence when available. Code can be stale, accidental or incomplete.

Never proceed from the team's assumed model of the product. Treat it as a hypothesis until checked against domain and user evidence.

Step 2 — Frame the user's view model

Grounding constrains what the product may claim; it does not determine how a person should see it. Separate observed user evidence from design hypotheses:

  • Circumstance and job — “When I open this, I need to …”.
  • Lookup objects — stable things the user scans, compares or inspects.
  • Attached proof — what verifies each object without reconstructing joins.
  • First scan — the 2–4 questions answered without a click.
  • Secondary dimensions — chronology, provenance, runs and internal states; keep them as filters or drill-down unless the job is execution audit.
  • Evidence and confidence — mark claims as observed, reported or inferred; state how consequential assumptions can be validated.
ModelRole in design
Business/domain modelDefines truth, validity, completeness and red lines
User view modelDefines grouping, ordering, labels and default expansion
Execution modelSupplies provenance and audit detail; never gets the page for free

Do not proceed while proposed top-level sections are merely domain or execution nouns such as runs, reports, evidence versions or table names. Rewrite them in the objects the user is trying to find (P-14).

Step 3 — Diagnose the structural error

Name something wrong regardless of taste, for example:

  • A decision inbox exposes only errors, so it reads as an error log (P-04).
  • A button promises a business event that does not exist (P-05).
  • One page is both triage desk and reading room, and fails at both (P-07).

If no structural error can be supported by evidence, report that instead of manufacturing a diagnosis.

Step 4 — Align decisions by dependency

Surface only decisions that change the shape of the answer. For each, give a recommendation, evidence and consequence. Resolve upstream decisions before the downstream ones they constrain.

Ask a blocking question separately when its answer would materially change the work; group independent decisions in one memo. When the user authorizes autonomous progress, proceed with the recommended default and label the assumption. Never ask the user for something available through grounding.

For review, approval or acceptance surfaces, establish first whether the system or a human decision closes the lifecycle (P-12).

Step 5 — Prototype when it resolves uncertainty

Use design-prototype only when the user requests a prototype or interaction, density or hierarchy cannot be resolved honestly in a written frame. This belongs to Materialize mode.

  • Use plausible data and include empty, blocked and at-scale states.
  • Tag anything unsupported by the business with NEW on the mock.
  • Treat corrections as evidence. They become Pattern Base candidates only when they generalize beyond the current surface.

Step 6 — Scope honestly

BucketMeaning
✅ Already modeled and exposedRearranging an existing capability
⚠️ Modeled, not exposedLower domain risk; engineering cost still needs validation
❌ Not modeledRequires domain expansion and explicit cost/risk assessment

Prefer a coherent ✅ + ⚠️ slice when it solves a complete user job. Do not ship an incomplete or misleading slice merely because its concepts already exist. A ❌ capability may be the right first investment when required for value, safety or semantic completeness (P-10).

Name every ❌ item and its likely cost drivers in the spec (P-11). Do not silently drop it, but do not pretend its cost can be inferred from the domain model alone.

Close — record coverage and propose learning

Close at the level authorized by the user:

  1. If producing a spec, include the reality-check log from references/trace-schema.md. For read-only work, report important assumptions and evidence in the response instead of writing.
  2. Compare unexpected findings with references/canon.md and propose a Pattern Base candidate only when the lesson is general.
  3. Append to references/pattern-base.md only when repository edits are authorized and the candidate is deduplicated and reviewable.
  4. Record the coverage signal: sources and lifecycle areas checked, unavailable evidence, remaining low-confidence claims, and whether a new gap was found.

Zero new gaps means only that none were found within the inspected scope. It does not prove that the implementation or mental model is exhausted.

Deliverables

ArtifactWhenTemplate/location
Design specRequested in Materialize modetemplates/design-spec.md; use a user-specified path or ask
Interactive prototypeRequested or needed to resolve uncertaintyBeside the spec, via design-prototype
Reality-check logInside a produced specreferences/trace-schema.md
Pattern candidateA general, unexpected lesson emergesIn the spec/response; append only after review and authorization

Anti-patterns

  • Designing from a screenshot or treating the domain model as the sitemap.
  • Reading a state or action by its label rather than its obligation or event.
  • Inferring the user model from code and presenting it as observed truth.
  • Treating a missing concept as a layout problem.
  • Asking questions the available evidence already answers.
  • Treating concept existence as an engineering cost estimate.
  • Automatically prototyping, writing a spec or mutating the Pattern Base.
  • Adding local corrections or engineering findings to shared product guidance.

For a complete example, read references/worked-example.md.

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

コメント

ログインなしで書き込めます。使ってみた感想、質問、動かなかった環境などを気軽にどうぞ。

まだコメントはありません。最初のコメントを書いてみませんか。

送信するとすぐに公開されます。メールアドレスや電話番号などの個人情報は書かないでください。URL は 2 つまでです。

0 / 1000 文字

このフォームは reCAPTCHA で保護されており、Google のプライバシーポリシーと利用規約が適用されます。

同じリポジトリのスキル

acceptance

無料概要あり

実際の製品を操作して、利用者が確認できる動作証拠を集め、検証計画に沿った受け入れレポートとして公開するスキルです。

  • 変更後の製品動作を実地で検証したいとき
  • 画面キャプチャなどの証拠を集めたいとき
  • 検証計画とレポートを作成したいとき
lobehub/lobehub8.4万2026年10月26日 更新

add-model-provider

無料概要あり

LobeHubにAIモデルプロバイダーを追加し、実行時連携からモデル表示、設定、ブランド表記、文書化、動作確認まで進めるスキルです。

  • 新しいAIモデルプロバイダーを追加したいとき
  • プロバイダーの設定手順や説明文を更新したいとき
  • 既存プロバイダーへのモデル追加要件を見極めたいとき
lobehub/lobehub8.4万2026年10月26日 更新

add-setting-env

無料概要あり

ユーザー設定の初期値をサーバー側の環境変数で切り替えるため、型定義や設定の組み立て、ユーザーストアへの反映、環境変数の例と説明書きを追加する手順です。

  • 設定の初期値を環境変数で変えたいとき
  • 設定項目をサーバー設定に追加したいとき
  • 環境変数の例と説明を更新したいとき
lobehub/lobehub8.4万2026年10月26日 更新

agent-runtime-hooks

無料概要あり

エージェント実行中の各段階をフックで監視し、ツール呼び出しの模擬・制御や人の承認、圧縮、サブエージェント処理に介入する仕組みを扱います。

  • エージェントの実行状況を記録したいとき
  • ツール結果をテスト用に模擬したいとき
  • Webhookでツール実行を許可・拒否したいとき
lobehub/lobehub8.4万2026年10月26日 更新

agent-signal

無料概要あり

イベントを起点にエージェントのバックグラウンド処理を組み立て、ソース・シグナル・アクション・ポリシーの役割分担や非同期連携を実装するためのスキルです。

  • イベント起点の処理を追加したいとき
  • バックグラウンド処理を非同期化したいとき
  • 重複実行を防ぐ仕組みを整えたいとき
lobehub/lobehub8.4万2026年10月26日 更新

agent-testing-bot

無料概要あり

DiscordやSlackなどの実際のチャットアプリでボットにメッセージを送り、応答を画面で確認する受け入れテストを行うスキルです。

  • 実際のDiscordでボット応答を確かめたいとき
  • SlackやTelegramの会話経路をテストしたいとき
  • macOSアプリ上の操作結果を画面で記録したいとき
lobehub/lobehub8.4万2026年10月26日 更新

lobehub のスキルをすべて見る

このスキルの問題を報告する