Design skills

Browse reusable Agent Skills, each with a clear purpose and practical guidance.

design-system-library

75개 글로벌 브랜드 디자인 시스템(Claude · ClickHouse · Clay 포함)을 단일 파일 HTML 산출물에 적용합니다. 각 시스템의 토큰(색·타이포·radius·spacing·컴포넌트)을 Tailwind Play CDN config + shadcn 스타일 vanilla 컴포넌트로 변환해 렌더합니다. html-report · 랜딩 페이지 · 각종 문서 생성 시 design_system을 지정하면 해당 브랜드 무드가 즉시 적용됩니다. Claude Design 핸드오프 시에는 DESIGN.md 지침 소스로 제공됩니다. 다음과 같은 요청 시 반드시 이 스킬을 사용하세요: - "Claude 스타일로 HTML 보고서 만들어줘" - "ClickHouse 다크 테마로 랜딩 만들어줘" - "Clay 디자인 시스템 적용해서 문서 생성" - "브랜드 디자인 시스템 골라서 HTML로" - "Notion / Linear / Stripe 스타일로 리포트" - "어두운 테마 / 따뜻한 화이트 테마로" - "Claude Design에 올릴 디자인 시스템 자료 정리"

254 repo starsObserved in 1 repos
Design
GitHub

detail-page-image

한국 이커머스 상세페이지 13섹션 이미지를 자동 생성하고 1080×12720 단일 PNG로 합성하는 스킬입니다. "상세페이지 이미지 만들어줘", "13섹션 합성 이미지", "상폐 이미지", "1080 12720 합성"처럼 말하면 됩니다. detail-page-copy의 13섹션 카피와 사용자 상품 사진을 받아 섹션별 이미지 프롬프트를 작성하고, moai-media:higgsfield-image(Nano Banana Pro 등 11개 모델)로 13장의 이미지를 생성한 뒤 Pillow 기반 자체 합성 스크립트(scripts/compose.py)로 1080×12720 세로 합성 PNG를 만듭니다. 외부 패키지 설치 불필요 — 합성 로직은 cowork에 자체 구현되어 있습니다.

254 repo starsObserved in 1 repos
Design
GitHub

higgsfield-image

Higgsfield MCP 기반 AI 이미지를 자연어 요청 한 줄로 생성합니다. 다음과 같은 요청 시 사용하세요: - "Higgsfield로 이미지 만들어 줘" - "Soul 2.0으로 이미지" - "Nano Banana Pro로 카드뉴스 이미지" - "AI 이미지 생성해줘" - "Seedream 4.0으로 이미지" - "시네마틱 키 비주얼 만들어줘" - "캐릭터 일관성 있는 시리즈 이미지" - "4K 이미지 생성" Soul·Soul 2.0·Soul Cinema·Nano Banana·Nano Banana Pro·GPT Image·GPT Image 2·Seedream 4.0·Flux Kontext·Wan 2.2 Image·Wan 2.5 11개 공식 이미지 모델과 캐릭터 일관성(Soul Characters), 스타일 프리셋, 해상도(720p/1080p/2K/4K), 시드 고정, 비동기 잡 폴링까지 처리한 완성 이미지를 산출합니다. 실제 이미지 생성 요청 시 Higgsfield MCP가 연결돼 있으면 이 스킬을 사용하세요 (프롬프트만 필요하면 moai-media의 *-prompt 스킬).

254 repo starsObserved in 1 repos
Design
GitHub

midjourney-v8-prompt

Midjourney v8.1 (2026.03 Alpha) 전용 이미지 프롬프트 빌더. 사용자 자연어 한 줄 + AskUserQuestion 프리셋·미세조정으로 컨텍스트를 수집해 Midjourney 공식 Parameter List 기반 키워드+`--파라미터` 형식으로 변환합니다. Discord `/imagine` 또는 alpha.midjourney.com에 그대로 복붙 가능. `--sref`/`--oref`/`--cw`/`--p`/`--hd`/`--q 4`/`--style raw`/`--no`/`--c`/`--s` 모두 지원. 보너스로 GPT-image-2(6-Block) · Gemini 3 Pro Image(5-component) 프롬프트도 동시 출력합니다. 다음과 같은 요청 시 반드시 이 스킬을 사용하세요: - "미드저니 프롬프트 만들어줘", "MJ 프롬프트" - "Midjourney 프롬프트", "/imagine 프롬프트 작성" - "Midjourney v8 프롬프트", "미드저니 8.1 프롬프트" - "--sref 프롬프트", "--oref 프롬프트", "스타일 코드 프롬프트" - "/midjourney-v8-prompt" (직접 호출) Midjourney는 공식 API 자동화가 제한적이므로 본 스킬은 프롬프트 텍스트만 산출하고, 실제 생성은 사용자가 Discord 또는 web alpha에서 직접 실행합니다.

