83.3K+다운로드
사용 가이드로 건너뛰기
enhance-prompt작성자 Google Labs

Enhance Prompt 스킬.

UI 디자인을 위한 Claude Code 및 Codex skill: 모호한 UI 아이디어를 세련되고 Stitch에 최적화된 프롬프트로 다시 작성합니다.

  • Web & UI
OpenDesign 다운로드사용 가이드 보기
google-labs-code/stitch-skills · plugins/stitch-utilities/skills/enhance-prompt/SKILL.mdSKILL.md
--- name: enhance-prompt description: Transforms vague UI ideas into polished, Stitch-optimized prompts. Enhances specificity, adds UI/UX keywords, injects design system context, and structures output for better generation results. --- ## Prerequisites ## When to Use This Skill ## Enhancement Pipeline ## Output Options ## Examples ## Tips for Best Results
2026-09-14에 업스트림 파일에서 읽은 머리말 및 섹션 제목 · 전체 6,618자

01 기능

Claude Code와 Codex에서 enhance-prompt 스킬이 하는 일

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

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

스킬 자체의 표현으로

이 스킬은 거친 UI 아이디어를 Stitch 생성에 맞는 프롬프트로 변환합니다. Stitch 프롬프트 엔지니어 역할을 하며, 입력에서 누락된 플랫폼, 페이지 유형, 구조, 시각적 스타일, 색상, 컴포넌트를 점검한 뒤 모호한 표현을 구체적인 컴포넌트 이름으로 재작성하고, 분위기를 나타내는 형용사를 강화하며, 콘텐츠를 번호가 매겨진 섹션으로 묶고, 모든 색상을 이름, 헥스 코드, 기능적 역할로 표기합니다.

프로젝트에 DESIGN.md가 있으면 팔레트, 타이포그래피, 컴포넌트 스타일이 DESIGN SYSTEM (REQUIRED) 블록에 포함되고, 없으면 design-md 스킬을 안내하는 팁이 표시됩니다. 출력은 기본적으로 복사 가능한 텍스트이며, stitch-loop을 위한 next-prompt.md 같은 파일로도 제공됩니다.

산출물

  • 페이지 목적과 분위기를 한 줄로 설명한 뒤 디자인 시스템 블록과 번호가 매겨진 페이지 구조가 이어지는 향상된 프롬프트입니다.
  • stitch-loop 스킬과 함께 사용하도록 작성된 선택적 next-prompt.md 파일입니다.
  • 사용자가 지정한 임의의 이름으로 된 선택적 파일입니다.
예시 프롬프트 보기 ↗

작동 방식

  1. 01
    원본 입력 점검

    이 스킬은 사용자의 프롬프트를 플랫폼, 페이지 유형, 구조, 시각적 스타일, 색상, 컴포넌트라는 여섯 가지 요소에 대해 점검합니다.

  2. 02
    디자인 시스템 가져오기

    현재 프로젝트에서 DESIGN.md를 찾아 디자인 시스템 블록을 읽어, 팔레트, 타이포그래피, 컴포넌트 스타일을 새 프롬프트에 재사용할 수 있게 합니다.

  3. 03
    향상 기법 적용

    모호한 표현은 이름이 지정된 컴포넌트로 바뀌고, 형용사는 분위기로 강화되며, 콘텐츠는 번호가 매겨진 섹션으로 구성되고, 색상은 설명적인 이름, 헥스 값, 역할과 함께 표기됩니다.

  4. 04
    정해진 순서로 출력 구성

    결과물은 페이지 목적과 분위기를 한 줄로 설명하는 문장으로 시작해, DESIGN SYSTEM (REQUIRED) 블록, 이어서 번호가 매겨진 Page Structure로 구성됩니다.

02 적합성 확인

enhance-prompt 스킬을 사용하는 경우

이러한 종류의 UI 디자인 작업에는 Claude Code 또는 Codex에서 enhance-prompt 스킬을 사용하십시오. 아래의 적합성과 제한 사항은 스킬 자체 파일에서 가져온 것입니다.

적합한 경우

  • Stitch로 전송하기 전에 UI 프롬프트를 다듬는 과정.
  • 이미 좋지 않은 생성 결과를 낸 프롬프트를 다시 작업하는 과정.
  • 간단한 아이디어에 디자인 시스템 일관성을 더하기.
  • 모호한 개념을 실행 가능하고 구조화된 프롬프트로 바꾸기.

한계 인지하기

  • 여러 개의 관련 없는 변경 사항을 하나의 편집 요청에 묶는 것은 적극적으로 지양되며, 편집은 한 번에 하나의 변경 사항씩 처리해야 합니다.
  • 과도한 디자인은 안티패턴입니다. 사용자가 단순한 것을 원할 때는 향상 작업도 그 의도에 맞게 유지되어야 합니다.

