Communitygithub.com

plugin87/ux-writing

프로젝트 음성 및 톤 시스템을 사용하여 버튼, 오류 메시지, 빈 상태, 마이크로카피, 알림, 라벨과 같은 UI 카피를 작성하거나 검토합니다. what→why→how 오류 공식과 포용적 언어 규칙을 적용합니다.

ux-writing란 무엇인가요?

이 스킬은 개발자와 AI 에이전트가 일관된 음성 및 톤 시스템을 사용하여 고품질의 UI 카피를 작성하거나 비평할 수 있도록 설계되었습니다. 프로젝트의 `content/voice-tone.md` 파일을 기반으로 버튼, 확인 대화상자, 오류 메시지, 빈 상태, 알림, 라벨 등 다양한 인터페이스 요소에 대한 구체적인 공식과 패턴을 제공합니다. 특히 오류 메시지에 '무엇이 일어났는지(what)→이유(why)→해결 방법(how)' 구조를 강제하고, 확인 대화상자에서는 동작과 대상을 명확히 반복하는 버튼 라벨링을 요구합니다. 또한 문장 첫 글자만 대문자로, 숫자 사용, 포용적 언어, 라벨(플레이스홀더 대체) 사용, 색상/방향만으로 정보를 전달하지 않는 규칙 등 기계적인 가이드라인을 시행하며, 제공된 10개 항목 사전 점검 목록을 통과해야 작업이 완료된 것으로 간주합니다. 이 스킬은 클로드 코드, 커서, 코덱스 등 다양한 AI 에이전트 플랫폼에서 사용할 수 있으며, 읽기 쉽고 국제화 가능한 일관된 사용자 경험을 보장합니다.

지원 대상~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/plugin87/ux-ui-agent-skills/tree/main/.claude/skills/ux-writing

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

문서

스킬: UX 라이팅 (UX Writing)

프로젝트 음성에 맞춰 인터페이스 카피를 작성하거나 비평합니다.

단계

  1. content/voice-tone.md를 읽습니다(음성 원칙, 톤 스펙트럼, 공식, 마이크로카피 패턴, 포용적 언어, 출시 전 점검 목록).
  2. 사용자의 감정 상태(온보딩/성공/일상/오류/파괴적)에 맞게 톤을 조정합니다. 스트레스가 높을수록 더 평이한 언어를 사용합니다.
  3. 공식을 적용합니다:
    • 버튼: 동사를 앞에 두고 결과를 명명합니다.
    • 확인 대화상자: 확인 버튼은 동작과 대상을 다시 명시합니다 — "Delete account"(계정 삭제)와 같이, "Delete"/"OK"/"Yes"/"Confirm"이 아닙니다. 제목은 질문("계정을 삭제할까요?")을 하고, 버튼은 일치하는 단어로 답합니다. 취소는 "Cancel"로 유지합니다. 되돌릴 수 없거나 영향이 큰 작업의 경우 타이핑하여 확인 단계를 요구합니다(WCAG 3.3.4/3.3.6).
    • 오류: 무슨 일이 일어났는지 → 이유 → 해결 방법(막다른 길, 코드 또는 스택 추적 없음).
    • 빈 상태: 가치 → 첫 번째 작업.
  4. 기계적 규칙을 시행합니다: 문장 첫 글자만 대문자, 전체 대문자 금지, 숫자 사용, 사용자 비난 금지, 라벨 사용(플레이스홀더 대체), 방향/색상만으로 안내 금지.
  5. 10개 항목 출시 전 카피 점검 목록을 실행합니다.

출력

자연스럽게 소리 내어 읽히고 점검 목록을 통과하는 최종 카피(또는 교정 검토). 타이트한 UI를 위해 문자 제한을 지킵니다.

확인 (작업 완료 선언 전 필수)

모든 줄을 content/voice-tone.md의 10개 항목 출시 전 점검 목록에 대해 실행합니다. 건너뛰지 마십시오:

  • 소리 내어 자연스럽게 읽힘; 작업에 동사가 앞에 옴; 전문 용어/비난/막다른 길 없음.
  • 오류는 what→why→how를 따름; 빈 상태는 value→action을 제공; "데이터 없음"/"오류" 같은 단순한 문구 없음.
  • 기계적 규칙: 문장 첫 글자만 대문자, 숫자 사용, 라벨 사용(플레이스홀더 대체), 색상/방향만으로 안내 금지, 포용적 언어.
  • 문자 제한 이내; 번역 가능(문자열 연결 금지 — accessibility/i18n-rtl.md 참조).

Individual skills in this repo

This repo contains 7 individual skills — each has its own dedicated page.

plugin87/design-tokens

Generate, extend, or audit design tokens in DTCG format with the 3-tier architecture (primitive → semantic → component). Use when the user wants a color palette, type scale, spacing/shadow/radius/motion tokens, multi-brand theming, or wants to validate token files. Covers colors, typography, spacing, shadows, borders, breakpoints, motion, gradients, opacity, blur, sizing, states, theming.

plugin87/governance

Govern how the design system evolves — SemVer for tokens/components, the contribution workflow, deprecation policy, and change communication. Use when the user wants to add/promote/deprecate a component or token, decide a version bump, set up a contribution process, or keep the system from fragmenting.

plugin87/image-to-code

Turn a reference image, screenshot, or mockup into token-driven, accessible code — infer the design system from the reference (palette, type scale, spacing, radius, layout archetype), map it to the 3-tier tokens, rebuild it, then verify with the kit's gates. Use when the user provides a design/screenshot and wants matching UI code.

plugin87/performance

Optimize UI performance against Core Web Vitals — LCP, INP, CLS — with loading/code-split strategy, layout-shift prevention, and animation performance rules. Use when the user wants to improve speed, fix jank or layout shift, hit Web Vitals budgets, or make a UI feel fast on low-end devices.

plugin87/prototype

Move an idea up the fidelity ladder (content-first → wireframe → low-fi → high-fi → code) with a validation plan at each level, plus user-journey mapping and usability-testing scripts. Use when the user wants to prototype, wireframe, map a user flow, or plan/run usability testing.

plugin87/redesign

Upgrade an existing website or app to premium quality without breaking functionality — audit the current design, identify generic/AI tells, then apply taste and system rules surgically. Use when the user wants to improve, modernize, polish, or "make better" an existing UI/codebase.

plugin87/token-build

Set up or run the token build pipeline — transform the DTCG tokens/*.json (source of truth) into platform artifacts (CSS variables, Tailwind @theme, JS/TS, iOS Asset Catalog, Android, Compose) with Style Dictionary / Tokens Studio / W3C DTCG export. Use when the user wants to generate platform theme files from tokens, wire token CI, or multi-platform token output.

관련 스킬