ui-from-references은(는) 무엇을 하나요?
에이전트 스킬: 참조를 Figma 없이 React+Tailwind UI로 변환합니다.
참조 이미지를 Figma 없이 React+Tailwind UI로 변환하는 에이전트 스킬입니다.
이 스킬은 디자인 참조 이미지(예: 스크린샷, 목업, 와이어프레임)를 입력받아, Figma와 같은 디자인 도구 없이도 바로 React와 Tailwind CSS 기반의 UI 컴포넌트로 변환해 줍니다. 프론트엔드 개발자나 AI 에이전트가 빠르게 프로토타입을 만들거나, 참조 디자인을 코드로 구현해야 할 때 유용합니다. 주로 Claude Code, Cursor, Codex와 같은 AI 코딩 도우미와 함께 사용되며, SKILL.md 파일에 정의된 워크플로우에 따라 이미지를 분석하고 JSX와 Tailwind 클래스를 생성합니다. 이 과정에서 디자인의 레이아웃, 색상, 타이포그래피 등을 자동으로 추출하여 일관된 UI 코드를 출력하므로, 수동 코딩 시간을 크게 줄일 수 있습니다.
npx skills add jetray33/ui-from-references에이전트 스킬: 참조를 Figma 없이 React+Tailwind UI로 변환합니다.
ElevenLabs text-to-speech with mac-style say UX.
Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.
Capture and automate macOS UI with the Peekaboo CLI.
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".
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.
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".