用途：将任意提示或产品概念转化为视觉精致、现代且具高级质感的前端界面。它把开发者定位为同时具备前端工程、UI/UX、产品设计与视觉策略视角的角色，强调设计必须服务产品定位，而非套用通用模板。
主要能力：提供十步设计流程——理解产品与受众、视觉灵感研究、视觉系统规划（字体少而精、色彩体系、间距/圆角/阴影层级）、布局架构（落地页与仪表盘的区块流程图）、可复用组件系统（layout/ui/sections/data 目录组织、variant 驱动 props、玻璃拟态配方）、现代交互与动效（悬停、过渡、滚动揭示、交错动画、prefers-reduced-motion）、技术栈建议、后端数据状态设计（加载/错误/空状态等）、响应式规则与最终视觉质量校验清单。还包含按行业的设计方向对照表（AI、开发者工具、金融科技、安全、SaaS 仪表盘等）以及 2025–2026 趋势（Bento 网格、动态渐变、滚动叙事、单强调色、超大标题、颗粒质感、默认暗色模式）。
使用方式：先解析产品类型、目标受众、核心价值主张与转化目标，再定视觉基调与行业惯例，随后在编码前后按流程逐步推进。推荐技术栈为 React/Next.js、Tailwind CSS、shadcn/ui 与 Radix UI、Framer Motion、TypeScript、Lucide 图标；若用户指定 Vue、Svelte 或纯 HTML/CSS/JS，则尊重其选择，简单项目不必过度工程化。
适用场景：落地页、SaaS 仪表盘、AI 产品页、作品集、企业 B2B 站点、电商与管理后台等界面设计与实现指导。
限制：以设计规范与流程建议为主，未提供具体可运行代码、安装命令、价格或性能数据；文中提到的完整参考表位于 references/design-systems.md，本资料未给出其内容，具体实现细节需另行确认。