피그마(Figma)에 정의된 디자인 변수를 추출하여 웹 프로젝트의 스타일 시트 파일로 동기화하는 프롬프트(Prompt) 작성 방법을 다룬다. 디자인 토큰(Design Token)을 인공지능 도구로 추출하고, 이를 CSS 커스텀 프로퍼티(Custom Properties)와 문서로 자동 변환하는 절차를 설명한다. 디자인 시스템과 프론트엔드 코드베이스 간의 스타일 일관성을 유지하는 데 활용된다. 토큰 추출 프롬프트 구조 피그마 파일에서 변수 정의를 조회하고 CSS 및 마크다운 문서로 변환하도록 … 더 읽기
2. 영상 업스케일링 스킬 동영상 해상도를 높여주는 스킬입니다. 3. 영상을 분석해서 html 문서로 요약 4. 스템스킬 오디오를 분리해주는 스킬
Tailwind를 처음 배울 때 가장 헷갈리는 두 가지가 “클래스 이름이 어떤 규칙으로 만들어지는가”와 “숫자·이름(sm, md…)이 실제로 몇 px인가”다. 이 문서는 그 두 체계를 공식 문서 기준으로 정리한다. 모든 수치는 2026-07-27에 Tailwind CSS 공식 문서로 확인한 값이다. 1 – 유틸리티 클래스 체계 유틸리티 클래스는 한 가지 스타일만 담당하는 클래스다. text-center는 글자 가운데 정렬 하나, p-4는 안쪽 … 더 읽기
이 문서는 Tailwind CSS로 상자 배치(레이아웃)와 화면 크기별 디자인(반응형)을 실습하는 문서다. HTML 기본 태그(div, h1, a)를 써 본 사람이 대상이고, CSS 파일을 따로 만들지 않고 클래스 이름만으로 화면을 만든다. 끝까지 따라 하면 화면 너비에 따라 카드가 1열에서 3열로 바뀌는 웹 페이지 한 장이 결과물로 남는다. 1 – Tailwind CSS와 실습 준비 Tailwind CSS는 미리 만들어 … 더 읽기
Antigravity와 Stitch MCP로 랜딩 페이지 만들기 이 문서는 Google Stitch에서 랜딩 페이지 시안을 만들고, 그 시안을 Antigravity의 에이전트가 React + Tailwind CSS 코드로 바꿔 브라우저에서 확인하는 과정을 처음부터 끝까지 따라 하는 실습 예제다. Antigravity에 Stitch MCP 연동(설치와 인증)이 이미 끝난 상태에서 시작하며, 연동 설치 과정 자체는 다루지 않는다. 끝까지 따라 하면 시안과 같은 모습의 랜딩 … 더 읽기
이 문서는 Claude Code(이하 클로드 코드)를 써 봤지만 대화가 길어지면 답이 흐려지는 경험을 한 사람을 위한 자료다. 컨텍스트 개념을 잡은 뒤 CLAUDE.md로 규칙을 남기고, 오토메모리와 컨텍스트 관리 커맨드를 익힌 후, 마지막으로 나만의 스킬 하나를 만드는 것까지 이어진다. 끝까지 따라 하면 프로젝트 폴더에 CLAUDE.md·.claude/rules/·.claude/skills/가 만들어지고, 다음 세션부터 같은 설명을 반복하지 않아도 된다. 시작하기 전에 컴퓨터에 클로드 … 더 읽기
예제 파일 remove-unwanted-element.zip (약 6 MB) — 실습용 예제 프로젝트 참고: [내용 인식 채우기] 패널로 비디오에서 개체 제거 (Adobe 공식 도움말) Content-Aware Fill(내용 인식 채우기)이란? 영상에서 원치 않는 객체를 자동으로 제거하고 주변 배경으로 채워주는 AI 기반 기능입니다. (CC 2019 이상 버전에서 사용 가능) 1. 마스크 만들기 영상을 컴포지션으로 생성한 뒤 마스크를 그린다. 마스크 속성을 subtract 로 … 더 읽기
