企业官网建设流程全解析

前端设计指南：5步让页面摆脱模板脸

【免费下载链接】skillsPublic repository for Agent Skills项目地址: https://gitcode.com/GitHub_Trending/skills3/skills

skills3/skills 是一套供 Claude 按需加载的可执行规则，这篇讲的是其中的前端设计技能。你会写 HTML/CSS 就能跟，照做一遍，下一个页面就有自己的立场，不再是 AI 默认款。

🎬 一个现场：第一稿长成了 AI 模板

客户官网的交付首稿：Inter 字体、蓝白配色、顶部一个大数字配小标签。放到竞品页面旁边一比，配色、字体、布局像复制的。问题不在代码，在设计决策没有提前做。

🧭 四个决策，按顺序来

锁定方向

先别开编辑器，回答三个问题：主题是什么、受众是谁、页面唯一的任务是什么？再挑一个极致风格——粗野主义、复古未来、有机自然，都可以。关键不在强度，在意图性。

方向定了，拿什么撑场面？

让字体扛人格

字体是页面的脸。挑一款你在别的项目绝不会选的展示字体，配一个可读的正文字体，字号比例拉开。嫌挑字麻烦，skills/canvas-design/canvas-fonts/ 里躺着 54 个现成的字体文件。

脸立住了，再给身体染什么色？

钉进变量

调色板写成 4~6 个带名字的十六进制色值，一个主导色加一个高饱和强调色，全部写进 CSS 变量，换肤只改一行。skills/theme-factory/themes/ 下有 10 组配色，抄一组起步。

色和字都齐了，"胆量"花在哪？

留一个高光时刻

技能里话说得直白：把大胆只花在一处。一次编排好的页面加载动画，比十几个零散微交互更让人记住。方向偏克制时，宁可少动效。

页面做完了，怎么检查它不是默认款？

🚦 上手：5 步交作业

1. git clone https://gitcode.com/GitHub_Trending/skills3/skills，拿到全套技能文件夹
2. 读 skills/frontend-design/SKILL.md，产出"先计划后动手"的两遍流程
3. 在 canvas-fonts 的 54 个字体文件里，产出 1 个展示字体 + 1 个正文字体
4. 从 theme-factory 任选一组配色，产出钉进 CSS 变量的 4~6 个色值
5. 按定稿的代码写页面：hero 放主题里最有代表性的东西，不用编号做装饰

🚧 什么时候别用

• 客户已指定风格时，听客户的；需求永远优先，别用这个技能炫实验性
• "加个标准按钮"这类小活别搬出它，它管的是有立场的整页
• 最容易被用错：胆量花到多处——一个强调、一个高光，再多就是噪音
• 内容不是真序列，就别上 01/02/03 编号装饰

第一稿起，页面就有名字：不是 AI 默认款，是这个客户的脸。打开仓库，挑个方向开做。

【免费下载链接】skillsPublic repository for Agent Skills项目地址: https://gitcode.com/GitHub_Trending/skills3/skills