design-html작성자 Garry Tan

Design HTML 스킬.

UI 디자인을 위한 Claude Code 및 Codex 스킬입니다. 합의된 디자인 방향으로부터 프로덕션 수준의 HTML/CSS를 생성합니다.

Web & UI
HTML

garrytan/gstack · design-html/SKILL.mdSKILL.md

--- name: design-html description: Design finalization: generates production-quality Pretext-native HTML/CSS. (gstack) --- ## When to invoke this skill ## Confusion Protocol ## Claimed Limitations Need Evidence ## Continuous Checkpoint Mode ## Context Health (soft directive) ## Question Tuning (skip entirely if QUESTION_TUNING: false)

2026-09-14에 업스트림 파일에서 읽은 전문 및 섹션 제목 · 전체 54,976자

01 기능

Claude Code와 Codex에서 design-html 스킬이 하는 일

요약, 워크플로, 산출물을 모두 해당 스킬의 SKILL.md에서 그대로 읽어 정리한 내용입니다.

SKILL.md에서2026-09-14 읽음 · 실행 기록 아님

스킬 자체의 표현으로

실제로 텍스트가 리플로우되고, 높이가 동적으로 계산되며, 레이아웃이 리사이즈에 맞춰 조정되는 Pretext 네이티브 텍스트 레이아웃을 갖춘 프로덕션 품질의 HTML/CSS를 생성합니다. 승인된 목업(/design-shotgun), CEO 플랜(/plan-ceo-review), 디자인 리뷰 컨텍스트, 또는 사용자 설명을 기반으로 작동합니다. 디자인 복잡도에 따라 올바른 Pretext API 등급으로 라우팅합니다(단순 레이아웃은 prepare + layout을 사용하고, 채팅 UI는 prepareWithSegments + walkLineRanges를 사용하며, 편집형 스프레드는 텍스트가 장애물을 우회하는 layoutNextLine을 사용합니다).

30KB의 오버헤드, 의존성 없음. 자체 완결형 HTML 파일(내장된 Pretext 인라인 포함) 또는 프레임워크 컴포넌트(React/Svelte/Vue)를 생성합니다. 기본값은 즉시 브라우저 프리뷰를 위한 라이브 리로드 서버가 포함된 바닐라 HTML입니다. 절대 lorem ipsum을 사용하지 않으며—목업에서 실제 콘텐츠를 추출하거나 플랜에서 사실적인 텍스트를 생성합니다.

산출물

내장된 Pretext 인라인, 토큰에서 가져온 CSS custom properties, 시맨틱 HTML5, 실시간 편집을 위한 contenteditable + MutationObserver, 리사이즈 시 재배치를 위한 ResizeObserver를 갖춘 자체 완결형 HTML 파일로, ~/.gstack/projects/$SLUG/designs/<screen-name>-YYYYMMDD/finalized.html에 저장됩니다
프로젝트 의존성에 추가된 Pretext import가 포함된 프레임워크 컴포넌트 파일(React TSX/JSX, Svelte, Vue)로, ~/.gstack/projects/$SLUG/designs/<screen-name>-YYYYMMDD/finalized.[tsx|svelte|vue]에 저장됩니다
source_mockup 경로, source_plan 경로, 모드(approved-mockup/plan-driven/freeform/evolve), pretext_tier, 프레임워크 선택, 반복 횟수, 날짜, 화면 이름, 브랜치를 담은 finalized.json 메타데이터가 HTML과 함께 저장됩니다
사용자가 추출 제안을 수락하면, 생성된 HTML에서 추출한 CSS custom properties, 폰트 패밀리, 색상 팔레트, 여백 스케일, border radius, shadow 값을 담은 open DESIGN.md 형식의 DESIGN.md 파일

예시 프롬프트 보기 ↗

작동 방식

