B2B サイトの戦略・情報設計。価値提案・メッセージマップ・ジャーニー導線・意思決定マップ・信頼棚卸・トーン/禁止表現まで一気通貫でテンプレ化する。実装前フェーズ専用（全PJ共通）。
ax-inc-dev/claude-cursor-orchestration32026年4月25日 更新
無料GitHub で公開
design-md-reference
Uses Google Stitch–format DESIGN.md as the UI contract: VoltAgent awesome-design-md (https://github.com/VoltAgent/awesome-design-md.git) presets or custom DESIGN.md, token mapping to Tailwind/shadcn, conflict rules vs docs/site or docs/ux-design. Use when the user clones or copies from awesome-design-md, adds DESIGN.md, picks a preset site, or wants strong agent-readable UI reference without Figma. Always Read this SKILL before reading preset DESIGN.md files per global-agent-workflow.mdc.
日本語の概要は準備中です。原文の説明を表示しています。
ax-inc-dev/claude-cursor-orchestrationスター 3(GitHub 3 + cccskills 0)
連携ツールFigma
実行スコア 未検証
インストール方法を見る含まれるファイル（1）
- SKILL.md6.0 KB
SKILL.md（原文）
インストールする前に、エージェントに与えられる指示の中身を確認できます。
DESIGN.md リファレンス（Stitch 形式・エージェント向け）
When to Use
- ユーザーが DESIGN.md をリポに置いた、または VoltAgent awesome-design-md から特定サイトの一式を clone / コピーした
- Figma が無い／未完でも、タイポ・色・余白・Elevation をエージェント可読な平面テキストで固定したい
- 実装前に ビジュアル基準（ライト/ダーク）を
preview.htmlで確認したい
グローバルルール ~/.cursor/rules/global-agent-workflow.mdc（技能表の DESIGN.md / awesome-design-md 行）および ~/.cursor/CURSOR_GLOBAL_RULES.md（DESIGN.md・awesome-design-md 節）でも本 SKILL が必読として指されている。
awesome-design-md リポジトリ（Git 正本）
| 項目 | 値 |
|---|---|
| clone URL | https://github.com/VoltAgent/awesome-design-md.git |
| プリセットのパス | リポジトリ内 design-md/<サイト名>/ に DESIGN.md、preview.html、preview-dark.html など |
| 推奨ローカル置き場（例） | ~/.cursor/third-party/awesome-design-md（初回だけ git clone。更新は git pull --ff-only） |
| 作業プロジェクトでの使い方 | 選んだサイトフォルダから DESIGN.md（＋任意で preview） を docs/design/ またはリポルートへコピー。エージェントは 作業リポ上のパスを主に Read（clone 直参照でも可だが、チーム共有ならコピーを推奨） |
個々の design-md/*/DESIGN.md はスキルファイルではない。エージェント向けの手順と優先ルールは 本 SKILL.md にあり、各プリセットは データ（Read 対象の Markdown） として扱う。
What DESIGN.md Is
- Google Stitch — DESIGN.md 概要
- フォーマット仕様
- AGENTS.md がビルド手順、DESIGN.md が見た目・トーンの契約、という役割分け（リポに両方あれば両方
Read）
各プリセット（awesome-design-md）には通常:
| ファイル | 用途 |
|---|---|
DESIGN.md | エージェントが Read する正本（9 セクション構成が多い） |
preview.html / preview-dark.html | スウォッチ・タイポのビジュアル確認（人間・ブラウザ MCP） |
Instructions
-
正本の場所を決める
- リポルートの
DESIGN.mdか、docs/design/DESIGN.mdなど 1 箇所に固定。散在させない。 - ユーザーが「このサイトのトーン」と言ったら、awesome-design-md 内の 該当ディレクトリから
DESIGN.mdと preview をコピー。
- リポルートの
-
Readの順- まず DESIGN.md 全文（セクション構造: Visual Theme / Color / Typography / Components / Layout / Elevation / Do-Don'ts / Responsive / Agent Prompt Guide）。
- 既存の
tailwind-product-ui-conventionsとshadcn-motion-ui-brief（サイト系ならdocs/site/ui-brief.md）を読み、衝突するルールを列挙する。
-
トークンを実装へ写す
- 色・フォント・シャドウは CSS 変数または Tailwind theme に落とし、コンポーネントは shadcn の variant / cn() で寄せる。
- DESIGN.md の数値は 推奨デフォルトとして使い、プロジェクトの a11y・ブランド制約があればそちらを優先（ユーザーに一言確認）。
-
優先順位（矛盾時）
- ユーザー明示
- プロジェクト既存の
docs/site/*またはdocs/ux-design/*（承認済み設計） - ルート／
docs/design/の DESIGN.md
- 食い違いは PR か返信で「どちらを正にするか」1 行だけ確認。
-
プレビュー
preview.htmlがある場合、必要ならブラウザで開き、実装後の画面と セマンティック対応（Primary / Surface / 見出し階層）を突き合わせる。スクリーンショット比較は任意。
-
著作権・ブランド
- awesome-design-md は公開 UI からの抽出で インスピレーション用。そのままロゴ・固有名を製品に流用しない。社内ブランドがある場合は DESIGN.md を 自社トークンに差し替えた版を正とする。
Relationship to Other Skills
- サイト制作:
site-build-orchestrator/ Phase 2 のui-brief.mdと併用可。DESIGN.md を トークン正本、ui-briefを プロジェクト固有コピー・CTA にするとぶつかりにくい。 - Figma 派:
figma-mcp-design-orchestratorと両立。Figma 実装時は DESIGN.md を「フォールバック／モードボード」にしない。ユーザーがどちらを主にするか決める。 - Tailwind:
tailwind-product-ui-conventionsを必ず併読し、任意値乱発を避ける。
Checklist
-
DESIGN.mdのパスがプロジェクトで合意されている - Color / Typography / Elevation がコード側トークンに対応づけがある
- 既存
docs/siteまたはdocs/ux-designとの矛盾を解消した（またはユーザー確認済み） -
preview.htmlがある場合、主要サーフェスを一度は目視または MCP で確認した
レビュー
まだレビューはありません。使ってみた感想をお寄せください。
コメント
ログインなしで書き込めます。使ってみた感想、質問、動かなかった環境などを気軽にどうぞ。
まだコメントはありません。最初のコメントを書いてみませんか。
同じリポジトリのスキル
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日 更新