Communitygithub.com

Gentle-Programming/gentle-ai-tui-design

트리거: 터미널 UI 디자인, TUI 리디자인, Gentle Shell 스타일, IDE in a terminal, 사이드바/상태 표시줄 다듬기, TUI 비평. 시각적 증명과 함께 터미널 UI를 디자인, 비평 및 개선합니다.

gentle-ai-tui-design란 무엇인가요?

이 스킬은 터미널 인터페이스(패널, 레일, 상태 표시줄, 카드, 프롬프트)를 디자인, 검토 또는 개선하는 데 사용되며, 특히 Gentle Shell 프로젝트에 적합합니다. 목표는 IDE와 같은 밀도 높고 차분하며 개발자 중심의 터미널 UI를 만드는 것이며, 레트로 TUI 스타일은 피합니다. Claude Code 또는 이와 유사한 에이전트 플랫폼에서 작동하며, 사용자는 `document`, `shape`, `critique`, `distill`, `typeset`, `harden`, `polish` 같은 명령어를 통해 디자인 워크플로우를 제어합니다. 이 스킬의 핵심은 시각적 증명 중심의 반복 작업입니다. 즉, 코드나 메모리만으로 UI를 판단하지 않고, 실제 PNG 스크린샷을 캡처하여 변경 전후를 비교합니다. 모든 계층은 색상 역할, 굵기, 정렬로 표현되며, 빈 행이나 중첩 상자는 피합니다. 각 화면에서 정보는 한 번만 표시되며, 헤더에 표시된 데이터는 패널에서 반복되지 않습니다. 모든 렌더링은 가벼워야 하며, 목업은 모노스페이스 셀 그리드(ch 단위)로 표현되어 터미널에서 직접 구현 가능해야 합니다. 명령어를 실행하기 전에 관련 문서(`references/terminal-craft.md`, `references/commands.md` 등)를 로드하고, 3회 이하의 반복 후에 결과를 보고해야 합니다.

지원 대상~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/Gentleman-Programming/gentle-shell/tree/HEAD/skills/tui-design

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

문서

활성화 계약

터미널 인터페이스(패널, 레일, 상태 표시줄, 카드, 프롬프트), 특히 Gentle Shell을 디자인, 검토 또는 개선할 때 사용합니다. 목표 느낌은 터미널 안의 IDE: 밀도 높고, 차분하며, 개발자 중심이고, 레트로 TUI 껍질이 아닙니다. 웹 페이지에는 사용하지 마십시오 (gentle-design 사용).

엄격한 규칙

  • 코드나 기억만으로 터미널 UI를 판단하지 마십시오. 캡처하여(references/visual-loop.md) 변경 전후에 PNG를 확인하십시오.
  • UI를 편집하기 전에 반드시 references/terminal-craft.md를 읽으십시오. 이는 제안이 아닌 기준입니다.
  • 작동 모드: 친숙함이 표현보다 우선합니다. IDE 용어(창, 트리, 탭, 상태 표시줄, 명령 팔레트)를 사용하십시오. 브랜드는 팔레트, 밀도, 하나의 시그니처 동작에 담깁니다.
  • 모든 행은 비용이 듭니다. 계층은 색상 역할, 굵기 및 정렬에서 비롯되며, 빈 행이나 중첩된 상자에서 비롯되지 않습니다.
  • 한 화면에 각 사실을 한 번만 말하십시오. 헤더에 표시된 데이터는 패널에서 반복되지 않습니다.
  • 하나의 명령, 하나의 대상. 개선은 시스템을 보존하고, 재설계는 시스템을 대체합니다. 버려질 모양을 다듬지 마십시오.
  • 렌더링은 가벼워야 합니다. 렌더링 경로에 I/O나 재계산이 없어야 하며, 출력(스타일, 너비, 테마)을 변경하는 모든 것에 키가 지정된 캐시를 사용하십시오.
  • 목업(gentle-design 사용)은 터미널에서 표현 가능해야 합니다. ch 단위의 모노스페이스 셀 그리드, 전경/배경 색상만 사용, 굵게/희미하게/기울임/밑줄/취소선, 상자 그리기 및 글리프.

