Star200+

워크플로 가이드

프론트엔드 및 제품 UI 워크플로

「프론트엔드 및 제품 UI」을 위한 검토 가능한 Agent 워크플로입니다.

「프론트엔드 및 제품 UI」을 위한 검토 가능한 Agent 워크플로입니다.

추천 Skill 비교일치하는 Skill 보기

기대 결과

  • 「프론트엔드 및 제품 UI」 목표를 명확히 함
  • 일치하는 기능 선택
  • 다음 단계 전 결과 검증

워크플로 맵

이 순서로 진행

01

작업 정의

요청을 명확하고 검토 가능한 Agent 작업으로 바꿉니다.

02

기능 선택

넓은 카테고리 대신 현재 단계에 맞는 기능을 선택합니다.

03

실행 및 확인

출처, 권한, 범위를 확인한 뒤 최소한의 유효한 작업을 실행합니다.

04

결론 검증

다음 단계로 가기 전에 근거와 결과를 검토합니다.

추천 기능

단계별 Skill 선택

이 워크플로 적합성, 품질, GitHub 도입, 유지관리 최신성을 기준으로 정렬합니다. 단일 설치 명령이 아닌 판단 가이드입니다.

#1Frontend Design품질 · 100

저장소 설명(원문)

Guidance for distinctive, intentional UI design, typography, visual direction, and non-template-like product interfaces.

170K StarsSource terms (see LICENSE.txt)design-creative
비교
$ npx skills add anthropics/skills --skill frontend-design
#2Web Design Guidelines품질 · 100

저장소 설명(원문)

Review UI code for web interface guidelines, UX quality, accessibility, and interaction design best practices.

30K StarsSource terms (see source)design-creative
비교
$ npx skills add vercel-labs/agent-skills --skill web-design-guidelines
#3Figma Implement Design품질 · 100

저장소 설명(원문)

Translate Figma designs into production-ready UI code with close visual fidelity and component-level detail.

25K StarsSource terms (see source)design-creative
비교
$ npx skills add openai/skills --skill figma-implement-design
#4Taste Skill: Anti-Slop Frontend품질 · 100

저장소 설명(원문)

Design and implementation guidance for distinctive landing pages, portfolios, product demos, and purposeful redesigns.

78K StarsMITdesign-creative
비교
$ npx skills add Leonxlnx/taste-skill --skill design-taste-frontend
#5Anthropic Brand Guidelines품질 · 100

저장소 설명(원문)

Apply Anthropic official brand colors, typography, and visual standards to appropriate Anthropic-related artifacts.

170K StarsSource terms (see LICENSE.txt)design-creative
비교
$ npx skills add anthropics/skills --skill brand-guidelines
#6Vercel React Best Practices품질 · 100

저장소 설명(원문)

React and Next.js performance guidance for writing, reviewing, and refactoring production UI code.

30K StarsMITcoding-agents
비교
$ npx skills add vercel-labs/agent-skills --skill vercel-react-best-practices
#7Webapp Testing품질 · 100

저장소 설명(원문)

Use Playwright to interact with and test local web applications, capture screenshots, debug UI behavior, and inspect browser logs.

170K StarsSource terms (see LICENSE.txt)browser-automation
비교
$ npx skills add anthropics/skills --skill webapp-testing
#8Canvas Design품질 · 100

저장소 설명(원문)

Create original visual art, posters, PNG assets, and PDF documents through a clear design philosophy.

170K StarsSource terms (see LICENSE.txt)design-creative
비교
$ npx skills add anthropics/skills --skill canvas-design

적합한 경우

  • - 프론트엔드 및 제품 UI 워크플로
  • - 감사 가능한 Agent 의사결정
  • - 관리된 워크스페이스의 시험

적합하지 않은 경우

  • - 민감한 시스템에 감독 없이 접근해야 하는 경우
  • - 자료나 결과 품질을 검토할 수 없는 경우

실행 가능한 Pack이 필요하신가요?

Skill Pack에는 설치 순서, 감사 링크, 기계 판독 Agent 계획이 포함됩니다.

Pack 보기