GitHub_Trending/skills3/skills/frontend-design告别模板脸的前端设计实战指南【免费下载链接】skillsPublic repository for Agent Skills项目地址: https://gitcode.com/GitHub_Trending/skills3/skillsskills3/skills 是 Agent Skills 体系的官方示例仓库frontend-design 技能要解决一个很具体的问题生成出来的界面总是一副模板脸——同样的字体、同样的配色、同样的布局。它训练你像设计师对待客户提案一样对待每个页面先定观点再写代码。 一、场景切入为什么页面看起来都像AI 做的你正在做一个产品落地页结果又是奶油色背景、衬线大标题、赤陶色点缀——看到第三遍你已经能背出来了。frontend-design 直言这类观感正是 AI 生成的默认答案与你的主题无关。技能要求动笔前先钉住主题这个产品给谁用、页面只做一件事是什么、美学素材从哪来。主题自身的世界——材质、器具、行话——才是差异化的来源而不是素材库。 二、核心方法四条可执行的设计原则先写设计计划再动代码写第一行代码之前先落纸4~6 个带 hex 值的配色、2 个以上角色的字体搭配、一句话布局概念以及一个签名元素——这页被人记住的那一个东西。然后自审任何一条读起来像我会给任何同类页面出的默认答案就改掉它。字体负责人格结构负责信息展示体与正文体的搭配要为本项目专门挑选而不是每次伸手去拿同一组。数字 01/02/03、分隔线、标签这类结构器件应编码关于内容的真实信息——内容不是序列就别挂编号。动效花在高潮别撒胡椒面挑高影响时刻下手页面加载编排、滚动触发的揭示、悬停微交互。一个精心编排的瞬间胜过十几个分散效果反过来极简方向上堆动效只会加强AI 生成的观感。文案也是设计材料按用户视角写控件用主动语态命名同一动作全流程保持同一名按钮说发布反馈就是已发布。错误信息说明发生了什么、怎么修不道歉空状态是行动邀请不是氛围渲染。 三、配套资源技能目录里能直接拿来用的东西skills/frontend-design/SKILL.md完整设计纲领含主题钉定、两遍工作流程与自评标准skills/theme-factory/themes/10 套预设配色加字体主题给页面或幻灯片快速套用统一风格skills/canvas-design/canvas-fonts/50 开源字体及授权文件本地化字体素材skills/webapp-testing/Playwright 自动化脚本验证本地页面行为、截图检查效果⚠️ 四、避坑与进阶三个容易踩的误区别把大胆摊到每个元素上。技能要求签名元素只留一个其余保持安静克制装饰不服务主题就删。别把质量底线当可选项移动端响应、可见的键盘焦点、尊重减弱动效设置是基线要求不是加分项。用截图做自评构建过程中捕获页面与设计计划比对配合 webapp-testing 的截图脚本可以快速闭环。frontend-design 的价值不在于给你更漂亮的模板而在于训练先决策、再自审、后编码的工作流。下次做页面先写下你的配色、字体搭配和签名元素再碰代码。【免费下载链接】skillsPublic repository for Agent Skills项目地址: https://gitcode.com/GitHub_Trending/skills3/skills创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考