제공할 사항

  • 대략적인 아이디어 또는 기존 프롬프트모호한 UI 생성 아이디어나 성능이 부족했던 프롬프트가 이 스킬이 다시 작성하는 원재료입니다.
  • 프로젝트의 DESIGN.md(존재하는 경우)현재 프로젝트에서 이를 읽어와 팔레트, 타이포그래피, 컴포넌트 스타일을 새 프롬프트에 반영합니다.

03 스킬 내부

enhance-prompt 스킬이 Claude Code와 Codex에 부여하는 규칙

SKILL.md가 에이전트를 위해 설정하는 7가지 구체적 지침, 기본값, 한도 — 결과를 바꾸는 파일의 부분

  1. 먼저 Stitch 가이드를 확인하십시오

    무엇이든 향상시키기 전에 공식 Stitch 프롬프트 작성 문서를 참고해야 합니다. 이 문서의 권장 사항이 이 스킬에 내재된 패턴을 우선할 수 있기 때문입니다.

  2. DESIGN.md를 필수 블록으로 재구성

    DESIGN.md가 존재하는 경우 그 내용을 그대로 인용하지 않고, 출력물에서 DESIGN SYSTEM (REQUIRED)라는 제목의 섹션으로 재구성합니다.

  3. DESIGN.md가 없는 경우를 처리

    DESIGN.md가 없는 경우, 향상된 프롬프트 끝에 일관된 다중 화면 디자인을 위해 design-md 스킬을 참고하라는 안내가 추가됩니다.

  4. 색상은 하나의 고정된 패턴으로 표기

    모든 색상은 설명적인 이름, 괄호 안 헥스 코드, 그리고 그 색이 수행하는 기능적 역할로 표현되며, 단순한 색상 견본이나 모호한 형용사로 표현되지 않습니다.

  5. 페이지 섹션에 번호 부여

    페이지 콘텐츠는 산문 형태의 단락으로 남겨두지 않고, Stitch가 계층 구조를 읽을 수 있도록 번호가 매겨진 섹션으로 그룹화됩니다.

  6. 기본적으로 텍스트로 출력

    사용자가 다른 방식을 요청하지 않는 한, 향상된 프롬프트는 복사할 수 있는 텍스트로 반환됩니다. 파일로 작성하는 것은 선택 사항입니다.

  7. 대상 지정 편집 시 나머지 부분 보존

    요청이 새 페이지가 아니라 편집인 경우, 프롬프트에는 설명된 변경 사항만 적용되고 기존의 모든 요소는 그대로 유지된다는 점을 명시해야 합니다.

04 활용하기

Claude Code 또는 Codex에 enhance-prompt를 설치하십시오

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

Claude Code, Codex 또는 귀하의 에이전트에 enhance-prompt를 추가하십시오

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

Terminal
npx skills add https://github.com/google-labs-code/stitch-skills --skill enhance-prompt

plugins/stitch-utilities/skills/enhance-prompt/SKILL.md에 대한 일반적인 skills CLI 형식이며, 리포지토리에서 자체 경로를 문서화할 수 있습니다.

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

이 프롬프트를 자신의 콘텐츠와 제약 조건으로 수정한 다음 Claude Code 또는 Codex에서 실행하십시오.

Example prompt
make me a login page

출처: SKILL.md 예시(원문 그대로).

첫 번째 결과 확인

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

  • 프롬프트에는 플랫폼, 테마, 배경, 주요 강조색, 기본 텍스트 색을 순서대로 나열하는 DESIGN SYSTEM (REQUIRED) 블록이 포함되어 있습니다.
  • 모든 색상이 설명적인 이름, 헥스 코드, 기능적 역할로 표기됩니다.
  • 페이지 콘텐츠는 느슨한 설명이 아니라 내비게이션이 있는 헤더 같은 번호가 매겨진 섹션으로 나타납니다.
  • 모호한 컴포넌트 표현은 남지 않으며, 버튼에 대한 요청은 기본 콜투액션 버튼으로 구체화됩니다.
  • 일관성이 여러 페이지 결과물을 하나로 묶어주는 요소이므로, 디자인 시스템 블록이 반드시 존재합니다.
  • 부분 편집의 경우, 프롬프트는 전체 페이지를 다시 설명하는 대신 위치, 스타일, 플레이스홀더, 동작, 너비를 정확히 지정합니다.

OpenDesign에서는 enhance-prompt가 기본 제공됩니다: Plugins → Skills에서 상단 바에서 선택하십시오.

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

05 오픈 소스, 추적 가능

출처, 라이선스 및 검증

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

