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

audit-ai-design-slop

Audit websites, apps, screenshots, mockups, and design code for harmful AI-design clichés, generic generated defaults, and established UI defects. Use when the user wants evidence-backed design feedback, an anti-slop review, or a removal-first cleanup plan without a speculative redesign.

インストール方法を見る

含まれるファイル(3)

  • SKILL.md6.1 KB
  • agents/openai.yaml240 B
  • REFERENCES.md825 B

SKILL.md(原文)

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

Audit AI Design Slop

Run a diagnostic, evidence-backed audit. Identify the smallest set of removals or corrections that would improve the interface while preserving its existing direction.

Boundaries

  • Do not guess whether AI made the design.
  • Do not assign a numeric slop score.
  • Do not reject a visual technique in isolation. A gradient, serif, dark theme, glass effect, card, animation, or single-font system can be intentional.
  • Do not prescribe a new font, palette, layout, design system, or art direction unless the user explicitly asks for one.
  • Do not turn an audit into an implementation task.
  • Mark anything outside the visible or provided evidence as unknown.

Audit the Evidence

Inspect the artifact available in the request:

  • screenshots and recordings
  • rendered pages and relevant viewports
  • interaction and state changes
  • source code, tokens, assets, and copy
  • console or runtime failures when they affect the experience

For every finding, cite a concrete location, component, behavior, or line of copy. Do not report a generic tendency without evidence in the artifact.

For a full-page or full-site review, read ../no-ai-design-slop/ARTICLE.md and use only the catalog sections relevant to the inspected artifact. Do not turn every checklist match into a finding. Group symptoms by root cause and report the highest-impact evidence.

Classify Findings

Use one of these classes:

  • Quality defect: an established usability, accessibility, content, responsive, or runtime problem.
  • Slop pattern: a repeated default, decorative layer, or generated-looking convention with no useful role.

What to Flag

Decorative stacking

Flag combinations of glow, gradient text, glass, borders, shadows, grids, particles, beams, noise, floating shapes, or browser chrome when multiple layers perform the same decorative job or compete with the content.

Component and template repetition

Flag:

  • card treatment applied to nearly every content block
  • repeated icon-heading-description tiles with interchangeable content
  • nested rounded containers that do not communicate hierarchy
  • generic landing-page sequences unrelated to the product's buying or usage journey
  • headings, labels, pills, or CTA blocks that restate nearby information

Typography and copy clutter

Flag:

  • duplicate text or unnecessary labels
  • empty superlatives, vague category claims, and generated filler
  • decorative type treatments that obscure hierarchy or readability
  • long centered paragraphs, awkward forced line breaks, or hard-to-scan text
  • inconsistent type roles that look accidental rather than expressive

Motion theater

Flag motion that delays access, repeats mechanically, distracts from reading, moves targets, blocks input, or lacks respect for reduced-motion preferences. Preserve motion that communicates state, causality, hierarchy, or spatial change.

Fake proof

Flag invented or unverifiable metrics, customers, testimonials, awards, ratings, activity, dashboards, charts, logos, and portraits when they are presented as evidence.

Established UI failures

Flag:

  • unclear or competing primary actions
  • low contrast or unreadable content
  • clipping, overflow, overlap, or broken responsive behavior
  • broken assets, links, scripts, or controls
  • essential information available only on hover
  • missing states required by the observed flow
  • unclear labels, roles, feedback, or keyboard focus
  • accidental inconsistency in spacing, type, color, radius, or icons
  • visual hierarchy that contradicts task importance

Use the Removal Test

For every candidate:

  1. State what information, state, action, hierarchy, or brand meaning it provides.
  2. Ask whether removing it would improve clarity without losing that role.
  3. If yes, recommend removal or consolidation.
  4. If no, recommend the smallest correction using the existing system.
  5. Suggest a replacement only when deletion would create a real loss.

Default to subtraction. A replacement should inherit the product's existing language rather than introduce a new visual concept.

