个人作品集网站构建器
帮助用户将自己的背景和工作转化为清晰、可复用的作品集网站。参考系统基于一个真实的多页面 UI/UX 作品集,但其视觉风格是可选的:保留用户选择的风格,仅在合适的地方使用参考结构。
工作流程
- 确定用户的受众、角色、作品集内容、首选技术栈(如果有),以及他们想要单页还是多页网站。对于初学者,推荐简单的实现方式,并用通俗的语言解释权衡取舍。
- 在填充虚构的个人简介或项目事实之前,先提出页面地图和区块顺序。如果缺少的内容会改变故事,则询问用户;否则使用清晰标记的占位符。
- 构建共享外壳和 references/page-patterns.md 中描述的可复用区块。使项目案例研究可配置:用户可以包含、省略和重新排序相关区块。
- 提供来自 references/motion-catalog.md 的命名的动效方案。用通俗的语言描述可见的行为,然后使用用户的技术栈实现所选方案。不要默认添加所有动效;使用动效来阐明层级或交互。
- 在排版、颜色、间距、图像和组件中一致地应用用户的视觉方向。参考网站的调色板只是一个起始主题;主题可以在不改变页面结构的情况下更改。
- 使布局响应式,并使交互可通过键盘和触摸访问。尊重减动效偏好,提供可见的焦点状态,并在动画禁用时保持基本内容可用。
- 总结交付的页面/组件和命名的动效,并指出用户仍需自行补充的内容。
可复用的设计原则
- 以个人的角色和价值为先导,然后让精选作品易于查找。
- 保持首页为简洁的介绍和门户;让每个案例研究承载自己的叙述和证据。
- 使用一致的区块标题模式、间距比例、导航、页脚和项目卡片系统。
- 让项目页面共享灵活的序列,而不是强制每个项目使用相同的内容。
- 保持动效微妙、有目的性且一致。动效名称描述了可复用的行为,而不是必需的库或具体的实现。
- 不要将参考文案、个人数据、项目说法、图片或源代码复制到新用户的网站。要求用户提供自己的素材或使用标记的占位符。
参考资料
- 规划站点地图或构建页面和案例研究区块时,请阅读 references/page-patterns.md。
- 用户要求选择、命名或实现动效时,请阅读 references/motion-catalog.md。