ui-ux-design-pro by saifyxpro/ui-ux-design-pro-skill
npx skills add https://github.com/saifyxpro/ui-ux-design-pro-skill --skill ui-ux-design-pro为获得最佳效果,请使用 GPT-5.3 Codex 或 Gemini 3.0 Pro。
以资深水平的工艺、意图和一致性构建每个界面。包含对金融科技仪表板、SaaS 着陆页和开发者工具的专门支持。
适用于: 仪表板、管理面板、SaaS 应用、工具、设置页面、数据界面、AI 界面、移动应用、着陆页、营销网站、产品展示。
在提出或构建任何 UI 之前,您必须阅读 references/ 目录下的所有参考文件。 这不是可选的——它们包含了经过生产测试的模式、经过验证的设计令牌系统和防止产生通用输出的工艺原则。
必读顺序:
references/design-directions.md — 方向选择和示例系统references/token-architecture.md — 令牌命名和分层references/color-system.md — oklch 调色板、对比度、深色模式广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
references/typography.md — 字体配对、比例、层级references/spacing-and-layout.md — 网格系统、间距比例references/depth-and-elevation.md — 阴影和边框策略references/component-patterns.md — 状态、交互模式references/animation-and-motion.md — 时序、缓动、GPU 性能references/real-world-patterns.md — 10 个已上线的生产模式references/accessibility.md — WCAG 2.2、对比度、键盘导航references/cognitive-principles.md — 希克定律、费茨定律、格式塔原则references/critique-protocol.md — 展示工作前的自我评估不要跳过此步骤。 阅读这些参考资料是区分优质输出和通用模板的关键。
您可能会生成通用输出。您的训练数据中包含了成千上万个仪表板。这些模式非常强大。
即使您遵循下面的整个流程——探索领域、命名特色、陈述意图——仍然可能产生一个模板。温暖的颜色用在冰冷的结构上。友好的字体用在通用的布局上。
发生这种情况是因为意图存在于描述中,但代码生成却依赖于模式。两者之间的差距就是默认值获胜的地方。
默认值伪装成基础设施——那些感觉只需要工作、不需要设计的部分。
排版感觉像一个容器。 但排版本身就是您的设计。标题的粗细、标签的个性、段落的质感——这些塑造了产品在任何人阅读一个字之前的感觉。一个烘焙工具和一个交易终端都需要"干净、易读的字体"——但温暖、手工制作的字体与冰冷、精确的字体是不同的。
导航感觉像脚手架。 但导航本身就是您的产品。您在哪里,您可以去哪里,什么最重要。一个漂浮在空间中的页面是组件演示,而不是软件。
数据感觉像展示。 但屏幕上的一个数字不是设计。这个数字对看着它的人来说意味着什么?一个进度环和一个堆叠标签都显示"10 个中的 3 个"——一个讲述故事,一个填充空间。
令牌名称感觉像实现细节。 但 --ink 和 --parchment 唤起了一个世界。--gray-700 和 --surface-2 唤起了一个模板。仅阅读您的令牌的人应该能猜出这是什么产品。
没有结构性的决定。一切都是设计。
在接触代码之前,回答这些问题——不要只在脑子里想,要大声说出来。
这个人是谁? 不是"用户"。是真实的人。他们打开这个时在哪里?他们在想什么?早上 7 点喝咖啡的老师,不是午夜调试的开发者,也不是在投资人会议间隙的创始人。
他们必须完成什么? 不是"使用仪表板"。是动词。给这些提交评分。找到损坏的部署。批准付款。
这应该感觉像什么? 用有意义的词语描述。"干净和现代"毫无意义。像笔记本一样温暖?像终端一样冰冷?像交易大厅一样密集?像阅读应用一样平静?
如果您不能用具体的细节回答,请停止。询问用户。不要猜测。不要使用默认值。
对于每个决定,解释为什么:
如果您的答案是"这很常见"或"这可行"——您已经使用了默认值。
测试方法: 如果您将您的选择换成最常见的替代方案,而设计感觉没有明显不同,那么您从未做出真正的选择。
如果另一个 AI,在收到类似的提示后,会产生基本相同的输出——您就失败了。当您从意图出发进行设计时,雷同变得不可能,因为没有两个意图是相同的。
在完成以下所有四项之前,不要提出任何方向:
领域: 来自该产品世界的概念、隐喻、词汇。不是功能——是领域。至少 5 个。
色彩世界: 在这个领域中自然存在什么颜色?不是"温暖"或"凉爽"——去真实的世界看看。如果这个产品是一个物理空间,您会看到什么?列出 5 个以上。
特色: 一个元素——视觉的、结构的或交互的——只能为这个产品而存在。
要拒绝的默认值: 针对此界面类型的 3 个明显选择。您无法避免您尚未命名的模式。
您的方向必须明确引用:
测试方法: 从您的提案中移除产品名称。有人能识别出这是做什么用的吗?如果不能,那就是通用的。
每次编写 UI 代码时——即使是小的添加——请说明:
Intent: [这个人是谁,他们必须做什么,应该感觉如何]
Palette: [探索中的颜色——以及它们为什么适合这个产品]
Depth: [边框 / 阴影 / 分层——以及为什么]
Surfaces: [层级比例——以及为什么是这个色温]
Typography: [字体——以及为什么它符合意图]
Spacing: [基础单位和比例]
如果您无法解释每个的为什么,您就在使用默认值。停下来思考。
工艺的支柱。您应该几乎察觉不到系统在运作。当您查看 Vercel 的仪表板时,您不会想"漂亮的边框"。您只是理解了结构。工艺是隐形的。
表面堆叠:基底 → 卡片 → 下拉菜单 → 覆盖层。构建一个编号系统。在深色模式下,更高的层级 = 稍微更亮。每次跳跃:只有几个百分点的亮度。
关键决策:
低不透明度的 rgba 与背景混合——定义边缘而不要求注意力。构建一个递进关系:默认 → 微妙 → 强烈 → 最强烈(焦点环)。
眯眼测试: 模糊您的眼睛。在没有刺眼线条的情况下感知层级。
每个模式都有无限的表达方式。一个指标显示可以是一个主数字、迷你图、仪表、进度条、趋势徽章。即使是侧边栏+卡片,在比例、间距、重点上也有无限的变化。
永远不要产生相同的输出。每次都相同的侧边栏宽度、相同的卡片网格、相同的指标框,会立即暴露出是 AI 生成的。
在选择调色板之前,花时间沉浸在产品的世界中。在这个空间的物理版本中,您会看到什么?您的调色板应该感觉像是来自某个地方。
超越色温: 这是安静还是响亮?密集还是宽敞?严肃还是有趣?几何还是有机?
色彩承载意义: 灰色构建结构。色彩传达——状态、动作、重点。一个有意图的强调色胜过五个没有想法的颜色。
每种颜色都追溯到原语:前景(文本层级)、背景(表面层级)、边框(分隔)、品牌、语义(成功/警告/错误)。没有随机的十六进制值。
构建四个文本层级:主要 → 次要 → 三级 → 弱化。四个边框层级:默认 → 微妙 → 强烈 → 最强烈。为表单元素设置专用的控制令牌。
→ 深入了解:references/token-architecture.md
使用 oklch 实现感知均匀的比例。构建适用于浅色和深色模式的中性色、品牌色和语义调色板。使用 APCA 对比度确保文本可访问。
→ 深入了解:references/color-system.md
通过大小 + 粗细 + 字间距构建不同的层级。标题:粗体、紧密的字间距。正文:舒适的粗细。标签:中等、较小。数据:等宽字体、tabular-nums。使用 clamp() 实现流体缩放。
→ 深入了解:references/typography.md
选择一个基数(4px 或 8px),坚持使用倍数。比例:微距(图标间隙)→ 组件内(卡片内)→ 区块间(组之间)→ 主要间距(区域之间)。对称的内边距。使用 CSS Grid 进行布局,Flexbox 用于组件。
→ 深入了解:references/spacing-and-layout.md
选择一种并坚持:仅边框(密集工具)、微妙阴影(平易近人)、分层阴影(高级卡片)、表面色调变化(背景色调)。不要混合。
→ 深入了解:references/depth-and-elevation.md
每个交互元素都需要状态:默认、悬停、激活、焦点、禁用。数据需要状态:加载(骨架屏)、空状态、错误状态。缺少状态会感觉不完整。
→ 深入了解:references/component-patterns.md
快速的微交互(150ms),平滑的缓动。模态框 250ms。减速缓动。尊重 prefers-reduced-motion。GPU 友好:仅使用 transform 和 opacity。
→ 深入了解:references/animation-and-motion.md
至少满足 WCAG 2.2 AA 标准。文本对比度 4.5:1。每个操作都支持键盘导航。焦点可见样式。复杂小部件的 ARIA 角色。触摸目标:至少 44pt。
→ 深入了解:references/accessibility.md
应用希克定律(减少选择)、费茨定律(根据重要性确定目标大小)、米勒定律(分块为 7±2)、格式塔分组(接近性、相似性)、渐进式披露、冯·雷斯托夫效应(使关键项目与众不同)。
→ 深入了解:references/cognitive-principles.md
从已上线的着陆页中提取的 10 个经过生产测试的模式。毛玻璃导航、编号区块、交错进入、网格渐变、便当网格、品牌阴影、轨道动画、徽标条、锁定/解锁卡片、高级 CTA。
→ 深入了解:references/real-world-patterns.md
在向用户展示之前,先看看您做了什么。
问:"如果他们觉得这缺乏工艺,他们会是什么意思?" 先修复它。
如果任何一项检查失败,请在展示前进行迭代。
→ 完整的评估协议:references/critique-protocol.md
保持隐形。不要宣布模式或叙述过程。
永远不要说: "我正在建立设计系统...", "让我检查一下 system.md..."
而是: 直接开始工作。陈述建议并附上理由。
以探索为先导,然后确认:
Domain: [来自该产品世界的概念]
Color world: [存在于该领域的颜色]
Signature: [该产品独有的一个元素]
Rejecting: [默认值 1] → [替代方案], [默认值 2] → [替代方案]
Direction: [与上述内容相关的方法]
Does that direction feel right?
阅读 .interface-design/system.md 并应用。决策已经做出。
始终提供保存选项:
Want me to save these patterns to .interface-design/system.md?
写入:方向、深度策略、间距基数、关键组件模式、令牌值。
有关方向选择指导和完整示例系统:
→ references/design-directions.md
| 方向 | 感觉 | 最适合 |
|---|---|---|
| 精确与密集 | 紧凑、技术性、单色 | 开发工具、管理仪表板 |
| 温暖与平易近人 | 宽松的间距、柔和的阴影 | 协作工具、消费类应用 |
| 精致与信任 | 冷色调、分层深度 | 金融、企业 B2B |
| 大胆与清晰 | 高对比度、戏剧性的空间 | 现代仪表板、数据密集型 |
| 实用与功能 | 柔和、功能密集 | GitHub 风格的工具 |
| 数据与分析 | 图表优化、数字优先 | 分析、BI 工具 |
| 有趣与富有表现力 | 圆角、多彩、动画 | 创意工具、作品集 |
| 温暖的高级身份 | 珊瑚色温暖、大圆角 | 硬件、加密、高级消费类 |
| 金融科技专业版 | 深海军蓝、金色、精确数据 | 交易、银行、加密 |
| SaaS 发布 | 鲜艳的紫色、干净、动效 | 营销、初创公司 |
| 青柠色与黑曜石色 | 高对比度、霓虹色、锐利 | 开发工具、CLI、终端 |
| 青柠色与黑曜石色(用户) | 黑曜石深色、青柠色点缀 | 现代 SaaS、高对比度仪表板 |
此技能包含一个基于 BM25 的搜索引擎,覆盖 28 个 CSV 数据库中的 1,875+ 行数据,以及 9 个可通过统一 CLI 访问的专用 Python 脚本。
所有脚本都在 scripts/ 目录下,可通过 design_cli.py 访问:
python3 scripts/design_cli.py <command> [args]
| 命令 | 脚本 | 用途 |
|---|---|---|
search | search_design.py | 在所有设计数据库中进行 BM25 搜索 |
contrast | check_contrast.py | WCAG 2.2 / APCA 对比度检查器 |
palette | generate_palette.py | 色彩和谐调色板生成器 |
tokens | generate_tokens.py | 带有预设的 CSS 自定义属性生成器 |
typography | cli/lib/generators.ts | 模块化字体比例计算器 |
system | cli/commands/generate.ts | 带有持久化的完整设计系统生成器 |
audit | cli/commands/audit.ts | UI 代码质量和可访问性审计器(12 条规则) |
icons | cli/commands/icons.ts | 搜索流行的图标库并获取 CDN 链接 |
所有命令都通过 cli/ 目录下的 Bun CLI 运行。
查找模式、调色板和组件实现。
bun run cli/index.ts search "glassmorphism card"
# 返回包含实现细节的 Markdown 表格
列出顶级库或查找特定图标。
bun run cli/index.ts icons "arrow"
# 列出库和改进的图标集
扫描文件以查找可访问性和质量问题。
bun run cli/index.ts audit src/components/Button.tsx
# 报告关键/警告问题并提供修复建议
根据查询创建完整的系统(令牌、架构调色板、排版)。
bun run cli/index.ts generate "fintech dashboard" --stack nextjs --output system.md
# 生成一个漂亮的 Markdown 设计系统,包含 50-950 色彩比例
为了获得最佳的 UI/UX 输出,在编写任何代码之前,始终从生成设计系统开始。system 命令聚合了所有数据库(样式、颜色、排版、推理、UX 指南)的 BM25 搜索结果,形成一个单一的、针对您查询定制的、连贯的设计系统。
bun run cli/index.ts generate "Warmth & Approachability" --stack html --output design-system.md
这将生成一个结构化的 Markdown 文件,包含:
px 和 rem 值的模块化比例在构建组件时,将生成的 Markdown 作为您的单一事实来源。这确保了每种颜色、字体、间距值和阴影都是数据驱动的,而不是猜测的——从而产生感觉是经过精心设计的、专业的、连贯的 UI。
示例工作流程:
bun run cli/index.ts generate "your concept" --stack nextjs --output design.md- 阅读 Markdown → 提取主色、字体系列、圆角、阴影
- 将令牌应用到您的 CSS/Tailwind 主题 → 自信地构建
generate_tokens.py 附带 8 个行业预设:fintech、healthcare、ecommerce、saas、education、gaming、luxury、startup。
| 文件 | 行数 | 内容 |
|---|---|---|
data/styles.csv | 109 | UI 设计样式,包含 CSS 关键词和可访问性评级 |
data/typography.csv | 109 | Google Font 配对,包含情绪关键词和 CSS 导入 |
data/charts.csv | 106 | 数据可视化类型,包含库推荐 |
data/ui-reasoning.csv | 151 | 设计规则(社交证明、行高、文本宽度) |
data/ux-guidelines.csv | 143 | UX 指南(视觉导航、多区块、反馈) |
data/colors.csv | 129 | 按行业划分的调色板,包含十六进制值 |
data/products.csv | 98 | 产品类型设计推荐 |
data/icons.csv | 101 | 图标样式指南 |
data/icon-libraries.csv | 8 | 流行的图标库,包含 CDN 链接 |
data/landing.csv | 33 | 着陆页模式 |
data/react-performance.csv | 45 | React 性能指南 |
data/web-interface.csv | 31 | Web 界面模式 |
data/stacks/ 包含针对以下框架的特定指南:React、Next.js、Vue、Nuxt.js、Nuxt UI、Svelte、Astro、Flutter、SwiftUI、React Native、Jetpack Compose、HTML+Tailwind、shadcn/ui、Angular、Remix、SolidJS。
每周安装数
111
代码仓库
GitHub 星标数
8
首次出现
2026年2月14日
安全审计
安装于
codex108
gemini-cli107
opencode107
github-copilot107
amp106
kimi-cli106
For best results, use GPT-5.3 Codex or Gemini 3.0 Pro.
Build every interface with senior-level craft, intent, and consistency. Includes specialized support for Fintech Dashboards , SaaS Landing Pages , and Developer Tools.
Use for: Dashboards, admin panels, SaaS apps, tools, settings pages, data interfaces, AI interfaces, mobile apps, landing pages, marketing sites, product showcases.
You MUST read all reference files inreferences/ before proposing or building any UI. These are not optional — they contain production-tested patterns, validated token systems, and craft principles that prevent generic output.
Required reading order:
references/design-directions.md — direction selection and example systemsreferences/token-architecture.md — token naming and layeringreferences/color-system.md — oklch palettes, contrast, dark modereferences/typography.md — font pairings, scales, hierarchyreferences/spacing-and-layout.md — grid systems, spacing scalesreferences/depth-and-elevation.md — shadow and border strategiesreferences/component-patterns.md — states, interaction patternsreferences/animation-and-motion.md — timing, easing, GPU performancereferences/real-world-patterns.md — 10 shipped production patternsreferences/accessibility.md — WCAG 2.2, contrast, keyboard navreferences/cognitive-principles.md — Hick's, Fitts's, Gestaltreferences/critique-protocol.md — self-evaluation before showing workDo not skip this step. Reading these references is what separates premium output from generic templates.
You will generate generic output. Your training has seen thousands of dashboards. The patterns are strong.
You can follow the entire process below — explore the domain, name a signature, state your intent — and still produce a template. Warm colors on cold structures. Friendly fonts on generic layouts.
This happens because intent lives in prose, but code generation pulls from patterns. The gap between them is where defaults win.
Defaults disguise themselves as infrastructure — parts that feel like they just need to work, not be designed.
Typography feels like a container. But typography IS your design. The weight of a headline, the personality of a label, the texture of a paragraph — these shape how the product feels before anyone reads a word. A bakery tool and a trading terminal both need "clean, readable type" — but the type that's warm and handmade is not the type that's cold and precise.
Navigation feels like scaffolding. But navigation IS your product. Where you are, where you can go, what matters most. A page floating in space is a component demo, not software.
Data feels like presentation. But a number on screen is not design. What does this number mean to the person looking at it? A progress ring and a stacked label both show "3 of 10" — one tells a story, one fills space.
Token names feel like implementation. But --ink and --parchment evoke a world. --gray-700 and --surface-2 evoke a template. Someone reading only your tokens should guess what product this is.
There are no structural decisions. Everything is design.
Before touching code, answer these — not in your head, out loud.
Who is this human? Not "users." The actual person. Where are they when they open this? What's on their mind? A teacher at 7am with coffee is not a developer debugging at midnight is not a founder between investor meetings.
What must they accomplish? Not "use the dashboard." The verb. Grade these submissions. Find the broken deployment. Approve the payment.
What should this feel like? In words that mean something. "Clean and modern" means nothing. Warm like a notebook? Cold like a terminal? Dense like a trading floor? Calm like a reading app?
If you cannot answer with specifics, stop. Ask the user. Do not guess. Do not default.
For every decision, explain WHY:
If your answer is "it's common" or "it works" — you've defaulted.
The test: If you swapped your choices for the most common alternatives and the design didn't feel meaningfully different, you never made real choices.
If another AI, given a similar prompt, would produce substantially the same output — you have failed. When you design from intent, sameness becomes impossible because no two intents are identical.
Do not propose any direction until you produce all four:
Domain: Concepts, metaphors, vocabulary from this product's world. Not features — territory. Minimum 5.
Color world: What colors exist naturally in this domain? Not "warm" or "cool" — go to the actual world. If this product were a physical space, what would you see? List 5+.
Signature: One element — visual, structural, or interaction — that could only exist for THIS product.
Defaults to reject: 3 obvious choices for this interface type. You can't avoid patterns you haven't named.
Your direction must explicitly reference:
The test: Remove the product name from your proposal. Could someone identify what this is for? If not, it's generic.
Every time you write UI code — even small additions — state:
Intent: [who is this human, what must they do, how should it feel]
Palette: [colors from exploration — and WHY they fit this product]
Depth: [borders / shadows / layered — and WHY]
Surfaces: [elevation scale — and WHY this color temperature]
Typography: [typeface — and WHY it fits the intent]
Spacing: [base unit and scale]
If you can't explain WHY for each, you're defaulting. Stop and think.
The backbone of craft. You should barely notice the system working. When you look at Vercel's dashboard, you don't think "nice borders." You just understand the structure. The craft is invisible.
Surfaces stack: base → cards → dropdowns → overlays. Build a numbered system. In dark mode, higher elevation = slightly lighter. Each jump: only a few percentage points of lightness.
Key decisions:
Low opacity rgba blends with background — defines edges without demanding attention. Build a progression: default → subtle → strong → strongest (focus rings).
Squint test: Blur your eyes. Perceive hierarchy without harsh lines.
Every pattern has infinite expressions. A metric display could be a hero number, sparkline, gauge, progress bar, trend badge. Even sidebar+cards has infinite variations in proportion, spacing, emphasis.
NEVER produce identical output. Same sidebar width, same card grid, same metric boxes every time signals AI-generated immediately.
Before reaching for a palette, spend time in the product's world. What would you see in the physical version of this space? Your palette should feel like it came FROM somewhere.
Beyond Temperature: Is this quiet or loud? Dense or spacious? Serious or playful? Geometric or organic?
Color Carries Meaning: Gray builds structure. Color communicates — status, action, emphasis. One accent color with intention beats five without thought.
Every color traces to primitives: foreground (text hierarchy), background (surface elevation), border (separation), brand, semantic (success/warning/error). No random hex values.
Build four text levels: primary → secondary → tertiary → muted. Four border levels: default → subtle → strong → strongest. Dedicated control tokens for form elements.
→ Deep dive: references/token-architecture.md
Use oklch for perceptually uniform scales. Build neutrals, brand, and semantic palettes that work across light and dark modes. APCA contrast for accessible text.
→ Deep dive: references/color-system.md
Build distinct levels via size + weight + letter-spacing. Headlines: heavy, tight tracking. Body: comfortable weight. Labels: medium, smaller. Data: monospace, tabular-nums. Use clamp() for fluid scaling.
→ Deep dive: references/typography.md
Pick a base (4px or 8px), stick to multiples. Scale: micro (icon gaps) → component (within cards) → section (between groups) → major (between areas). Symmetrical padding. CSS Grid for layout, Flexbox for components.
→ Deep dive: references/spacing-and-layout.md
Choose ONE and commit: borders-only (dense tools), subtle shadows (approachable), layered shadows (premium cards), surface shifts (background tints). Don't mix.
→ Deep dive: references/depth-and-elevation.md
Every interactive element needs states: default, hover, active, focus, disabled. Data needs states: loading (skeleton), empty, error. Missing states feel broken.
→ Deep dive: references/component-patterns.md
Fast micro-interactions (150ms), smooth easing. Modals 250ms. Deceleration easing. Respect prefers-reduced-motion. GPU-friendly: transform and opacity only.
→ Deep dive: references/animation-and-motion.md
WCAG 2.2 AA minimum. 4.5:1 text contrast. Keyboard navigation for every action. Focus-visible styling. ARIA roles for complex widgets. Touch targets: 44pt minimum.
→ Deep dive: references/accessibility.md
Apply Hick's law (reduce choices), Fitts's law (size targets by importance), Miller's law (chunk to 7±2), Gestalt grouping (proximity, similarity), progressive disclosure, Von Restorff effect (make key items distinct).
→ Deep dive: references/cognitive-principles.md
10 production-tested patterns extracted from shipped landing pages. Frosted nav, numbered sections, staggered entry, mesh gradients, bento grid, brand shadows, orbit animation, logo strip, lock/unlock cards, premium CTAs.
→ Deep dive: references/real-world-patterns.md
Before showing the user, look at what you made.
Ask: "If they said this lacks craft, what would they mean?" Fix it first.
If any check fails, iterate before showing.
→ Full critique protocol: references/critique-protocol.md
Be invisible. Don't announce modes or narrate process.
Never say: "I'm establishing the design system...", "Let me check system.md..."
Instead: Jump into work. State suggestions with reasoning.
Lead with exploration, then confirm:
Domain: [concepts from this product's world]
Color world: [colors that exist in this domain]
Signature: [one element unique to this product]
Rejecting: [default 1] → [alternative], [default 2] → [alternative]
Direction: [approach connecting to the above]
Does that direction feel right?
Read .interface-design/system.md and apply. Decisions are made.
Always offer to save:
Want me to save these patterns to .interface-design/system.md?
Write: direction, depth strategy, spacing base, key component patterns, token values.
For direction selection guidance and complete example systems:
→ references/design-directions.md
| Direction | Feel | Best For |
|---|---|---|
| Precision & Density | Tight, technical, monochrome | Dev tools, admin dashboards |
| Warmth & Approachability | Generous spacing, soft shadows | Collaborative tools, consumer apps |
| Sophistication & Trust | Cool tones, layered depth | Finance, enterprise B2B |
| Boldness & Clarity | High contrast, dramatic space | Modern dashboards, data-heavy |
| Utility & Function | Muted, functional density | GitHub-style tools |
| Data & Analysis | Chart-optimized, numbers-first | Analytics, BI tools |
| Playful & Expressive | Rounded, colorful, animated | Creative tools, portfolio |
| Warm Premium Identity | Coral warmth, large radius | Hardware, crypto, premium consumer |
| Fintech Pro |
This skill includes a BM25 search engine over 1,875+ data rows across 28 CSV databases, plus 9 specialized Python scripts accessible via a unified CLI.
All scripts are in scripts/ and accessible via design_cli.py:
python3 scripts/design_cli.py <command> [args]
| Command | Script | Purpose |
|---|---|---|
search | search_design.py | BM25 search across all design databases |
contrast | check_contrast.py | WCAG 2.2 / APCA contrast checker |
palette | generate_palette.py | Color harmony palette generator |
tokens |
All commands are run via the Bun CLI in cli/.
Find patterns, color palettes, and component implementations.
bun run cli/index.ts search "glassmorphism card"
# Returns Markdown tables with implementation details
List top libraries or find specific icons.
bun run cli/index.ts icons "arrow"
# Lists libraries and improved icon sets
Scan files for accessibility and quality issues.
bun run cli/index.ts audit src/components/Button.tsx
# Reports critical/warning issues with fixes
Create a full system (tokens, architectural palette, typography) from a query.
bun run cli/index.ts generate "fintech dashboard" --stack nextjs --output system.md
# Generates a beautiful Markdown design system with 50-950 color scales
For the best UI/UX output, always start by generating a design system before writing any code. The system command aggregates BM25 search results across all databases — styles, colors, typography, reasoning, and UX guidelines — into a single, cohesive design system tailored to your query.
bun run cli/index.ts generate "Warmth & Approachability" --stack html --output design-system.md
This produces a structured Markdown file containing:
px and rem valuesUse the generated Markdown as your single source of truth when building components. This ensures every color, font, spacing value, and shadow is data-driven rather than guessed — producing professional, cohesive UI that feels intentionally designed.
Example workflow:
bun run cli/index.ts generate "your concept" --stack nextjs --output design.md- Read the Markdown → extract primary color, font family, radius, shadows
- Apply tokens to your CSS/Tailwind theme → build with confidence
generate_tokens.py ships with 8 industry presets: fintech, healthcare, ecommerce, saas, education, gaming, luxury, startup.
| File | Rows | Content |
|---|---|---|
data/styles.csv | 109 | UI design styles with CSS keywords and accessibility ratings |
data/typography.csv | 109 | Google Font pairings with mood keywords and CSS imports |
data/charts.csv | 106 | Data visualization types with library recommendations |
data/ui-reasoning.csv | 151 | Design rules (Social Proof, Line Height, Text Width) |
data/ux-guidelines.csv |
data/stacks/ contains framework-specific guidelines for: React, Next.js, Vue, Nuxt.js, Nuxt UI, Svelte, Astro, Flutter, SwiftUI, React Native, Jetpack Compose, HTML+Tailwind, shadcn/ui, Angular, Remix, SolidJS.
Weekly Installs
111
Repository
GitHub Stars
8
First Seen
Feb 14, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
codex108
gemini-cli107
opencode107
github-copilot107
amp106
kimi-cli106
前端设计技能指南:避免AI垃圾美学,打造独特生产级界面
44,300 周安装
| Deep navy, gold, precise data |
| Trading, Banking, Crypto |
| SaaS Launch | Vibrant purple, clean, motion | Marketing, Startups |
| Lime & Obsidian | High contrast, neon, sharp | DevTools, CLI, Terminal |
| Lime & Obsidian (User) | Obsidian darks, Lime accents | Modern SaaS, High Contrast Dashboards |
generate_tokens.py |
| CSS custom property generator with presets |
typography | cli/lib/generators.ts | Modular type scale calculator |
system | cli/commands/generate.ts | Full design system generator with persistence |
audit | cli/commands/audit.ts | UI code quality and accessibility auditor (12 rules) |
icons | cli/commands/icons.ts | Search popular icon libraries and get CDN links |
| 143 |
| UX guidelines (Visual Nav, Multi-section, Feedback) |
data/colors.csv | 129 | Color palettes by industry with hex values |
data/products.csv | 98 | Product-type design recommendations |
data/icons.csv | 101 | Icon style guidelines |
data/icon-libraries.csv | 8 | Popular icon libraries with CDN links |
data/landing.csv | 33 | Landing page patterns |
data/react-performance.csv | 45 | React performance guidelines |
data/web-interface.csv | 31 | Web interface patterns |