Product UI Director

何庆丰定制的产品 UI/UX 设计、实现与验收 Skill。凡是新建、改版、评审或迭代 Web、移动端、桌面端界面，设计系统、页面、组件、交互、响应式、可访问性、配色、字体、数据图表或视觉质量时必须使用。覆盖需求简报→设计系统→差异化视觉→代码实现→真实浏览器验收→迭代记录，内置可搜索 UI/UX 数据和项目级设计记忆。

9 starsFrontend & Design

Install

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

npx skills add macistone71-jpg/heqingfeng-product-ui-skill --skill product-ui-director

Manual install

git clone --depth 1 https://github.com/macistone71-jpg/heqingfeng-product-ui-skill.git /tmp/heqingfeng-product-ui-skill
mkdir -p ~/.claude/skills
cp -r /tmp/heqingfeng-product-ui-skill/. ~/.claude/skills/product-ui-director

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

From the SKILL.md

# Product UI Director｜何庆丰定制版

把“做得好看”改成可复用的产品工程：**先理解产品，再建立设计系统；先形成差异，再写代码；最后必须在真实浏览器验收。**

## 必须使用的场景

- 新产品、页面、落地页、工作台、仪表盘、移动端或桌面端 UI；
- 修改布局、配色、字体、间距、导航、表单、动效、图表和响应式；
- 用户说“不专业、太像 AI、信息太乱、移动端崩、交互别扭”；
- UI 代码评审、上线前验收、竞品视觉分析和设计系统沉淀。

纯后端、数据库、部署或不改变界面体验的任务不加载本 Skill。

## 不可跳过的原则

1. **产品先于风格**：先确认目标用户、核心任务、使用频率、平台、内容密度和风险，再选风格。
2. **真实内容先于占位图**：不得用虚构指标、虚假评价、无意义 lorem 或装饰性数字冒充产品证据。
3. **差异化先于模板**：禁止无理由使用“AI 紫色渐变 + 三张玻璃卡 + 巨大圆角”的默认 AI 审美。
4. **一项目一套设计记忆**：已有 `design-system/<slug>/MASTER.md` 时先读，不得静默覆盖。
5. **功能正确优先**：视觉不得破坏业务链路、数据状态、错误恢复、键盘导航和移动端可用性。
6. **真实验收**：不能只看代码宣布完成；必须打开页面、操作核心链路并检查至少 390px 与桌面视口。
7. **保留来源**：本 Skill 基于 MIT 开源项目定制，许可证与上游归属不得删除。

## 六阶段工作流

### 0. 读取现场

- 读取 PRD、README、已有页面、品牌资产、技术栈和最近改动；
- 检测技术栈，不能硬猜；
- 查找并读取现有 `design-system/**/MASTER.md`、页面 override、UI 验收报告；
- 新产品需要浏览 3–5 个直接或邻近竞品的官方页面，记录结构与交互，不复制视觉皮肤。

### 1. 建立产品 UI Brief

至少明确：产品任务、受众、平台、首要 CTA、关键信息、风险、内容密度、品牌性格、无障碍要求、支持视口。信息可从项目推断时直接推进，不反复询问。

需要创建项目文档时运行：

```bash
python3 scripts/qf_project_init.py --project-root <项目根目录> --project-name "项目名" --product-type "产品类型" --platform web
```

脚本默认不覆盖已有文件。

### 2. 生成并持久化设计系统

新项目或系统级改版必须运行：

```bash
python3 scripts/search.py "<产品类型 行业 风格约束>" --design-system --persist -p "项目名" --output-dir "<项目根目录>"
```

可用调节器：`--variance 1-10`、`--motion 1-10`、`--density 1-10`。工作台通常提高 density；内容产品降低 density；motion 只服务状态与因果。

已有 MASTER 时先读；除非用户明确授权，不得 `--force`。

### 3. 建立“产品签名”

每个产品至少定义 3 项可识别但不妨碍使用的签名：

- 一个版式签名（如编辑部网格、制片时间线、纸张式阅读区）；
- 一个信息签名（如质量门禁、证据链、审核状态）；

Read the full skill on GitHub

Details

Skill name: product-ui-director
Repository: macistone71-jpg/heqingfeng-product-ui-skill
License: MIT
Repo updated: 30 August 2026

FAQ

What does the Product UI Director skill do?

How do I install the Product UI Director skill?

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

Is Product UI Director popular?

It lives in macistone71-jpg/heqingfeng-product-ui-skill, which has 9 GitHub stars and 0 forks.

Related skills

Shopify Theme Builder

moVictor99/shopify-theme-builder

Build a complete, clean, Online Store 2.0 Shopify theme from a guided requirements interview. Use when a user wants to build, generate, scaffold, or design a Shopify theme, Shopify sections, JSON templates, Liquid, section groups, or a fully theme-editor-controllable storefront (including bilingual / RTL Arabic stores). Produces a zip-ready theme that passes theme-check and meets Shopify Theme Store requirements.

Frontend & Design

Muji Style Skill

yanliudesign/muji-style-skill

Create original quiet-living visuals from any theme, object, product, article, event, space, or supplied photograph using natural materials, restrained color, functional typography, asymmetric whitespace, honest photography, and human imperfection. Always use this skill when the user asks for MUJI-inspired, 无印良品感, 日系极简, Japanese minimalism, quiet living, natural minimalism, understated lifestyle design, 素朴生活美学, 留白产品海报, or asks to make a visual feel quieter, simpler, more natural, and less designed. Preserve the underlying design principles without copying MUJI logos, packaging, campaigns, stor

Frontend & Design

Terminal UI Design System

chyinan/terminal-ui-design-system

Create terminal-inspired UI interfaces with macOS-style window decorations, monospace typography, and a warm color palette. Use this skill when building developer tools, code marketplaces, technical documentation sites, or any interface that benefits from a terminal/command-line aesthetic. Provides complete design system specifications including color palette, typography, spacing, components, and CSS implementation details.

Frontend & Design

Kiro Motion Studio

KRYPT-123/kiro-motion-studio

KIRO 风格炫酷视觉视频工作流：片头、个人展示片、热点视频、歌词MV、3D铬金属Logo片、说唱/演出VJ循环，含卡点剪辑、封面和抖音文案。

Frontend & Design

UI Craft

Achref23illi/ui-craft

Make a mobile UI look and feel like a shipped app. Rules with numbers, 29 screen recipes (plus 200 measured ones), a fast screenshot review and lessons from a real redesign, grounded in 4,500 iOS screens from 78 apps (Spotify, Airbnb, Instagram, Apple Music, Wise, Coinbase, Google Maps, Uber Eats, Halide, Notion…). Use before designing or restyling any mobile screen (React Native, Expo, SwiftUI, Flutter, mobile web), when reviewing screenshots for "does this look like a real app", or when you need a reference for a pattern (feed, player, editor, sheet, paywall, settings, onboarding, empty stat

Frontend & Design

Irasutoya

hsol/irasutoya

Find, download and place free いらすとや (irasutoya.com) illustrations. Use whenever a slide deck, document, blog post, web page or design canvas would be better with an illustration or icon.

Frontend & Design

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