阅读指南

1 · 预览不是截图

所有预览都由同一副骨架实时渲染：品牌栏、标题、正文、主次按钮、标签、指标卡与柱状图。生成器只替换 设计令牌 —— 背景、表面、文字、描边、强调色、圆角、字体族、字重、描边宽度，再叠加该风格的材质特效类（毛玻璃、硬阴影、扫描线、像素化、纸张噪点等）。

这样做的目的不是复刻某个真实产品，而是把「如果在这种风格下做一个界面，会是什么手感」压缩到一屏之内，让不同风格之间可以横向比较。同一段文案、同一组组件，差异全部来自风格本身。

左：极简主义 / 瑞士风格；右：新粗野主义。同样的结构，完全不同的语气。

2 · 字段说明

风格描述

中文导读，说明视觉机制与代价；原始英文的 Keywords、Effects & Animation 紧跟在下方，便于对照上游数据。

配色方案

从 Primary Colors / Secondary Colors / Design System Variables 中提取的 HEX 色板。若某风格只给语义描述（如平台设计系统），则使用该体系的品牌色作为可视化代理。

能力矩阵

浅色/深色模式支持度、移动适配、转化导向、渲染成本与无障碍风险，全部来自数据字段，不是评分。

实现要点

落地清单来自 Implementation Checklist；CSS 关键词来自 CSS/Technical Keywords；提示词可直接复制给模型使用。

状态

推荐 主推风格；补充 细分或变体；已弃用 插件默认不召回，保留用于复刻旧项目。

3 · 明暗切换的含义

详情页的「浅色 / 深色」切换演示同一套令牌在两种模式下的表现。原数据只标注了支持度（supported / conditional / not-recommended），并未给出两套完整色板，因此非默认模式由生成器按中性色推导，仅用于对比，不应直接当作生产配色。

如果数据标注某风格「不建议」某种模式，切换后仍会渲染，但页面会给出提示 —— 这比直接隐藏更能说明问题。

4 · 在项目里使用

图鉴本身是静态站点，可以直接部署到 GitHub Pages。真正的设计能力在插件里：安装后在对话中调用 design_recommend 生成完整设计系统，或用 design_search 按风格、配色、图表等域检索。

design_recommend("金融 SaaS 数据看板", projectName: "金融智控台", stack: "react", variance: 8)
design_search("毛玻璃 深色", domain: "style")
design_review("移动端登录表单", platform: "mobile")

三个旋钮 variance（大胆度）、motion（动效强度）、density（密度）均为 1–10，不传则使用风格默认值。

5 · 数据与许可

数据移植自 nextlevelbuilder/ui-ux-pro-max-skill（commit 56ea9cf，MIT），同步于 2026-10-18；本插件针对 DeepSeek Harness 形态重写了检索与生成逻辑。本站为纯静态页面，不加载任何外部字体、脚本或统计代码。

中文名称、导读与预览主题是为展示而人工编写的编辑内容，不改变上游的风格判定。发现描述偏差时，以 data/index.json 的原始字段为准。