01
디자인 컨텍스트 감지 및 라우팅
/design-shotgun의 approved.json, CEO plan, 디자인 변형(design variants), 또는 DESIGN.md 토큰을 확인합니다.
02
구현 스펙 추출
디자인 바이너리를 사용할 수 있는 경우, 승인된 PNG에 대해 prompt command를 실행하여 GPT-4o vision으로 색상, 타이포그래피, 레이아웃 구조를 추출합니다.
03
스마트 Pretext API 라우팅
디자인을 티어별로 분류합니다: 단순 레이아웃은 리사이즈에 대응하는 높이를 위해 prepare + layout을 사용하고, 카드 그리드는 자체 크기 조절을 위해 동일한 방식을 사용하며, 채팅 UI는 딱 맞는 버블을 위해 prepareWithSegments + walkLineRanges를 사용하고, 에디토리얼 스프레드는 장애물 주변에 텍스트를 배치하기 위해 layoutNextLine을 사용합니다.
04
Pretext 네이티브 HTML 생성
벤더링된 Pretext를 인라인으로 포함한(또는 CDN 폴백을 사용한) 단일 파일을 작성합니다. 토큰에서 가져온 CSS custom properties, 시맨틱 HTML5, 실시간 편집을 위한 contenteditable + MutationObserver, 리사이즈 시 재배치를 위한 ResizeObserver, 목업이나 plan에서 추출한 실제 콘텐츠를 포함합니다.
05
미리보기 전 Slop Gate 스캔
디자인 디텍터를 사용할 수 있는 경우, 최종화된 페이지를 한 번 스캔하여 AI-slop 패턴(퍼플 그래디언트, 동일한 카드 그리드, 목업에 없는 일반적인 CTA)을 확인합니다.

02 적합성 확인

design-html Skill 사용 시점

이러한 종류의 UI 디자인 작업일 때 Claude Code 또는 Codex에서 design-html 스킬을 사용합니다. 적합성과 한계는 스킬 자체 파일에서 가져온 것입니다.

적합한 경우

하드코딩된 높이 없이 콘텐츠에 따라 카드가 자체적으로 크기를 조절해야 하는 대시보드, 목록 페이지, 카드 그리드를 만드는 경우
버블이 텍스트에 딱 맞게 줄어들고 최소 너비를 정확히 계산해야 하는 채팅 또는 메시징 UI를 구현하는 경우
/design-shotgun으로 승인된 목업, /plan-ceo-review 제품 전략, 또는 /plan-design-review 컨텍스트가 존재한 후 디자인을 최종화하는 경우
텍스트가 장애물이나 이미지 주변으로 동적으로 흘러야 하는 에디토리얼 스프레드, 블로그 레이아웃, 콘텐츠 중심 페이지를 만드는 경우

한계 인지하기

플레이스홀더 콘텐츠나 lorem ipsum이 필요한 프로젝트—이 skill은 항상 목업, plan, 또는 사용자 설명에서 추출한 실제 콘텐츠를 생성합니다
사람의 검토 없는 자동 실행—디자인 디텍터 설치 제안과 리파인먼트 루프는 AskUserQuestion을 통한 사용자 결정이 필요합니다

제공할 사항

승인된 디자인 목업 PNGapproved.json에 저장된 /design-shotgun의 승인된 변형 경로, 또는 사용자가 제공한 PNG 경로입니다.
CEO plan 또는 디자인 리뷰 노트제품 비전, UI 요구사항, 사용자 플로우, 타겟 오디언스, 비주얼 느낌, 콘텐츠 구조를 담은 /plan-ceo-review 또는 /plan-design-review의 마크다운 파일입니다.
DESIGN.md 토큰브랜드 색상, 폰트 패밀리, 스페이싱 스케일, border radius, shadow 값을 담은 저장소의 디자인 시스템 파일입니다.
프리폼 모드를 위한 사용자 설명목업이나 plan이 없는 경우, 사용자가 목적/오디언스, 비주얼 느낌(다크/라이트, 플레이풀/시리어스, 조밀/여유로운), 콘텐츠 구조, 참고 사이트를 제공합니다.
evolve 모드를 위한 이전 finalized.html이전 세션에서 나온 기존 최종 HTML입니다.

03 스킬 내부

design-html Skill이 Claude Code와 Codex에 제공하는 규칙

에이전트에게 SKILL.md가 설정하는 6가지 구체적인 지침, 기본값 및 제한 사항입니다 — 결과를 바꾸는 파일의 핵심 부분입니다.

