# Guide UI Refinement with Screenshot Workflow

UI changes often fail when layout issues are vague. This skill guides Claude, Codex, and Claude Code through screenshots, ASCII proposals, focused edits, and small refinements.

## Install

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

## Metadata

- Status: approved
- Slug: yunshu0909-ui-design
- Skillstore revision: r1
- Version status: missing
- Tree hash: 717588b882a45644899402c4fb7dd20353920504643f243896933aa8105a7740
- Author: yunshu0909
- GitHub username: yunshu0909
- License: MIT
- Repository: https://github.com/yunshu0909/yunshu\_skillshub/tree/master/ui-design
- 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: 79
- Quality tier: bronze
- Public page: https://skillstore.pages.dev/skills/yunshu0909-ui-design
- Manifest: https://skillstore.pages.dev/api/skills/yunshu0909-ui-design/manifest

## Capabilities

- Requires reading the current implementation before suggesting visual changes.
- Uses screenshots and marked areas to identify the exact UI problem.
- Describes the current layout with ASCII diagrams for confirmation.
- Presents two or three visual options before code changes begin.
- Limits implementation to the selected UI change and supports direct micro-adjustments.

## Use Cases

- Refine dashboard spacing: A frontend developer can align cards, controls, and headers after confirming the current layout.
- Compare layout alternatives: A product designer can review two or three ASCII options before selecting a direction.
- Handle small visual feedback: A product manager can request exact color, border, or spacing tweaks without reopening broad design choices.

## Prompt Templates

### Identify the UI issue

```
Use this skill to review the attached UI screenshot. First read the related files, then describe the current layout with an ASCII diagram.
```

### Offer layout options

```
Show two or three layout options for the selected area. Include an ASCII diagram and one short reason for each option.
```

### Implement the selected option

```
Apply option B only. Keep the edit focused on the selected layout change and avoid unrelated refactors.
```

### Refine after review

```
Adjust only the spacing and border strength from the latest screenshot. Make the smallest change that addresses the feedback.
```

## Limitations

- It is a workflow guide, not a visual design engine.
- It depends on user screenshots or clear visual descriptions.
- It does not replace accessibility testing or browser QA.
- It discourages broad refactors during small style changes.

## Best Practices

- Provide a screenshot with the target area clearly marked.
- Confirm the current ASCII layout before selecting a design option.
- Keep each implementation focused on one visual change.

## Anti Patterns

- Starting code changes before the current UI is confirmed.
- Offering only one layout option for a meaningful design choice.
- Combining a small style request with unrelated refactoring.

## Security Audit

- Audited at: 2026-07-08T11:12:47.546\+00:00
- Summary: Static command findings are false positives caused by Markdown code fences around ASCII UI diagrams. The high-entropy heuristic is also a false positive because SKILL.md is readable Markdown with Chinese text, emoji, and box-drawing characters.

## Stats

- Views: 134
- Downloads: 53
- Favorites: 1
- Popularity score: 0