Communitygithub.com

jrco-dev/julio-antislop-design

ランディングページ、サイト、アプリインターフェース、ダッシュボード、ドキュメント、ポートフォリオを、デザインされたものに見えるように設計、構築、リファクタリング、またはレビューします。生成された典型的な見た目ではなく、本物のデザイン決定と個性を提供します。

julio-antislop-design とは?

このスキルは、AIエージェント(Claude Code、Cursor、Codexなど)向けに設計されたデザインスキルで、ウェブインターフェースが「AI生成っぽくない」、プロフェッショナルでプレミアムな印象になるよう導きます。主題から引き出したアイデア、実在するリファレンス、平均からの逸脱、アクセシビリティ・誠実性・パフォーマンスの下限設定を重視します。ランディングページ、アプリUI、ダッシュボード、ドキュメント、ポートフォリオなど、あらゆる画面に適用可能で、タスクが「デザイン」と明示されていなくても、外観やレイアウト、タイポグラフィ、色、動き、感触を変更する場合はこのスキルを使用します。12ステップの完全パスと、軽微な変更のための簡易パスを提供し、トークンベースの設計、アクセシビリティ(WCAG 2.2 AA)、誠実性(架空のコンテンツ禁止)、パフォーマンス(LCP ≤ 2.5s)を厳守します。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/jrco-dev/julio-antislop-design/tree/HEAD/skills/julio-antislop-design

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

julio-antislop-design は何をしますか?

生成されたページは、見てきたすべてのページの平均のように見える。間違っているものは何もなく、決定されたものも何もない。このスキルは、欠点を決定で置き換える。アイデアは主題から、方向性は実際のリファレンスと平均からの逸脱した抽選から、下限設定でアクセシビリティ、誠実性、パフォーマンスを保護し、納品前に確認する。tic(クセ)を取り除くだけでは不十分。空白でクリーンなページもまたticである。(references/originality.md)

1. パスの選択

リクエストパス
小規模リクエスト: コンポーネント、セクション、調整、修正、または「手早くやって」簡易 (§3)
新しいページ、新しいサイト、新しい画面、新しいシステム完全 (§4)
既存のもののリファクタリング完全、リファクタリングのバリエーション (references/redesign.md)
デザインのレビュー構築せずに references/critique.md のチェックリストと references/tells.md のリストを使用

2. モードの選択

すべてのルールは、訪問者がこの画面で達成すべきことに依存し、製品には依存しない。

モード訪問者が成功するとき…画面
説得訪問者が決定し行動するランディング、マーケティング、料金
操作訪問者がタスクを完了するアプリ、ダッシュボード、管理画面、設定
読む訪問者が理解するドキュメント、記事、ガイド、ヘルプ
体験訪問者が作品の中にいるポートフォリオ、ギャラリー、ショーケース

1つのリクエストに2つの画面がある場合: 各画面をそれぞれのモードで扱い、パレットとタイポグラフィは共有する。

ユーザーと共に進める

ユーザーを待たせてはいけない。早めに質問し、各質問に提案を添え、何か形になったらすぐに見せる。完全パスでは4回の打ち合わせ(ブリーフシート、最初の3画面、初回バージョン、納品)、それぞれに推奨提案を添える。その間、10アクション以上何も見せずに進めてはならない。詳細: references/intake.md、「リズム」。

3. 簡易パス

  1. DESIGN.mdとPRODUCT.mdが存在すれば読み、それらに従う。質問は最大1つ、事実がブロックしている場合のみ。
  2. 下限設定(§5)とモードのデフォルト欠点を適用する(references/defaults-by-mode.md)。すべては既存のトークンを通すか、トークンがない場合は小さな宣言されたスケールを使用する。
  3. node scripts/check-tokens.mjs <ファイル> と node scripts/check-render.mjs <ファイル> をエラー0で実行。キャプチャは390pxと1440pxで確認する。
  4. 3行のレポート: 変更内容、通過したチェック、実行できなかったもの。

完全なフレーミング、抽選、3つのヒーローは不要。リクエストが大きくなった場合(ページ全体など)は完全パスに移行する。

4. 完全パス、12ステップ

各ステップの詳細: references/process.md。ステップ1~8はコードの前に行う。

  1. プロジェクト、モード、実際に利用可能な画像を読む。
  2. 一度でフレーミングする: プロジェクト、好み(DESIGN.mdを満たすすべて)、素材。最大12の質問、その後承認されたブリーフシートを1度だけ作成。明示的な委任(「完全な自由裁量」)またはユーザー不在の場合のみ、好みの入力を省く。references/intake.md。
  3. 主題を棚卸しする: クライアント固有の要素を8~12個。現実的で、提示可能で、欠落しているもの。PRODUCT.md。
  4. アーギュメントを書く : セクションごとに1つの主張とその証拠。
  5. 実際のリファレンスを見る: references/site-models.mdから3サイト、そのうち1つはセクター外。scripts/board.mjsでキャプチャする。
  6. 方向性を抽選する: node scripts/roll.mjs --mode <モード> --brief "…" --log direction-log.md(アーキタイプ、カード、色、フォント、リスク)。その後5方向、最も確率の高い2つは除外。references/originality.md。
  7. アイデアを定式化する(「[主題の何か]が[手法]になる」、競合テスト)、生きたもの、DESIGN.md。最初の3画面をscripts/explore.mjsで比較し、1つを選択。
  8. コードの前にすべてのテキストを書く。タイトルは320pxで最大2行。
  9. 動きなしで構築する: まずトークン(色、フォント、タイポグラフィックスケール、スペーシングスケール)、次にヒーロー、セクション、ビジュアル(写真なし: references/visuals.md、最初の2画面内に主題の視覚的アンカー)、生きたもの。
  10. チェックする: check-tokens.mjs(コード)、check-render.mjs --shots(レンダリングされたページ)、npx impeccable detect、パフォーマンス。次に仕上げ(references/finish.md)と30のUX則のチェック(references/ux-principles.md)。
  11. 新しい視点で判断させる: references/critique.mdのチェックリスト、独創性軸と既視感テスト。修正、最大3ラウンド。
  12. 動きを追加し、再検査し、レポートと共に納品する。

