UI Sift

设计、实现、评审或打磨简洁且交互精致的前端页面与组件。提供项目画像、视觉判断、精选组件检索、官方 skills/MCP 与源码发现、多库集成和证据验收。适用于新页面、后台、AI 对话、文档工作台、参考还原和局部 UI 改善；纯后端、仅修复业务逻辑或机械改字时不使用。

22 stars 2 forksFrontend & Design

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add Ciao1019/ui-sift --skill ui-sift

Manual install

git clone --depth 1 https://github.com/Ciao1019/ui-sift.git /tmp/ui-sift
mkdir -p ~/.claude/skills
cp -r /tmp/ui-sift/. ~/.claude/skills/ui-sift

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# UI Sift

让界面安静、清楚、顺手，在关键操作上有恰到好处的反馈。精选资源是候选素材库；最终交付应具有统一的产品语言。

面向不同开发者与工程使用，不预设目录结构、包管理器、路由、图标或 UI 基座。新项目按产品需要建立体系，已有项目优先适配其实际约束。

## 按任务展开，而不是一次读完

先判断工作范围，选择下面的路径。沿用用户已有授权，常规设计与选型不添加审批节点。用户只要评审时不自动改代码。

| 任务 | 工作路径 | 按需读取 |
| --- | --- | --- |
| 局部修饰、单个组件 / 状态 | 找到原实现 → 保留约束 → 修改 → 定向验证 | 本文件；必要时读交互配方 |
| 新页面、明显重构 | 简报 → 视觉方向 → 选型 → 真实主流程 → 打磨 → 验证 | [工作流](references/workflows.md)、[视觉语言](references/visual-language.md) |
| 多页面、多库工作台 | 上述路径 + 共享能力归属 + 页面间状态连续性 | [组件契约](references/component-contracts.md)、[集成模式](references/integration-patterns.md) |
| 参考还原 | 拆结构 / 排版 / 密度 → 实现 → 同视口比较 → 修正差异 | [视觉语言](references/visual-language.md)、[布局与内容](references/layout-content.md) |
| UI 评审 | 实际主流程 → 记录影响最大的具体问题 → 在请求范围内交付 | [质量评审](references/quality-review.md) |

阶段完成凭可观察结果判断：约束可解释、主流程能完成、状态反馈真实、相关验证有证据。跨轮次任务可保存 [设计简报](templates/design-brief.md)；小任务不必生成文档。用户改变方向时更新受影响判断，保留仍适用的接线与验证。

## 先理解正在做什么

阅读项目约定、依赖、路由、主题 tokens 和目标页面的调用链。确认框架、版本、包管理器、基础组件、图标、动效运行时，以及需要保留的交互和数据接口。存在 `components.json` 时，检查 aliases、style、base library 和 registries。

先搜索本地已有组件与实际调用；“目录里有文件”“已接入业务”“只有演示”是不同证据。不要为视觉调整迁移框架、替换整套设计系统或顺手重构业务。

工程较大时可运行只读 `scripts/profile_project.py`。先选目标 package，monorepo 合并结果不能代替目标框架判断。扫描输出只是线索，继续读目标文件与调用链。

用几句话确定本次设计：**谁在使用 → 最重要的任务 → 信息层级 → 一个值得打磨的交互**。从上下文能判断的细节直接决定；只询问会改变实现方向的缺失信息，同时继续独立工作。

用户已有品牌、布局或参考图时，以它们为准。没有视觉基线时，选择符合产品内容的中性色层次、清晰排版和少量强调色；简洁可以温暖，也可以严谨，不绑定某套字体或黑白模板。

Read the full skill on GitHub

Details

Skill name: ui-sift
Repository: Ciao1019/ui-sift
License: MIT
Repo updated: 22 October 2026

FAQ

What does the UI Sift skill do?

How do I install the UI Sift skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add Ciao1019/ui-sift --skill ui-sift. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is UI Sift popular?

It lives in Ciao1019/ui-sift, which has 22 GitHub stars and 2 forks.

Related skills

Components

AnayDhawan/Components

Use when building a frontend and the user wants a distinctive / animated / "wow" UI element in React + Tailwind - e.g. a laptop-opening-on-scroll, 3D tilt card, spotlight hero, animated beams/background, marquee, bento grid, interactive globe, meteor/particle background, shimmer button, or scroll/reveal motion. Fetches the showpiece component LIVE at build time from code libraries (Aceternity, Magic UI, Cult UI, ReactBits, 21st.dev) via their shadcn registry command (or WebFetch fallback), then adapts it to brand tokens. Also covers plain components (button, form, modal, table, etc.) as a fall

Frontend & Design

Telegram Premium Emoji

Zulut30/premium-telegram-emoji

Select verified Telegram custom emoji by meaning, preserve a consistent visual style across a bot or application, and generate HTML with catalog IDs. Use when a Telegram project needs premium emoji or the user requests a palette from this catalog. Includes ordered multi-emoji compositions. Not for unrelated UI icons.

Frontend & Design

Typescript React Nextjs Patterns

leejpsd/typescript-react-nextjs-patterns

Production-grade TypeScript reference for React & Next.js frontend development. Covers type narrowing, component Props, generic hooks, discriminated unions, as const, satisfies, Zod validation, TanStack Query, server/client boundaries, forms, state management, performance, accessibility, debugging, and code review. Use when the user works with TypeScript in React or Next.js: type errors, Props design, generics, API typing, SSR/CSR boundaries, hydration issues, form validation, state management, performance, or code review. Also use for "how should I type this?", "why does this type error happe

Frontend & Design

Dsh Plugin Dev

realchendahuang/dsh-skill

DeepSeek Harness (DSH) 插件、扩展与技能开发权威规范。当需要为 DSH 编写自定义工具 (Tool)、拦截钩子 (Hook)、UI 扩展、服务提供方或打包发布 DSH 插件时使用。提供官方 Cordis 微内核架构契约、执行流水线、隔离调试与质量校验 SOP。

Frontend & Design

Apple Design System

rukkiecodes/claude-apple-design-system

Apple-inspired UI/UX design language (from getdesign.md/apple) as adapted into a production app. Use when building, restyling, or reviewing any UI — screens, components, buttons, headers, alerts, sheets, cards, forms, typography, color, or spacing — so the result matches this Apple design language: photography-first, a single blue accent, pill CTAs, no chrome shadows, and a strict weight ladder. Trigger on "design a screen", "style this component", "make it look Apple / like QueenSkiilia", "build the UI", or "review my UI for design consistency".

Frontend & Design

Build Startup Brand

Kappaemme-git/build-startup-brand

Turn a startup idea, product, URL, pitch, or existing visual identity into a distinctive startup brand system and a polished standalone HTML report. Use when Codex needs to create or refine startup positioning, a salient brand idea, brand promise, tagline, messaging, voice, creative territories, logo or symbol directions, color palette, typography, visual language, brand applications, or compact brand guidelines. Also use for startup rebrands and brand audits that should end with an actionable, openable brand identity report.

Frontend & Design

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.