用途：指导创建风格鲜明、可直接用于生产的前端界面，在实现真实代码的同时高度关注美学细节。适用于构建组件、页面等场景，例如“构建 brief 中的 hero 区域”“用北欧风格创建卡片组件”“做出日本杂志的感觉”“构建设置页，风格自选”。
主要能力：提供八种具名美学哲学作为具体实现指南，每种定义字体、色彩、布局、间距、动效与细节处理：Dieter Rams（功能主义）、瑞士/国际排版、日式极简（Ma）、粗野主义/原始、北欧、Art Deco/几何、Neo-Memphis、编辑/杂志风。
使用方式：写代码前先探索现有代码库，扫描组件目录（components/、ui/、shared/）并列出组件名称与 props/API；查找 tokens.css、variables.css、theme.css 或 :root 自定义属性；检查 tailwind.config.js/ts 的 theme.extend；查看 UI 框架主题（Material UI createTheme、Chakra extendTheme、shadcn globals.css 与 components.json）；查看 Storybook、字体加载、布局模式与 package.json 中的 UI 依赖。若已有匹配或部分匹配的组件，应扩展或组合，不要重复创建。随后理解上下文（解决的问题、使用者、情感基调、硬性约束），并明确选定一种美学方向，说明理由后再写代码。
实现要点：字体选用有辨识度的 Google Fonts 或 CDN 字体，避免 Inter、Roboto、Arial 等通用默认；用 CSS 变量统一色彩；HTML 用 CSS 过渡，React 用 Framer Motion/Motion；注重空间构图、背景与层次。移动优先：从 375px 单列开始，用 min-width 媒体查询逐级增强，触控目标至少 44x44px，正文至少 16px，导航需移动端专属模式。深色模式：优先使用已有设计令牌的深色调色板，用 CSS 自定义属性支持 prefers-color-scheme 与 [data-theme="dark"]，不要简单反色，正文用 off-white，阴影更暗更透明，强调色需满足 WCAG 对比度，并加入 prefers-reduced-motion 查询。
限制：资料未提供安装命令、收费、价格、平台或效果数据；具体实现复杂度需与美学愿景匹配。