Refactoring Ui
作者 wondelaic172996495beMIT2.3K 个星标收录于 2026年10月8日更新于 2026年10月8日仓库4周前更新
Audit and fix visual hierarchy, spacing, color, and depth in web UIs. Use when the user mentions "my UI looks off" (or amateur/unprofessional), "fix the design", "Tailwind styling", "color palette", "visual hierarchy", "design system", "spacing scale", or "component styling". Also trigger when building consistent design tokens, creating dark mode themes, improving data-visualization clarity, or polishing UI details before launch. Covers grayscale-first workflow, constrained design scales, shadows, and component styling. For typeface selection, see web-typography. For usability audits, see ux-heuristics.
添加到 SourceWeft 工作区
- 在控制台中打开该技能，并将它添加到工作区。
- 为需要使用它的对话启用该技能。
该技能仅含说明：不附带任何可执行的脚本。
添加到 SourceWeft系统会先要求你登录，然后直接带你回到这个技能。
让你的智能体来安装
把这段提示词粘贴到 Claude Code、Codex、Cursor 或其他能运行命令的智能体中，也可以粘贴到 SourceWeft 对话里。智能体会阅读这个技能的安装说明，向你展示它的来源、许可证和脚本情况，在你同意后用 SourceWeft CLI 安装。
阅读 https://sourceweft.com/skills/gh-wondelai-skills-refactoring-ui/install.md 中的说明，按说明安装这个技能。安装前先告诉我它的来源、许可证以及是否附带脚本，等我确认。修改我电脑上的其他任何内容之前也要先问我。用命令行自行安装
适用于 Claude Code、Codex、Cursor 及其他本地智能体。SourceWeft CLI 会从源代码仓库中获取此处扫描过的那次提交，并根据扫描时记录的哈希值逐一校验每个文件。只要有任何不一致，就不会写入任何内容。
npx @sourceweft/cli skills install gh-wondelai-skills-refactoring-ui添加 --agent claude-code、codex、cursor 或 universal 来选择安装给哪个智能体（默认为 Claude Code）。
上游安装器——未经 SourceWeft 校验
开源的 skills 安装器会获取同一个固定的提交，但不会根据 SourceWeft 记录的哈希值校验文件。
npx skills add https://github.com/wondelai/skills/tree/c172996495bed0fcd26896a9416b2093fd7073f0/refactoring-ui更多来自 wondelai/skills 的技能
System Design
wondelai
用于设计可扩展分布式系统的结构化框架，涵盖容量估算、构建模块、数据库扩展、常见设计与运维。
Web Typography
wondelai
指导网页字体的选择、搭配与实现，涵盖可读性、CSS 与字体加载。
Top Design
wondelai
指导打造获奖级沉浸式网页体验，涵盖戏剧化排版、有目的动效与滚动式设计。
Ux Heuristics
wondelai
使用尼尔森启发式、克鲁格原则、严重程度评级和无障碍检查来评估界面可用性。
Traction Eos
wondelai
指导领导团队实施创业运营系统（EOS），使愿景与执行保持一致。
Team Topologies
wondelai
基于 Team Topologies 指导工程组织设计：团队类型、交互模式、认知负荷与断裂面。