# Explore and Refine Interface Design

Generic interface drafts often lack clear visual priorities and meaningful alternatives. Oil UI guides design exploration, prototype comparison, and refinement using actual screen evidence.

## Install

```bash
npx skillstore add oil-oil/oil-ui
```

## Metadata

- Status: approved
- Slug: oil-oil-oil-ui
- Version: 0.15.4
- Author version: 0.15.4
- Skillstore revision: r1
- Version status: valid
- Tree hash: 74dfcc43cd92eb80de5c25761160452842152842998f71db5053d996e5d148f7
- Author: oil-oil
- GitHub username: oil-oil
- License: MIT
- Repository: https://github.com/oil-oil/oil-ui/tree/b7004ab84654f04d9a0820dbaacd9f555bbb269a/
- Ref: 5c948af074e24413a5278072a82a5caa758753ba
- Supported tools: Claude, Codex, Claude Code
- Audit status: complete
- Agent install advisory: confirmation\_required
- Manual install advisory: allowed
- Artifact signature: available
- Audit attestation: unavailable
- Human verification: not\_verified
- Risk factors: scripts, external\_commands, network, filesystem, env\_access
- Quality score: 38
- Quality tier: warning
- Public page: https://skillstore.pages.dev/skills/oil-oil-oil-ui
- Manifest: https://skillstore.pages.dev/api/skills/oil-oil-oil-ui/manifest

## Capabilities

- Guide distinct design directions through product categories, layout, typography, color, imagery, and motion.
- Build portable comparison pages from local HTML, PNG, JPEG, WebP, and loopback development URLs.
- Compare desktop and mobile previews, show a baseline, filter candidates, and copy selections with notes.
- Guide screenshot recreation and interface refinement while preserving project design conventions.
- Capture screenshots, state sheets, text-masked views, and motion evidence with the bundled browser tool.
- Structure one-round visual reviews using current screenshots, task constraints, and concrete improvement suggestions.

## Use Cases

- Compare Product Directions: Explore distinct booking-product interfaces, compare representative previews, and record a selected direction before implementation.
- Refine Existing Interfaces: Improve hierarchy, spacing, typography, and motion while preserving existing brand assets and shared design conventions.
- Review Design Evidence: Assess current screens against audience needs and project constraints, then receive prioritized visual recommendations without changing files.

## Prompt Templates

### Review One Screen

```
Review this homepage screenshot for visual hierarchy and readability. Give three prioritized recommendations. Do not modify files or run update scripts.
```

### Explore Three Directions

```
Explore three visual directions for our course-booking product. Compare layout, typography, color, and imagery. Ask me to select one before implementation.
```

### Compare Local Prototypes

```
Use my local candidates to build a comparison page with a baseline and desktop and mobile views. Disable updates and review inputs first.
```

### Refine and Verify a Flow

```
Refine this checkout flow within our design system. Capture desktop, mobile, and motion evidence. Review once, document gaps, and leave business logic unchanged.
```

## Limitations

- Business logic, data flow, implementation architecture, and comprehensive testing are outside the design scope.
- Comparison generation requires Python 3.10\+; capture requires Node.js 22\+ and a compatible browser; MP4 assembly requires ffmpeg.
- Live previews require running local servers; visual validation and independent review depend on host capabilities.
- The audit found updater and preview-input risks; disable automatic updates and avoid untrusted inputs until remediation.

## Best Practices

- Provide real content, brand constraints, target devices, and a clear delivery scope before exploring directions.
- Disable automatic updates during controlled work and review candidate files, commands, state names, and selectors before execution.
- Evaluate actual screens at readable sizes and record unverified interactions, missing assets, and review limitations.

## Anti Patterns

- Treating cosmetic color changes as distinct design directions.
- Claiming visual or interaction validation from source inspection or a single static screenshot.
- Running unreviewed updates or third-party preview inputs with project credentials available.

## Security Audit

- Audited at: 2026-10-04T14:41:09.745\+00:00
- Summary: Most alerts are benign JavaScript syntax, image data, Chinese documentation, and negative test fixtures. Confirmed risks include unpinned automatic updates, inherited secrets, and unsafe preview input handling. Release-note trust and selector interpolation add injection risks; no evidence of intentional malware was found.

## Stats

- Views: 0
- Downloads: 0
- Favorites: 0
- Popularity score: 0