joeseesun/qiaomu-design

これは何？

主な機能

• 01実装前に、互いに異なる4つのスタイル案をインタラクティブなモックアップとして生成します。
• 02AIでよく使われる紫のグラデーション、Inter、中央揃えのヒーローレイアウトなどを禁止し、ありきたりなデザインを防ぎます。
• 03システムフォントスタックやCJKのスペーシングルールなど、中国語のタイポグラフィに関する指針を提供します。
• 04実在するWebサイトをもとにした、58件のDESIGN.mdデザインシステムリファレンスを収録しています。
• 05既存ページを全面的に書き直さずに監査・改善できるpolishモードを備えています。
• 06アクセシビリティ、フォーム、破壊的操作のガードを含む事前チェックリストを実行します。

ユースケース

• 新しいプロダクトのランディングページを作り始める際、コードを書く前にビジュアルの方向性を比較する。
• ありきたりな印象の既存ダッシュボードやページを、全面的に再設計せずに改善する。
• LinearやStripeなど、既知のプロダクトの雰囲気に合わせるようAIアシスタントに依頼する。
• リファレンスを活用したアプローチで、開発者向けツールのデザインシステムを構築する。

クイックスタート

1. 1

   npxでスキルをインストールします

   npx skills add joeseesun/qiaomu-design
2. 2

   対応クライアント（CodexまたはClaude Code）で、たとえば製品のランディングページをデザインするよう依頼します

使う前に知っておきたいこと

• !これは対応クライアント向けのAgent Skillであり、単体で動作するソフトウェアではありません。そのため、結果は実行するエージェントとプロジェクトのコンテキストによって異なります。
• !DESIGN.mdのリファレンスライブラリは公開サイトをもとに要点をまとめたもので、各社による推奨や支持を意味するものではありません。
• !インタラクティブなプレビューでの選択にはローカルのプレビューサーバーが必要です。サーバーがない場合は、チャットでの返信に切り替わります。

収録されている特集

トピック

よくある質問

qiaomu-design とは？

Claude Codeなどのクライアント向けに、ビジュアルな方向性選択機能と実在サイトを参考にした58件のデザインシステムを備え、AI生成UIがありきたりなテンプレートに流れるのを防ぐ、方針重視のAgent Skillです。 qiaomu-designは、AIコーディングアシスタントにデザインワークフローを追加するAgent Skillです。インターフェースのデザインや再設計を依頼すると、まず要件を分析し、ローカルプレビューで互いに異なる4つの方向性のモックアップを表示します。ユーザーが1つ選んでから実装を開始します。選ばれた方向性に沿ってプロジェクトのファイルを作成し、アクセシビリティ、フォーム、フォーカス処理、中国語のタイポグラフィを含む納品前チェックリストで確認します。

qiaomu-design は無料で使えますか？ライセンスは？

qiaomu-design は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

qiaomu-design は今もメンテナンスされていますか？

活発にメンテナンス中。qiaomu-design の最終コミットは 2026年10月13日 です。

qiaomu-design は何に使えますか？

新しいプロダクトのランディングページを作り始める際、コードを書く前にビジュアルの方向性を比較する。 ありきたりな印象の既存ダッシュボードやページを、全面的に再設計せずに改善する。 LinearやStripeなど、既知のプロダクトの雰囲気に合わせるようAIアシスタントに依頼する。 リファレンスを活用したアプローチで、開発者向けツールのデザインシステムを構築する。

qiaomu-design のインストール方法は？

npxでスキルをインストールします: npx skills add joeseesun/qiaomu-design 対応クライアント（CodexまたはClaude Code）で、たとえば製品のランディングページをデザインするよう依頼します

qiaomu-design はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/joeseesun/qiaomu-design