Run any Skill in Manus with one click

design-audit

Stars9

Forks0

UpdatedMay 11, 2026 at 04:24

Audits visual design for AI-generated aesthetic patterns and produces improvement plans. Use when reviewing UI design, checking if a website looks "AI-generated", auditing .pen files for generic aesthetics, or improving visual identity. Also use when "AI purple", "looks generic", "soulless design", "design review", "AI스러운", "디자인 점검", "디자인 감사", or "escape AI aesthetic". Do NOT use for code review (use code-review) or accessibility audit.

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

ssiumha

ssiumha/dots

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Web and Digital Interface DesignersComputer and Mathematical Occupations·SOC 15-1255

File Explorer

4 files

SKILL.md

readonly

disable-model-invocation	true
name	design-audit
description	Audits visual design for AI-generated aesthetic patterns and produces improvement plans. Use when reviewing UI design, checking if a website looks "AI-generated", auditing .pen files for generic aesthetics, or improving visual identity. Also use when "AI purple", "looks generic", "soulless design", "design review", "AI스러운", "디자인 점검", "디자인 감사", or "escape AI aesthetic". Do NOT use for code review (use code-review) or accessibility audit.
argument-hint	[url \| .pen-path \| screenshot-path \| css-glob]

Design Audit

디자인의 "AI스러움"을 8개 카테고리로 정량 점검하고, 개선 계획을 생성한다.

상세 절차는 INSTRUCTIONS.md를 참조하세요.

Input Detection

$ARGUMENTS 또는 대화 맥락에서 대상을 감지한다.

Input	Detection	Capture Tool
URL (`http://`, `https://`)	regex	`agent-browser open` + `screenshot` + `snapshot -i`
.pen file	extension `.pen`	`mcp__pencil__get_screenshot` + `batch_get` + `search_all_unique_properties`
Image (.png/.jpg/.webp)	extension	Read (멀티모달 직접 분석)
CSS/Tailwind files	glob pattern	Grep (color, font, effect 패턴)
No input	—	AskUserQuestion으로 대상 확인

복수 소스 제공 시 모든 소스에서 수집 후 교차 검증한다.

Workflow

Phase 1: Capture

입력 타입에 따라 시각 + 구조 데이터를 수집한다.

URL: agent-browser로 full-page screenshot + accessibility snapshot + CSS 패턴 grep
.pen: pencil MCP로 screenshot + 디자인 토큰 인벤토리 (색상, 폰트, 간격, 라운딩)
Image: Read로 직접 시각 분석 (구조 데이터 없음 → "Visual-only audit")
CSS: Grep으로 color/font/effect/layout 패턴 추출

Phase 2: Audit

resources/01-ai-aesthetic-checklist.md를 로드하여 8개 카테고리별 0-3점 채점:

Color Palette — AI Purple Problem, gradient 남용, neon accent
Typography — 제네릭 폰트(Inter/Roboto), 계층 부재
Surface Treatment — 과도한 smoothness, 질감 부재
Imagery — Glowing orb, chrome 3D, 스톡 느낌
Layout Regularity — 완벽한 대칭, 3-column grid 반복
Visual Effects — Glassmorphism/glow/blur 과잉
Brand Identity — Generic SaaS template 느낌
Copy & Content — AI slop copy, generic CTA, empty state 부재

총점/24 → 등급:

총점	등급	의미
0–4	Authentic	AI 패턴 최소, 고유 아이덴티티
5–10	Mixed	일부 패턴 존재, 부분 개선 권장
11–17	AI-Adjacent	상당한 AI 영향, 우선 개선 필요
18–24	AI-Saturated	강한 AI 생성 느낌, 전면 재검토

정량 분석 핵심: 값의 통일이 문제가 아니라 "Custom vs Default" 구분이 핵심. Tailwind/프레임워크 default에 수렴했는가, 의도적 디자인 시스템인가.

Phase 3: Report

점수 2+ 카테고리에 대해 resources/02-improvement-patterns.md를 로드하여 구체적 개선안을 포함한 리포트를 생성한다.

리포트 구조:

