博然精选 设计与视频工程开发
前端设计规范：先定方向再写界面
使用这技能的好处
先定审美方向再写代码，少交付一套样板感界面。
技能摘要
前端设计规范（反样板）是博然用于落地页、组件与视觉物料的 Agent Skill。它强制先完成设计思考——目的、语气、约束与差异化记忆点——再进入可运行的前端实现，明确反对 Inter/紫色渐变/无上下文卡片墙等「AI 样板审美」。Skill 覆盖字体配对、色彩变量、动效预算、空间构图与背景氛围，并要求产出可上线的 HTML/CSS/JS 或项目内组件，而不是停留在配色建议。对需要品牌辨识度的内容站与工具页，它把「好看一点」变成可执行的审美方向与验收标准，降低改版反复与视觉债务。主要读者包括前端工程师、设计师、独立开发者。该技能以本站仓库内 SKILL.md 维护，归入「设计与视频、工程开发」，强调可验收、可复用的 Agent 工作流。请结合本页步骤在真实任务中验证后再固化到团队约定。
博然AI · Skill 前端设计规范：先定方向再写界面
适合谁
- 前端工程师
- 设计师
- 独立开发者
- React
- Vue
- HTML/CSS
- TypeScript
- 品牌站改版负责人
- 产品设计师
- 创意开发
- 全栈工程师
- UI 设计师
- 视觉设计师
- 动效设计师
- 前端工程师
- 设计师
- 独立开发者
- React
- Vue
- HTML/CSS
- TypeScript
- 品牌站改版负责人
- 产品设计师
- 创意开发
- 全栈工程师
- UI 设计师
- 视觉设计师
- 动效设计师
这样用它
- 做新页面或改版前先加载本 Skill，写明产品目的、受众与必须避开的样板模式。
- 要求先给出审美方向（一句话概念），再实现可运行代码与响应式布局。
- 验收时检查是否出现通用无衬线堆、廉价渐变与无意义卡片化；有则返工。
- 复杂动效优先 CSS；需要时再引入项目既有动效库，避免为动而动。
- 改代码前先写出验收标准与禁止事项，再让 Agent 按本技能约束施工，避免「看起来能跑」的半成品。
- 合并前要求 Agent 给出变更摘要、风险面与回滚点；不确定就停在评审，不要直接推生产。
安装与来源
- 本技能为博然站点自维护内容，源文件位于仓库 .agents/skills/frontend-design/，随站点实践迭代，本页不提供第三方外链。
- 在 Cursor 或 Claude Code 中加载对应 Skill 目录后，使用本页「这样用它」中的触发语调用。
- 更新站点栏目或规范后，应同步修订 Skill 正文，保证 Agent 读取到的约束与线上流程一致。
- 验收时核对输出是否符合 Skill 内的硬性规则（禁词、字段齐全、格式约束等），不满足则要求返工。
- 该技能仅服务本站内容与工程流程，不作为对外开源分发包；引用时请注明博然AI笔记。
本技能为博然站点自维护内容，详情见上方安装步骤；本页不提供外部仓库链接。