SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场frontend-design

frontend-design

前端与建站

查看项目

更新于 10-15 14:52

技能介绍

用途

frontend-design 是一个面向 Web UI 的前端设计技能，定位为“反套路”（anti-slop）设计。它适用于落地页、作品集、营销/产品站点以及界面改版，明确不适用于仪表盘、数据表格和多步骤产品界面。移动端 UI 由单独的 mobile-design 技能负责。

主要能力

技能提供风格变体与工具文件，仅在需求匹配时读取：

  • style-minimalist.md：干净、编辑风、单色极简主义
  • style-brutalist.md：原始工业/终端风、数据密集
  • redesign.md：升级现有 UI（审计优先）
  • scripts/ux_audit.py：对已构建 UI 进行 UX 与无障碍审计
  • scripts/accessibility_checker.py：专项无障碍检查

设计规则改编自 Leonxlnx 的 taste-skill（MIT）。

使用方式

1. 需求推断（先读场）

在动代码前先推断用户真正想要什么。先读取信号：页面类型（落地页/作品集/改版/编辑博客）、用户使用的氛围词（如 minimalist、calm、Linear-style、Awwwards、brutalist、premium consumer、Apple-y、playful、serious B2B、editorial、agency-y、glassy、dark tech）、参考信号（链接、截图、竞品）、受众、已有品牌资产、隐性约束（无障碍优先、公共部门、受监管行业、信任优先电商、儿童产品，这些约束优先于审美偏好）。

生成前先输出一行“Design Read”，例如：“Reading this as: B2B SaaS landing for technical buyers, with a Linear-style minimalist language, leaning toward Tailwind utilities + Geist + restrained motion.”

若需求确实存在分歧，只问一个澄清问题，不要多问；若能自信推断则直接声明并继续。

反默认纪律：不要默认使用 AI 紫渐变、深色网格上的居中 hero、三张等宽功能卡、到处玻璃拟态、无限循环微动效、Inter + slate-900。

2. 三个旋钮（核心配置）

  • DESIGN_VARIANCE：1 = 完美对称，10 = 艺术混乱
  • MOTION_INTENSITY：1 = 静态，10 = 电影级/物理
  • VISUAL_DENSITY：1 = 画廊/通透，10 = 驾驶舱/密集数据

基线为 8 / 6 / 4。技能给出信号到旋钮值的推断表，以及用例预设（如 SaaS 落地页 7/6/4，代理/创意落地页 9/8/3，设计师作品集 8/7/3，公共部门服务 3/2/5，改版-保留则匹配现有值等）。

3. 需求到设计系统的映射

