coalacoding 디자인 핸드오프 QA(Design HandOff Quality Assurance)란? 개발된 결과물이 원본 디자인 가이드와 일치하는지 확인하는 최종 점검 단계이다. 사용 방법 프롬프트 채워 넣을 값 변수 설명 예시 {점검 대상} 어떤 디자인시스템과 시안을 볼 것인지. 파일 이름이나 식별자 디자인시스템 파일 ESG_DesignSystem, 시안 파일 ESG_시안 (화면 3벌: 1440 / 768 / 390) {대상에 접근하는 방법} 도구로 직접 읽는지, 목록을 … 더 읽기
목표: 내가 직접 프롬프트를 시험해 결과가 만족스러우면, 그 과정을 도구를 가리지 않고 복사·붙여넣기만 하면 되는 프롬프트 한 벌로 바꿔 학생에게 나눠 준다. 전체 흐름은 네 단계다.1. 기록 → 2. 검증 → 3. 변환 → 4. 배포 (작업 중) (빈 대화) (메타 프롬프트) (버전 보관) 1. 기록 단계 — 작업하면서 무엇을 남길 것인가 프롬프트는 대화가 끝난 … 더 읽기
Tailwind 계열 디자인 토큰 킷(Figma)을 받아 스타일가이드와 tokens.css를 만드는 절차 문서다. 프로젝트가 바뀌어도 그대로 쓰고, { } 자리만 갈아 넣는다. 킷을 처음 열어 보는 사람도 이 순서대로 따라가면 세 가지가 남는다 — 선택표(남길 토큰 목록과 근거), tokens.css(Tailwind v4 @theme 블록), Figma Style Guide 페이지. 맨 뒤 8장에 실제 킷 하나를 이 절차로 진단한 결과를 붙였다. … 더 읽기
이 문서에서는 팀 프로젝트에 맞는 협업 룰을 AI 프롬프트로 직접 만들어 본다. Notion 팀 DB와 Figma 디자인시스템을 소스로 연동해 카테고리를 확정하고, 실제 사건에서 룰을 뽑아 매핑표까지 완성하는 과정이다. 다 따라 하면 환경 카드 1장, 카테고리 번호표 1장, 세부 룰 1개, 산출물-룰 매핑표 1장이 남는다. 1 – 팀 환경 카드 만들기 룰은 팀마다 다르다. 쓰는 도구, … 더 읽기
이 글은 팀 프로젝트에서 중간·최종 산출물을 체계적으로 저장하기 위한 규칙을 AI로 만드는 프롬프트다. 아래 프롬프트의 입력란을 자기 프로젝트에 맞게 채워 Claude나 다른 AI에 붙여넣으면, 팀 전용 저장 규칙 문서가 만들어진다. 1 – 프롬프트 본문 아래 코드 블록 전체를 복사해 AI 대화창에 붙여넣는다. # 입력 섹션의 빈칸만 채우면 된다. 아래 원칙에 따라 우리 팀 프로젝트에 맞는 … 더 읽기
Claude Code에서 agy(Antigravity / Gemini)를 서브에이전트로 부리기 Claude Code 세션 안에서 로컬 agy CLI를 서브에이전트로 호출해, 작업 일부를 Gemini에게 위임하는 에이전트 정의입니다. 아래 파일 한 장만 지정된 위치에 넣으면 됩니다. 무엇에 쓰나 사전 조건 설치 아래 내용을 agy.md 파일로 저장합니다. 범위 경로 개인 전역 (모든 프로젝트) ~/.claude/agents/agy.md 프로젝트 한정 <프로젝트>/.claude/agents/agy.md Windows에서 ~는 C:\Users\<사용자명> 입니다. 저장 … 더 읽기
피그마(Figma)에 정의된 디자인 변수를 추출하여 웹 프로젝트의 스타일 시트 파일로 동기화하는 프롬프트(Prompt) 작성 방법을 다룬다. 디자인 토큰(Design Token)을 인공지능 도구로 추출하고, 이를 CSS 커스텀 프로퍼티(Custom Properties)와 문서로 자동 변환하는 절차를 설명한다. 디자인 시스템과 프론트엔드 코드베이스 간의 스타일 일관성을 유지하는 데 활용된다. 토큰 추출 프롬프트 구조 피그마 파일에서 변수 정의를 조회하고 CSS 및 마크다운 문서로 변환하도록 … 더 읽기
1. “스킬”이 무엇인가 스킬은 AI에게 미리 넣어 두는 작업 설명서다. 마크다운 파일 한 장이며, “이 상황에서는 이런 순서로, 이런 규칙을 지키며 일해라”를 적어 둔 것이다. 여기서 반드시 구분해야 하는 개념이 둘 있다. 구분 정체 비유 MCP 도구 실제로 Figma 파일을 읽고 쓰는 연결 통로 (use_figma, get_design_context 등) 손과 눈 스킬 그 도구를 언제·어떤 순서로 쓸지 … 더 읽기
이 문서는 여러 명이 한 팀이 되어 참고 사이트(KB손해보험)를 다시 만들어 보는 실습의 디자인 시스템 등록 단계를 다룬다. Figma Design 파일 안 에이전트로 변수·스타일·컴포넌트·베리언트를 등록하되, 이름과 값을 Tailwind CSS v4의 테마 변수 체계에 1:1로 맞추는 것이 목표다. 여기 적힌 값은 2026년 7월 기준 Tailwind CSS v4.3 공식 문서의 기본 테마 변수 목록에서 뽑았다. 끝까지 따라 … 더 읽기
