前端设计 (frontend-design)

前端设计（frontend-design）

概述

frontend-design 是 Impeccable 的核心技能。它指导创建独特、生产级的前端界面，避免”AI slop”美学。

核心原则

设计前必须收集上下文

设计技能没有项目上下文会产出通用设计。在做设计前必须确认：

1. 目标用户 - 谁在什么场景下使用这个产品？
2. 使用场景 - 用户要完成什么任务？
3. 品牌调性 - 界面应该是什么感觉？

重要：不能从代码库推断这些上下文。代码告诉你做了什么，不告诉你是为谁做的。

设计方向

选择一个大胆的美学方向：

• 目的 - 解决什么问题？谁使用？
• 风格 - 极简、极繁、复古未来、奢华、俏皮、杂志风、装饰艺术…
• 约束 - 技术要求（框架、性能、无障碍）
• 差异化 - 什么让人记住？

设计指南

排版

• 选择独特美丽的字体
• 使用模块化字阶（fluid sizing with clamp）
• 不要用 Inter、Roboto、Arial 等烂大街字体

颜色

• 选一个 cohesive palette
• 使用 OKLCH 色彩空间
• 主色 + 锐利 accent 胜过平淡均匀的配色

避免 AI Slop

• ❌ Inter 字体
• ❌ 紫色渐变
• ❌ 卡片套卡片
• ❌ 彩色背景上的灰色文字

7 个参考文件

参考	内容
typography	字体系统、字体搭配、模块化字阶
color-and-contrast	OKLCH、暗色模式、无障碍对比度
spatial-design	间距系统、网格、视觉层级
motion-design	缓动曲线、错开动画、减少动画
interaction-design	表单、焦点状态、加载模式
responsive-design	移动优先、流式设计、容器查询
ux-writing	按钮标签、错误信息、空状态

速查卡片

何时使用

• 构建 web 组件
• 创建页面
• 设计 UI/UX

核心原则

• 先收集设计上下文
• 选择大胆美学方向
• 避免 AI slop

禁止

• Inter/Roboto 字体
• 紫色渐变
• 通用模板

关联技能

• audit - 质量审计
• critique - UX 评审
• polish - 最终打磨

模拟场景

场景 1：用户说”做一个登录页面”

❌ 错误：直接用默认样式写表单
✅ 正确：
1. 先问：目标用户是谁？品牌调性？
2. 选择美学方向
3. 选独特字体、配色
4. 实现生产级代码

场景 2：用户说”帮我优化这个组件”

❌ 错误：直接改样式
✅ 正确：
1. 运行 audit 检查问题
2. 用 critique 评审 UX
3. 用 polish 打磨

核心命令

# 1. 检查 .impeccable.md
cat .impeccable.md

# 2. 运行设计上下文收集
/teach-impeccable

# 3. 设计检查
/audit

避坑指南

坑	表现	解决
直接开始设计	没有上下文，产出通用设计	先运行 teach-impeccable
用默认字体	Inter/Roboto	选择独特字体
渐变滥用	紫色渐变	用纯色 + accent
模板化	卡片套卡片	有意的设计决策

---

查看源文件: GitHub原始文件