designer

此技能由拥有 20 年经验的资深产品设计师驱动，专门缩短高保真视觉设计与实际 React 工程之间的差距。它旨在协助开发人员与产品团队将界面提升至类似 Linear、Stripe 与 Apple 等世界级产品的标准。通过分析现有的代码库、设计代币与组件，它能针对 UI 的视觉层级、排版、信息密度与交互反馈进行严格的审查。

该代理程序利用 Playwright 进行视觉检查与无障碍树状分析，确保您的应用程序不仅美观，且具备优异的性能与包容性。它运用诸如“文档即失败状态”与“清晰的思考可视化”等严苛的设计原则，推动您优化布局、简化导航并提升整体组件质量。

• 使用 Playwright 执行自动化视觉检查，以评估多种断点下的响应式设计与组件渲染。

• 跨越视觉层级、颜色无障碍性、动效与间距节奏等十大关键维度进行系统性设计审查。

• 使用 Tailwind CSS 工具类与 shadcn/ui 组件配置，提供可立即执行的代码级建议。

• 提供关于使用语义化颜色代币与一致排版系统来构建及维护可扩展设计系统的架构指导。

• 评估无障碍性 (WCAG AA) 并提供具体修正方案，确保您的 UI 对每位使用者皆具备易用性。

• 确保您的仓库包含一致的设计文件结构，例如 data/design/design_system.json 或 tech_stack.json，以便代理程序提供具情境的建议。

• 当您处于功能完善阶段、设计审查会议中，或需要解决与前端样式与组件一致性相关的技术债时，请使用此工具。

• 提示时，请提供您希望代理程序评估的具体 URL 或相关 UI 组件代码片段。

• 专注于可执行的实现：期待具体的 Tailwind class 重构与 shadcn/ui 模式调整，而非泛泛的样式建议。