前端设计指南5步让页面摆脱模板脸【免费下载链接】skillsPublic repository for Agent Skills项目地址: https://gitcode.com/GitHub_Trending/skills3/skillsskills3/skills 是一套供 Claude 按需加载的可执行规则这篇讲的是其中的前端设计技能。你会写 HTML/CSS 就能跟照做一遍下一个页面就有自己的立场不再是 AI 默认款。 一个现场第一稿长成了 AI 模板客户官网的交付首稿Inter 字体、蓝白配色、顶部一个大数字配小标签。放到竞品页面旁边一比配色、字体、布局像复制的。问题不在代码在设计决策没有提前做。 四个决策按顺序来锁定方向先别开编辑器回答三个问题主题是什么、受众是谁、页面唯一的任务是什么再挑一个极致风格——粗野主义、复古未来、有机自然都可以。关键不在强度在意图性。方向定了拿什么撑场面让字体扛人格字体是页面的脸。挑一款你在别的项目绝不会选的展示字体配一个可读的正文字体字号比例拉开。嫌挑字麻烦skills/canvas-design/canvas-fonts/ 里躺着 54 个现成的字体文件。脸立住了再给身体染什么色钉进变量调色板写成 4~6 个带名字的十六进制色值一个主导色加一个高饱和强调色全部写进 CSS 变量换肤只改一行。skills/theme-factory/themes/ 下有 10 组配色抄一组起步。色和字都齐了胆量花在哪留一个高光时刻技能里话说得直白把大胆只花在一处。一次编排好的页面加载动画比十几个零散微交互更让人记住。方向偏克制时宁可少动效。页面做完了怎么检查它不是默认款 上手5 步交作业git clone https://gitcode.com/GitHub_Trending/skills3/skills拿到全套技能文件夹读 skills/frontend-design/SKILL.md产出先计划后动手的两遍流程在 canvas-fonts 的 54 个字体文件里产出 1 个展示字体 1 个正文字体从 theme-factory 任选一组配色产出钉进 CSS 变量的 4~6 个色值按定稿的代码写页面hero 放主题里最有代表性的东西不用编号做装饰 什么时候别用客户已指定风格时听客户的需求永远优先别用这个技能炫实验性加个标准按钮这类小活别搬出它它管的是有立场的整页最容易被用错胆量花到多处——一个强调、一个高光再多就是噪音内容不是真序列就别上 01/02/03 编号装饰第一稿起页面就有名字不是 AI 默认款是这个客户的脸。打开仓库挑个方向开做。【免费下载链接】skillsPublic repository for Agent Skills项目地址: https://gitcode.com/GitHub_Trending/skills3/skills创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考