Codex 네이티브
성공
👍 0 · 투표하기
web-design-engineer
출력이 항상 HTML(페이지, 대시보드, 프로토타입, 슬라이드, 데이터 시각화)인 프런트엔드 디자인 skill입니다. 디자인 방향을 정하는 단계로 시작하며, 25가지 스타일 레시피를 함께 제공합니다. 지침만 있고 스크립트는 없습니다.
- 경로
skills/web-design-engineer· SKILL.md- 고정 커밋
2b9a89340b- 라이선스
- MIT
각 프롬프트는 Codex 네이티브, Codex + skill, Claude Code 네이티브, Claude Code + skill의 고정 2×2로 표시됩니다. 스크린샷을 클릭하면 전체 페이지를 볼 수 있습니다. 설치 및 사용 ↓
강점
skill의 자체 문서가 내세우는 강점을 출처와 함께 정리했습니다. 이는 주장일 뿐 결과가 아니므로, 아래의 실제 페이지와 비교해 보시기 바랍니다.
- HTML/CSS/JavaScript로 만드는 세련된 브라우저 렌더링 시각 결과물(페이지, 대시보드, 데이터 시각화 포함) 출처
- ‘작동한다’를 넘어 ‘놀랍다’를 목표로 한다 출처
- 만들기 전에 디자인 시스템을 선언하고, 상투적 표현 체크리스트와 스타일 레시피 25개를 쓴다 출처
테스트 범위: SaaS 랜딩 페이지, 데이터 대시보드, 개인 블로그 및 포트폴리오. 범위 밖의 프롬프트는 ‘대기 중’이 아니라 ‘범위 밖’으로 표시합니다.
v0 실행 후에 skill 원문과 대조해 확인했습니다(미리 정한 것이 아닙니다). 원문은 세 가지 페이지 유형을 모두 밝힙니다.
SaaS 랜딩 페이지
landing-saas
데이터 대시보드
dashboard
개인 블로그 및 포트폴리오
blog-portfolio
설치 및 사용
프로젝트 수준 설치: skill 폴더(SKILL.md가 들어 있는 폴더)를 고정 커밋 기준으로 프로젝트에 복사합니다. 갤러리 실행에서도 같은 방식으로 설치했습니다.
Claude Code
설치
폴더를 <project>/.claude/skills/web-design-engineer/에 복사합니다.
git clone https://github.com/ConardLi/garden-skills.git /tmp/web-design-engineer-src
git -C /tmp/web-design-engineer-src checkout 2b9a89340b70f632d31c0f1c69fce94a7912423e
mkdir -p .claude/skills
cp -R /tmp/web-design-engineer-src/skills/web-design-engineer .claude/skills/web-design-engineer사용
# 대화형
/web-design-engineer <작업 내용>
# 또는 요청 끝에 다음 문장 추가
Use the web-design-engineer skill.
# 헤드리스(갤러리 실행과 동일)
claude -p '<작업 내용> Use the web-design-engineer skill.'모든 프로젝트에서 사용하려면 대신 ~/.claude/skills/web-design-engineer/에 폴더를 두면 됩니다. 요청이 skill 설명과 일치하면 Claude Code가 skill을 스스로 로드할 수도 있습니다.
Codex
설치
폴더를 <project>/.agents/skills/web-design-engineer/에 복사합니다.
git clone https://github.com/ConardLi/garden-skills.git /tmp/web-design-engineer-src
git -C /tmp/web-design-engineer-src checkout 2b9a89340b70f632d31c0f1c69fce94a7912423e
mkdir -p .agents/skills
cp -R /tmp/web-design-engineer-src/skills/web-design-engineer .agents/skills/web-design-engineer사용
# 대화형: 이름으로 언급하거나 /skills에서 선택
$web-design-engineer <작업 내용>
# 헤드리스(갤러리 실행과 동일)
codex exec -s workspace-write '<작업 내용> Use the $web-design-engineer skill.'모든 프로젝트에서 사용하려면 대신 ~/.agents/skills/web-design-engineer/에 폴더를 두면 됩니다. Codex도 설명을 보고 skill을 스스로 선택할 수 있습니다.
참고
- v0에서 OpenAI의 frontend-skill을 대신합니다. 해당 skill은 OpenAI 공식 카탈로그에서 제거되어 이제 독자가 설치할 수 없기 때문입니다.
- React 경로는 CDN에서 React와 Babel을 불러오며, 기본값인 직접 작성 CSS 경로는 네트워크가 필요 없습니다.
메타데이터: skills/web-design-engineer/meta.yaml · Copyright (c) 2026 (no name given; attribute to ConardLi/garden-skills)