当需求对应真实设计系统时，使用官方包，例如：Microsoft/企业 SaaS 用 @fluentui/react-components 或 @fluentui/web-components；Google 风用 @material/web + Material 3 tokens；IBM 风用 @carbon/react + @carbon/styles；Shopify 用 polaris.js 或 Polaris React；Atlassian 用 @atlaskit/* + @atlaskit/tokens；GitHub 风用 @primer/css 或 @primer/react-brand；英国公共部门用 govuk-frontend；美国公共部门用 uswds；快速本地业务 MVP 用 Bootstrap 5.3；现代无障碍 React 基础用 @radix-ui/themes；自持组件的现代 SaaS 用 shadcn/ui（npx shadcn@latest add ...）；Tailwind 现代 SaaS/AI 营销用 Tailwind v4 utilities + dark: variant。

诚实规则：若需求对应上述系统，安装并使用官方包，不要手写其 CSS，也不要导入其 tokens 后覆盖 90%。每个项目只用一个系统，不要混用。

当需求是一种审美而非系统时（玻璃拟态、Bento、粗野主义、编辑/杂志、暗黑科技、极光/网格渐变、动态字体、Apple Liquid Glass），用原生 CSS + Tailwind + 维护良好的组件库实现，并在代码注释中诚实标注哪些是借鉴灵感、哪些是官方材料。Apple Liquid Glass 仅 Apple 平台有官方文档，Web 实现是近似，需明确标注。

4. 默认架构与约定

  • 框架：React 或 Next.js，默认 Server Components（RSC）。全局状态仅在 Client Components 中可用；在 Next.js 中把 provider 包在 "use client" 组件里。使用 Motion、滚动监听或指针物理的组件必须是隔离的叶子组件，顶部加 'use client'。
  • 样式：默认 Tailwind v4；v4 不要在 postcss.config.js 中使用 tailwindcss 插件，改用 @tailwindcss/postcss 或 Vite 插件。
  • 动画：Motion（原 Framer Motion），从 motion/react 导入（import { motion } from "motion/react"）。
  • 字体：始终用 next/font 或自托管 @font-face + font-display: swap，生产环境不要用 <link> 引 Google Fonts。
  • 状态：局部用 useState/useReducer；全局仅用于避免深层 prop drilling（Zustand、Jotai 或 React context）。绝不用 useState 跟踪鼠标位置、滚动进度、指针物理、磁吸悬停等连续值，改用 Motion 的 useMotionValue / useTransform / useScroll。
  • 图标：允许 @phosphor-icons/react、hugeicons-react、@radix-ui/react-icons、@tabler/icons-react；不鼓励 lucide-react（除非用户明确要求或项目已依赖）。绝不手写 SVG 图标。每个项目一个图标家族，全局统一 strokeWidth。
  • Emoji：默认不鼓励，用图标库字形替代；仅当用户明确要求 playful/聊天风/社交原生氛围时少量使用。
  • 响应式：统一断点（sm 640、md 768、lg 1024、xl 1280、2xl 1536）；页面用 max-w-[1400px] mx-auto 或 max-w-7xl 约束；全高 Hero 绝不用 h-screen，始终用 min-h-[100dvh]；复杂布局用 CSS Grid 而非 flex 百分比数学。
  • 依赖验证（强制）：导入任何第三方库前检查 package.json，缺失则先输出安装命令。

5. 设计工程指令（偏差纠正）

  • 排版：标题默认 text-4xl md:text-6xl tracking-tighter leading-none；正文默认 text-base text-gray-600 leading-relaxed max-w-[65ch]。无衬线默认不鼓励 Inter，优先 Geist、Outfit、Cabinet Grotesk、Satoshi 或品牌适配衬线。衬线作为默认字体非常不鼓励，仅当品牌简报明确点名衬线，或审美确属编辑/奢华/出版/手稿/传承/复古且能说明为何该衬线适配该品牌时才可用。默认禁用 Fraunces 和 Instrument_Serif。若确需衬线，从给定池中轮换，不要连续项目复用同一衬线。斜体含降部字母（y g j p q）时，leading-[1] 或 leading-none 会裁切降部，至少用 leading-[1.1] 并在包裹元素加 pb-1 或 mb-1。
  • 配色：最多 1 个强调色，饱和度默认 < 80%。LILA 规则：默认不鼓励“AI 紫/蓝光”审美。用中性基色（Zinc/Slate/Stone）配高对比单一强调色。若品牌明确要求紫/紫罗兰则拥抱，但要有意图地执行。每个项目一个调色板，不要在同一项目内暖灰冷灰摇摆。颜色一致性锁定（强制）：选定强调色后全页统一。高端消费调色板禁令（强制）：默认禁用暖米/奶油 + 黄铜/陶土/牛血红/赭石 + 浓缩咖啡/墨色深字的具体十六进制族，并给出替代方向（冷奢华、森林、黑与棕褐、钴蓝+奶油等）。

适用场景

落地页、作品集、营销/产品站点、界面改版。

限制

不适用于仪表盘、数据表格、多步骤产品界面；移动端 UI 由单独的 mobile-design 技能负责。其余细节（如具体收费、价格、平台支持等）暂未提供。