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