ui-ux-design-pro

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

UI/UX Design Pro

UI/UX专业设计体系

Build every interface with senior-level craft, intent, and consistency.

以高级工艺、明确意图和一致性打造每一个界面。

Scope

适用范围

Use for: Dashboards, admin panels, SaaS apps, tools, settings pages, data interfaces, AI interfaces, mobile apps.

Not for: Landing pages, marketing sites, campaigns.

适用场景： 数据仪表盘、管理面板、SaaS应用、工具类产品、设置页面、数据界面、AI界面、移动应用。

不适用场景： 着陆页、营销网站、活动专题页。

The Problem

现存问题

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.

你可能会生成通用化的输出。你的训练数据包含数千个仪表盘，相关设计模式的影响很深。即便你遵循以下完整流程——探索领域、定义特色、明确意图——仍可能产出模板化的设计。比如在冰冷的结构上使用暖色调，在通用布局上搭配友好字体。这种情况的根源在于：意图存在于描述性文字中，但代码生成依赖于现有模式。两者之间的空白地带，就是默认设计大行其道的地方。

Where Defaults Hide

默认设计的隐藏之处

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.

默认设计常伪装成基础设施——那些看起来只需要能运行、不需要特意设计的部分。

排版看似只是容器，但排版本身就是你的设计。 标题的字重、标签的风格、段落的质感——这些在用户阅读文字之前，就已经塑造了产品的整体感受。烘焙工具和交易终端都需要“清晰易读的字体”，但温暖手工感的字体与冷峻精准的字体完全不是一回事。

导航看似只是框架，但导航本身就是你的产品。 用户当前在哪里、可以去哪里、哪些内容最重要。一个悬浮在空白中的页面只是组件演示，而非真正的软件。

数据看似只是展示，但屏幕上的数字并非设计本身。 这个数字对观看者来说意味着什么？进度环和堆叠标签都能显示“10个完成3个”——前者讲述了过程，后者只是填充空间。

令牌名称看似只是实现细节，但
--ink
和
--parchment
能唤起特定的场景感，而
--gray-700
和
--surface-2
只会让人联想到通用模板。仅通过令牌名称，就能让人猜到这是为哪类产品设计的。

不存在“结构决策”，每一处都是设计。

Intent First

意图优先原则

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.

在编写代码之前，要明确回答以下问题——不能只在心里想，要清晰表述出来。

目标用户是谁？ 不是泛指的“用户”，而是具体的人。他们打开这个界面时身处何地？心里在想什么？早上7点喝着咖啡的老师，和半夜调试代码的开发者，以及夹在投资人会议间隙的创始人，需求完全不同。

他们必须完成什么任务？ 不是“使用仪表盘”这种模糊描述，而是具体的动作：批改作业、定位故障部署、审批付款。

界面应该给人什么感受？ 要用有具体含义的词汇描述。“简洁现代”毫无意义。是像笔记本一样温暖？像终端一样冷峻？像交易大厅一样紧凑？还是像阅读应用一样平静？

如果你无法给出具体答案，就停下来。询问用户，不要猜测，不要使用默认设计。

Every Choice Must Be A Choice

每一个选择都要有依据

For every decision, explain WHY:

Why this layout and not another?
Why this color temperature?
Why this typeface?
Why this spacing scale?
Why this information hierarchy?

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.

对于每一个设计决策，都要解释原因：

为什么选这个布局而不是另一个？
为什么选这个色温？
为什么选这个字体？
为什么选这个间距比例？
为什么选这个信息层级？

如果你的答案是“这很常见”或“这能用”——那你就是在使用默认设计。

测试标准： 如果你把你的选择换成最常见的替代方案，设计感受没有产生有意义的变化，说明你从未做出真正的选择。

Sameness Is Failure

趋同就是失败

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.

如果另一个AI在收到类似提示时，会产出大致相同的输出——那你就失败了。当你从意图出发进行设计时，趋同是不可能的，因为没有两个意图是完全相同的。

Domain Exploration

领域探索

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.

