본문으로 건너뛰기
cccskills
무료GitHub에 공개한국어 소개

product-design

화면을 설계하기 전에 무엇을 만들고 왜 필요한지 정리하는 스킬입니다. 업무 사실과 사용자 목표를 근거로 구조적 문제를 진단하고, 요청에 따라 설계나 프로토타입을 위한 권고안, 범위, 근거와 미결 사항을 정리합니다.

원문원문 설명 보기

Use for new surfaces, redesigns and vague product asks: establish user tasks and business meaning. Built-screen audits and visual polish have separate skills.

lobehub/lobehub스타 83,506(GitHub 83,506 + cccskills 0)

실행 점수 미검증

설치 방법 보기

이럴 때 유용합니다

  • 새 화면이 해결할 문제 정의
  • 모호한 재설계 요청 정리
  • 업무 현실과 화면 구조 대조
  • 명세 작성 전 근거와 범위 확정

한국어 소개

할 수 있는 일

이 스킬은 새 화면을 만들거나 기존 기능을 재설계하기 전에 무엇을 만들지, 왜 필요한지 정리합니다. 업무 개념과 상태, 역할, 각 동작이 만들어 내는 사건을 살펴 제품이 실제로 다루는 사실을 확인합니다. 그런 다음 사용자가 찾으려는 정보와 내려야 할 판단에 맞춰 정보를 묶는 방법을 검토하고, 관찰한 사실과 가설을 구분해 기록합니다. 근거가 있는 구조적 문제를 진단하고 권고안, 판단에 필요한 증거, 영향을 받는 범위와 미결 사항을 정리할 수 있습니다. 필요하면 명세서나 프로토타입으로 이어가기 위한 틀도 제시합니다.

이럴 때 유용합니다

“화면을 더 이해하기 쉽게 해 달라”처럼 요청이 모호하거나, 현재 화면 구성이 실제 업무와 사용자 작업에 맞는지 검토할 때 유용합니다. 구현이나 시각적 조정에 들어가기 전에 화면이 해결할 문제와 범위를 관계자들과 맞추는 데도 활용할 수 있습니다.

사용 예시

  • “이 화면을 재설계하기 위해 업무 사실과 사용자 목표를 정리해 주세요.”
  • “이 모호한 요청에서 화면이 해결할 문제와 미결 사항을 정리해 주세요.”
  • “명세서를 쓰기 전에 필요한 기능과 근거를 정리해 주세요.”

주의 사항

프로토타입이나 명세서는 요청을 받았거나 불확실성을 해소할 필요가 있을 때 작성합니다. 구현된 화면 감사와 시각적 다듬기는 별도 스킬의 대상입니다.

이 소개문은 공개된 SKILL.md를 바탕으로 AI(OpenAI Codex)가 작성했습니다. 정확한 사양은 아래 원문을 확인하세요.

문서 점검

AI가 SKILL.md의 내용에서 주의가 필요한 작업과 도입 전제를 확인했습니다. 점수는 실제로 실행한 결과(실행 검증)만으로 매깁니다.

안전성전송·삭제·명령 실행 등을 명시하고 있는가
A양호요청된 경우에만 산출물을 만들고 읽기 전용 작업에서는 근거를 답변에 기록합니다.
도입의 용이성필요한 도구나 API 키가 적고 적혀 있는가
A양호외부 서비스나 키는 요구하지 않으며 진행 범위에 따라 참고 자료를 읽습니다.

점수에는 넣지 않았습니다. 2026년 10월 26일 기준으로 AI(OpenAI Codex)가 판정했습니다. 참고용이므로 설치 전에 원문도 확인해 주세요.

평가가 다르다고 생각되면 재검토를 요청하기

어느 항목이 왜 다르다고 생각하는지 적어 주세요. 로그인은 필요 없습니다. SKILL.md와 대조해 평가를 다시 만들고 이곳에 반영합니다.

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

포함된 파일(7)

  • SKILL.md10.1 KB
  • references/canon.md4.4 KB
  • references/layer-model.md7.3 KB
  • references/pattern-base.md20.5 KB
  • references/trace-schema.md7.6 KB
  • references/worked-example.md7.4 KB
  • templates/design-spec.md3.4 KB

SKILL.md(원문)

설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.

Product Design

Decide what to build and why before arguing about spacing.

Two rules are non-negotiable:

Never design from the surface. Establish what the business actually models first.

Never turn the business model into the information architecture. The domain constrains what the surface may claim; the user's retrieval and decision task determines how the surface is organized. (P-14)

This skill handles product meaning first. It may hand a grounded frame to ux or design-prototype, but discovery does not require implementation or a prototype. Strip out every framework, table and component name: if no product insight remains, the finding belongs in an engineering skill.

Relationship to other skills

