本文へ移動
cccskills
無料GitHub で公開

art-direction

Use when a website needs a strong visual point of view, distinct concept routes, composition, typography, color/materiality, imagery direction, spatial rhythm, or a memorable signature idea.

インストール方法を見る

含まれるファイル(2)

  • SKILL.md1.5 KB
  • agents/openai.yaml235 B

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

Art Direction

Core deliverable

Define a coherent design POV that can explain the major visual choices without naming trendy libraries.

When direction is open

Create three structurally different routes. Each route must specify:

  • one-sentence POV;
  • emotional register;
  • composition grammar;
  • typography strategy;
  • color/materiality;
  • imagery strategy;
  • density/rhythm;
  • navigation posture;
  • interaction and motion language;
  • signature visual idea;
  • signature interaction;
  • anti-direction.

Do not submit three palette variants of the same layout.

Visual energy curve

Plan the page as tension and release. Alternate emphasis intentionally: peak → pause → dense evidence → quiet bridge → signature moment → resolution. Avoid a page where every section has equal visual volume.

Signature rule

Choose one memorable idea that could be described 24 hours later. It must be connected to the product/brand, not novelty for novelty's sake.

Anti-direction

Write what the site must not feel like. Examples: “not a generic SaaS dashboard”, “not card-heavy”, “not luxury-through-black-and-gold cliché”. Use this to reject plausible but wrong choices.

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

同じリポジトリのスキル

概要と使いどころ

Use for release-level accessibility and performance review, including WCAG 2.2 AA, keyboard/focus, target size, reduced motion, semantic controls, Core Web Vitals, images/fonts/JavaScript, and animation or 3D performance budgets.

日本語の概要は準備中です。原文の説明を表示しています。

Lrinvl1203/world-class-web-design-os82026年10月2日 更新

Use to audit a generated or heavily templated interface for generic AI aesthetics, unjustified trend patterns, component-registry residue, vague copy, repetitive motion, novelty theater, or visual decisions that lack brand/UX rationale.

日本語の概要は準備中です。原文の説明を表示しています。

Lrinvl1203/world-class-web-design-os82026年10月2日 更新

Use when deciding whether to implement UI from native HTML/CSS, accessible primitives, shadcn-style source components, or visual component registries such as 21st.dev, Aceternity, React Bits, Motion Primitives, Magic UI, or Animate UI.

日本語の概要は準備中です。原文の説明を表示しています。

Lrinvl1203/world-class-web-design-os82026年10月2日 更新

Use after substantial web projects or repeated design defects to convert evidence into reusable skill improvements through root-cause analysis, regression scenarios, and controlled proposals without silently changing the core OS.

日本語の概要は準備中です。原文の説明を表示しています。

Lrinvl1203/world-class-web-design-os82026年10月2日 更新

Use when the design concept calls for Three.js or React Three Fiber 3D, WebGL/WebGPU, Rive, Spline, Theatre.js, SVG, canvas, shaders, particle systems, or other immersive creative-web techniques.

日本語の概要は準備中です。原文の説明を表示しています。

Lrinvl1203/world-class-web-design-os82026年10月2日 更新

Use as an independent design-review pass after rendering a website; evaluates macro, meso, micro craft, applies the Design Quality rubric, identifies root causes, and prioritizes changes without defending the implementation intent.

日本語の概要は準備中です。原文の説明を表示しています。

Lrinvl1203/world-class-web-design-os82026年10月2日 更新

Lrinvl1203 のスキルをすべて見る

このスキルの問題を報告する