Communitygithub.com

OkminLee/claude-design-mode

HTML/JSX 디자인 아티팩트 생성, 미리보기, 검증, 시작 템플릿, 조정(Tweaks) 및 하위 스킬을 지원하는 Claude Code 플러그인입니다.

claude-design-mode란 무엇인가요?

이 스킬은 Claude Code에서 HTML 및 JSX 기반 디자인 아티팩트를 쉽게 생성하고 관리할 수 있도록 도와주는 플러그인입니다. 디자인 결과물을 실시간으로 미리보기하고, 검증(verifier) 기능을 통해 코드의 정확성을 확인할 수 있으며, 다양한 시작 템플릿(starters)을 제공하여 빠르게 프로젝트를 시작할 수 있습니다. 또한, 세부 디자인을 조정할 수 있는 Tweaks 기능과 보다 복잡한 작업을 자동화하는 하위 스킬(sub-skills)을 포함하여 개발자의 생산성을 크게 향상시킵니다. 주로 Claude Code 환경에서 사용되며, HTML/JSX를 다루는 웹 개발자나 디자이너에게 유용합니다.

지원 대상✓Claude Code~Codex CLI~Cursor
Part ofDesign & UI
npx skills add OkminLee/claude-design-mode
원본 보기→모든 스킬 둘러보기

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

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

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

문서

claude-design-mode은(는) 무엇을 하나요?

HTML/JSX 디자인 아티팩트 생성, 미리보기, 검증, 시작 템플릿, 조정(Tweaks) 및 하위 스킬을 지원하는 Claude Code 플러그인입니다.

기능

  • 디자인 아티팩트 생성: HTML 및 JSX 컴포넌트를 생성합니다.
  • 미리보기: 생성된 디자인을 실시간으로 미리볼 수 있습니다.
  • 검증(Verifier): 코드의 구문 오류 및 디자인 일관성을 검사합니다.
  • 시작 템플릿(Starters): 다양한 프로젝트 시작점을 제공합니다.
  • 조정(Tweaks): 세부 스타일이나 속성을 쉽게 조정할 수 있습니다.
  • 하위 스킬(Sub-skills): 복잡한 작업을 자동화하는 보조 스킬들을 포함합니다.

사용 방법

Claude Code 환경에서 이 플러그인을 활성화하면 위 기능들을 사용할 수 있습니다. 자세한 내용은 각 기능의 문서를 참조하세요.

요구 사항

  • Claude Code
  • HTML/JSX 기본 지식

관련 스킬

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