Design Dna
zanwei/design-dna
Extract, define, and apply design DNA across three dimensions: design system (tokens), design style (qualitative feel), and visual effects (Canvas, WebGL, 3D, particles, shaders, scroll effects…
실제 제품 route의 UI·UX copy를 검사해 제품 맥락 없이 반복된 생성형 기본 패턴, 브랜드 근거 없는 장식, 카드·그라데이션·아이콘 타일 남용, 번역투와 추상 카피를 rule ID와 line ref로 진단한다.
$ npx skills add kwakseongjae/oh-my-design --skill omd-slop-audit -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install kwakseongjae/oh-my-design omd-slop-audit --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/kwakseongjae/oh-my-design.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/omd-slop-audit .claude/skills/omd-slop-audit && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "omd-slop-audit" agent skill from https://github.com/kwakseongjae/oh-my-design/tree/main/skills/omd-slop-audit into .claude/skills/omd-slop-audit/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "omd-slop-audit", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/kwakseongjae/oh-my-design/tree/main/skills/omd-slop-auditType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add kwakseongjae/oh-my-design --skill omd-slop-audit -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install kwakseongjae/oh-my-design omd-slop-audit --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/kwakseongjae/oh-my-design.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/omd-slop-audit .agents/skills/omd-slop-audit && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "omd-slop-audit" agent skill from https://github.com/kwakseongjae/oh-my-design/tree/main/skills/omd-slop-audit into .agents/skills/omd-slop-audit/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "omd-slop-audit", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add kwakseongjae/oh-my-design --skill omd-slop-audit -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install kwakseongjae/oh-my-design omd-slop-audit --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/kwakseongjae/oh-my-design.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/omd-slop-audit .cursor/skills/omd-slop-audit && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "omd-slop-audit" agent skill from https://github.com/kwakseongjae/oh-my-design/tree/main/skills/omd-slop-audit into .cursor/skills/omd-slop-audit/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "omd-slop-audit", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/kwakseongjae/oh-my-design.git --path skills/omd-slop-audit--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add kwakseongjae/oh-my-design --skill omd-slop-audit -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install kwakseongjae/oh-my-design omd-slop-audit --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/kwakseongjae/oh-my-design.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/omd-slop-audit .gemini/skills/omd-slop-audit && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "omd-slop-audit" agent skill from https://github.com/kwakseongjae/oh-my-design/tree/main/skills/omd-slop-audit into .gemini/skills/omd-slop-audit/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "omd-slop-audit", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install kwakseongjae/oh-my-design omd-slop-auditInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add kwakseongjae/oh-my-design --skill omd-slop-audit -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/kwakseongjae/oh-my-design.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/omd-slop-audit .github/skills/omd-slop-audit && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "omd-slop-audit" agent skill from https://github.com/kwakseongjae/oh-my-design/tree/main/skills/omd-slop-audit into .github/skills/omd-slop-audit/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "omd-slop-audit", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add kwakseongjae/oh-my-design --skill omd-slop-audit -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install kwakseongjae/oh-my-design omd-slop-audit --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/kwakseongjae/oh-my-design.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/omd-slop-audit .opencode/skills/omd-slop-audit && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "omd-slop-audit" agent skill from https://github.com/kwakseongjae/oh-my-design/tree/main/skills/omd-slop-audit into .opencode/skills/omd-slop-audit/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "omd-slop-audit", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
omd-slop-audit실제 제품 route의 UI·UX copy를 검사해 제품 맥락 없이 반복된 생성형 기본 패턴, 브랜드 근거 없는 장식, 카드·그라데이션·아이콘 타일 남용, 번역투와 추상 카피를 rule ID와 line ref로 진단한다.
Omd Slop Audit is an agent skill from kwakseongjae/oh-my-design. 실제 제품 route의 UI·UX copy를 검사해 제품 맥락 없이 반복된 생성형 기본 패턴, 브랜드 근거 없는 장식, 카드·그라데이션·아이콘 타일 남용, 번역투와 추상 카피를 rule ID와 line ref로 진단한다. 'AI slop 잡아줘', '템플릿 같아', '왜 AI가 만든 화면 같지?', 'anti-slop audit' 요청에 사용한다. 접근성 오류와 취향 차이를 별도 등급으로 구분한다.
Its SKILL.md is about 1.1k tokens, which your agent loads only when the skill is triggered. The skill folder holds 5 other files, including reference files (for example `agents/openai.yaml`, `references/pattern-catalog.md` and `references/sources.md`).
It sits in Frontend & Design, covering UI design, Humanizing AI text and Design tokens. The repository describes itself as: Give your AI coding agent a design system. One command installs 500+ quality-graded company DESIGN.md references + skills into Claude Code, Codex, Cursor, and OpenCode. Free… The licence is MIT.
3 steps, taken from the step headings in SKILL.md.
Read from SKILL.md and the folder at commit c0ec438. It shows what the files ask for, not the result of running them.
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
No scripts in the folder and no shell commands in SKILL.md (its code samples are markdown).
From the folder's file list and the shell code blocks in SKILL.md.
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Omd Slop Audit loads about 1.1k tokens when it runs, and up to ~3.8k if it reads all its reference files. Until then it costs about 60 tokens; SKILL.md has 561 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
The full file from kwakseongjae/oh-my-design at commit c0ec438, republished under its MIT licence (© kwakseongjae). 561 words, ~1,051 tokens.
.claude/skills/omd-slop-audit/SKILL.md (or your agent's skills folder). This skill also uses 3 other files; get the full folder from GitHub.OmD에서 AI slop은 “AI가 만든 화면”이라는 출처 판정이 아니다. 제품의 목적·콘텐츠·브랜드 근거 대신, 생성 도구가 자주 꺼내는 구조와 문구가 반복되어 서로 다른 제품이 같은 화면처럼 수렴한 상태를 뜻한다.
보라색, 카드, 둥근 모서리, 그라데이션은 죄가 없다. DESIGN.md와 콘텐츠가 요구하면 그대로 둔다. 문제는 이유 없이 여러 기본 패턴이 한 화면에 겹치고, 그 결과 위계·신뢰·사용성이 약해질 때다.
AUDIT — 코드와 실제 route를 읽고 근거가 있는 finding만 작성APPLY — 사용자가 수정까지 요청한 경우 omd:apply 계약으로 BLOCK/WARN을 고친 뒤 같은 route에서 재검증COMPARE — 같은 콘텐츠의 before/after specimen과 rule 설명을 만든다. 제품 기능을 새로 꾸미지 않는다.DESIGN.md 전체와 .omd/preferences.mdreferences/pattern-catalog.mdreferences/sources.md판정 우선순위는 사용자 의도 > DESIGN.md > 실제 제품 정보 구조 > 접근성·플랫폼 요구 > slop taxonomy다.
제품 맥락 없는 기본 패턴이 같은 화면에서 둘 이상 겹치고, 정보 위계나 브랜드 구별성을 약하게 만든다. SLOP 배지를 쓴다.
대비, overflow, focus, heading 순서, target size, 성능처럼 출처와 무관한 결함이다. QUALITY로 분리한다. 접근성 오류를 “AI 느낌”이라고 부르지 않는다.
브랜드 또는 사용자가 합리적으로 선택할 수 있는 미감 차이다. FYI만 허용한다. 취향을 결함으로 승격하지 않는다.
감사 범위가 일부 유행 요소에만 갇히지 않도록 다음 순서로 훑는다.
이 목록은 미니멀리즘을 강요하지 않는다. expressive editorial, dense product tool, focused service flow 모두 brief와 실행 근거가 있으면 유효하다.
### [WARN · SLOP] UI-LAYOUT-03 · 모든 내용을 같은 카드로 분절
- 위치: `components/Overview.tsx:84`
- 화면 근거: `/docs/ko` desktop에서 11개 섹션 중 9개가 같은 radius·padding·border 카드
- 문맥: 문서의 읽기 순서보다 컨테이너 반복이 먼저 보임
- 예외 확인: DESIGN.md는 card-heavy dashboard를 요구하지 않음
- 수정: 절차는 열린 목록, 결과 예시는 비교 surface로 바꾸고 실제 독립 개체만 카드 유지
- 검증: heading 순서, 모바일 overflow, 기존 링크 동작을 같은 route에서 재확인severity는 다음처럼 쓴다.
합산 “taste score”, AI 확률, 근거 없는 100점 만점은 만들지 않는다. finding 수와 해결 여부가 정본이다.
/builder → 선택 → preview에서 검증한다./reference/[id]만 보고 builder 작업을 완료하지 않는다.omd:designer-review, omd:feel, 접근성 검사와 역할이 겹치는 finding을 중복 보고하지 않는다.omd:designer-review: 브랜드 토큰과 시각 일관성omd:feel: motion·target·contrast·CLS 같은 측정 가능한 interface detailomd:humanize: locale별 문장과 UX copy 후편집omd:slop-audit: 제품 맥락 없는 패턴 수렴과 cluster© kwakseongjae, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
SKILL.md and 3 other files (references) in skills/omd-slop-audit of kwakseongjae/oh-my-design.
Open the folder on GitHubat commit c0ec438
Omd Slop Audit next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Omd Slop Audit this skillkwakseongjae/oh-my-design | 533 | — | ~1.1k | Automated safety check: Pass | MIT | |
| Design Dnazanwei/design-dna | 1.9k | 1 repos | ~2.1k | Automated safety check: Pass | MIT | |
| Figma Design to Codewarpdotdev/warp | 65k | 4 repos | ~2.9k | Automated safety check: Pass | AGPL-3.0 | |
| Design Guidepaperclipai/paperclip | 100k | 1 repos | ~3.1k | Automated safety check: Pass | MIT | |
| Web Designxiaopu-ai/web-design | 783 | — | ~3k | Automated safety check: Pass | MIT | |
| Liuguang Banlan UIsickn33/agentic-awesome-skills | 47k | 1 repos | ~2.5k | Automated safety check: Pass | MIT |
zanwei/design-dna
Extract, define, and apply design DNA across three dimensions: design system (tokens), design style (qualitative feel), and visual effects (Canvas, WebGL, 3D, particles, shaders, scroll effects…
warpdotdev/warp
Turns a Figma frame or component into production code that matches the design, using the Figma MCP server and the project's own design system.
paperclipai/paperclip
Paperclip UI design system guide for building consistent, reusable frontend components.
xiaopu-ai/web-design
Web 视觉设计 SKILL。输入 PRD / 参考 URL / 截图 / 关键词(任意组合),先产出一份标准化 DESIGN.md 设计规范,用户确认后据此生成 UI/UX、视觉、动效、响应式全部达标的 web 代码。专攻 web 端:Landing Page、Portfolio、产品页、博客、个人站、SaaS 介绍页等。当用户说"帮我做个网站""设计一个页面""参考 XX…
sickn33/agentic-awesome-skills
Implements an interface in one of two named color modes, iridescent white or colorful black, from a parameterized starter that reports measured color intensity.
senlindesign/taste-skill
Reverse-engineers a website's design from its URL into a Markdown and JSON pair holding concrete tokens and the trade-offs behind the look.
kwakseongjae/oh-my-design
When you need a browser, read this Skill by default. An agent skill from kwakseongjae/oh-my-design.
kwakseongjae/oh-my-design
현재 코드베이스(또는 폴더)를 분석해 "디자인 컨텍스트 브리프"(스택/디자인 토큰/컴포넌트/ 라우트/실제 UI 카피/큐레이션된 에셋/레포 링크)를 합성하고, 그걸 Claude Design (claude.ai/design)에 자동으로 전달해 디자인을 생성한 뒤 결과 링크를 터미널에 클릭 가능한 형태로 돌려주는 스킬.
kwakseongjae/oh-my-design
Maximum-craft one-page landing — the wow bar. An agent skill from kwakseongjae/oh-my-design.
kwakseongjae/oh-my-design
One-prompt autonomous product design and implementation. An agent skill from kwakseongjae/oh-my-design.
kwakseongjae/oh-my-design
Scroll-native one-page landing that overwhelms — concept, composition, asset placement, and scroll choreography derived from DESIGN.md and the measured landing-craft codex.
kwakseongjae/oh-my-design
Brand-consistent asset sets from DESIGN.md — hero, section illustrations, icon sets, OG image — generated through whichever channel the user actually has (grok build imagegen, Codex $imagegen…
Categories
실제 제품 route의 UI·UX copy를 검사해 제품 맥락 없이 반복된 생성형 기본 패턴, 브랜드 근거 없는 장식, 카드·그라데이션·아이콘 타일 남용, 번역투와 추상 카피를 rule ID와 line ref로 진단한다. Omd Slop Audit is an agent skill from kwakseongjae/oh-my-design. 실제 제품 route의 UI·UX copy를 검사해 제품 맥락 없이 반복된 생성형 기본 패턴, 브랜드 근거 없는 장식, 카드·그라데이션·아이콘 타일 남용, 번역투와 추상 카피를 rule ID와 line ref로 진단한다.
Omd Slop Audit fits situations like: tasks that involve UI design; tasks that involve Humanizing AI text; tasks that involve Design tokens.
Run `npx skills add kwakseongjae/oh-my-design --skill omd-slop-audit -a claude-code`. Or copy the skill folder (skills/omd-slop-audit in kwakseongjae/oh-my-design) into .claude/skills/omd-slop-audit in your project. Claude Code loads it when a task matches its description.
Run `npx skills add kwakseongjae/oh-my-design --skill omd-slop-audit -a codex`. Or copy the skill folder (skills/omd-slop-audit in kwakseongjae/oh-my-design) into .agents/skills/omd-slop-audit in your project. Codex loads it when a task matches its description.
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add kwakseongjae/oh-my-design --skill omd-slop-audit -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/omd-slop-audit, .gemini/skills/omd-slop-audit, .github/skills/omd-slop-audit and .opencode/skills/omd-slop-audit in your project.
SKILL.md names no scripts, command-line tools or credentials: Omd Slop Audit is instructions for the agent only.
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
Omd Slop Audit is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
About 1.1k tokens (SKILL.md is roughly 4.2k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 2.7k tokens, read only when the agent opens those files.
Skills that share tags, products or a category with Omd Slop Audit: Design Dna (zanwei/design-dna, 1.9k stars), Figma Design to Code (warpdotdev/warp, 65k stars), Design Guide (paperclipai/paperclip, 100k stars) and Web Design (xiaopu-ai/web-design, 783 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
kwakseongjae (a GitHub user) maintains it in kwakseongjae/oh-my-design, which has 533 GitHub stars. The repository holds 18 skills in this directory. The repository was last updated on October 1, 2026.
Source: kwakseongjae/oh-my-design on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.