Ui Design

Name: Ui Design
Author: yunshu0909

yunshu0909/yunshu_skillshub

112 installs
739 repo stars
Updated July 27, 2026
yunshu0909/yunshu_skillshub

Run a five-step UI change workflow—confirm current layout with ASCII, offer 2–3 ASCII options, then minimal code edits and small tweaks.

About

UI Design is a phase-specific agent skill that structures how solo builders collaborate with coding agents on visual tweaks—margins, colors, search bars, headers—without wasting tokens on wrong assumptions. Agents must read the relevant files first and mirror the current layout in ASCII so the user can confirm understanding before any redesign discussion. Step two delivers two or three ASCII alternatives with a single-line concept each, explicitly banning single-option paralysis and oversized option menus. Coding starts only after the user selects a scheme, and implementations stay minimal: no structural refactors, bonus comments, or unrelated cleanup. Step five absorbs granular feedback like border weight or spacing nudges as direct executions rather than reopening the whole protocol. The skill is especially valuable when requirements arrive as screenshots or vague “make it cleaner” notes and you need disciplined alignment. Beginner-friendly because it is process-heavy rather than framework-specific, though it assumes you can point agents at frontend files in your stack.

5-step flow: locate issue → propose 2–3 ASCII options → user picks → minimal code change → fine-tune
Hard gate: read code and ASCII-describe current UI before asking desired end state
Each option requires ASCII layout diagram plus one-sentence rationale; never only text
Fine-tune step handles small concrete tweaks without restarting full option selection
Core rules: no guesswork, no drive-by refactors, one change target per iteration

Ui Design by the numbers

112 all-time installs (skills.sh)
Ranked #1,083 of 1,880 Design & UI/UX skills by installs in the Skillselion catalog
Security screen: HIGH risk (skills.sh audit)
Data as of Aug 2, 2026 (Skillselion catalog sync)

npx skills add https://github.com/yunshu0909/yunshu_skillshub --skill ui-design

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

[![Listed on Skillselion](https://skillselion.com/badge/skills/yunshu0909/yunshu_skillshub/ui-design.svg)](https://skillselion.com/skills/yunshu0909/yunshu_skillshub/ui-design)

Installs	112
repo stars	★ 739
Security audit	2 / 3 scanners passed
Last updated	July 27, 2026
Repository	yunshu0909/yunshu_skillshub ↗

What it does

Run a five-step UI change workflow—confirm current layout with ASCII, offer 2–3 ASCII options, then minimal code edits and small tweaks.

Files

SKILL.mdMarkdownGitHub ↗

用户要求修改页面的 UI 样式（布局、间距、颜色、组件搭配等视觉层面的调整）。通过结构化的协作流程完成修改，确保每一步都对齐目标，不做无效猜测。

核心原则

不猜，不抢跑 — 没有对齐目标之前，绝不动代码
截图是第一语言 — 主动要求用户提供截图，用截图定位问题
ASCII 画方案 — 布局方案用 ASCII 画出来，文字描述容易产生歧义
每次只改一个点 — 不要一次改多个地方，逐步逼近目标

工作流程

第 1 步：定位问题

用户说想改某个地方时，先做两件事：

1. 读代码 — 读取相关文件，理解当前实现 2. 描述现状 — 用 ASCII 画出当前布局，向用户确认："我看到的是这样，对吗？"

示例：
┌─────────────────────────────────────────────┐
│ 📈 标题                                [🔄] │
│ 副标题说明文字                               │
│ 🔍 [搜索框...                             ] │
├─────────────────────────────────────────────┤

禁止：跳过这一步直接问"你想改成什么样"。必须先让用户确认你理解了现状。

第 2 步：给出方案

提供 2-3 个方案，每个方案包含：

ASCII 布局图 — 画出改完的样子
一句话说明 — 这个方案的核心思路是什么

示例：
方案 A：搜索和刷新放同一行
┌──────────────────────────────────────────┐
│ 🔍 [搜索框...                ]    [🔄]  │
└──────────────────────────────────────────┘

方案 B：刷新挪到标题行
┌──────────────────────────────────────────┐
│ 📈 标题                           [🔄]  │
│ 🔍 [搜索框...                         ] │
└──────────────────────────────────────────┘

禁止：