SkillQuestionWhen
product-designWhat should this surface be, and why?Before or during framing
uxHow should the interaction behave and feel?While designing or building
ux-auditDoes the built surface honor those rules?After it exists
design-prototypeHow can a materialized interaction be tested?When a prototype is useful

Select the smallest run mode

ModeFinish line
DiscoverEvidence map, business model, user-model hypotheses and structural diagnosis
FrameDiscover + view model, information architecture, scope and open decisions
MaterializeFrame + a requested spec and/or prototype

Do not create or modify artifacts unless the user asked for a design artifact, prototype or repository change.

For a substantial run, read references/pattern-base.md and references/layer-model.md in full. For a narrow question, inspect only the relevant patterns and state what scope was checked.

Step 1 — Ground the business model

Establish what is true before diagnosing the surface. For broad repositories, parallelize independent evidence areas when delegation is available and useful; the primary agent remains responsible for reconciling contradictions.

Produce:

  • Concepts, roles and states, including variants the current surface hides (P-04).
  • Who produces the terminal business fact and what closes the lifecycle (P-12).
  • What each state obliges someone to do (P-01).
  • What business event each action produces (P-02).
  • Concepts the business does not have (P-06).
  • Evidence sources, contradictions and confidence.

Treat domain types and state machines as strong evidence, not the sole source of truth. Check relevant service behavior, permissions, policy, production facts and user evidence when available. Code can be stale, accidental or incomplete.

Never proceed from the team's assumed model of the product. Treat it as a hypothesis until checked against domain and user evidence.

Step 2 — Frame the user's view model

Grounding constrains what the product may claim; it does not determine how a person should see it. Separate observed user evidence from design hypotheses:

  • Circumstance and job — “When I open this, I need to …”.
  • Lookup objects — stable things the user scans, compares or inspects.
  • Attached proof — what verifies each object without reconstructing joins.
  • First scan — the 2–4 questions answered without a click.
  • Secondary dimensions — chronology, provenance, runs and internal states; keep them as filters or drill-down unless the job is execution audit.
  • Evidence and confidence — mark claims as observed, reported or inferred; state how consequential assumptions can be validated.
ModelRole in design
Business/domain modelDefines truth, validity, completeness and red lines
User view modelDefines grouping, ordering, labels and default expansion
Execution modelSupplies provenance and audit detail; never gets the page for free

Do not proceed while proposed top-level sections are merely domain or execution nouns such as runs, reports, evidence versions or table names. Rewrite them in the objects the user is trying to find (P-14).

Step 3 — Diagnose the structural error

Name something wrong regardless of taste, for example:

  • A decision inbox exposes only errors, so it reads as an error log (P-04).
  • A button promises a business event that does not exist (P-05).
  • One page is both triage desk and reading room, and fails at both (P-07).

If no structural error can be supported by evidence, report that instead of manufacturing a diagnosis.

Step 4 — Align decisions by dependency

Surface only decisions that change the shape of the answer. For each, give a recommendation, evidence and consequence. Resolve upstream decisions before the downstream ones they constrain.

Ask a blocking question separately when its answer would materially change the work; group independent decisions in one memo. When the user authorizes autonomous progress, proceed with the recommended default and label the assumption. Never ask the user for something available through grounding.

For review, approval or acceptance surfaces, establish first whether the system or a human decision closes the lifecycle (P-12).

Step 5 — Prototype when it resolves uncertainty

Use design-prototype only when the user requests a prototype or interaction, density or hierarchy cannot be resolved honestly in a written frame. This belongs to Materialize mode.

  • Use plausible data and include empty, blocked and at-scale states.
  • Tag anything unsupported by the business with NEW on the mock.
  • Treat corrections as evidence. They become Pattern Base candidates only when they generalize beyond the current surface.

Step 6 — Scope honestly

BucketMeaning
✅ Already modeled and exposedRearranging an existing capability
⚠️ Modeled, not exposedLower domain risk; engineering cost still needs validation
❌ Not modeledRequires domain expansion and explicit cost/risk assessment

Prefer a coherent ✅ + ⚠️ slice when it solves a complete user job. Do not ship an incomplete or misleading slice merely because its concepts already exist. A ❌ capability may be the right first investment when required for value, safety or semantic completeness (P-10).

Name every ❌ item and its likely cost drivers in the spec (P-11). Do not silently drop it, but do not pretend its cost can be inferred from the domain model alone.

Close — record coverage and propose learning

Close at the level authorized by the user:

  1. If producing a spec, include the reality-check log from references/trace-schema.md. For read-only work, report important assumptions and evidence in the response instead of writing.
  2. Compare unexpected findings with references/canon.md and propose a Pattern Base candidate only when the lesson is general.
  3. Append to references/pattern-base.md only when repository edits are authorized and the candidate is deduplicated and reviewable.
  4. Record the coverage signal: sources and lifecycle areas checked, unavailable evidence, remaining low-confidence claims, and whether a new gap was found.

