独特前端界面生成器

问题

很多前端界面生成结果看起来都像“AI 生成”：Inter、Roboto 或系统字体，紫色渐变白底，居中 Hero、卡片堆叠、默认阴影。这类页面能跑，但缺少上下文、品牌感和记忆点。真正要解决的不是“能不能画出来”，而是如何把一个组件、页面或应用做出明确设计方向。

技能如何工作

该技能要求先做 Design Thinking，再写代码：

• Purpose：判断接口解决的问题、目标用户和使用场景。
• Tone：选择一种强烈美学方向，例如 brutalist/raw、editorial/magazine、retro-futuristic、luxury/refined、playful/toy-like。
• Constraints：确认框架、性能、可访问性和技术限制。
• Differentiation：提炼一个让人记住的差异点。

实现时覆盖 HTML/CSS/JS、React、Vue 等前端栈，并强调 Typography、Color & Theme、Motion、Spatial Composition 与背景细节。它会推动使用 CSS 变量、独特字体配对、非对称布局、重叠、对角线流、负空间、渐变网格、噪点、纹理、animation-delay 或 Motion 库等高影响动效。

适用边界

适合需要设计感更强的组件、落地页、应用界面和原型。若项目已有严格设计系统、企业视觉规范或无障碍要求，需要把约束写成明确输入；它不会替代设计令牌、品牌资产或可访问性审计，而是让生成代码更贴近“被认真设计过”的状态。