前端设计去模板感4步决策链让页面不再像AI生成的【免费下载链接】skillsPublic repository for Agent Skills项目地址: https://gitcode.com/GitHub_Trending/skills3/skillsskills/frontend-design/ 是仓库里的一个前端设计技能一套可执行的去模板化规则。AI 生成的页面最容易长成什么样Inter 字体、蓝白配色、大数字配小标签。这个技能把顺序换了过来先把所有设计决策做完再动手写代码。适合会用 Git、懂 HTML/CSS 的新手看完就能交付有设计立场的页面。你可以把整个过程当成写一份菜谱先定菜式再选主料把调料装进标准调料盒最后用一道摆盘收尾。 如何锁定一个美学方向先回答三个问题主题是什么、受众是谁、这个页面唯一的任务。然后选一个极致风格粗野主义、复古未来、有机自然都行。关键在意图性不在强度——有意图的克制比堆砌更耐看。方向定了接下来用字体把它撑起来。 如何选定一款展示字体字体是页面的人格不是内容的搬运工。挑一款你在别的项目绝不会选的展示字体配一个正文字体字号比例要立得住。没有方向就去翻 skills/canvas-design/canvas-fonts/那里放了 50 多款字体文件可直接引入。字体挑完该把颜色钉进变量了。 CSS 变量换肤写法别把调色板硬编码。做成 token 系统4 到 6 个带名字的 16 进制色值一个主导色加一个高饱和强调色。所有颜色写进 CSS 变量之后换肤只改一行。懒得自己配skills/theme-factory/themes/ 有 10 组现成的字体配色比如深海主题只用 4 个色值就定了调。最后一步是让页面被记住的时刻。✨ 如何做出一个编排高光时刻动效要克制。一次编排好的页面加载动画胜过十几个零散微交互。方向偏克制时宁可少做多余的动效反而更像 AI 生成。上手路径Clone 仓库https://gitcode.com/GitHub_Trending/skills3/skills进入 skills/frontend-design/读 SKILL.md 的两遍流程先出设计计划验证它不是默认答案再写代码浏览字体库挑一款有辨识度的展示字体把 4 到 6 个色值写进 CSS 变量对照下面的误区表检查再交付常见误区现象换法Inter 字体加蓝白到底选有辨识度的字体再放一个高饱和强调色大数字、小标签的 hero 区开场就放主题世界里最有代表性的东西微交互撒满天只留一次编排好的加载动画01/02/03 编号装饰内容真是序列才编号否则删掉打开项目挑一个美学方向从第一稿就开始做有立场的页面。【免费下载链接】skillsPublic repository for Agent Skills项目地址: https://gitcode.com/GitHub_Trending/skills3/skills创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 前端设计去模板感：4步决策链，让页面不再像AI生成的
前端设计去模板感4步决策链让页面不再像AI生成的【免费下载链接】skillsPublic repository for Agent Skills项目地址: https://gitcode.com/GitHub_Trending/skills3/skillsskills/frontend-design/ 是仓库里的一个前端设计技能一套可执行的去模板化规则。AI 生成的页面最容易长成什么样Inter 字体、蓝白配色、大数字配小标签。这个技能把顺序换了过来先把所有设计决策做完再动手写代码。适合会用 Git、懂 HTML/CSS 的新手看完就能交付有设计立场的页面。你可以把整个过程当成写一份菜谱先定菜式再选主料把调料装进标准调料盒最后用一道摆盘收尾。 如何锁定一个美学方向先回答三个问题主题是什么、受众是谁、这个页面唯一的任务。然后选一个极致风格粗野主义、复古未来、有机自然都行。关键在意图性不在强度——有意图的克制比堆砌更耐看。方向定了接下来用字体把它撑起来。 如何选定一款展示字体字体是页面的人格不是内容的搬运工。挑一款你在别的项目绝不会选的展示字体配一个正文字体字号比例要立得住。没有方向就去翻 skills/canvas-design/canvas-fonts/那里放了 50 多款字体文件可直接引入。字体挑完该把颜色钉进变量了。 CSS 变量换肤写法别把调色板硬编码。做成 token 系统4 到 6 个带名字的 16 进制色值一个主导色加一个高饱和强调色。所有颜色写进 CSS 变量之后换肤只改一行。懒得自己配skills/theme-factory/themes/ 有 10 组现成的字体配色比如深海主题只用 4 个色值就定了调。最后一步是让页面被记住的时刻。✨ 如何做出一个编排高光时刻动效要克制。一次编排好的页面加载动画胜过十几个零散微交互。方向偏克制时宁可少做多余的动效反而更像 AI 生成。上手路径Clone 仓库https://gitcode.com/GitHub_Trending/skills3/skills进入 skills/frontend-design/读 SKILL.md 的两遍流程先出设计计划验证它不是默认答案再写代码浏览字体库挑一款有辨识度的展示字体把 4 到 6 个色值写进 CSS 变量对照下面的误区表检查再交付常见误区现象换法Inter 字体加蓝白到底选有辨识度的字体再放一个高饱和强调色大数字、小标签的 hero 区开场就放主题世界里最有代表性的东西微交互撒满天只留一次编排好的加载动画01/02/03 编号装饰内容真是序列才编号否则删掉打开项目挑一个美学方向从第一稿就开始做有立场的页面。【免费下载链接】skillsPublic repository for Agent Skills项目地址: https://gitcode.com/GitHub_Trending/skills3/skills创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考