Zero new gaps means only that none were found within the inspected scope. It does not prove that the implementation or mental model is exhausted.

Deliverables

ArtifactWhenTemplate/location
Design specRequested in Materialize modetemplates/design-spec.md; use a user-specified path or ask
Interactive prototypeRequested or needed to resolve uncertaintyBeside the spec, via design-prototype
Reality-check logInside a produced specreferences/trace-schema.md
Pattern candidateA general, unexpected lesson emergesIn the spec/response; append only after review and authorization

Anti-patterns

  • Designing from a screenshot or treating the domain model as the sitemap.
  • Reading a state or action by its label rather than its obligation or event.
  • Inferring the user model from code and presenting it as observed truth.
  • Treating a missing concept as a layout problem.
  • Asking questions the available evidence already answers.
  • Treating concept existence as an engineering cost estimate.
  • Automatically prototyping, writing a spec or mutating the Pattern Base.
  • Adding local corrections or engineering findings to shared product guidance.

For a complete example, read references/worked-example.md.

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

댓글

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

같은 저장소의 스킬

acceptance

무료요약 있음

실제 제품을 적절한 조작 환경에서 실행해 변경 사항을 검증하고, 사용자가 확인할 수 있는 증거를 모아 인수 보고서로 게시합니다. 기존 검증 계획을 확인하거나 점검 항목을 만들고, `lh` CLI로 결과를 게시할 수 있습니다.

  • 변경된 제품 동작을 실제로 확인하기
  • 스크린샷 등 검증 증거 수집하기
  • 검증 계획과 보고서 작성하기
lobehub/lobehub8.4만2026년 10월 26일 업데이트

add-model-provider

무료요약 있음

LobeHub에 AI 모델 제공자를 추가하는 과정을 안내합니다. 런타임 연동, 모델 정보와 설정, 브랜드 표시, 문서화 및 인수 확인을 다루며, 기존 제공자에 모델만 추가하는 경우와 새 연동이 필요한 경우를 구분합니다.

  • LobeHub에 새 AI 모델 제공자 추가하기
  • 제공자의 설정 안내나 설명 갱신하기
  • 모델 추가에 새 제공자 연동이 필요한지 판단하기
lobehub/lobehub8.4만2026년 10월 26일 업데이트

add-setting-env

무료요약 있음

서버 환경 변수로 사용자 설정의 기본값을 지정하도록 구현하는 절차를 안내합니다. 변수 검증, 서버 설정 구성, 사용자 저장소 반영부터 예시 환경 파일과 셀프 호스팅 문서 갱신까지 다룹니다.

  • 환경 변수로 사용자 설정 기본값 지정
  • 설정을 서버 구성과 사용자 저장소에 연결
  • 환경 변수 예시와 문서 갱신
lobehub/lobehub8.4만2026년 10월 26일 업데이트

agent-runtime-hooks

무료요약 있음

에이전트 실행 단계, 도구 호출, 사람의 승인, 컨텍스트 압축, 하위 에이전트 호출에 훅을 등록하는 방법을 안내합니다. 이벤트를 관찰하고 로컬 도구 결과를 모의하거나 설정에 따라 웹훅으로 도구 호출을 허용 또는 거부할 수 있습니다.

  • 에이전트 단계와 오류 기록
  • 테스트 중 도구 결과 모의
  • 웹훅으로 도구 호출 허용 또는 거부
lobehub/lobehub8.4만2026년 10월 26일 업데이트

agent-signal

무료요약 있음

에이전트의 이벤트 기반 백그라운드 작업을 설계하고 구현하도록 돕습니다. 소스, 시그널, 액션, 정책의 역할을 나누고 비동기 처리, 중복 실행 방지, 완료 기록과 관측 기능을 다룹니다.

  • 이벤트로 시작되는 백그라운드 작업 추가
  • 대화 요청과 작업을 분리
  • 액션의 중복 실행 방지
lobehub/lobehub8.4만2026년 10월 26일 업데이트

agent-testing-bot

무료요약 있음

실제 데스크톱 채팅 앱에서 봇 채널의 인수 테스트를 진행합니다. Discord, Slack, Telegram, WeChat, Lark, QQ에서 메시지를 보내고 응답을 기다린 뒤 결과 화면을 캡처합니다. iMessage는 BlueBubbles 브리지를 사용합니다.

  • 실제 Discord 채널에서 봇 응답 확인하기
  • Slack이나 Telegram 대화 경로 테스트하기
  • macOS 앱의 작업 결과 화면으로 기록하기
lobehub/lobehub8.4만2026년 10월 26일 업데이트

lobehub의 스킬 모두 보기

이 스킬의 문제 신고