AI 코딩 에이전트가 실제로 Webflow와 작업할 수 있게 하는 다섯 가지 Webflow 에이전트 스킬
Source: Dev.to
Source: …
에이전트 스킬이란?
에이전트 스킬은 AI 에이전트가 필요에 따라 발견하고 로드할 수 있는 명령, 스크립트, 참고 문서가 들어 있는 폴더이며, 일종의 지식 팩이라고 생각하면 됩니다. 에이전트가 (예: Webflow Designer Extension 구축)와 같이 컨텍스트가 부족한 작업을 만나면 해당 스킬을 읽고 필요한 정보를 빠르게 습득합니다.
이 형식은 원래 Anthropic에 의해 개발되어 오픈 표준으로 공개되었습니다. 현재는 다음을 포함한 다양한 에이전트 제품에서 지원됩니다:
- OpenAI Codex
- Claude Code
- Cursor
- GitHub Copilot
- Gemini CLI
- OpenCode
- Roo Code
- Factory’s Droid
- …및 기타 다수
각 스킬은 SKILL.md 진입점, 참고 문서, 그리고 도우미 스크립트를 포함합니다. 에이전트는 이러한 파일을 파싱하여 API 작동 방식, 따라야 할 패턴, 피해야 할 실수를 이해합니다.
왜 이것을 만들었는가
224 Industries 은 호주 브리즈번에 기반을 둔 Webflow 프리미엄 파트너입니다. 2016년부터 우리는 다음과 같은 기술 및 SaaS 기업을 위한 마케팅 웹사이트를 구축해 왔습니다:
우리는 일상적인 워크플로우에서 AI 코딩 에이전트를 사용합니다. 문제는? Webflow의 API는 사이트에 잘 문서화되어 있지만, 에이전트가 코드를 작성할 때 그 문서를 컨텍스트 창에 가지고 있지 않다는 점입니다. 그 결과 추측, 허위 메서드, 그리고 깨진 출력이 발생합니다.
Agent Skills가 이를 해결합니다. Webflow Designer API가 어떻게 동작하는지 추측하는 대신, 에이전트는 필요할 때 정확하고 구조화된 레퍼런스 문서를 바로 읽을 수 있습니다. 우리 팀은 내부적으로 이 스킬을 사용하기 시작한 직후부터 출력 품질이 즉시 향상되었으며, 그래서 이를 오픈소스로 공개하기로 결정했습니다.
Source: …
다섯 가지 기술
webflow-designer-api
Webflow Designer API와 작업합니다—Designer Extensions(웹플로우 디자이너 내부의 iframe) 을 만들거나 Designer API Playground용 코드 스니펫을 생성합니다. 포함 내용:
- 요소 조작, 스타일, 컴포넌트, 페이지, 변수, 자산
- 오류 처리, CLI 사용법, UI 디자인 패턴
가장 많이 사용하는 스킬이며, 모든 webflow.* 메서드에 대한 레퍼런스와 확장 기능을 구축할 때와 Playground에서 프로토타이핑할 때의 워크플로우‑별 가이드를 포함합니다.
webflow-browser-api
브라우저 API를 통해 JavaScript에서 Webflow Analyze 및 Optimize를 제어합니다. 포함 내용:
- 전역
wf객체 - 동의 관리(CMP 통합: OneTrust 및 TrustArc)
- 실험 변형 추적
- 맞춤 방문자 속성
트래킹 동의를 관리하거나 CMP를 통합하거나 방문자 속성을 기반으로 경험을 개인화해야 할 때 유용합니다.
webflow-code-components
DevLink를 사용해 React 코드 컴포넌트를 Webflow에 구축, 정의 및 가져옵니다. 포함 내용:
declareComponent정의와 11가지 prop 타입 전체- Shadow DOM 스타일링, Webpack 번들링, SSR 동작
- CLI 가져오기 워크플로우
Webflow용 맞춤 React 컴포넌트를 만들 때 이 스킬은 에이전트에게 DevLink 작동 방식에 대한 전체 컨텍스트를 제공합니다—prop‑type 정의부터 Tailwind, Emotion, Material UI 등 프레임워크‑별 스타일링 가이드까지.
webflow-webhooks
Webflow 웹훅을 수신하고 검증합니다. 포함 내용:
- HMAC‑SHA256 서명 검증
- 14가지 이벤트 타입과 페이로드 스키마 전체
- 대시보드‑생성 및 API‑생성 웹훅 설정 가이드
- 일반적인 디버깅 패턴
이 스킬은 올바른 서명 검증 및 타임스탬프 검증이 포함된 Express.js 웹훅 핸들러 예시 코드를 제공합니다.
webflow-enterprise-api
워크스페이스 관리, 감사 로그, 사이트 활동, 301 리다이렉트, robots.txt 구성 및 well‑known 파일을 위한 엔터프라이즈 전용 API 엔드포인트. 포함 내용:
- 모든 엔드포인트, 필요 권한 범위, 페이지네이션
Webflow Enterprise 워크스페이스에만 해당되지만, 에이전트가 이 엔드포인트에 대한 컨텍스트가 전혀 없을 때 중요한 역할을 합니다.
설치 방법
가장 빠른 방법은 Vercel Skills CLI를 사용하는 것입니다:
# Install all five skills
npx skills add 224-industries/webflow-skills
# Install just one
npx skills add 224-industries/webflow-skills --skill webflow-designer-api
# See what’s available
npx skills add 224-industries/webflow-skills --listClaude Code 또는 Factory’s Droid를 사용 중이라면 플러그인으로 추가할 수 있습니다:
/plugin add 224-industries/webflow-skillsPlaybooks와 Context7의 CLI에서도 작동합니다:
# Playbooks
npx p ...
# Context7
npx c7 ...(해당 도구에 맞는 명령어로 생략부(…)를 교체하세요.)
Laybooks / Context7 설치
# Laybooks
laybooks add skill 224-industries/webflow-skills
# Context7
npx ctx7 skills install /224-industries/webflow-skillsSource: …
구조
각 스킬은 **Agent Skills specification**을 따릅니다. 디렉터리 구조는 다음과 같습니다:
skills/webflow-designer-api/
├── SKILL.md # 개요와 레퍼런스 인덱스가 포함된 진입점
├── references/ # 상세 API 문서, 가이드, 예제
│ ├── elements-api.md
│ ├── styles-api.md
│ ├── components-api.md
│ └── …
├── scripts/
│ └── search_references.py # 태그나 키워드로 레퍼런스 검색
└── assets/
└── webflow-variables.css # 디자인 시스템 변수SKILL.md 파일은 목차 역할을 합니다. 에이전트에게 고수준 개요를 제공하고, 상세 레퍼런스 문서가 어디에 있는지 알려줍니다. 에이전트는 일반적으로 먼저 스킬 파일을 읽고, 작업에 필요한 특정 레퍼런스를 가져옵니다.
각 레퍼런스 파일에는 name, description, tags가 포함된 YAML 프론트 매터가 들어 있어 에이전트(및 사람)들이 이를 검색할 수 있습니다:
python scripts/search_references.py --search "consent"
python scripts/search_references.py --tag "styles"우리가 배운 점
- 간결함이 포괄성을 이긴다. 우리 스킬의 초기 버전은 너무 길었습니다. 에이전트는 컨텍스트 창이 제한되어 있어 모든 예외 상황을 하나의 파일에 넣으면 속도가 느려지고 정확도가 떨어집니다. 에이전트가 필요할 때 로드하는 집중된 레퍼런스 파일로 내용을 나누면 더 좋은 결과를 얻었습니다.
- 구조가 문장보다 더 중요합니다. 표, 코드 예시, 명확한 헤딩은 설명 문단보다 에이전트에게 더 유용합니다. 에이전트는 구조화된 내용을 더 빠르게 파싱하고 예시와 패턴 매칭을 할 수 있을 때 더 정확한 코드를 생성합니다.
- 프런트 매터가 검색 가능성을 높입니다. 모든 레퍼런스 파일에 태그와 설명을 추가하면 에이전트가 모든 내용을 읽지 않고도 필요한 것을 검색할 수 있습니다. 각 스킬에 있는 검색 스크립트가 이를 더욱 쉽게 만들어 줍니다.
Contributing
The repo is open for contributions. If you spot inaccuracies, want to add more examples, or have ideas for new Webflow‑related skills, PRs are welcome.
You can also use the included script to scaffold new skills:
node scripts/add-skill.js ""This creates the folder structure and updates all manifest files automatically.
기여
이 저장소는 기여를 환영합니다. 부정확한 부분을 발견하거나, 예제를 추가하고 싶거나, 새로운 Webflow 관련 스킬에 대한 아이디어가 있다면 PR을 환영합니다.
포함된 스크립트를 사용하여 새로운 스킬을 스캐폴딩할 수도 있습니다:
node scripts/add-skill.js ""이 스크립트는 폴더 구조를 생성하고 모든 매니페스트 파일을 자동으로 업데이트합니다.
자주 묻는 질문
어떤 에이전트가 Agent Skills를 지원하나요?
Agent Skills 형식은 Claude Code, Cursor, GitHub Copilot(VS Code를 통해), Gemini CLI, Roo Code, OpenHands, Goose, Factory Droid 등 다수의 에이전트에서 지원됩니다. 호환 가능한 에이전트 전체 목록은 **agentskills.io**에서 확인할 수 있습니다.
이 스킬을 사용하려면 Webflow Enterprise 플랜이 필요합니까?
아니요. 다섯 가지 스킬 중 네 가지는 모든 Webflow 플랜에서 사용할 수 있습니다. webflow-enterprise-api 스킬은 Enterprise 전용 엔드포인트를 다루므로 해당 스킬을 사용하려면 Enterprise 워크스페이스가 필요합니다. webflow-browser-api 스킬은 사이트에 Analyze 또는 Optimize 애드온이 활성화돼 있어야 작동합니다.
Claude Code 없이 이 스킬을 사용할 수 있나요?
네. Agent Skills는 오픈 표준이며 호환 가능한 어떤 에이전트와도 함께 사용할 수 있습니다. npx skills CLI, Playbooks, Context7 등 사용 중인 에이전트에 맞는 방법으로 설치하면 됩니다.
이 스킬은 Webflow에서 공식적으로 관리하나요?
아니요. 이 스킬은 Webflow 프리미엄 파트너인 **224 Industries**에서 제작·유지보수하고 있습니다. 참고 내용은 Webflow 공식 문서를 기반으로 하며, 저희 팀이 최신 상태로 업데이트합니다.
npx build‑skill
npx build‑skill 로 직접 Agent Skills를 만들어 보세요.
Memberstack 에이전트 스킬
Integrate Memberstack Agent Skills for the Memberstack CLI and other parts of the Memberstack ecosystem—the perfect skills for those building on Webflow and Memberstack.
Built by Ben Sabic, Fractional CTO at 224 Industries.