用途:这是一个“反套路”前端设计技能,适用于落地页、作品集和网站改版,不适用于仪表盘、数据表格或多步骤产品界面。核心是先读需求(页面类型、氛围词、参考、受众、已有品牌资产、约束),再输出一行“设计解读”,据此选择设计方向,而非直接套用默认审美。
主要能力:提供设计推断流程;三个调节旋钮 DESIGN_VARIANCE、MOTION_INTENSITY、VISUAL_DENSITY(基线 8/6/4)及用例预设;需求到设计系统的映射(如 Fluent UI、Material、Carbon、Polaris、Atlassian、Primer、GOV.UK、USWDS、Bootstrap、Radix、shadcn/ui、Tailwind);默认技术栈与约定(React/Next.js、RSC、Tailwind v4、Motion、next/font、图标库、响应式与依赖校验);排版、配色、动效等偏差纠正规则。
使用方式:先做设计解读,必要时只问一个澄清问题;设定旋钮值;按映射选择官方包或原生 CSS 实现;遵循技术栈与工程约定。
限制:规则均为情境化,不自动触发;一个项目只用一套设计系统;禁止手绘 SVG 图标;默认禁用 emoji、Inter、衬线体及 AI 紫渐变等;具体安装命令与完整代码示例资料中未完整提供。