在提出任何设计方向之前，必须完成以下四项工作：

领域概念： 来自产品所属行业的概念、隐喻、专业词汇。不是功能，而是行业属性。至少5个。

色彩场景： 该领域中自然存在的颜色是什么？不要用“暖色调”或“冷色调”这种模糊描述——要回归真实场景。如果这个产品是一个物理空间，你会看到什么颜色？列出5种以上。

特色元素： 一个视觉、结构或交互层面的元素，它只能属于这个产品。

要摒弃的默认设计： 针对这类界面的3个明显通用选择。你无法避开那些你没有明确识别的模式。

Proposal Requirements

提案要求

Your direction must explicitly reference:

Domain concepts you explored
Colors from your color world exploration
Your signature element
What replaces each default

The test: Remove the product name from your proposal. Could someone identify what this is for? If not, it's generic.

你的设计方向必须明确关联：

你探索出的领域概念
色彩场景探索中的颜色
你的特色元素
替代每个默认设计的方案

测试标准： 从提案中移除产品名称，别人还能识别出这是为哪类产品设计的吗？如果不能，说明你的设计还是通用化的。

Component Checkpoint

组件检查点

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.

每次编写UI代码时——即便是小的补充——都要先明确：

Intent: [目标用户是谁，必须完成什么任务，界面应给人什么感受]
Palette: [来自探索的色彩，以及为什么适配该产品]
Depth: [边框/阴影/分层方式，以及原因]
Surfaces: [海拔层级，以及为什么选这个色温]
Typography: [字体，以及为什么符合意图]
Spacing: [基础单位和比例]

如果你无法解释每一项的原因，说明你在使用默认设计。停下来思考。

Craft Foundations

设计基础

Subtle Layering

细微分层

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.

这是设计工艺的核心。你几乎不会注意到系统在运作。当你看Vercel的仪表盘时，不会想到“边框做得好”，只会自然理解其结构。好的设计工艺是润物细无声的。

Surface Elevation

界面海拔

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:

Sidebars: Same background as canvas + subtle border. Different colors fragment visual space.
Dropdowns: One level above parent surface.
Inputs: Slightly darker than surroundings — "inset" signals "type here."

界面层叠结构：基础层 → 卡片层 → 下拉层 → 浮层。建立编号系统。在深色模式下，海拔越高，颜色越浅。每一层的亮度变化控制在几个百分点以内。

关键决策：

侧边栏： 使用与画布相同的背景色+细微边框。不同颜色会割裂视觉空间。
下拉菜单： 比父级界面高一层。
输入框： 比周围颜色稍暗——“内嵌”的视觉信号提示用户“在此输入”。

Borders

边框

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.

使用低透明度的rgba颜色与背景融合——既能定义边界，又不会分散注意力。建立递进层级：默认 → 细微 → 明显 → 强突出（焦点环）。

眯眼测试： 眯起眼睛，能否感知到层级？是否有元素过于突兀？好的设计是柔和的。

Infinite Expression

无限表达

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.

每一种模式都有无限种表达方式。指标展示可以是醒目数字、迷你折线图、仪表盘、进度条、趋势标签。即便是侧边栏+卡片的布局，在比例、间距、重点突出方式上也有无限种变化。

绝对不要产出完全相同的输出。 每次都用相同的侧边栏宽度、卡片网格、指标框，会立刻暴露这是AI生成的内容。

Color Lives Somewhere

色彩的场景归属

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.

在选择调色板之前，先深入了解产品所属的行业。如果这个产品是一个物理空间，你会看到什么？你的调色板应该让人感觉是源自这个场景的。

超越色温： 界面是安静还是活泼？紧凑还是开阔？严肃还是有趣？几何感还是有机感？

色彩承载意义： 灰色构建结构，色彩传递信息——状态、操作、重点。一个有明确意图的强调色，胜过五个随意使用的强调色。

Design Principles

设计原则

Token Architecture

令牌架构

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

每一种颜色都可追溯到基础类型：前景色（文字层级）、背景色（界面海拔）、边框色（分隔）、品牌色、语义色（成功/警告/错误）。禁止使用随机的十六进制颜色值。

