用途：该技能面向前端界面设计，帮助在编写代码前先确立明确的美学方向，避免模板化、杂乱的"AI 风格"设计，同时保证真实项目所需的布局结构、层级与可用性。用户需提供前端需求，如组件、页面、应用或界面，并可附带用途、受众或技术约束等信息。
主要能力：引导先做设计思考，明确用途（解决什么问题、谁使用）、基调（极简、精致、编辑风、未来感、活泼、工业风等）、技术约束（框架、性能、可访问性）与差异化点；随后输出可运行代码（HTML/CSS/JS、React、Vue 等），要求生产级、可用、视觉精致、风格统一、层级清晰。
设计规范：排版上使用有辨识度的展示字体但保证界面可读性；色彩使用受控调色板，品牌色仅用于按钮、激活态与高亮；动效克制且有明确含义；空间构图保持对齐与网格一致；用细微渐变、阴影与层次增加深度。布局采用页面、区块、卡片三层结构，内容不直接贴在页面上；间距使用 8/16/24/32px 等固定比例；卡片统一为 bg-card、border、圆角、浅阴影与内边距；阴影以 shadow-sm 为默认、shadow-md 为强调；文字按主、次、弱三级层次使用。
用法与限制：涉及 Tailwind 时应使用设计令牌而非硬编码颜色；交互悬停与过渡保持细微（duration-200 ease-out）。需避免随机渐变、间距不一致、无边框的扁平界面、滥用弱化文字与混搭过多风格。技能还包含 Infloq 品牌规范（指定色板、字体与用法），但该规范仅在其品牌的界面构建场景适用。资料未提供安装命令、价格与平台支持等信息。