jpskill.com
📦 その他 コミュニティ 🟡 少し慣れが必要 👤 幅広いユーザー

📦 Designシステム

design-system

デザインシステムを生成・監査し、視覚的な一貫性を確認したり、スタイル関連のプルリクエストをレビューするSkill。

⚡ ⏱ 手作業のあれこれ 1日 → 1時間

📺 まず動画で見る(YouTube)

▶ 【Claude Code完全入門】誰でも使える/Skills活用法/経営者こそ使うべき ↗

※ jpskill.com 編集部が参考用に選んだ動画です。動画の内容と Skill の挙動は厳密には一致しないことがあります。

📜 元の英語説明(参考)

使用此技能生成或审计设计系统，检查视觉一致性，并审查涉及样式的PR。

🇯🇵 日本人クリエイター向け解説

一言でいうと

デザインシステムを生成・監査し、視覚的な一貫性を確認したり、スタイル関連のプルリクエストをレビューするSkill。

※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。

⚡ おすすめ: コマンド1行でインストール(60秒)

下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。

🍎 Mac / 🐧 Linux 
mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o design-system.zip https://jpskill.com/download/712.zip && unzip -o design-system.zip && rm design-system.zip
🪟 Windows (PowerShell) 
$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/712.zip -OutFile "$d\design-system.zip"; Expand-Archive "$d\design-system.zip" -DestinationPath $d -Force; ri "$d\design-system.zip"

完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。

💾 手動でダウンロードしたい(コマンドが難しい人向け)
  1. 1. 下の青いボタンを押して design-system.zip をダウンロード
  2. 2. ZIPファイルをダブルクリックで解凍 → design-system フォルダができる
  3. 3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
  4. 4. Claude Code を再起動
⬇ .zip でダウンロード(推奨) ⬇ .skill 形式(上級者用) 元のソース ↗

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

  1. 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
  2. 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
  3. 3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
    • · macOS / Linux: ~/.claude/skills/
    • · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →
最終更新
2026-05-17
取得日時
2026-05-17
同梱ファイル
1

💬 こう話しかけるだけ — サンプルプロンプト

  • › Design System の使い方を教えて
  • › Design System で何ができるか具体例で見せて
  • › Design System を初めて使う人向けにステップを案内して

これをClaude Code に貼るだけで、このSkillが自動発動します。

📖 Claude が読む原文 SKILL.md(中身を展開)

この本文は AI(Claude)が読むための原文(英語または中国語)です。日本語訳は順次追加中。

设计系统 — 生成与审查视觉系统

使用场景

  • 启动需要设计系统的新项目
  • 审查现有代码库的视觉一致性
  • 在重新设计前——了解现有状况
  • 当界面看起来"不对劲"但无法定位原因时
  • 审查涉及样式修改的PR

工作原理

模式1：生成设计系统

分析代码库并生成统一的设计系统：

1. 扫描 CSS/Tailwind/styled-components 以查找现有模式
2. 提取：颜色、排版、间距、边框圆角、阴影、断点
3. 研究 3 个竞品网站以获取灵感（通过浏览器 MCP）
4. 提出一套设计令牌（JSON + CSS 自定义属性）
5. 生成 DESIGN.md，说明每个决策的理由
6. 创建一个交互式 HTML 预览页面（自包含，无依赖）

输出：DESIGN.md + design-tokens.json + design-preview.html

模式2：视觉审查

从10个维度对界面进行评分（每项0-10分）：

1. 色彩一致性 — 你使用的是自己的调色板还是随机的十六进制值？
2. 排版层级 — 清晰的 h1 > h2 > h3 > 正文 > 说明文字？
3. 间距节奏 — 一致的尺度（4px/8px/16px）还是随意设置？
4. 组件一致性 — 相似的元素看起来是否相似？
5. 响应式行为 — 在断点处流畅还是混乱？
6. 深色模式 — 完整实现还是半途而废？
7. 动画 — 有目的性还是多余？
8. 无障碍性 — 对比度、焦点状态、触摸目标
9. 信息密度 — 杂乱还是整洁？
10. 细节打磨 — 悬停状态、过渡效果、加载状态、空状态

每个维度都会获得评分、具体示例以及包含精确文件:行号的修复方案。

模式3：AI生成内容检测

识别通用的AI生成设计模式：

- 到处滥用渐变效果
- 默认采用紫蓝配色
- 毫无意义的"玻璃拟态"卡片
- 不该圆角的地方强行圆角
- 滚动时过度动画效果
- 居中文字搭配默认渐变的通用英雄区
- 毫无个性的无衬线字体堆叠

示例

为SaaS应用生成设计系统：

/design-system generate --style minimal --palette earth-tones

审查现有界面：

/design-system audit --url http://localhost:3000 --pages / /pricing /docs

检测AI生成内容：

/design-system slop-check