Communitygithub.com

ZZZoey333/portfolio-site-builder

帮助新手和设计师规划、构建或改进个人 UI/UX 作品集网站,利用可复用的页面区块、项目案例研究模式以及命名的动效方案。用于创建作品集网站或将作品集简介转化为页面和组件。

portfolio-site-builder 是什么?

该技能旨在帮助用户(特别是初学者和设计师)系统化地构建个人 UI/UX 作品集网站。它强调结构性和可复用性,而非复制现有设计。技能通过一套清晰的工作流程引导用户:首先明确用户背景、受众和偏好(如单页或多页),然后规划站点地图和页面结构。核心优势在于其内置的参考系统,包括可复用的页面区块模式(如项目案例研究)和一个命名的动效目录,使用户能够以声明式的方式选择动效行为,而无需深入实现细节。该技能适用于任何主流技术栈,并特别关注可访问性(如减少动效、键盘导航)和响应式设计。最终,它会总结交付的页面和动效,并提示用户仍需自行补充的内容(如个人简介、项目数据),确保最终产品是用户自己的,而非模板的复制品。

兼容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/ZZZoey333/portfoliowebsite-site-builder-skill/tree/HEAD/portfolio-site-builder

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

个人作品集网站构建器

帮助用户将自己的背景和工作转化为清晰、可复用的作品集网站。参考系统基于一个真实的多页面 UI/UX 作品集,但其视觉风格是可选的:保留用户选择的风格,仅在合适的地方使用参考结构。

工作流程

  1. 确定用户的受众、角色、作品集内容、首选技术栈(如果有),以及他们想要单页还是多页网站。对于初学者,推荐简单的实现方式,并用通俗的语言解释权衡取舍。
  2. 在填充虚构的个人简介或项目事实之前,先提出页面地图和区块顺序。如果缺少的内容会改变故事,则询问用户;否则使用清晰标记的占位符。
  3. 构建共享外壳和 references/page-patterns.md 中描述的可复用区块。使项目案例研究可配置:用户可以包含、省略和重新排序相关区块。
  4. 提供来自 references/motion-catalog.md 的命名的动效方案。用通俗的语言描述可见的行为,然后使用用户的技术栈实现所选方案。不要默认添加所有动效;使用动效来阐明层级或交互。
  5. 在排版、颜色、间距、图像和组件中一致地应用用户的视觉方向。参考网站的调色板只是一个起始主题;主题可以在不改变页面结构的情况下更改。
  6. 使布局响应式,并使交互可通过键盘和触摸访问。尊重减动效偏好,提供可见的焦点状态,并在动画禁用时保持基本内容可用。
  7. 总结交付的页面/组件和命名的动效,并指出用户仍需自行补充的内容。

可复用的设计原则

  • 以个人的角色和价值为先导,然后让精选作品易于查找。
  • 保持首页为简洁的介绍和门户;让每个案例研究承载自己的叙述和证据。
  • 使用一致的区块标题模式、间距比例、导航、页脚和项目卡片系统。
  • 让项目页面共享灵活的序列,而不是强制每个项目使用相同的内容。
  • 保持动效微妙、有目的性且一致。动效名称描述了可复用的行为,而不是必需的库或具体的实现。
  • 不要将参考文案、个人数据、项目说法、图片或源代码复制到新用户的网站。要求用户提供自己的素材或使用标记的占位符。

参考资料

相关技能