Prompts-MCP 686 skills · ai / design / design-pattern / framework / fundamentals / habit / lang / tech-selection /mcp/sse
design design/index.md medium

design-index

UI 设计维度 — 通用规范(a11y/间距/字体/配色) + 主题风格(bento 默认/flat/wes/glass·极简等) + 设计语言 token + 组件模式。Use when 写前端页面 / 选视觉风格 / 定项目设计系统 token / 评审 UI 还原时。

子项索引

子项 一句话
foundations folder UI 通用硬规范索引 — 与视觉风格无关的底线:WCAG 2.2 无障碍 / 8pt 间距 / 模块化字阶 / 60-30-10 配色 / 响应式断点
theme folder 主题风格库索引 — 默认 bento,指定则切 flat-design / wes-anderson / glass·新拟物·极简等冷门风格速查
design-language folder 设计语言索引 — 三层 token 模型与换肤、以及「为一个项目沉淀一套设计语言」的方法论
component-patterns folder 跨风格组件落地约定索引 — 按钮层级、卡片与面板(含何时不用卡片)、动效曲线时长、每组件入场速查

Design · UI 设计维度

7 个工程维度之外,本维度专管前端「视觉规范与风格」。任何「写页面 / 还原稿 / 选风格 / 定 token」的任务从这里下钻。

按你正在做的事下钻

你在做什么 进哪个
写新页面/组件,要守对比度·间距·字阶·配色·响应式 foundations/
不知道用什么视觉风格 / 要切 bento·flat·wes-anderson theme/theme-selection
已定风格,要它的配色·圆角·阴影·栅格细则 theme/ 下对应风格叶子
给项目定一套设计系统(token / 灰阶 / 品牌色 / 换肤) design-language/
写按钮·卡片·动效,要跨风格通用落地约定 component-patterns/

主题风格默认规则

用户指定主题 → 用对应风格;未指定 → 默认 bento。 详见 theme/theme-selection

与外部 skill 的分工

本维度给「项目锚定、可检索命中的硬规约 + 三套常用主题」。需要更大的检索库或审美方向把控时,改用外部 skill:

需求 改用 本维度给
浏览 50+ 风格 / 21 配色 / 50 字体配对 / 图表选型,按关键词检索 ui-ux-pro-max bento/flat/wes-anderson 三套 + 冷门风格一行速查导流
从零定审美方向、避开通用「AI 味」 frontend-design 可落地的硬规范与 token 模型

冲突时本维度(项目约定)优先。

链接