Author
Google Labs
Repository
github.com/google-labs-code/stitch-skills 브랜치 main
스킬 파일
plugins/stitch-utilities/skills/enhance-prompt/SKILL.md 확인 시 기록된 콘텐츠 체크섬; 커밋 0337446
License
Apache-2.0 LICENSE에서 확인.
리포지토리 스타
8,304 이 카탈로그에 12개의 스킬이 포함된 전체 google-labs-code/stitch-skills 저장소에 대해 2026-09-14에 촬영된 GitHub 스냅샷입니다. enhance-prompt에 대한 평가 또는 사용 횟수가 아닙니다.
OpenDesign에서 검증됨
2026-09-14 소스 파일, 경로, 라이선스 텍스트 및 별 개수가 확인되었습니다. OpenDesign 메인에 번들로 포함됨(2026-08-28 확인됨); 이 페이지에 실시간 실행이 기록되지 않았습니다.

SKILL.md 내부

  1. 사전 요구 사항이 패턴들을 대체할 수 있으므로 개선 작업 전에 공식 Stitch 프롬프트 작성 가이드를 참고하십시오.
  2. 이 스킬을 사용해야 하는 경우네 가지 트리거: 프롬프트를 다듬을 때, 결과가 부실할 때, 디자인 일관성을 추가할 때, 모호한 개념을 구조화할 때.
  3. 개선 파이프라인네 단계: 부족한 부분을 평가하고, DESIGN.md를 확인하고, 키워드·분위기·구조·색상 기법을 적용한 뒤 형식을 정리합니다.
  4. 출력 옵션기본적으로 복사할 수 있는 텍스트를 제공하며, 선택적으로 next-prompt.md 또는 사용자가 지정한 파일을 작성할 수 있습니다.
  5. 예시모호한 로그인 페이지 요청과 검색창을 추가하는 구체적인 편집 요청, 두 경우 모두 완전한 개선 결과가 함께 제시됩니다.
  6. 최상의 결과를 위한 팁구체성, 사용자 의도, 번호가 매겨진 구조, 디자인 시스템 포함, 단일 변경 편집을 다루는 다섯 가지 유의사항입니다.
스킬 자체 설명
애매한 UI 아이디어를 세련되고 Stitch에 최적화된 프롬프트로 변환합니다. 구체성을 향상시키고, UI/UX 키워드를 추가하며, 디자인 시스템 컨텍스트를 주입하고, 더 나은 생성 결과를 위해 출력을 구조화합니다.

SKILL.md의 앞부분 설명입니다. 전체 파일은 약 6,618자입니다. GitHub에서 전체 파일 읽기.

06 설치하기 전에

enhance-prompt 스킬에 대한 질문

이 답변은 2026-09-14 기준으로 확인한 SKILL.md 내용을 근거로 하며, 실행 기록을 바탕으로 한 것이 아닙니다.

이 스킬을 사용하려면 DESIGN.md가 필요합니까?

아니요. 이 스킬은 현재 프로젝트에서 DESIGN.md를 찾아볼 뿐입니다. 없는 경우, 개선된 프롬프트 끝에 모든 생성 페이지가 동일한 시각적 언어를 공유할 수 있도록 design-md 스킬로 하나를 만들라는 팁이 추가됩니다.

완성된 프롬프트는 실제로 어떤 모습입니까?

페이지 목적과 분위기를 한 줄로 설명하고, 플랫폼·테마·배경·강조 토큰을 담은 DESIGN SYSTEM (REQUIRED) 블록이 이어지며, 이후 번호가 매겨진 Page Structure가 나옵니다. 구조 섹션에는 헤더, 히어로, 푸터 등 각 영역이 나열됩니다.

프롬프트를 어딘가에 저장합니까, 아니면 화면에만 표시합니까?

기본적으로 복사할 수 있는 텍스트로 개선된 프롬프트를 반환합니다. 파일을 요청하면 stitch-loop 스킬용 next-prompt.md나 지정한 파일명으로 작성할 수 있습니다.

이 스킬에는 어떤 도구가 필요합니까?

허용된 도구로 Read와 Write를 선언하며, 이는 DESIGN.md를 읽고 선택적 프롬프트 파일을 작성하는 데 사용됩니다.

Enhance Prompt

실제 UI 디자인 작업에서 enhance-prompt를 실행하십시오.

enhance-prompt 스킬은 OpenDesign 내부에 포함되어 있습니다. 앱을 다운로드하고 Plugins → Skills에서 스킬을 선택한 다음 위의 프롬프트를 붙여넣고 결과 전에 계획을 읽으십시오.

OpenDesign 다운로드모든 스킬 보기
터미널
npx skills add https://github.com/google-labs-code/stitch-skills --skill enhance-prompt