网页与界面设计

为幻灯片、文档、报告或落地页套用 10 套现成的配色与字体主题，也可以现场生成新主题。

用 shadcn/ui 和 Tailwind CSS 搭建无障碍、响应式界面的指引，涵盖深色模式、主题定制，以及基于画布的视觉设计思路。

把一个主题写成一段生成艺术宣言，再做成带种子切换、参数滑块和 PNG 导出的 p5.js 交互作品。

检查一个正在运行的网站的布局、响应式、无障碍和一致性问题，再用最小改动在源码里修复并复查。

让智能体做出不像模板的落地页、作品集和改版：先读需求并给出“设计判断”，设定三个刻度，合适时选用真实设计系统，最后过一遍严格的发布前检查。

通过 Penpot 的 MCP 服务在 Penpot 里设计网页、移动端和桌面端界面，带有设计系统检查、组件与无障碍规则和各平台尺寸。

找出在特定屏幕宽度下布局出问题的真正原因：横向滚动、溢出、不肯缩小的 flex 子项、不吸附的 sticky、手机上的 100vh，以及固定栏被浏览器界面遮住。

列出一个界面或组件需要的每一种状态：加载、空、错误、部分成功、禁用、离线、无权限和极端内容，并为每种状态定好用户看到什么、能做什么。

搭建三层设计令牌（基础值、语义、组件）、编写组件规范，并生成符合令牌规范、带 Chart.js 图表的 HTML 幻灯片。

使用 TypeScript、Tailwind CSS 与 shadcn/ui 构建复杂的独立 React 网页产物。

对照 WCAG 2.2 AA 级审查页面或组件：键盘、焦点、对比度、名称与标签、结构、表单、对话框、动态更新、缩放和点击目标大小，每条发现都对应到具体的成功标准。

可检索的界面设计知识库：风格、配色、字体搭配、UX 规范、图表和各技术栈的实现建议，动手前先确定视觉方向。

让界面不重新设计也能承载任何语言：消息文案库、按地区格式化、能适应不同文字长度的布局、中日韩和从右到左的支持，以及带规范网址的语言切换。

做出在两种主题下都正确的深色与浅色模式：语义颜色令牌、跟随系统设置加手动切换、加载时不闪错误主题，并在两种主题里分别核对对比度。

按正确的顺序从零构建一个动画：该不该动、目的是什么、用什么工具、动哪些属性、用什么曲线和时长、怎么被打断、怎么退出。它会写出代码，也会拒绝给不该动的东西加动画。

在不重写的前提下，把现有网站或应用升级到高级质感：先扫描技术栈，再按字体、色彩、布局、状态和内容审计“AI 通用套路”，然后按优先级做有针对性的修复。

用现实中最坏的数据给组件做压力测试：很长的姓名、没法折行的邮箱、一个字的名字、缺失字段、1284 个成员、空列表。它会报告什么坏了、为什么，以及每个问题的修法，并且在动手改之前先停下。

教智能体像高端设计机构那样做设计：用确切的字体、间距、阴影、嵌套卡片结构和动效曲线让网站显得“贵”，并附一份廉价 AI 默认写法的禁用清单。

用你自己的话描述一个动效，得到它的准确名称：“弹窗打开时那种弹一下的效果”是 Pop in，“iOS 那种拉到头会回弹的滚动”是 Rubber-banding。适合用来给设计师写需求或给 AI 写提示词。

用 Emil Kowalski 的设计工程手艺来评审和构建界面：什么时候不该做动画、用哪种缓动和时长、弹簧、clip-path、手势、性能与无障碍，并要求用“修改前 / 修改后 / 原因”的表格给出评审。