Receber por email
← Voltar para o catálogo

ui-design

UI 样式修改协作流程。当用户要求修改页面样式、调整布局、改 UI 细节时使用。通过"截图定位 → 现状描述 → 方案选择 → 改代码 → 微调"的结构化流程,减少沟通偏差,避免浪费 token。

2estrelas
Atualizado há 4 meses

Ver no GitHub ↗

Como adicionar

/plugin marketplace add bg-szy/TOP-SKILLS

O comando exato pode variar conforme o repositório. Confira o README no GitHub.

Para o autor da skill

Cole no README do seu repo

Mostra que sua skill está catalogada na Skillteca, gera backlink e tráfego rastreável.

[![Skillteca](https://www.skillteca.com.br/api/badge/ui-design-bg-szy/svg)](https://www.skillteca.com.br/skills/ui-design-bg-szy)

Alerta por categoria

Receba novas skills de Design e Frontend toda segunda

1 email curto, só com as skills novas de Design e Frontend. 4 minutos de leitura, sem spam, cancela com 1 clique.

Você confirma o email no primeiro envio. Sem spam. Cancela com 1 clique.

Ler descrição completa

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

核心原则

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

工作流程

第 1 步:定位问题

用户说想改某个地方时,先做两件事:

  1. 读代码 — 读取相关文件,理解当前实现
  2. 描述现状 — 用 ASCII 画出当前布局,向用户确认:"我看到的是这样,对吗?"
示例:
┌─────────────────────────────────────────────┐
│ 📈 标题                                [🔄] │
│ 副标题说明文字                               │
│ 🔍 [搜索框..

[Description truncada. Veja o README completo no GitHub.]
Compartilhar X LinkedIn