254 repo starsObserved in 1 repos
Design
GitHub

ux-designer

우선순위별 UX 개선 권고안과 평가 보고서(휴리스틱·접근성·사용자 플로우)를 만들어 드립니다. 다음과 같은 요청 시 사용하세요: - "UX 디자인 검토해줘" - "휴리스틱 평가해줘" - "접근성(WCAG) 검토해줘" - "사용자 플로우 분석해줘" - "와이어프레임 사용성 점검해줘" - "사용성 개선안 정리해줘" 3개 차원(휴리스틱·접근성·플로우)을 분석해 심각도·우선순위가 매겨진 개선 로드맵으로 정리하고, ai-slop-reviewer·humanize-korean으로 마무리할 수 있습니다. [책임 경계] vs moai-product:ux-researcher: ux-designer=휴리스틱·접근성·플로우 평가, ux-researcher=인터뷰·페르소나·VOC 리서치

254 repo starsObserved in 1 repos
Design
GitHub

usability

Adjudicate whether users can operate an interface, and run heuristic evaluation. Use when the question is operability rather than looks — is it usable, hard to use, confusing, where do users get stuck; heuristic evaluation, Nielsen heuristics, usability audit, severity rating; the UX laws (Fitts, Hick, Miller/Cowan, Jakob, Tesler, Doherty, peak-end, Zeigarnik, aesthetic-usability); Gestalt grouping, affordances, signifiers, mapping, feedback, cognitive load, recognition over recall; picking among navigation, form, search/filter, table/data, feedback, action, disclosure, or onboarding patterns; or usability-side accessibility (WCAG POUR, inclusive design). Not for: the visual look or aesthetic audit (use core design/audit); the words/microcopy themselves (use content-design); the route through time, IA, or funnel (use journey); persuasion or conversion mechanics (use behavioral); truthful chart/data encoding (use data-viz).

253 repo starsObserved in 1 repos
Design
GitHub

felo-superAgent

Felo SuperAgent API: AI conversation with real-time SSE streaming on a persistent LiveDoc canvas. Use when users want SuperAgent chat, continuous conversation, logo/branding design, or e-commerce product images. CRITICAL: When user provides ANY image/product description (e.g. '生成一張...產品照片', '我的提示詞為: 生成...', 'generate a product photo'), ALWAYS call the API to generate the actual image — NEVER rewrite the prompt as text output. Do NOT use for tweet/X post writing — use felo-twitter-writer instead. Explicit commands: /felo-superagent.

252 repo starsObserved in 2 repos
Design
GitHub

design-doc

Produce a written design document in docs/specs/ with user approval before planning begins. Use this skill during the Research phase when a feature request, architectural change, or non-trivial task enters the pipeline. Ensures misunderstandings are caught before any planning or implementation work starts. Also use when the user says "brainstorm", "design", "spec", or "let's think through this".

252 repo starsObserved in 1 repos
Design
GitHub

design-it-twice

Generate multiple radically different interface designs for a module using parallel sub-agents, then compare and synthesize. Based on Ousterhout's "Design It Twice" principle. Use when the user wants to explore interface options, design an API, compare module shapes, or says "design it twice", "what are my options", or "show me alternatives". Also use when the Architect agent is designing a new module boundary or public interface.

252 repo starsObserved in 1 repos
Design
GitHub

editorial-lite-layout

轻杂志型 skill。强调导语、留白、编辑感节奏和更克制的图文关系。

252 repo starsObserved in 1 repos
Design
GitHub