frontend-design · 前端设计指导
新建或重塑 UI 时的视觉设计指导：帮助确定美学方向、字体排印，并做出不像模板默认值的设计决策。
核心是"为具体 brief 做有主张的选择"：配色、字体、布局都从题材、行业与受众出发，识别并避开当前 AI 生成设计的常见默认值（如暖米色底 + 衬线大标题 + 陶土色点缀、SaaS 卡片套件等）。包含两遍工作法：先做设计计划并对照 brief 自查，再写代码。
调用示例：在聊天框中说"帮我定一下这个金融数据看板的设计方向"。
产品详解
定位
frontend-design 是设计方法论 skill：它不直接产出图片或代码，而是以设计总监的视角，指导每一次视觉决策都"为这个 brief 而做"，拒绝模板化默认值。
核心能力
- 题材锚定：先识别产品题材、受众与首要任务，视觉选择从题材的行业、材料与行话出发。
- 默认值识别：列出当前 AI 生成设计的常见套路（暖米色底 + 高对比衬线标题、酸性绿点缀深色底、SaaS 卡片套件、通用的全大写 eyebrow 标签等），在 brief 未指定时主动避开。
- 字体排印原则：字体承载页面个性；一到两种字体、明确的字阶；禁用"只给标题里一个词换色/斜体"等廉价处理。
- 结构即信息：边框、编号、分隔线等结构手段只用于编码真实信息；编号仅用于真正的序列内容。
- 动效克制：非用户触发的动效只做一次编排好的亮点时刻；响应用户操作的动效欢迎。
- 两遍工作法：先做紧凑的设计计划（配色/字体/布局/原则）并对照 brief 自查独特性，确认后再写代码；写代码时注意 CSS 选择器优先级冲突。
工作流程
- 确认 brief：题材、受众、设计首要任务（缺失时先提出方案再确认）
- 做设计计划：4–6 个命名的十六进制配色、字体及其分工、一句话布局概念 + ASCII 线框、独特性原则
- 对照 brief 自查：若某部分像"任何类似 brief 都会产出的默认答案"，修改并说明改了什么、为什么
- 按修订后的计划写代码，自我批判（必要时截图检查）
输入与输出
| 输入 | 说明 |
|---|---|
| 设计 brief | 必填：做什么产品/页面、给谁用、首要任务 |
| 视觉偏好 | 选填；brief 明确指定时优先遵循 |
输出：设计计划（含配色、字体、布局、原则）→ 按计划实现的 UI 代码。
与相邻 skill 的区别
- 本 skill 是设计决策的方法论指导；card-quote、poster-hero 等是具体出图的执行工具，按既定设计系统渲染。
适用场景
- 新产品/新页面的视觉方向确立
- 现有 UI 重塑，摆脱模板感
- 评审 AI 生成的设计稿，指出默认值问题
- 设计团队统一审美决策语言
使用前准备
- 无需 API key。
- 效果取决于 brief 质量：题材、受众、任务越具体，设计主张越有依据；含糊的 brief 会先被要求澄清。
frontend-design 隶属于 Aiglade Skill 库。在 Aiglade 聊天框中用自然语言描述需求即可调用。