Prioritize

  • P0: blocks completion, creates a severe accessibility issue, or presents deceptive proof
  • P1: materially harms comprehension, trust, navigation, or interaction
  • P2: repeated slop or inconsistency that weakens hierarchy and identity
  • P3: minor polish issue with limited user impact

Return the five to eight highest-impact findings by default. Group repeated instances into one systemic finding.

Output

## Verdict
One concise paragraph about the dominant problems and what should be removed first.

## Checked scope
- Artifact, screen, state, and viewport actually inspected

## Findings
| Priority | Class | Pattern | Evidence | Harm | Remove or fix |
|---|---|---|---|---|---|
| P1 | Slop pattern | Repeated ornamental containers | Feature area uses the same layered card treatment for unrelated content | Flattens hierarchy and adds noise | Remove outer shells; retain grouping only where it communicates interaction |

## Unknowns
- Important states or behavior that could not be verified

Keep the report compact. Omit empty sections.

Feedback Rules

  • Lead with concrete evidence, not taste claims.
  • Name the pattern and its harm.
  • Recommend removal before restyling.
  • Avoid generic compliments and exhaustive low-impact nitpicks.
  • Preserve useful product-specific detail and intentional character.
  • Do not cite a standard unless it directly supports the finding.
  • Do not describe an aesthetic as universally bad.
  • If the user explicitly asks for design swaps, place an optional replacement after the removal recommendation and keep it consistent with the existing system.
  • End with the single removal or correction that would produce the largest improvement.

レビュー

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

同じリポジトリのスキル

概要と使いどころ

Build convincing woven cloth in Three.js, with a thread-level weave normal map, sheen and anisotropic highlights, folds that never stretch the texture, hems with thickness, stitches, seams, frayed edges, fold occlusion, dye and wear variation, and light passing through thin fabric. Use for linen, silk, wool, canvas, curtains, banners, cloaks, tablecloths, tapestries or any 3D drape that currently looks like a plastic sheet, a stretched texture, or a flat coloured plane.

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

MengTo/Skills6,7372026年10月6日 更新

Build recognizable falling leaves in world space using instanced geometry, independent tumble, coupled sideways drift, shared wind, scene occlusion, and camera-aware recycling. Use for 3D autumn leaves or drifting foliage in Three.js and similar scenes; use falling-leaves for a 2D canvas overlay.

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

MengTo/Skills6,7372026年10月6日 更新

Add coordinated spring, summer, fall, and winter states to a 3D scene, blending foliage, sunlight, sky, ground materials, snow, and particles without rebuilding the world. Use for seasonal controls, architectural walkthroughs, and outdoor scenes with four-season transitions.

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

MengTo/Skills6,7372026年10月6日 更新

Create or integrate highly detailed 3D models with smooth silhouettes, shaped surfaces, believable bevels, and close-up geometry, then prepare suitable runtime LODs and loading. Use when a user requests high polygon counts, ultra-realistic models, detailed architectural assets, or removal of visibly faceted geometry.

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

MengTo/Skills6,7372026年10月6日 更新

Build sharp, physically coherent high-resolution materials for 3D rendering with appropriate PBR maps, texel density, UV direction, mipmaps, anisotropic filtering, and progressive asset delivery. Use for detailed wood, stone, fabric, foliage, and architectural close-ups without excessive download or GPU memory costs.

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

MengTo/Skills6,7372026年10月6日 更新

Build hyperrealistic PBR metal in Three.js: steel, brass, gold, copper and iron as true conductors (metalness 1, measured F0 tint, no albedo) with roughness-varied finishes (polished, brushed anisotropic, aged with patina and worn edges) lit by a dark HDR studio of real bright window cards prefiltered with PMREM. Use when metal looks like grey plastic, a dull blur, or a black hole; when blades, tools, rings, ingots, hardware or product metal need reflections with edges and structure; or when a finish needs scratches, streaks, fingerprints and bevels that catch light.

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

MengTo/Skills6,7372026年10月6日 更新

MengTo のスキルをすべて見る

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