# Explore Feature Designs With Structured Outputs

Teams often start new features with unclear scope, weak layout choices, and missing edge states. This skill guides Claude, Codex, or Claude Code through scope, layout options, HTML mockups, state coverage, and PRD-ready summaries.

## Install

```bash
npx skillstore add yunshu0909/design-exploration
```

## Metadata

- Status: approved
- Slug: yunshu0909-design-exploration
- Skillstore revision: r1
- Version status: missing
- Tree hash: 60bf0a80e179450e10ae0be784150a6bc4b0217f1ff6996d0c91d74c15296b73
- Author: yunshu0909
- GitHub username: yunshu0909
- License: MIT
- Repository: https://github.com/yunshu0909/yunshu\_skillshub/tree/master/design-exploration
- Ref: 64ca8af0f54a325752f08bd54e52151061ea659a
- Supported tools: Claude, Codex, Claude Code
- Audit status: complete
- Agent install advisory: allowed
- Manual install advisory: allowed
- Artifact signature: available
- Audit attestation: unavailable
- Human verification: not\_verified
- Risk factors: external\_commands
- Quality score: 78
- Quality tier: bronze
- Public page: https://skillstore.pages.dev/skills/yunshu0909-design-exploration
- Manifest: https://skillstore.pages.dev/api/skills/yunshu0909-design-exploration/manifest

## Capabilities

- Guides requirement discovery through pain points, scenarios, scope, and boundaries.
- Produces 5 to 8 ASCII layout options before visual mockups.
- Prompts technical research when files, APIs, formats, or systems affect design.
- Creates a main HTML mockup aligned with selected layout and design tokens.
- Creates a full-state reference for loading, empty, error, partial, and feedback states.
- Generates a requirements summary using the included Chinese template.

## Use Cases

- Shape PRD Inputs: Turn a vague feature idea into scoped goals, exclusions, decisions, and PRD-ready notes.
- Compare UX Directions: Review several ASCII layout approaches before investing in detailed mockups.
- Prepare Implementation References: Use full-state HTML references and interaction rules to cover edge cases during development.

## Prompt Templates

### Explore a New Feature

```
I have a vague idea for [feature]. Use design-exploration to ask the first scoping questions and define this version.
```

### Compare Layout Directions

```
Use design-exploration for [module]. Confirm the core scenario and boundaries, then create 5 to 8 ASCII layout options.
```

### Build Mockup and States

```
We selected option [letter] with [style reference]. Create the main HTML mockup and a full-state design reference.
```

### Prepare PRD Inputs

```
Review the design exploration decisions for [module]. Generate the requirements summary, technical constraints, key decisions, and archive plan.
```

## Limitations

- Does not implement production application logic or backend services.
- Requires user confirmation for scope, style, version, and module name.
- Needs user-provided design systems or reference pages for strict visual alignment.
- Source instructions and the included template are primarily Chinese.

## Best Practices

- Answer pain point, scenario, and boundaries before requesting visual output.
- Provide design systems or reference pages before HTML mockup work.
- Review full-state coverage before using outputs for PRD or implementation.

## Anti Patterns

- Requesting one polished mockup before scope is confirmed.
- Skipping technical research when the feature depends on files, APIs, or third-party systems.
- Treating the normal state as complete design coverage.

## Security Audit

- Audited at: 2026-07-08T13:37:23.716\+00:00
- Summary: All external command findings are false positives from Markdown inline code and fenced examples. The entropy warnings are also false positives because both files are readable UTF-8 Markdown, and no prompt injection or exfiltration intent was found.

## Stats

- Views: 158
- Downloads: 60
- Favorites: 2
- Popularity score: 0