建立四级文字层级：主文本 → 次要文本 → tertiary文本 → 弱化文本。四级边框层级：默认 → 细微 → 明显 → 强突出。为表单元素设置专用的控制令牌。

→ 深入了解：

references/token-architecture.md

Color System

色彩系统

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

使用oklch实现感知均匀的色彩比例。构建在亮色和深色模式下都能正常使用的中性色、品牌色和语义色板。使用APCA对比度标准确保文字的无障碍性。

→ 深入了解：

references/color-system.md

Typography

排版

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

通过尺寸+字重+字间距构建清晰的层级。标题：粗体、紧凑字间距。正文：舒适字重。标签：中等字重、较小尺寸。数据：等宽字体、

tabular-nums

。使用

clamp()

实现流体缩放。

→ 深入了解：

references/typography.md

Spacing

间距

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

选择一个基础单位（4px或8px），严格使用其倍数。比例层级：微间距（图标间隙）→ 组件内间距（卡片内部）→ 区块间距（组之间）→ 大间距（区域之间）。使用对称内边距。布局使用CSS Grid，组件使用Flexbox。

→ 深入了解：

references/spacing-and-layout.md

Depth

深度

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

选择一种方式并坚持使用：仅边框（紧凑工具类产品）、细微阴影（亲和力强）、分层阴影（高端卡片）、界面色调变化（背景色渐变）。不要混合使用多种方式。

→ 深入了解：

references/depth-and-elevation.md

Components

组件

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

每个交互元素都需要不同状态：默认、悬停、激活、焦点、禁用。数据展示需要不同状态：加载（骨架屏）、空状态、错误状态。缺失状态会让界面感觉不完整。

→ 深入了解：

references/component-patterns.md

Animation

动画

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

快速微交互（150ms）、平滑缓动。模态框动画（250ms）。使用减速缓动。尊重

prefers-reduced-motion

设置。仅使用

transform

和

opacity

实现GPU友好的动画。

→ 深入了解：

references/animation-and-motion.md

Accessibility

无障碍性

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

至少符合WCAG 2.2 AA标准。文本对比度4.5:1。所有操作都支持键盘导航。设置可见的焦点样式。为复杂组件添加ARIA角色。触摸目标最小44pt。

→ 深入了解：

references/accessibility.md

Cognitive Principles

认知原则

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

应用希克定律（减少选择）、费茨定律（根据重要性调整目标尺寸）、米勒定律（分组为7±2个）、格式塔分组原则（ proximity、similarity）、渐进式披露、冯·雷斯托夫效应（突出关键元素）。

→ 深入了解：

references/cognitive-principles.md

The Mandate

设计要求

Before showing the user, look at what you made.

Ask: "If they said this lacks craft, what would they mean?" Fix it first.

在展示给用户之前，先审视你的作品。

问自己：“如果用户说这个设计缺乏工艺感，他们指的是什么？”先修复这些问题。

The Checks

检查清单

Swap test: Swap typeface for your usual one — would anyone notice? Swap layout for standard template — would it feel different? Places where swapping wouldn't matter are where you defaulted.
Squint test: Blur eyes. Perceive hierarchy? Anything jumping out harshly? Craft whispers.
Signature test: Point to five specific elements where your signature appears. Not "the overall feel" — actual components.
Token test: Read CSS variables out loud. Do they sound like they belong to this product?

If any check fails, iterate before showing.

→ Full critique protocol:

references/critique-protocol.md

替换测试： 把字体换成你常用的那种——有人会注意到吗？把布局换成标准模板——感受会不同吗？如果替换后没有变化，说明你在使用默认设计。
眯眼测试： 眯起眼睛，能否感知到层级？有没有元素过于突兀？好的设计是柔和的。
特色测试： 指出五个体现你设计特色的具体元素。不是“整体感受”，而是实际的组件。
令牌测试： 大声读出CSS变量。它们听起来像是属于这个产品的吗？

