用途
该技能用于创建独特的视觉设计，方法是从灵感来源与个人偏好中综合提炼，而非套用现成模板。其核心理念是：每个作品集都应让人感觉是专为这个人设计的。
设计理念
- 不遵循模板。
- 融合灵感，而非复制灵感。
- 让这个人的故事驱动设计。
- 大胆一些——安全的设计容易被遗忘。
使用设计灵感
如果 profile.yaml 中提供了 design_inspirations，每个灵感都带有可引用的属性，例如：
design_inspirations:
- name: "Linear"
attributes:
fontFamily: "Inter"
fontSize: 15
colorBg: "#000000"
colorAccent: "#5e6ad2"
maxWidth: 1200
sectionSpacing: 100
borderRadius: 0
... etc
如何综合
不要只是对数值取平均。要思考每个灵感特别之处：
- 识别每个灵感的本质
- Linear：干净的精确感、微妙的动画、面向开发者
- Stripe：渐变魔法、层次感、精致打磨
- 粗野主义网站：原始诚实、无装饰
- 找到适合这个人的共同线索
- 他们选择的灵感说明了什么品味？
- 作品集应唤起什么感觉？
- 创造新事物
- 从一处取排版方法
- 从另一处取色彩哲学
- 从第三处取布局概念
- 但要让整体协调统一
综合示例： 用户选择：Linear + Poolsuite + The Verge
- Linear → 干净排版、深色模式、精确
- Poolsuite → 俏皮、复古、个性
- The Verge → 大胆标题、编辑感 综合：以深色干净为基底（Linear），加入俏皮的强调时刻（Poolsuite）和大胆的编辑式排版（Verge）。不是拼凑，而是一个新事物。
排版
参见 .agent/skills/fonts.md 了解字体选择。规则：最多 1-2 种字体，层级清晰，匹配这个人的气质。
色彩
参见 .agent/skills/colors.md 了解配色方案。规则：60-30-10 比例，良好对比度，避免紫/蓝渐变。
布局
先思考结构。设计前先问：
- 这个人有多少内容？
- 最重要的是展示什么？
- 访客希望如何消费这些内容？
避免简历陷阱：不要做伪装成网站的简历。僵化的 主视觉 → 关于 → 经历 → 教育 → 技能 → 联系方式 结构是失败状态。那是所有人都做的，会让每个作品集都显得可互换。
相反，思考：
- 这个人的故事独特在哪里？以此开头。
- 访客应记住的一件事是什么？围绕它组织结构。
- 信息如何自然流动，而不是被框进各个区块？
差："关于我" 后接 "我的经历" 后接 "我的技能" 好：将工作、个性与项目交织在一起的叙事
布局选项：
- 单页滚动：适合简单、叙事流
- 多页：适合内容多、区块分明
- 单屏：适合极简、高冲击力
- 案例研究格式：适合项目导向、详细工作
- 时间线/叙事：适合职业发展故事
- 交互/探索式：适合创意技术专家
- 对话/故事式：适合个性驱动、写作者
- 作品优先：让项目说话，简介最少
打破常规：不要默认使用区块。考虑：
- 如果没有"关于"区块，简介贯穿全文呢？
- 如果项目不在网格中，而在叙事中呢？
- 如果整个页面就是一个大陈述呢？
- 如果经历通过项目展示，而不是工作列表呢？
- 如果联系方式不是区块，而是自然融入呢？
间距与节奏
原则：
- 宽松留白 > 拥挤内容
- 一致节奏——选一个尺度（8px、16px、32px、64px）并坚持
- 让内容呼吸——尤其在奢华/极简设计中
来自灵感：如果灵感有 sectionSpacing 和 padding 属性，可作为起点，但要根据内容调整。
动画与动效
基于 design.animation 偏好（1-10）：
- 1-3：静态，仅悬停状态
- 4-6：微妙的页面过渡、轻柔淡入
- 7-8：滚动动画、编排式入场
- 9-10：丰富动效、交互元素
工具：
- Tailwind transitions 用于简单效果
- Framer Motion 用于复杂动画
- CSS animations 用于重复动效
偏好滑块
- 创意性（1-10）：低为安全、常规、预期；高为实验、惊喜、冒险
- 简洁性（1-10）：低为密集、信息丰富、复杂；高为极简、聚焦、仅必要
- 趣味性（1-10）：低为严肃、专业、正式；高为有趣、个性驱动、随意
- 色彩强度（1-10）：低为单色、柔和、微妙；高为鲜艳、大胆、饱和
让它看起来不像 AI 生成
- 不完美——轻微不对称、变化间距、人性化触感
- 具体性——通用 = AI。具体 = 人类。
- 个性——让这个人的声音透出来
- 意外选择——做一些令人惊喜的事
- 真实内容——没有占位符，没有 lorem ipsum
执行清单
在宣布设计完成前：
- 排版创建清晰层级
- 色彩协调且有含义
- 布局服务于内容（而非相反）
- 间距感觉有意为之
- 考虑移动端体验
- 看起来不像模板
- 感觉适合这个人