Communitygithub.com

spadeontop/Skills

대화형으로 고밀도, 시맨틱 Tailwind 기반 DESIGN_CONTEXT.md와 제로 의존성 라이브 시각적 미리보기(design-preview.html)를 공동 설계 및 생성합니다. OpenCode Data (opencode.ai/data) Technical Monospace 텔레메트리 엔진, 6가지 고유 아키타입, 엄격한 60-30-10 분포, 수학적 WCAG 2.1 AA/AAA 검증, 그리고 네이티브 Tailwind CSS v4 브라우저 CDN (@tailwindcss/browser@4) 아키텍처로 강화되었습니다.

Skills란 무엇인가요?

이 스킬은 AI 에이전트(Claude Code, Cursor 등)가 대화형 5단계 워크플로우를 통해 완전한 프런트엔드 디자인 시스템을 생성할 수 있도록 지원합니다. OpenCode Data (opencode.ai/data)의 기술적 모노스페이스 텔레메트리 디자인 시스템(IBM Plex Mono, 흑요석 숯 캔버스 #161616, 0.5px 헤어라인 테두리, 라이브 상태 티커, 리더보드 순위 카드, 고밀도 데이터 테이블)을 통합합니다. 엄격한 60-30-10 색상 분포, 수학적 WCAG 2.1 AA/AAA 접근성(본문 4.5:1, 테두리/컨트롤 3.0:1, 강조 텍스트 7.0:1 이상), Tailwind CSS v4 브라우저 CDN 아키텍처(@theme, @custom-variant dark 사용), 그리고 이모지 대신 깔끔한 SVG 아이콘을 강제합니다. 또한 6가지 큐레이션된 아키타입(OpenCode Data, Linear/SaaS Dark, Ultra-Minimalist, Modern Clean Enterprise, Fintech Terminal, Editorial Minimal)과 세부 모듈 참조(시맨틱 토큰, 타이포그래피 스케일, WCAG 대비 규칙, 미리보기 템플릿, 검증 스크립트)를 제공합니다. 이 스킬의 핵심은 한 번에 최종 결과물을 덤프하지 않고 사용자 선호도를 파악하고, 토큰을 조화시키고, 대비를 수학적으로 검증하고, 라이브 시각적 미리보기를 생성한 후 승인을 받는 대화형 5단계 절차입니다.

지원 대상~Claude Code~Codex CLI~Cursor✓OpenCode
Part ofDesign & UI
npx skills add https://github.com/spadeontop/Skills/tree/HEAD/blazing-duet
원본 보기→모든 스킬 둘러보기

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

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

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

문서

Design Context Generator & OpenCode Data Engine

대화형으로 프런트엔드 디자인 시스템(DESIGN_CONTEXT.md)을 설계하고, 시각적으로 테스트하고, 토큰 효율적인 코드를 생성하는 차세대 시스템 스킬입니다. 제로 의존성 라이브 HTML 미리보기(design-preview.html)도 함께 생성합니다.

OpenCode Data (opencode.ai/data) 기술 모노스페이스 텔레메트리 디자인 시스템을 브라우저 devtools MCP 분석을 통해 직접 통합합니다. IBM Plex Mono 타이포그래피, 흑요석 숯 캔버스 (#161616), 0.5px 헤어라인 정밀 테두리, 라이브 상태 티커, 리더보드 순위 카드, 고밀도 데이터 테이블을 특징으로 합니다.

다음을 엄격히 적용합니다:

  1. 60-30-10 색상 규칙 + 기능적 피드백 상태.
  2. 수학적 WCAG 2.1 AA/AAA 접근성 (본문 최소 4.5:1, 테두리/컨트롤 3.0:1, 강조 텍스트 7.0:1).
  3. Tailwind CSS v4 브라우저 CDN 아키텍처 (@tailwindcss/browser@4)와 @theme 및 @custom-variant dark 사용.
  4. 토큰 효율적 시맨틱 유틸리티 레시피 (커스텀 CSS 부풀림 없이 간결한 클래스 사용).
  5. 이모지 사용 금지 (1.5px/2px 스트로크의 깔끔한 SVG 아이콘 또는 간결한 텍스트 배지 사용).

사용 시기

  • 웹 애플리케이션이나 대시보드용 DESIGN_CONTEXT.md를 초기화, 업그레이드 또는 생성할 때.
  • OpenCode Data (opencode.ai/data)에서 영감을 받은 텔레메트리 대시보드, AI 리더보드, 개발자 도구 또는 데이터 고밀도 플랫폼을 만들 때.
  • Tailwind CSS v4 (CDN 또는 Vite/CLI) 또는 Tailwind v3용 디자인 토큰, UI 가이드라인 또는 스타일링 표준을 수립할 때.
  • 다운스트림 AI 코딩 에이전트가 임의의 헥스 코드 변동을 방지할 수 있도록 간결하고 모호함이 없는 컴포넌트 청사진을 제공할 때.

핵심 지시사항 및 제약 조건

  1. 원샷 덤프 금지: 첫 번째 턴에 최종 DESIGN_CONTEXT.md를 출력하지 마십시오. 5단계 대화형 워크플로우를 따라 사용자 선호도를 파악하고, 토큰을 조화시키고, 대비를 수학적으로 검증하고, 라이브 시각적 미리보기를 생성한 후 사용자의 승인을 받으십시오.
  2. 토큰 효율적 시맨틱 레시피: 청사진은 커스텀 CSS 블록이나 일회성 헥스 값(bg-[#1a2b3c]) 대신 간결한 시맨틱 Tailwind 유틸리티 클래스(예: px-4 py-2 rounded-input bg-primary text-primary-foreground)로 작성되어야 합니다.
  3. 이모지 사용 금지: 생성된 디자인 컨텍스트, 코드 파일 또는 사용자 커뮤니케이션에 이모지를 절대 사용하지 마십시오. 깔끔한 SVG 아이콘 사양이나 간결한 텍스트 배지를 사용하십시오.
  4. WCAG 2.1 AA/AAA 준수: 모든 색상 조합은 수학적 대비 테스트를 통과해야 합니다:
    • 캔버스/표면에 대한 본문 텍스트: ≥ 4.5:1 (AAA 표준은 ≥ 7.0:1 목표).
    • 필수 아이콘, 테두리 및 입력 컨트롤: ≥ 3.0:1.
    • 기본 CTA 버튼 텍스트: ≥ 4.5:1.
  5. TAILWIND CSS V4 CDN 아키텍처:
    • 독립형 제로 빌드 HTML/JS의 경우, <script src="https://unpkg.com/@tailwindcss/browser@4"></script>를 사용하십시오.
    • <style type="text/tailwindcss"> 내에서 @theme 및 @custom-variant dark (&:where(.dark, .dark *));를 사용하여 구성하십시오.
    • 동적 다크 모드는 <html>의 .dark 클래스를 통해 제어되며, :root와 .dark 간에 CSS 변수 토큰이 교체됩니다.

모듈식 참조 및 템플릿

이 스킬은 심층 분석 모듈식 참조 및 프로덕션 템플릿을 포함합니다:

  • opencode-data-spec.md: OpenCode Data 디자인 시스템(IBM Plex Mono, 흑요석 캔버스, 헤어라인 테두리, 텔레메트리 티커, 리더보드 카드, 데이터 테이블, 스파크라인)의 전체 사양.
  • archetypes.md: 큐레이션된 프리셋:
    1. OpenCode Data (opencode.ai/data의 Technical Monospace Engine)
    2. Linear / SaaS Dark (흑요석 피치, 일렉트릭 바이올렛/시안, 반투명 테두리)
    3. Ultra-Minimalist (스타크 단색, 건축적 여백, 제로 그라데이션)
    4. Modern Clean Enterprise (Plus Jakarta Sans, 엔터프라이즈 블루, 선명한 카드 그리드)
    5. Fintech Terminal (표 형식 숫자, 오더북 사다리, 손익 악센트)
    6. Editorial Minimal (디스플레이 타이포그래피, 따뜻한 종이 톤, 문학적 우아함)
  • semantic-tokens.md: 범용 60-30-10 토큰 계약, 기능적 토큰 및 CSS 변수 매핑.
  • typography-scales.md: 글꼴 페어링, Tailwind 타이포그래피 스케일 및 표 형식 데이터 규칙.
  • wcag-contrast-rules.md: 수학적 상대 휘도 공식 및 검증된 대비 매트릭스.
  • preview.template.html: 제로 의존성 Tailwind v4 CDN 라이브 대화형 HTML 미리보기 (아키타입 전환기 및 테마 토글 포함).
  • DESIGN_CONTEXT.template.md: 다운스트림 에이전트를 위한 완전한 마크다운 청사진 템플릿.
  • tailwind.config.template.js: Tailwind v4 CDN, v4 CSS 빌드 및 v3용 내보내기 가능한 구성.
  • validate-contrast.js: 대비 비율을 계산하는 Node/브라우저 스크립트.

절차적 워크플로우 (5단계)

1단계: 요구 사항 파악 및 발견

  1. 사용자가 다음을 지정했는지 확인하십시오:
    • 대상 아키타입 (기본값: OpenCode Data 또는 Linear / SaaS Dark).
    • 원하는 브랜드/악센트 색상 (또는 큐레이션된 시드 악센트 제공: OpenCode Indigo #8190ff, Cobalt #3b5cf6, Electric Violet #8b5cf6, Emerald #10b981).
    • 대상 테마 선호도 (듀얼 모드 기본값, 다크 우선 또는 라이트 우선).
    • 대상 스택 (기본값: 제로 빌드 HTML/JS용 Tailwind CSS v4 Browser CDN, 또는 Vite/CLI).
  2. 지정되지 않은 경우, ask_question을 사용하여 대화형으로 선호도를 명확히 하십시오.

2단계: 시맨틱 조화 및 OpenCode Data 매핑

  1. 선택한 색상을 엄격한 60-30-10 분포 + 기능적 상태에 매핑하십시오:
    • 60% 지배적: bg-background, bg-surface, text-foreground.
    • 30% 보조: bg-surface-elevated, bg-muted, text-muted-foreground, border-border, border-border-subtle.
    • 10% 악센트: bg-primary, text-primary-foreground, hover:bg-primary-hover, ring-ring.
    • 기능적: bg-success, bg-warning, bg-destructive, bg-info 및 각각의 전경색.
  2. 적절한 타이포그래피 스택을 결정하십시오:
    • OpenCode Data인 경우: IBM Plex Mono를 전역적으로 적용하십시오.
    • Linear / SaaS Dark인 경우: Inter 또는 Geist Sans를 적용하고 표 형식 메트릭에는 JetBrains Mono를 적용하십시오.

3단계: 수학적 WCAG 대비 검증

  1. wcag-contrast-rules.md의 상대 휘도 공식을 사용하여 모든 전경/배경 쌍의 대비 비율을 계산하십시오.
  2. 다음을 확인하십시오:
    • 다크 모드에서 #161616에 대한 본문 텍스트 > 15:1 (AAA) 달성.
    • 보조 텍스트 > 4.5:1 (AA) 달성.
    • 악센트가 어두운 경우, 전경 텍스트는 #ffffff여야 합니다.
    • 악센트가 밝은 네온인 경우, 전경 텍스트는 #09090b 또는 #161616이어야 합니다.
  3. 정확한 헥스 코드와 대비 비율이 포함된 제안된 팔레트 테이블을 사용자에게 제시하십시오.

4단계: 독립형 라이브 시각적 미리보기 (design-preview.html)

  1. preview.template.html을 해결된 토큰으로 채워 프로젝트 루트에 design-preview.html을 생성하십시오.
  2. 사용자에게 design-preview.html이 브라우저에서 열어서 테스트할 준비가 되었음을 알리십시오:
    • 라이브 OpenCode Data 리더보드 카드, 텔레메트리 상태 티커 및 고밀도 데이터 테이블.
    • localStorage 지속성을 사용한 라이브 테마 토글 (다크/라이트).
    • 동적 아키타입 전환기 (OpenCode Data, Linear, Ultra-Minimal 등 간 실시간 변환).
    • 버튼 상태, 입력, ⌘K가 포함된 검색 창, 배지 및 대화형 모달.
  3. 사용자 피드백 또는 승인을 요청하십시오.

5단계: 프로덕션 DESIGN_CONTEXT.md 및 설정 내보내기

사용자 승인 후:

  1. DESIGN_CONTEXT.template.md를 사용하여 프로젝트 루트에 최종 DESIGN_CONTEXT.md를 작성하십시오.
  2. 사용자 스택(Tailwind v4 CDN <head> 또는 tailwind.config.js)에 대한 내보내기 가능한 설정 스니펫을 제공하십시오.
  3. design-preview.html을 향후 반복을 위한 살아있는 시각적 테스트 벤치로 유지하십시오.

관련 스킬

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community