用途:这是一个名为 design-taste-frontend(tasteskill: Anti-Slop Frontend Skill)的前端技能,定位为落地页、作品集与改版设计,资料明确说明不适用于仪表盘、数据表或多步产品 UI。
主要做法:先做“需求推断”——读取页面类型、用户使用的风格词、参考链接或截图、目标受众、已有品牌资产,以及无障碍、公共部门、受监管行业等隐性约束;在生成代码前先输出一句 Design Read 说明阅读结论。若简报确有歧义,只允许提一个问题,不猜测。资料还列出应避免的默认套路,如 AI 紫渐变、居中英雄区配深色网格、三张等大功能卡等。
核心配置:由三个旋钮构成——DESIGN_VARIANCE、MOTION_INTENSITY、VISUAL_DENSITY,默认基线 8/6/4,并可按风格信号与用例预设调整。资料给出旋钮推断表与预设表。
设计系统选择:当简报明确指向微软、Google、IBM、Shopify、Atlassian、GitHub、英国或美国政府服务等时,应安装并使用其官方包;其余审美方向(玻璃拟态、Bento、粗野主义、编辑风、暗黑科技、极光渐变、动态文字等)没有单一官方包,用原生 CSS 与 Tailwind 配合维护中的组件库实现,并在注释中说明哪些是借鉴灵感。一个项目只用一套系统。
默认架构:React 或 Next.js,默认服务端组件;涉及 Motion、滚动监听或指针物理的组件必须隔离为客户端叶子组件。样式默认 Tailwind v4,动画用 motion/react,字体用 next/font 或自托管。全局状态仅在避免深层传参时使用。图标库限定若干允许项,禁止手写 SVG 图标,一个项目只用一族图标,并统一 strokeWidth。默认不建议使用 emoji。响应式使用标准断点,容器宽度受限,全高英雄区用 min-h-[100dvh],布局优先 CSS Grid 而非复杂 flex 百分比计算。导入任何第三方库前须检查 package.json 并先给出安装命令。
设计规则:涵盖字体、配色与强调方式,例如默认不建议用 Inter 与衬线字体,限制强调色数量,选定强调色后全页统一;资料还给出面向高端消费类简报的配色禁令与替代方向。限制:以上均为上下文规则,不会自动触发;具体效果与收费等信息资料未提供。