Skills · Claude Code · Agent Skills

手順のあるデザイン。承認されたワイヤーフレームが先、コードは後。

Name: schematize-design
Author: schematize

ビジュアル参照から wireframe.json、wireframe.svg、承認、コード、監査までの固定パイプライン。見た目と審美眼はこのスキル、フロントエンド工学は schematize-web が担当します。

v0.2.0Disciplina · Design de UIgithub.com/schematizeme/skill-design

メンテナー Lucas Andrade

schematize-design · v0.2.0bash

$ schematize install design

GitHub →スキル (.zip) をダウンロード/design-help · github.com/schematizeme/schematize-cli

譲れない最低基準

「速く進めるため」に外すことはありません。全項目はスキル本体に記載しています。

コード前にワイヤーフレームを承認

JSON が唯一の正で、SVG は図です。ページ全体では構築前に止まってスタックを尋ね、ビルダーは SVG ではなく JSON を読みます。

生成メディアは Claude に任せない

Codex と Gemini を検出してどちらを使うか尋ね、schematize-models に委任します。どちらもない場合は率直に伝え、ストック画像や顧客の素材を提案します。

アイコンは SVG で、絵文字は使わない

インライン SVG(22 シンボルのスプライト付き)を使います。図表のような構造的 SVG はコードですが、具象的なイラストは生成ビジュアル扱いです。

コントラストと DOM は推測せず計測

コントラスト比、スケール、所要時間は参照ファイルと scripts/ の監査ツール(意図的に失敗させるテスト付き)から取ります。記憶には頼りません。

AI 量産感を避ける禁止事項

反証付きで、情報源間の矛盾も解消済みの統一された禁止リストが、ジェネレーター特有の画一的な見た目を防ぎます。

作業を左右することだけを質問

モード(説得・操作・閲読・体験)と創作の度合いを見極め、残りは自分で決めて meta.suposicoes に記録します。引数なしのコマンドは質問するだけで、勝手に実行しません。

コマンド

.claude/commands/ にインストールされます。いつでも /design-help を実行できます。

/design-animate意図のある動き。印象的な瞬間を一つ、GSAP は必要な時だけ。引数: momento, delight, overdrive, revisar。

/design-auditステップ 5: 完成したページのコントラスト、レンダリング後の DOM、仮画像、アンチパターンを Before / After / Why の表で監査します。

/design-buildステップ 4: 承認済みの wireframe.json からページを構築します。出力は単一 HTML、Next.js、Shopify Liquid セクションから選べます。

/design-ccコンテキスト圧縮: アーカイブにハンドオフを書き込み、/compact を実行します。

/design-claude常時有効のデザイン用 CLAUDE.md(基準、メディア規則、schematize-web との境界)をリポジトリのルートに作成または統合します。

/design-critiqueヒューリスティックによる UX・UI の批評(階層、明快さ、認知負荷、一貫性、アクセシビリティ)。指摘は優先順位付きで Before / After / Why の表にまとめます。

/design-handoffハンドオフ(context.md + checklist.md)をアーカイブに生成します。圧縮はしません。

/design-hardenUI を本番投入可能にします。状態、i18n、オンボーディング、画面適応、UI パフォーマンス。引数: estados, i18n, onboard, adapt, optimize。

/design-helpデザインスキルのコマンドメニューを表示します。一覧のみで何も実行しません。

/design-load規範の全文を強制的に読み込み、このセッションで適用します。

/design-polish公開前の最終品質チェック。品質基準、アニメーション、禁止事項、チェックリストを一回でまとめて確認します。

/design-shape構築の前に UX と UI を計画します(目的、対象、コンテンツ、フロー、状態)。init・document・extract で PRODUCT.md、DESIGN.md、トークンを記録します。

/design-tuneアイデンティティを保ったまま、一つの軸を調整します。引数: bolder, quieter, distill, colorize, typeset, layout, clarify。

/design-variants要素のバリエーションを並べて生成し、選べるようにします。generate(自己完結ファイル)または live(127.0.0.1 のローカルサーバー)。

/design-visual完成したページの視覚レビュー。5 種類の幅で DOM を計測し、スクリーンショットを撮って、まだ改善できる点を指摘します。

/design-wireステップ 0〜3: ビジュアル参照(画像、URL、ブリーフ)を読み、カレントディレクトリに ./wireframe.json と ./wireframe.svg を生成して、スタックを尋ねるところで止まります。

AIエージェント向け

人手を介さずにインストールできます。メタデータは llms.txt にあります。

実行: git clone https://github.com/schematizeme/skill-design.git && ./skill-design/install.sh
または次をダウンロードして .claude/skills/ に展開: https://github.com/schematizeme/skill-design/releases/latest/download/skill-design.zip
assets/CLAUDE.md をリポジトリのルートにコピーします(常時有効のルール)。
/design-help で動作を確認します。

インストールしたくない？

完全な規約を読み、そのままプロジェクトにコピーできます。あるいはスキルをインストールすれば、エージェントが自動で適用します。

GitHub →パック