前端设计引擎

要解决什么问题

用模型搭前端时，输出往往长得像同一套模板：Inter、白底紫渐变、居中卡片、毫无语境的组件库风。这类界面能跑，但很难让人记住，也不像在为一个具体产品做设计。

前端设计引擎把任务从「补全页面」改成「先定美学方向，再写可上线代码」。你给出组件、页面或整应用的诉求（用途、受众、技术约束），技能会要求先明确 purpose、tone、constraints 和 differentiation，再落到 HTML/CSS/JS 或 React、Vue 等实现。

技能如何工作

核心流程可以概括为 Design Thinking → 实现。

• 定调：在 brutalist、retro-futuristic、editorial、luxury、playful 等极端气质里选一个清晰方向；强调「有意图」而不是「堆效果」。
• 视觉执行：Typography 用有性格的 display + 克制 body 配对，避免 Arial、Roboto、Inter 等泛用字体；Color & Theme 用 CSS 变量做主导色 + 锐利点缀；Motion 优先 CSS（React 可用 Motion），重视首屏 stagger、scroll/hover 等高影响时刻；Spatial Composition 允许不对称、重叠、破网格；背景用 gradient mesh、noise、grain 等营造氛围而非纯色块。
• 交付标准：代码需 production-grade、功能完整，且每个细节与所选美学一致；复杂度跟愿景匹配——极繁要多动画与层次，极简要靠间距与字重精度。

适用边界与注意点

• 适合「需要辨识度、愿意接受非常规版式」的界面；若只要中性后台或严格设计系统组件，应自行收窄 tone 或补充设计规范。
• 技能会主动 避免 跨次生成收敛到 Space Grotesk 等「社区默认审美」；同一项目内你最好固定方向，避免反复换风格。
• 无障碍、性能、框架选型仍依赖你提供的 constraints；技能强调美学，但不替代完整的 a11y 审计与性能预算。