본문으로 건너뛰기
cccskills
무료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 URLhttps://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

各プリセット（awesome-design-md）には通常:

ファイル用途
DESIGN.mdエージェントが Read する正本（9 セクション構成が多い）
preview.html / preview-dark.htmlスウォッチ・タイポのビジュアル確認（人間・ブラウザ MCP）

Instructions

  1. 正本の場所を決める

    • リポルートの DESIGN.md か、docs/design/DESIGN.md など 1 箇所に固定。散在させない。
    • ユーザーが「このサイトのトーン」と言ったら、awesome-design-md 内の 該当ディレクトリから DESIGN.md と preview をコピー。

  2. 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）を読み、衝突するルールを列挙する。

  3. トークンを実装へ写す

    • 色・フォント・シャドウは CSS 変数または Tailwind theme に落とし、コンポーネントは shadcn の variant / cn() で寄せる。
    • DESIGN.md の数値は 推奨デフォルトとして使い、プロジェクトの a11y・ブランド制約があればそちらを優先（ユーザーに一言確認）。

  4. 優先順位（矛盾時）

    1. ユーザー明示
    2. プロジェクト既存の docs/site/* または docs/ux-design/*（承認済み設計）
    3. ルート／docs/design/ の DESIGN.md
    • 食い違いは PR か返信で「どちらを正にするか」1 行だけ確認。

  5. プレビュー

    • preview.html がある場合、必要ならブラウザで開き、実装後の画面と セマンティック対応（Primary / Surface / 見出し階層）を突き合わせる。スクリーンショット比較は任意。

  6. 著作権・ブランド

    • 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 で確認した

리뷰

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

댓글

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

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

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

0 / 1,000자

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

같은 저장소의 스킬

b2b-site-strategy-and-ia

무료

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일 업데이트

biz-presentation-engine

무료

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

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

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

brainstorming

무료

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일 업데이트

create-cursor-agent

무료

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의 스킬 모두 보기

이 스킬의 문제 신고