본문으로 건너뛰기
cccskills
무료GitHub에 공개

user-first-product-design

アプリ・Web 製品のユーザーファースト設計の正本。目的・タスク・認知負荷・エラー・Accessibility を先に固定してから UI/Figma/実装に進む(全PJ共通)。

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

ax-inc-dev/claude-cursor-orchestration스타 3(GitHub 3 + cccskills 0)
연동 도구Figma

실행 점수 미검증

설치 방법 보기

포함된 파일(1)

  • SKILL.md3.9 KB

SKILL.md(원문)

설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.

User-First Product Design

When to Use

  • すべてのアプリケーション/プロダクト UI を触る前(Figma・コード・要件のいずれでも)
  • figma-mcp-design-orchestrator の Phase 0
  • 機能一覧だけ決まっていて 誰が何のために使うかが薄いときの再出発

フロントエンド実装との順序(全PJ)

顧客/ユーザーファーストで体験と画面の契約を先に決め、内部構造はその後。
コンポーネント設計・リポジトリのフォルダ構成・グローバル状態・API の振り分けを UI 設計より前に始めると、見た目・タスク・a11y が後付けになり品質が落ちやすい。

  • アプリ系: 本 SKILL → product-ui-ux-design(および /product-ui-ux-designer)で docs/ux-design/ 等を埋めてから実装。
  • マーケサイト系: site-build-orchestrator と /site-design-planner で docs/site/* を埋め、計画承認 後に /site-frontend-implementer。
  • トークンが DESIGN.md で固定されている場合: design-md-reference を併読。

グローバルルールの単一記述: ~/.cursor/rules/global-agent-workflow.mdc(「フロントエンド実装の順序」)、人間向け要約: ~/.cursor/CURSOR_GLOBAL_RULES.md。

原則(優先順)

  1. ユーザーの成果(Outcome) が先。機能や画面数は後。
  2. 主要タスク(理想は 1 セッション 1 主目的)を文章化してからワイヤーやフレームを作る。
  3. 圧倒的に使いやすいかは「学習コストが低いか・迷わないか・ミスから戻れるか・待たされないか」で測る。主観「かっこいい」だけにしない。
  4. アプリの目的(事業目的・成功指標)とユーザーの目的の 接点 を明示する。一致していなければ設計を疑う。
  5. Accessibility:色だけに頼らない情報、focus / キーボード、コントラスト、動き(prefers-reduced-motion)を後回しにしない。

設計前チェックリスト(出力前に自分で埋める)

問い答え
主ユーザーは誰か(1 手で書けるか)
その人が「今日ここで達成したいこと」は
失敗・離脱が一番コスト高いのはどの操作か
初見が 3 秒で理解すべきことは
絶対に誤操作させたくない操作と、その防止
オフライン・遅延・権限不足のときの振る舞い

成果物(リポに残すなら)

プロジェクトルートに docs/design/ を推奨(テンプレは ~/.cursor/templates/docs-design/)。

  • 誰の・何のための UI かを一文で
  • タスクフロー(箇条書きでよい)
  • 非対象(やらないこと/後回し)

よくあるアンチパターン

  • スクリーン一覧から入る(タスクが見えない)
  • 全ロールに同じ画面上詰め込み(意思決定者と実行者を混在)
  • エラーを「Something went wrong」で丸める
  • デザインシステムの見た目だけ真似して 情報の優先順位が崩れる

接続

参考(外部)

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

댓글

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

같은 저장소의 스킬

B2B サイトの戦略・情報設計。価値提案・メッセージマップ・ジャーニー導線・意思決定マップ・信頼棚卸・トーン/禁止表現まで一気通貫でテンプレ化する。実装前フェーズ専用(全PJ共通)。

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

ax-inc-dev/claude-cursor-orchestration32026년 4월 25일 업데이트

babysit

무료

Keep a PR merge-ready by triaging comments, resolving clear conflicts, and fixing CI in a loop.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

ax-inc-dev/claude-cursor-orchestration32026년 4월 25일 업데이트

法人向けHTMLプレゼンスライドの実装エンジン。Claude Codeから指示書(アウトライン+テンプレート指定+カラー+コンテンツ)を受け取り、単一HTMLファイルとして実装する。43種テンプレート+14種アニメーション。トリガー:プレゼン実装、スライドHTML生成、提案資料コーディング。

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

ax-inc-dev/claude-cursor-orchestration32026년 4월 25일 업데이트

You MUST use this before any creative work - creating features, building components, adding functionality, or modifying behavior. Explores user intent, requirements and design before implementation.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

ax-inc-dev/claude-cursor-orchestration32026년 4월 25일 업데이트

canvas

무료

A Cursor Canvas is a live React app that the user can open beside the chat. You MUST use a canvas when the agent produces a standalone analytical artifact — quantitative analyses, billing investigations, security audits, architecture reviews, data-heavy content, timelines, charts, tables, interactive explorations, repeatable tools, or any response that benefits from visual layout. Especially prefer a canvas when presenting results from MCP tools (Datadog, Databricks, Linear, Sentry, Slack, etc.) where the data is the deliverable — render it in a rich canvas rather than dumping it into a markdown table or code block. If you catch yourself about to write a markdown table, stop and use a canvas instead. You MUST also read this skill whenever you create, edit, or debug any .canvas.tsx file.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

ax-inc-dev/claude-cursor-orchestration32026년 4월 25일 업데이트

Authors Cursor Rules (.cursor/rules/*.mdc) and custom Subagents (.cursor/agents/*.md or ~/.cursor/agents). Use when creating or refactoring rules/subagents, splitting large rules, choosing subagent vs skill, setting model/readonly/background, or replacing repeated delegation prompts.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

ax-inc-dev/claude-cursor-orchestration32026년 4월 25일 업데이트

ax-inc-dev의 스킬 모두 보기

이 스킬의 문제 신고