Summary — 전체 인상 2-3문장
Scores — 8개 카테고리 점수 테이블
Findings — 우선순위 순, Evidence + Pattern + Improvement
Improvement Plan — Quick Wins (1-2h) → Structure (2-4h) → Identity (4-8h)

Core Principles

Evidence-based — 구체적 요소(hex, 클래스명, 스크린샷 영역)를 근거로 채점. 주관적 느낌 배제
Severity-ranked — 3점 Critical → 2점 High → 1점 Low. 가장 큰 영향부터
Actionable — 모든 finding에 구체적 수정 방안 포함
Non-dogmatic — 맥락에 따라 AI 패턴이 의도적일 수 있음. Flag하되 condemn하지 않음
Brand-aware — 기존 브랜드 의도를 파악한 후 제안. 브랜드 파괴적 제안 금지

Examples

URL 점검

User: /design-audit https://example-saas.com → Phase 1: agent-browser screenshot + snapshot → Phase 2: 7-category scoring → Phase 3: report with findings

.pen 파일 점검

User: /design-audit ~/Documents/project.pen → Phase 1: pencil screenshot + search_all_unique_properties → Phase 2: scoring → Phase 3: report

자연어 트리거

User: "이 사이트 너무 AI스러운데 어떻게 고칠 수 있을까?" → URL 또는 대상 확인 → full audit workflow

More from this repository

same repository

ast-grep

ssiumha/dots

Creates ast-grep patterns for structural code search. Use when finding functions/classes by structure, refactoring code, or when grep returns too many false positives.

2026-05-119

claude-agent-sdk

ssiumha/dots

Builds Claude Agent SDK agents in Python. Use when creating custom tools, hooks, sub-agents, or MCP integrations with the Agent SDK. Python 에이전트 구축 시 사용.

2026-05-119

code-review-graph

ssiumha/dots

Graph-based code review with Tree-sitter knowledge graph. Use when reviewing code changes, PRs, or exploring blast radius of modifications in projects with code-review-graph installed (.code-review-graph/ exists). Also use for initial setup of code-review-graph in a new project. Do NOT use for checklist-based reviews without graph (use code-review instead), or for security-focused reviews (use security instead).

2026-05-119

code-review

ssiumha/dots

Code review hub. 타입 안전성 (TypeScript, Python), lint 감사, 죽은 코드, 테스트 품질 리뷰 (smell, overfitting, 커버리지, 통합/E2E), Terraform/IaC 안전성 (lifecycle, state, credentials). 병렬 에이전트 모드로 다각적 분석 지원. 코드 리뷰, 타입 체크, lint, 테스트 리뷰, terraform, IaC.

2026-05-119

data-investigation

ssiumha/dots

데이터 조사/분석 파이프라인 생성. 데이터 수집 -> Python 분석/차트(matplotlib) -> HTML 리포트. Use when 데이터 분석, 조사, investigation, 이상 탐지, 패턴 분석, 리포트 생성, 차트 시각화, 데이터 수집 파이프라인 구축. Also use when 데이터를 모아서 분석하고 보고서를 만드는 작업. Do NOT use for 단순 DB 조회 (use gandy), 단순 차트 하나 (use diagram).

2026-05-119

debrief

ssiumha/dots

코드 작업 완료 후 변경 내러티브 문서 생성. 변경 요약, 설계 판단 근거, 학습 포인트를 vault에 기록. Vault 위치/매핑은 `documentation` skill, 형식은 `obsidian-write` 참조. Use when completing code work, after PR creation, reviewing what was done, or wanting to document changes for learning. /debrief, 작업 정리, 변경 기록, 회고.

2026-05-119

disable-model-invocation	true
name	design-audit
description	Audits visual design for AI-generated aesthetic patterns and produces improvement plans. Use when reviewing UI design, checking if a website looks "AI-generated", auditing .pen files for generic aesthetics, or improving visual identity. Also use when "AI purple", "looks generic", "soulless design", "design review", "AI스러운", "디자인 점검", "디자인 감사", or "escape AI aesthetic". Do NOT use for code review (use code-review) or accessibility audit.
argument-hint	[url \| .pen-path \| screenshot-path \| css-glob]

Design Audit

