FreePublished on 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.

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

ax-inc-dev/claude-cursor-orchestration3 stars(GitHub 3 + cccskills 0)

Works withFigma

Run score Not tested

See how to install

Files included (1)

SKILL.md6.0 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

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・ブランド制約があればそちらを優先（ユーザーに一言確認）。
優先順位（矛盾時）
1. ユーザー明示
2. プロジェクト既存の docs/site/* または docs/ux-design/*（承認済み設計）
3. ルート／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 で確認した

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.

More skills from this repository

b2b-site-strategy-and-ia

Free

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

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

ax-inc-dev/claude-cursor-orchestration3Updated Apr 25, 2026

babysit

Free

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

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

ax-inc-dev/claude-cursor-orchestration3Updated Apr 25, 2026

biz-presentation-engine

Free

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

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

ax-inc-dev/claude-cursor-orchestration3Updated Apr 25, 2026

brainstorming

Free

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.

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

ax-inc-dev/claude-cursor-orchestration3Updated Apr 25, 2026

canvas

Free

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.

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

ax-inc-dev/claude-cursor-orchestration3Updated Apr 25, 2026

create-cursor-agent

Free

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.

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

ax-inc-dev/claude-cursor-orchestration3Updated Apr 25, 2026

See all skills by ax-inc-dev

Report a problem with this skill

Install

Install with a command

npx skills add https://github.com/ax-inc-dev/claude-cursor-orchestration --skill design-md-reference

Paste it into your terminal and run it (requires Node.js). You can choose which agents to install it for, such as Claude Code or Codex.

Ask your agent

Please install the following Agent Skill.
https://github.com/ax-inc-dev/claude-cursor-orchestration/tree/main/cursor-config/skills/design-md-reference

First review SKILL.md and the bundled files and confirm there is nothing suspicious (such as sending data externally or reading credentials). Then place it in ~/.claude/skills/design-md-reference/ for Claude Code, or ~/.agents/skills/design-md-reference/ for Codex.

Send this text to Claude Code or Codex as is. It checks the contents before installing.

View source on GitHub

Repository: ax-inc-dev/claude-cursor-orchestration
Stars: 3
Forks: 1
Category: Design
License: MIT
Original language: Japanese
Last updated: Apr 25, 2026

A skill is a set of instructions and scripts for an agent. cccskills does not guarantee that skills are safe. Review the contents before you install.