Skip to content
cccskills
FreePublished on GitHubEnglish overview

product-design

Use this skill to clarify what a product surface should do and why before settling its layout. It grounds recommendations in business and user evidence, identifies structural problems, and frames scope and unresolved decisions for a design or prototype when requested.

OriginalShow the original description

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/lobehub83,506 stars(GitHub 83,506 + cccskills 0)

Run score Not tested

See how to install

Good for

  • Clarifying the purpose of a new product surface
  • Reframing a vague redesign request around user tasks
  • Checking whether a screen reflects real business concepts
  • Preparing a grounded frame for a spec or prototype

Overview

What it does

This skill helps clarify what to build and why before designing a new screen or redesigning an existing feature. It starts by examining business concepts, states, roles, and the events produced by actions to understand what the product actually represents. It then considers how information should be grouped around what users need to find or decide, while recording observed facts separately from hypotheses. The work can diagnose evidence-based structural problems and organize recommendations, supporting evidence, affected scope, and unresolved decisions. It also provides a way to move toward a specification or prototype when appropriate.

When it helps

Use it when a request is vague, such as making a screen easier to understand, or when you need to check whether the current structure fits real work and user tasks. It can help align people on the problem and scope before implementation or visual adjustments begin.

Example requests

  • “Organize the business facts and user goals for this screen redesign.”
  • “From this vague request, summarize the problem the screen should solve and the open questions.”
  • “Before writing a specification, clarify the needed functions and their evidence.”

Notes

A prototype or specification is created when requested or when it is needed to resolve uncertainty. Auditing a built screen and visual polish are handled by separate skills.

This overview was written by AI (OpenAI Codex) from the public SKILL.md. Check the original below for the exact behavior.

Document check

AI checked the SKILL.md for operations that need care and for setup requirements. The score comes only from actually running the skill (hands-on test).

SafetyAre sending data, deleting files, and running commands disclosed?
AGoodIt limits artifact creation to requested work and says to report evidence for read-only work.
Easy setupDoes it need few tools or API keys, and are they documented?
AGoodNo external service or key is specified; reference reading depends on run scope.

Not counted in the score. Rated by AI (OpenAI Codex) as of Oct 26, 2026. Treat it as a guide and read the original before installing.

Disagree? Request a re-evaluation

Tell us which point is wrong and why. No login needed. We will check it against the SKILL.md, redo the evaluation, and show the result here.

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

Files included (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 (original)

Review the instructions the agent will receive before you install.

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.

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

acceptance

FreeSummary

Use this skill to verify a delivery by exercising the real product through a suitable surface such as a CLI, web app, desktop app, or iOS Simulator. It helps create or find a verification plan, capture evidence, and publish an acceptance report.

  • Verifying a completed product change
  • Collecting screenshots or other evidence
  • Creating a verification plan and report
lobehub/lobehub83.5KUpdated Oct 26, 2026

Use this skill to add an AI model provider to LobeHub across runtime integration, model cards, settings, branding, documentation, and acceptance checks. It also covers provider documentation updates and distinguishes new providers from models added to an existing provider.

  • Integrating a new AI model provider into LobeHub
  • Updating setup or usage documentation for a provider
  • Checking whether a model needs a new provider integration
lobehub/lobehub83.5KUpdated Oct 26, 2026

add-setting-env

FreeSummary

Use this skill to add a server-side environment variable that sets a default for a user setting. It walks through validation, server configuration and store merging, plus updating the example environment file and self-hosting documentation.

  • Adding an environment variable for a setting default
  • Wiring a new setting domain into server config
  • Documenting a new variable for self-hosting
lobehub/lobehub83.5KUpdated Oct 26, 2026

Provides guidance for registering hooks around an agent’s execution steps, tool calls, human approvals, context compression, and sub-agent calls. Hooks can observe events, supply local mock tool results, or use webhooks to allow or deny tool results under configured policies.

  • Observing agent steps and tool errors
  • Mocking tool results during local execution
  • Requiring webhook decisions before or after a tool call
lobehub/lobehub83.5KUpdated Oct 26, 2026

agent-signal

FreeSummary

Build event-driven background workflows for agents by defining sources, interpreting them as signals, and running actions through policies. It also guides asynchronous handoffs, deduplication, scoped execution, completion receipts, and observability.

  • Adding a new event source to an agent workflow
  • Routing interpreted signals to concrete background actions
  • Enqueuing work for asynchronous processing
lobehub/lobehub83.5KUpdated Oct 26, 2026

Use this skill to run end-to-end acceptance checks for bot channels in real desktop chat apps. It drives apps such as Discord, Slack, Telegram, WeChat, Lark, and QQ to send a message, wait for a response, and capture the result.

  • Checking a bot response in a real Discord channel
  • Testing chat behavior through Slack or Telegram
  • Capturing a bot interaction in a native macOS app
lobehub/lobehub83.5KUpdated Oct 26, 2026

See all skills by lobehub

Report a problem with this skill