텍스트 레이아웃에는 항상 Pretext를 사용
디자인이 단순해 보여도, Pretext는 리사이즈 시 정확한 높이 계산을 보장합니다. 오버헤드는 30KB이며, 모든 페이지가 이로부터 이점을 얻습니다.
실제 콘텐츠만 사용, 플레이스홀더 텍스트는 금지
목업이 있으면 그 안에서 텍스트를 추출합니다. 계획 기반 모드에서는 계획서의 콘텐츠를 사용하고, 자유 형식 모드에서는 사용자 설명을 바탕으로 실제와 같은 콘텐츠를 생성합니다.
코드의 우아함보다 소스 오브 트루스에 대한 충실도를 우선
승인된 목업이 있으면 픽셀 단위로 일치시킵니다. 이를 위해 CSS 그리드 클래스 대신 width: 312px가 필요하다면 그것이 정답입니다.
리파인먼트 루프에서는 정밀 편집만, 재생성은 금지
전체 파일을 다시 생성하는 Write 툴이 아니라 대상 부분만 변경하는 Edit 툴을 사용합니다. 사용자가 contenteditable을 통해 수동으로 편집한 부분이 있을 수 있으며 이는 보존되어야 합니다.
호출당 한 페이지
여러 페이지로 구성된 디자인의 경우, 페이지마다 /design-html을 한 번씩 실행합니다. 각 실행은 하나의 HTML 파일을 생성합니다.
AI 특유의 진부한 표현은 기본적으로 블랙리스트 처리
승인된 목업에 포함되어 있거나, DESIGN.md에서 명시적으로 허용하거나, 사용자가 트레이드오프를 한 번 명시하고 명시적으로 요청하지 않는 한, 보라색/파란색 그라디언트, 크림색과 세리프 폰트의 배색, 그라디언트 텍스트, 일반적인 3열 기능 그리드, 동일한 카드 그리드, 모든 것을 중앙 정렬한 레이아웃, 헤딩 위의 키커, 히어로 지표 행, 장식용 블롭, 발광하는 테두리, 스톡 사진 플레이스홀더, 일반적인 CTA, 그림자가 있는 라운드 코너 카드, 이모지 장식, 일반적인 후기(testimonial), 또는 판에 박힌 분할형 히어로는 절대 포함하지 않습니다.

04 활용하기

Claude Code 또는 Codex에 design-html 설치

npx skills add 명령 한 번 실행 후, 에이전트에서 첫 번째 작업을 수행하고 결과 체크리스트를 확인합니다.

Claude Code, Codex 또는 사용자의 에이전트에 design-html 추가

프로젝트에서 실행합니다. 설치 프로그램이 어떤 에이전트에 추가할지 묻습니다.

Terminal

npx skills add https://github.com/garrytan/gstack --skill design-html

design-html/SKILL.md를 위한 일반적인 skills CLI 형식이며, 저장소에서 자체 경로를 문서화할 수도 있습니다.

스킬에 첫 UI 디자인 작업 부여하기

스킬 자체의 용어로 작성되었습니다. 대괄호 부분은 각자의 자료로 교체합니다.

Starter prompt

Finalize the design for our [product name] landing page. I have an approved mockup from /design-shotgun at [path to approved.json]. The page needs a hero section with dynamic text that reflows on resize, a 3-card feature grid where cards self-size based on content, and a pricing table. Use our brand colors from DESIGN.md and make sure all text is editable in the browser so I can tweak copy live. Output as vanilla HTML first so I can preview immediately, then I'll ask for a React component version once the design is locked.

출처: 스킬 자체의 용어로 SKILL.md에서 작성했습니다.

첫 번째 결과 확인

SKILL.md 자체가 올바른 결과의 모습으로 제시하는 내용:

사용자가 창 크기를 조절해 텍스트가 동적으로 리플로우되는지 확인하고, 텍스트를 클릭해 contenteditable 레이아웃이 즉시 재계산되는지 확인할 수 있도록 http://localhost:PORT/finalized.html에서 라이브 리로드 서버가 시작됩니다
승인된 목업 PNG가 존재하는 경우 리파인먼트 루프 중 시각적 비교를 위해 인라인으로 표시되며, 그렇지 않은 경우 계획 기반 모드 또는 자유 형식 모드에서는 루프 중 사용자 피드백이 소스 오브 트루스가 됩니다
Pretext 레이아웃 계산에 필요한 텍스트 메트릭이 정확하도록, 첫 번째 prepare() 호출 전에 document.fonts.ready를 통한 폰트 로드 확인 게이트가 적용됩니다
사용자가 크기 조절 동작과 라이브 텍스트 편집을 테스트한 후 리파인먼트 루프에서 'done' / 'ship it' / 'looks good' / 'perfect'라고 확인하며, 최대 10회 반복 후에는 계속할지 완료로 처리할지 제안합니다

