Sponsored by Vmake Labs Video Enhancer - Vmake Labs Video Enhancer는 AI를 활용해 동영상 화질을 개선하고, 디테일을 복원하며, 흐림을 줄이고 최대 8K까지 업스케일링합니다.

AI 광고 라이브러리

Openclaw Skills

WeChat Mini-Program Vibe Coding 스타터

Openclaw용 WeChat Mini-Program Vibe Coding 스타터

엔지니어가 아닌 사람들과 프로덕트 매니저들이 Vibe Coding 방법론을 사용하여 WeChat Mini-Program MVP를 처음부터 구축, 반복 및 출시하도록 돕기 위해 설계된 AI 에이전트 스킬입니다.

allin-zhang

v0.1.0

May 20, 2026

설치

정보

Skill.md

설치 및 다운로드

1. ClawHub CLI

레지스트리에서 스킬을 바로 설치하는 가장 빠른 방법입니다.


                  npx clawhub@latest install miniprogram-vibe-coding-starter

2. 수동 설치

스킬 폴더를 다음 위치 중 하나로 복사하세요

글로벌

~/.openclaw/skills/

워크스페이스

<project>/skills/

우선순위: 워크스페이스 > 로컬 > 번들

3. 프롬프트 설치

이 프롬프트를 OpenClaw에 복사하면 자동으로 설치됩니다.


                  Clawhub를 사용해서 miniprogram-vibe-coding-starter 설치를 도와줘. Clawhub가 설치되어 있지 않다면 먼저 설치해 줘 (npm i -g clawhub).

다운로드를 원하시나요?

ZIP 아카이브 형태의 원본 스킬 파일을 받으세요.

WeChat Mini-Program Vibe Coding 스타터란 무엇인가요?

WeChat Mini-Program Vibe Coding 스타터는 비기술 크리에이터, 프로덕트 매니저 및 초보자를 위해 맞춤화된 종합 가이드이자 AI 프레임워크입니다. 이 스킬은 사용자가 제품 비전과 수락 기준을 주도하고 AI가 작업 분해, 설명 및 코드 생성을 처리하도록 하는 Vibe Coding 개념을 활용합니다. 이 스킬은 팀이 WeChat Mini-Program MVP를 구축하는 전체 수명 주기를 안내하여 추상적이고 모호한 아이디어를 매우 구조화된 실행 가능한 개발자 작업으로 전환합니다.

사용자 우선의 단계별 접근 방식을 우선시함으로써 이 스킬은 개발이 빠르고 모듈화되며 오류에 강하도록 보장합니다. 사용자가 주요 아키텍처 결정을 제어할 수 있도록 하며, WeChat Cloud Development 및 네이티브 WXML/WXSS/JS와 같은 깔끔한 비교 프레임워크와 경량 구현을 제공합니다. 이를 Openclaw Skills 제품군에 통합하면 깊은 기술 전문 지식 없이도 원시 제품 의도와 프로덕션 준비가 완료된 미니 프로그램 간의 격차를 해소할 수 있습니다.

WeChat Mini-Program Vibe Coding 스타터 활용 사례

모호한 제품 아이디어를 명확히 하고 이를 구체적인 WeChat Mini-Program 요구 사항으로 변환합니다.
MVP의 절대적인 최단 경로를 정의하여 개발 오버헤드를 최소화하고 출시 시간을 단축합니다.
최소한의 종속성으로 네이티브 WeChat WXML, WXSS 및 JavaScript 아키텍처를 스캐폴딩합니다.
Claude Code, Cursor 또는 WorkBuddy와 같은 자율 코딩 에이전트를 위한 매우 구체적인 원자 작업을 초안 작성합니다.
WeChat Cloud Development (云开发) 또는 LocalStorage를 사용하여 저위험 백엔드 스토리지를 구현합니다.
제출 전 규정 준수, 개인 정보 보호 및 공유 기능 감사를 수행합니다.

WeChat Mini-Program Vibe Coding 스타터 작동 원리