5. 絶対的下限設定

これは決して解除されない。好みにより、ブリーフにより、外部リソースによっても。

  • A1 アクセシビリティ: WCAG 2.2 AA(コントラスト4.5:1、大きいテキストとコントロールは3:1)、フォーカスの可視化、キーボード操作、ターゲットサイズ24px(モバイルでは44px目標)、見出しのスキップ、代替テキスト、動きの抑制、「操作」モード以外ではJavaScriptなしでのコンテンツ表示。
  • A2 誠実性: 数字、引用、レビュー、ロゴ、クライアント、機能の捏造禁止。サンプルコンテンツはレポートにリストし、ページ上で1回だけ明示する。
  • A3 トレーサビリティ: すべてのフォント、コンポーネント、画像、リファレンスは、実際に検証された出典と使用をカバーするライセンスを持つ。
  • A4 機密性: クライアントのデータ、モックアップ、キャプチャを、書面による同意なしにサードパーティサービスに送信しない。
  • A5 パフォーマンス: LCP ≤ 2.5秒、INP ≤ 200ms(ラボではTBT)、CLS ≤ 0.1。それ以外の場合、エフェクトは静止画にする。references/performance.md。
  • A6 技術: 色、フォント、サイズ、スペーシングはトークンのみ。transition: allやwidth、height、top、leftのアニメーションは禁止。320pxから1920pxで水平スクロール禁止。ヒーローはdvhまたはsvhを使用。コンテナに上限を設定。
  • A7 ブリーフ: 明示的な指示は解除可能な欠点に優先するが、A1~A6には優先しない。

6. 解除可能な欠点、基本事項

それぞれは、アイデアまたはブリーフに関連する書面による理由と共に解除される。完全な表: references/defaults-by-mode.md。日付入りのtic: references/tells.md。

  • アイブロウ、字間を広げた大文字、本当のシーケンスのない01/02/03の番号付けは禁止。
  • 紫のグラデーション、グラデーションテキスト、グロー、装飾的なガラス、アイコン-タイトル-テキストの同一カード列、絵文字をアイコンとして使用することは禁止。
  • ブランド上の理由なくフォントを反射的に使用しない(references/typography.md)。フォントが提供されていない場合、3つのペアを提案する(references/font-catalog.md)。
  • モジュラータイポグラフィックスケールと3レベルのスペーシングスケール、それ以外は使用しない(references/spacing.md)。
  • 1つの背景、1つのインク、1つのアクセント、アクセントは画面あたり最大約4回。
  • クリシェになった修正(クリーム、セリフ、テラコッタ)や、「クリーンなアンチスロップ」への独自の収束も禁止(references/originality.md §1)。

7. いつ何を読むか

状況ファイル
12ステップの詳細、納品リスト、レポート形式references/process.md
フレーミング: 質問、好み、素材、ブリーフシートreferences/intake.md
モード別ルールreferences/defaults-by-mode.md
棚卸し、アイデア、画像、写真なしの製品references/idea-and-direction.md
写真なしビジュアル、取得スコア別分類。テキストなしの主題テストreferences/visuals.md
仕上げ: 審査員が指摘した欠点とそのチェックreferences/finish.md
抽選、アーキタイプ、制約、リスク、3ヒーロー、既視感references/originality.md
ランディング、ヒーロー、フォーム、ガラス、プロダクトイラスト、ベントーreferences/persuade.md
ナビゲーションとフッター(18 + 15モデル)references/nav-footer.md
アプリ、ダッシュボード、グラフ、フォームreferences/operate.md
ドキュメント、記事、ポートフォリオ、ギャラリーreferences/read-and-experience.md
リファクタリングreferences/redesign.md
パレットreferences/color.md
フォントとタイポグラフィックスケール。提案するフォントreferences/typography.md、references/font-catalog.md
スペーシングとリズムreferences/spacing.md
動き、エフェクト、コードによる動画references/motion-and-video.md
モード別パフォーマンスreferences/performance.md
日付入りAIのticreferences/tells.md
UXの30の法則、適用方法、UXチェックreferences/ux-principles.md
実際のモデルサイト、ギャラリー、ライブラリ、ライセンスreferences/site-models.md、references/resources.md
新しい視点による批評references/critique.md

タスクに必要なものだけをロードする。

8. 納品する

下限設定、check-tokens.mjs、check-render.mjs、ディテクター、キャプチャ、批評(独創性が少なくとも5点中4点、既視感テストで既知のスタイルがないこと)、方向性ログがすべてパスするまで納品してはならない。完全なリストとレポート形式: references/process.md。実行していないチェックを宣言してはならない。

関連スキル