OpenDesign에서는 SKILL.md 링크에서 design-html을 가져옵니다: Plugins → Add → Skill → Import from link, 그런 다음 상단 바에서 선택합니다.

OpenDesign 다운로드 빠른 시작 가이드 읽기

05 오픈 소스, 추적 가능

출처, 라이선스 및 검증

이 페이지의 사실이 어디에서 왔으며 언제 마지막으로 확인되었는지 안내합니다.

Author: Garry Tan
Repository: github.com/garrytan/gstack 브랜치 main
스킬 파일: design-html/SKILL.md 검증 시 콘텐츠 체크섬 기록됨; 커밋 71f6048
License: MIT LICENSE에서 확인.
리포지토리 스타: 132,921 이 카탈로그에 7개의 스킬을 포함하는 전체 garrytan/gstack 저장소에 대해 2026-09-14에 촬영된 GitHub 스냅샷입니다. design-html의 평가나 사용 횟수가 아닙니다.
OpenDesign에서 검증됨: 2026-09-14 소스 파일, 경로, 라이선스 텍스트 및 스타 수가 확인되었습니다. OpenDesign 메인에 번들로 포함되지 않음(2026-08-28 확인); 이 페이지에 실제 실행 기록이 없습니다.

SKILL.md 내부

이 스킬을 호출해야 하는 경우승인된 목업, CEO 계획서, 디자인 리뷰 컨텍스트, 또는 프로덕션 HTML/CSS를 위한 사용자 설명과 함께 작동합니다
서문(먼저 실행)gstack-skill-start를 실행하고, STATUS 라인을 읽고, 저하된 모드를 처리하며, 온보딩/동의를 위한 GSTACK_INSTRUCTION 블록을 따릅니다
계획 모드에서 안전한 작업계획 모드에서 허용되는 작업: codex exec/review, ~/.gstack/에 대한 쓰기, 계획 파일, 산출물을 위한 open
계획 모드 중 스킬 호출스킬 지침은 참조가 아니라 실행 대상입니다. AskUserQuestion은 턴 종료 요건을 충족하며, ExitPlanMode는 워크플로가 완료된 후에만 실행됩니다
AskUserQuestion 형식툴 결정은 SESSION_KIND에 따라 분기하며, spawned는 추천 옵션을 자동으로 선택하고 Conductor는 프로즈를 사용하며, 실패 시 대체 처리가 적용됩니다
산출물 동기화(스킬 시작)스킬 시작 출력에 따라 동작합니다: GBrain 힌트, ARTIFACTS_SYNC 상태, GSTACK_INSTRUCTION을 통한 일회성 개인정보 동의 게이트
모델별 동작 패치(claude)할 일 목록 관리 원칙, 중요한 작업 전 사전 검토, Bash보다 전용 툴 우선 사용—이러한 선호도는 스킬 지침에 종속됩니다
어조GStack의 어조: 핵심을 먼저 제시하고, 구체적인 세부 사항을 담으며, 선택을 사용자 결과와 연결하고, 품질에 대해서는 직접적으로 말하며, 마무리는 절제된 형태로 합니다
컨텍스트 복구최근 산출물, 리뷰, 타임라인, 결정 사항, 최신 체크포인트를 복구합니다. RECENT_PATTERN이 특정 스킬을 암시하면 다음 스킬을 제안합니다
작성 스타일선별된 전문 용어는 첫 사용 시 풀이하고, 질문은 결과 중심으로 구성하며, 짧은 문장의 능동태를 사용합니다. EXPLAIN_LEVEL: terse인 경우 생략합니다
완전성 원칙 — Boil the OceanAI는 완전성 확보 비용을 낮춥니다. 전체 범위를 다루는 것을 권장하며, 옵션 간 커버리지가 다를 때는 완전성: X/10으로 표시합니다
혼란 대응 절차중대한 모호함이 있을 때는 멈추고, 이를 명확히 언급한 뒤 장단점이 있는 2~3개 옵션을 제시하고 질문합니다—일상적인 코딩에는 적용하지 않습니다

스킬 자체 설명

디자인 완성: 프로덕션 수준의 Pretext 네이티브 HTML/CSS를 생성합니다. (gstack)

SKILL.md의 머리말 설명입니다. 전체 파일은 약 54,976자입니다. 전체 파일을 GitHub에서 읽기.

06 설치하기 전에