如果任何一项测试不通过，就先迭代优化，再展示给用户。

→ 完整评审流程：

references/critique-protocol.md

Avoid

避坑指南

Harsh borders — if borders are the first thing you see, too strong
Dramatic surface jumps — elevation should be whisper-quiet
Inconsistent spacing — clearest sign of no system
Mixed depth strategies — pick one, commit
Missing interaction states — hover, focus, disabled, loading, error
Dramatic drop shadows — subtle, not attention-grabbing
Large radius on small elements
Pure white cards on colored backgrounds
Thick decorative borders
Gradients and color for decoration — color should mean something
Multiple accent colors — dilutes focus
Different hues for different surfaces — same hue, shift only lightness
Pure black (#000000) for dark mode backgrounds — use #0a0a0a or #121212
Native form elements in styled UI — build custom controls

生硬的边框——如果边框是你最先注意到的元素，说明太显眼了
剧烈的界面色调变化——海拔变化应该非常细微
不一致的间距——这是没有设计系统的最明显标志
混合使用多种深度策略——选一种，坚持使用
缺失交互状态——悬停、焦点、禁用、加载、错误状态
夸张的投影——要细微，不要分散注意力
小元素使用大圆角
在彩色背景上使用纯白卡片
粗装饰边框
为装饰使用渐变和色彩——色彩应该有明确意义
多个强调色——会分散注意力
不同界面使用不同色调——使用同一色调，仅调整亮度
深色模式背景使用纯黑色（#000000）——使用#0a0a0a或#121212
在风格化UI中使用原生表单元素——自定义表单控件

Workflow

工作流程

Communication

沟通方式

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.

保持低调，不要宣布模式或叙述流程。

绝对不要说： “我正在建立设计系统...”、“让我查看system.md...”

正确做法： 直接开始工作，提出建议并说明理由。

Suggest + Ask

建议+确认

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?

先进行探索，再确认：

领域概念：[来自产品所属行业的概念]
色彩场景：[该领域的自然颜色]
特色元素：[专属该产品的元素]
摒弃的默认设计：[默认1] → [替代方案]，[默认2] → [替代方案]

设计方向：[关联以上内容的设计思路]

这个方向符合预期吗？

If Project Has system.md

如果项目有system.md

Read

.interface-design/system.md

and apply. Decisions are made.

读取

.interface-design/system.md

并应用其中的规则。决策已确定。

If No system.md

如果没有system.md

Explore domain — produce all four required outputs
Propose — direction must reference all four
Confirm — get user buy-in
Build — apply every principle
Evaluate — run mandate checks before showing
Offer to save

探索领域——完成上述四项要求
提出提案——设计方向必须关联四项内容
确认——获得用户认可
构建——应用所有设计原则
评估——在展示前完成要求的检查
提供保存选项

After Every Task

完成每个任务后

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.

始终提供保存选项：

需要我将这些模式保存到.interface-design/system.md吗？

保存内容包括：设计方向、深度策略、基础间距、关键组件模式、令牌值。

Design Directions

设计方向参考

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

如需设计方向选择指导和完整示例系统：

→

references/design-directions.md

Direction	感受	适用场景
Precision & Density	紧凑、技术感、单色	开发工具、管理仪表盘
Warmth & Approachability	间距宽松、阴影柔和	协作工具、消费类应用
Sophistication & Trust	冷色调、分层深度	金融、企业级B2B产品
Boldness & Clarity	高对比度、空间感强烈	现代仪表盘、数据密集型产品
Utility & Function	低饱和度、功能导向的紧凑布局	GitHub风格工具类产品
Data & Analysis	图表优化、数据优先	分析工具、BI产品
Playful & Expressive	圆角、多彩、动画丰富	创意工具、作品集类产品

Data-Driven Architecture

数据驱动架构

This skill includes a BM25 search engine over 1,875+ data rows across 27 CSV databases, plus 8 specialized Python scripts accessible via a unified CLI.

该技能包含一个基于27个CSV数据库中1875+行数据的BM25搜索引擎，以及8个可通过统一CLI访问的专用Python脚本。

Scripts

脚本说明

All scripts are in

scripts/

and accessible via

design_cli.py

bash

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`	`generate_tokens.py`	CSS custom property generator with presets
`typography`	`generate_typography.py`	Modular type scale calculator
`system`	`generate_system.py`	Full design system generator with persistence
`audit`	`audit_ui.py`	UI code quality and accessibility auditor (12 rules)

所有脚本都在

scripts/

目录下，可通过

design_cli.py

访问：

bash

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`	`generate_typography.py`	模块化字体比例计算器
`system`	`generate_system.py`	带持久化功能的完整设计系统生成器
`audit`	`audit_ui.py`	UI代码质量和无障碍性审计器（含12条规则）

Search Examples

搜索示例

bash

python3 scripts/design_cli.py search "SaaS dashboard" --domain style
python3 scripts/design_cli.py search "healthcare portal" --stack nextjs --format json
python3 scripts/design_cli.py contrast "#1E293B" "#F8FAFC" --level AAA
python3 scripts/design_cli.py palette "#2563EB" --harmony triadic --count 5
python3 scripts/design_cli.py tokens --preset fintech --format css
python3 scripts/design_cli.py typography --scale golden --format css
python3 scripts/design_cli.py system "fintech dashboard" --stack react --output design.json
python3 scripts/design_cli.py audit ./src/App.tsx

bash

python3 scripts/design_cli.py search "SaaS dashboard" --domain style
python3 scripts/design_cli.py search "healthcare portal" --stack nextjs --format json
python3 scripts/design_cli.py contrast "#1E293B" "#F8FAFC" --level AAA
python3 scripts/design_cli.py palette "#2563EB" --harmony triadic --count 5
python3 scripts/design_cli.py tokens --preset fintech --format css
python3 scripts/design_cli.py typography --scale golden --format css
python3 scripts/design_cli.py system "fintech dashboard" --stack react --output design.json
python3 scripts/design_cli.py audit ./src/App.tsx

Token Presets

令牌预设

generate_tokens.py

ships with 8 industry presets:

fintech

healthcare

ecommerce

saas

education

gaming

luxury

startup

generate_tokens.py

内置8个行业预设：

fintech

、

healthcare

、

ecommerce

、

saas

、

education

、

gaming

、

luxury

、

startup

。

CSV Databases (1,875+ rows)

CSV数据库（1875+行）

File	Rows	Content
`data/styles.csv`	107	UI design styles with CSS keywords and accessibility ratings
`data/typography.csv`	107	Google Font pairings with mood keywords and CSS imports
`data/charts.csv`	106	Data visualization types with library recommendations
`data/ui-reasoning.csv`	131	Industry-specific UI reasoning rules with anti-patterns
`data/ux-guidelines.csv`	129	UX guidelines with do/don't examples and code
`data/colors.csv`	127	Color palettes by industry with hex values
`data/products.csv`	96	Product-type design recommendations
`data/icons.csv`	101	Icon style guidelines
`data/landing.csv`	31	Landing page patterns
`data/react-performance.csv`	45	React performance guidelines
`data/web-interface.csv`	31	Web interface patterns

文件名称	行数	内容
`data/styles.csv`	107	带CSS关键词和无障碍评级的UI设计风格
`data/typography.csv`	107	带情绪关键词和CSS导入代码的Google Font字体搭配
`data/charts.csv`	106	带库推荐的数据可视化类型
`data/ui-reasoning.csv`	131	带反模式的行业专属UI设计逻辑规则
`data/ux-guidelines.csv`	129	带正反示例和代码的UX指南
`data/colors.csv`	127	带十六进制值的行业专属调色板
`data/products.csv`	96	产品类型专属设计建议
`data/icons.csv`	101	图标风格指南
`data/landing.csv`	31	着陆页设计模式
`data/react-performance.csv`	45	React性能优化指南
`data/web-interface.csv`	31	网页界面设计模式

Tech Stacks (16 frameworks)

技术栈指南（16个框架）

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.

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。