网页与界面设计

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

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

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

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

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

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

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

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

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

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

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

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