결정 게이트

질문명령어로드
아직 제품/디자인 맥락 없음documentreferences/design-doc.md
새 표면 또는 재설계shape, 그 다음 목업, 그 다음 구현references/commands.md
"어떻게 보이나요 / 무엇이 잘못되었나요"critiquereferences/critique.md
너무 복잡함, 공간 낭비, 중복distill / layout / quieterreferences/commands.md
평평함, 계층 없음, 읽기 어려움typeset / colorize / bolderreferences/commands.md
엣지 케이스, 좁은 터미널, 긴 텍스트harden / adaptreferences/commands.md
커밋 전 최종 점검polishreferences/commands.md

실행 단계

  1. 프로젝트에 DESIGN.md가 있으면 로드하고, 없으면 먼저 document를 제안합니다.
  2. 출하된 크기(넓음 180x50, 중단점 140, 좁음 80x24)에서 비주얼 루프로 현재 상태를 캡처합니다.
  3. 선택한 명령을 하나의 명명된 대상에 대해 실행합니다. 코드를 변경하기 전에 결과를 기록합니다.
  4. 변경, 재캡처, 이전 PNG 및 브리핑과 비교합니다. 최대 3회 반복한 후 보고합니다.
  5. 모든 개선 명령을 polish 검사와 저장소의 집중 테스트(렌더링 횟수, 오버플로)로 끝냅니다.

출력 계약

반환: 대상, 실행된 명령, 이전/이후 PNG 경로, P0-P3 태그로 수정된 발견 사항, 열린 상태로 남은 발견 사항, 실행된 검사.

참조

  • references/terminal-craft.md: 기본 규칙 및 터미널 안티 패턴.
  • references/commands.md: 터미널에 맞게 조정된 명령 플레이북.
  • references/critique.md: 점수 매겨진 비평 및 심각성 루브릭.
  • references/design-doc.md: 터미널 제품에 대한 DESIGN.md 템플릿.
  • references/visual-loop.md: 스크린샷 도구 및 비교 루프.
  • NOTICE.md: 귀속 정보.

Individual skills in this repo

This repo contains 9 individual skills — each has its own dedicated page.

Gentleman-Programming/gentle-ai-issue-creation

Create and triage GitHub issues from repository evidence. Trigger: issue creation, bug reports, feature requests, or issue approval.

Gentleman-Programming/gentle-ai-judgment-day

Trigger: judgment day, judgement day, dual review, adversarial review, juzgar. Run explicit blind dual review with at most two scoped fix/re-judgment rounds.

Gentleman-Programming/gentle-ai-rdd-defect-workflow

Trigger: RDD, receipt-driven development, review authority, receipt/lineage, correction/recovery, delivery gate/kill switch, bounded review defects. Guide work.

Gentleman-Programming/gentle-ai-skill-creator

Trigger: /skill-creation, skill creation, skill creator, create skill, new skill. Create LLM-first skills with valid frontmatter.

Gentleman-Programming/gentle-ai-skill-improver

Trigger: improve skills, audit skills, refactor skills, skill quality. Audit and upgrade existing LLM-first skills.

Gentleman-Programming/gentle-ai-skill-registry

Trigger: update skills, skill registry, actualizar skills, after skill changes. Index available skills by trigger and path.

Gentleman-Programming/gentle-ai-work-unit-commits

Plan commits as reviewable work units. Trigger: implementation, commit splitting, chained PRs, or keeping tests and docs with code.

Gentleman-Programming/gentle-design

Trigger: design a screen or page, mockup, landing page, UI directions, artboards, try a different approach, design system sync. Write self-contained HTML design directions under design/<slug>/.

Gentleman-Programming/release

Release gentle-pi through GitHub and npm. Trigger: release, publish, npm publish, GitHub release, version bump.

관련 스킬