Agent Skills
返回列表
🎨

前端设计

设计多媒体 更新于 2026.08.30

将以下提示词粘贴到你的 AI 对话框中：

请根据 https://skillhub.cn/install/skillhub.md，安装 @org-02qudk26/frontend-design1。

技能介绍

要解决的问题

大模型生成前端页面时，常见问题不是“能不能画出来”，而是设计高度趋同：暖米色背景、高对比衬线标题、陶土色强调；近黑背景配酸绿；报纸式细线分栏。这类默认外观一旦与主题无关，就会让产品显得像模板。它要求模型把审美选择写出来，而不是直接输出一个看起来像示例的页面。本技能面向需要把 HTML、CSS 和文案一起做出来的场景，帮助模型在动笔前先确定主题、受众、页面唯一职责，以及一个可解释的设计风险。

工作方式与适用边界

  • 先定主题与 token：把 palette 写为 4–6 个命名色值，把 display、body、utility 字体分成不同角色，并用一句布局和 ASCII 线框比较方向。
  • 再自我批评：检查方案是否只是“任何页面都可用”的默认组合，若是，就改掉并说明原因；确认后再按方案写代码。
  • 控制实现细节：避免 .section 与 .cta 这类选择器互相覆盖，重视移动端、键盘焦点、prefers-reduced-motion，并让文案使用 Save changes 这类可执行表达。
  • 边界：它偏设计判断与前端页面表达，不适合只要求标准组件库拼装、企业后台低差异页面或完全由品牌规范锁定的任务；若 brief 已明确指定视觉方向，应以 brief 为准。

使用场景

  • 给官网首页做概念稿时，先确定主题、配色、字体和页面唯一职责，再产出可评审的布局方向。
  • 把粗糙需求整理成前端设计方向，拆出色值、字体角色、ASCII 线框和标志性元素。
  • 评审 AI 生成落地页时，判断是否落入奶油色衬线或黑底酸绿等默认模板，并给出修改理由。
  • 写前端页面文案时，把系统术语换成用户可见操作，例如把 Submit 改成 Save changes 并统一 toast 状态。

适合人员

  • 负责官网首页和营销活动页的前端工程师，需要把需求变成有主题、配色、字体和文案的页面方向。
  • 给大模型写前端设计提示词的产品设计师，需要模型先自批评默认模板，再输出 token 与线框。
  • 维护产品落地页文案的 copywriter，需要把按钮、toast、错误和空状态改成一致且可操作的表达。
  • 评估 AI 生成页面是否模板化的 tech lead，需要对照主题、结构、动效和 CSS 选择器风险做 review。