의도 명확화: 추상적인 기술 쿼리 대신 모호한 사용자 요청을 대상 시나리오(예: 대상 사용자, 핵심 문제, MVP 경계)로 번역합니다.
해피 패스 매핑: 홈 화면, 사용자 입력, 기본 작업, 결과, 공유 또는 저장에 이르는 핵심 여정을 식별합니다.
기술 및 규모 선택: 최상의 스토리지 및 백엔드 옵션(LocalStorage 대 클라우드 DB)을 결정하고 비교 의사결정 매트릭스를 출력합니다.
작업 분해: 구현을 마이크로 단계(스켈레톤 -> 데이터 스키마 -> 핵심 로직 -> UI 조정 -> 출시 체크리스트)로 나눕니다.
에이전트 프롬프트 초안 작성: 고정확도 코드 출력을 보장하기 위해 코딩 에이전트에 입력할 원자적이고 단계별 프롬프트 파일을 생성합니다.
검증 및 감사: 정적 검사를 실행하고, 실제 장치 실행 경로를 시뮬레이션하며, 제출 전 Git 버전 관리를 완료합니다.

WeChat Mini-Program Vibe Coding 스타터 설정 가이드

이 스킬은 복잡한 로컬 컴파일이나 바이너리 설치가 필요하지 않습니다. Vibe Coding 워크플로우를 워크스페이스에 직접 삽입하여 작동합니다. WeChat Developer Tools (微信开发者工具)가 설치되어 있는지 확인한 다음 저장소를 초기화하십시오:

# 미니 프로그램을 위한 새 디렉토리 초기화
mkdir my-vibe-miniprogram && cd my-vibe-miniprogram

# 버전 제어 추적을 위한 git 설정
git init

# 필요시 JS 파일에 대한 정적 구문 검사 실행
node --check pages/main/main.js

Openclaw Skills의 유용성을 극대화하려면 컴파일 중에 로컬 문서, 테스트 스크립트 및 스크래치패드가 패키징되지 않도록 project.config.json 파일을 구성하십시오.

WeChat Mini-Program Vibe Coding 스타터 데이터 스키마 및 분류 체계

권장 디렉토리 구조

스타터 스킬은 MVP 안정성을 위해 최적화된 경량 모듈식 디렉토리 레이아웃을 시행합니다:

mini-program/
├── app.js                 # 앱 진입점, 상태 구성, 클라우드 초기화
├── app.json               # 전역 라우팅 및 창 구성
├── app.wxss               # 전역 스타일시트
├── pages/
│   ├── index/             # 홈페이지 / 검색
│   ├── main/              # 핵심 운영 뷰포트
│   └── result/            # 보고서, 출력 및 피드백 뷰
├── utils/
│   ├── config.js          # 환경, 정적 상수
│   └── share.js           # WeChat 공유 핸들러를 위한 공유 유틸리티 함수
└── cloudfunctions/        # 온디맨드 서버리스 클라우드 함수

데이터 모델링 청사진

초보자에게 모델을 제시할 때 이 스킬은 복잡한 JSON 엔티티를 간단한 비유로 매핑합니다:

엔티티	개념	예시 필드
마스터 데이터	명함	`restaurantId`, `courseName`, `price`
상세 데이터	목록 / 배열	`menuItems`, `steps`, `specs`
매핑	키 / 인덱스	`categoryId`, `typeId`, `groupId`
로컬 상태	임시 장치 스토리지	`sessionId`, `currentSelection`
클라우드 스토리지	공유 전역 레코드	`createTime`, `openid`, `status`

WeChat Mini-Program Vibe Coding 스타터 고급 기능

에이전트 작업 템플릿: 모델 환각을 방지하기 위해 WorkBuddy, Cursor, Claude Code 및 Knot Agent에 명시적으로 맞춤화된 사전 구성된 원자적 프롬프트 블록입니다.
워크로드 추정 매트릭스: 개발자 작업을 크기 클래스(XS ~ L)로 자동 평가하여 에이전트 프롬프트를 분할할 시기를 결정합니다.
자동화된 WeChat 공유 구성: 안전한 네이티브 공유를 위한 내장 보일러플레이트 핸들러(onShareAppMessage 및 onShareTimeline).
클라우드 개발 의사결정 규칙: 기능이 저위험 로컬 영속성에 적합한지 아니면 WeChat 서버리스 클라우드 백엔드에 적합한지 결정하는 논리 매개변수.
규정 준수 및 개인 정보 보호 스캐너: MVP가 최소한의 장치 권한을 요청하도록 보장하여 WeChat App Store의 승인율을 높이는 구조적 지침.