디자인의 "AI스러움"을 8개 카테고리로 정량 점검하고, 개선 계획을 생성한다.

상세 절차는 INSTRUCTIONS.md를 참조하세요.

Input Detection

$ARGUMENTS 또는 대화 맥락에서 대상을 감지한다.

Input	Detection	Capture Tool
URL (`http://`, `https://`)	regex	`agent-browser open` + `screenshot` + `snapshot -i`
.pen file	extension `.pen`	`mcp__pencil__get_screenshot` + `batch_get` + `search_all_unique_properties`
Image (.png/.jpg/.webp)	extension	Read (멀티모달 직접 분석)
CSS/Tailwind files	glob pattern	Grep (color, font, effect 패턴)
No input	—	AskUserQuestion으로 대상 확인

복수 소스 제공 시 모든 소스에서 수집 후 교차 검증한다.

Workflow

Phase 1: Capture

입력 타입에 따라 시각 + 구조 데이터를 수집한다.

URL: agent-browser로 full-page screenshot + accessibility snapshot + CSS 패턴 grep
.pen: pencil MCP로 screenshot + 디자인 토큰 인벤토리 (색상, 폰트, 간격, 라운딩)
Image: Read로 직접 시각 분석 (구조 데이터 없음 → "Visual-only audit")
CSS: Grep으로 color/font/effect/layout 패턴 추출

Phase 2: Audit

resources/01-ai-aesthetic-checklist.md를 로드하여 8개 카테고리별 0-3점 채점:

Color Palette — AI Purple Problem, gradient 남용, neon accent
Typography — 제네릭 폰트(Inter/Roboto), 계층 부재
Surface Treatment — 과도한 smoothness, 질감 부재
Imagery — Glowing orb, chrome 3D, 스톡 느낌
Layout Regularity — 완벽한 대칭, 3-column grid 반복
Visual Effects — Glassmorphism/glow/blur 과잉
Brand Identity — Generic SaaS template 느낌
Copy & Content — AI slop copy, generic CTA, empty state 부재

총점/24 → 등급:

총점	등급	의미
0–4	Authentic	AI 패턴 최소, 고유 아이덴티티
5–10	Mixed	일부 패턴 존재, 부분 개선 권장
11–17	AI-Adjacent	상당한 AI 영향, 우선 개선 필요
18–24	AI-Saturated	강한 AI 생성 느낌, 전면 재검토

정량 분석 핵심: 값의 통일이 문제가 아니라 "Custom vs Default" 구분이 핵심. Tailwind/프레임워크 default에 수렴했는가, 의도적 디자인 시스템인가.

Phase 3: Report

점수 2+ 카테고리에 대해 resources/02-improvement-patterns.md를 로드하여 구체적 개선안을 포함한 리포트를 생성한다.

리포트 구조:

Summary — 전체 인상 2-3문장
Scores — 8개 카테고리 점수 테이블
Findings — 우선순위 순, Evidence + Pattern + Improvement
Improvement Plan — Quick Wins (1-2h) → Structure (2-4h) → Identity (4-8h)

Core Principles

Evidence-based — 구체적 요소(hex, 클래스명, 스크린샷 영역)를 근거로 채점. 주관적 느낌 배제
Severity-ranked — 3점 Critical → 2점 High → 1점 Low. 가장 큰 영향부터
Actionable — 모든 finding에 구체적 수정 방안 포함
Non-dogmatic — 맥락에 따라 AI 패턴이 의도적일 수 있음. Flag하되 condemn하지 않음
Brand-aware — 기존 브랜드 의도를 파악한 후 제안. 브랜드 파괴적 제안 금지

Examples

URL 점검

User: /design-audit https://example-saas.com → Phase 1: agent-browser screenshot + snapshot → Phase 2: 7-category scoring → Phase 3: report with findings

.pen 파일 점검

User: /design-audit ~/Documents/project.pen → Phase 1: pencil screenshot + search_all_unique_properties → Phase 2: scoring → Phase 3: report

자연어 트리거

User: "이 사이트 너무 AI스러운데 어떻게 고칠 수 있을까?" → URL 또는 대상 확인 → full audit workflow