colbyvk/website-dev-skill

website-dev

构建一个深思熟虑的个人会为自己制作的个人网站。它清晰地说明他们是谁、他们做什么，将他们的真实作品呈现在每个屏幕上，并且看起来属于他们自己：不是一份作品集主题，不是统计平均值——不是那种每个“嗨，我是一个充满热情的开发者”网站的平均态，也不是一件掩盖作品的艺术品。标准是设计师、开发者、作家、摄影师和研究人员亲手制作的最佳个人网站：安静、具体、快速、且 unmistakably 属于一个人。

范围：仅限个人网站。 一个人的作品集、主页、博客、简历网站、学术页面或链接集。自由职业者的网站算，因为它是关于一个人及其工作。企业、商店、产品、初创公司或代理机构的网站不算。如果任务属于后者，则说明此技能仅适用于个人网站，不要应用它。

这个技能是一个单一的技能，其各部分位于 assets/ 中。下表说明了每个部分何时加载、在设置期间做什么，以及代理何时必须写回。三个部分每次都会加载。其余部分在任务触及它们时加载。

文件

文件	调用	初始设置	读取触发器	更新触发器
design-principles	始终	从不设置。 在设置期间按原样读取；其中没有任何内容是询问或更改的。	每次加载此技能时，在第一个设计或代码决策之前。	代理从不更新。 仅在用户明确要求更改原则时编辑。不喜欢的内容进入 design-dont-dos，而不是这里。
design-dont-dos	始终	在设置运行时总是运行。 在用户看到之前，设置期间提出的每个方向、调色板、字体和组件都会对照每一行进行检查。用户在设置答案中不喜欢的任何参考站点或特征会立即成为用户行。在现有站点上，列出它已经违反的行。	每次加载此技能时，以及在编写或更改站点上任何可见内容之前再次检查。	每次用户表示不喜欢站点的某些内容时（颜色、形状、布局、效果、词语、字体、动画或参考站点）。在同一轮中在底部附加一行，然后继续工作。每个附加的行都是用户行。
users-design-system	始终	如果没有真正的设计系统，首先设置它。 没有真正的设计系统意味着：“方向”行不是 confirmed，或者颜色和字体表没有 confirmed 行。然后，在任何设计工作之前，询问 initial-setup 中的设置问题。用户也可以随时开始设置（“设置设计系统”、“重新开始外观”）。如果用户回答“你决定”或“帮我设置”，则运行研究路径。用户回答变为 confirmed，研究变为 proposed，从现有代码读取的值变为 extracted。如果存在真正的设计系统，则不要再问：只询问当前任务需要但仍为空的行。	每次加载此技能时。其确认值胜过其他文件中的每个默认值。	每次用户添加或更改其设计系统中的任何内容时（颜色、字体、大小、间距步长、圆角半径、阴影、动画令牌、组件规则、徽标或字母组合、图像规则、语音规则）。在同一轮中更新该行并记录更改。还包括设置提取或研究令牌时。
initial-setup	当：新网站或仓库、在站点上首次运行、重新设计开始、或者 users-design-system 没有确认的方向。	在任何信号触发时运行设置： (1) users-design-system 没有真正的设计系统，(2) 新网站或仓库，(3) 用户要求设置或重做设计系统，(4) 重新设计开始。在第一个回复中立即一次轮询完问题，在任何设计工作之前。如果用户说“你决定”、“解决它”或“帮我设置”，则运行研究路径。当存在真正的设计系统且用户没有要求时跳过。	在任务开始时，在任何页面或组件编写之前。	当用户更改站点必须启动的方式时（问题、技术栈、工具），或者当某个设置步骤在实践中被证明错误时。
design-directions	当：设置询问整体外观、研究路径运行、或者用户要求更改站点外观时。	在设置询问方向问题或运行研究路径时运行。 第一个设置问题提供最适合此人的 3 个方向，加上“为我研究”。研究路径从该目录开始，然后搜索该目录之外的 niche 方向。	在询问方向问题之前，以及在任何方向研究之前。	当研究发现目录中没有的方向时，添加它。当用户选择或拒绝一个方向时，记录它。被拒绝方向的定义特征也会进入 design-dont-dos。
hero-design	当：任务构建、重新设计或审查首页或其首屏时。	在设置询问 Q13 时运行（仅当此人没有作品图片或照片时）。答案设置 users-design-system 中的 hero 视觉源。	在屏幕规划步骤中，在 hero 构建之前，以及审查中。	当用户批准一个 hero 时，记录它并写入 users-design-system。被不喜欢的 hero 进入 design-dont-dos。生成的 hero 的提示词进入其日志。
visual-modules	当：任务规划页面或部分、站点读起来平淡、或者用户要求“更多活力”时。	与研究路径一起运行： 每个候选者命名 2 到 4 个模块。	在屏幕规划步骤中，在任何部分构建之前，以及审查中。	当用户喜欢一个模块时，记录它并添加到 users-design-system。被不喜欢的模块进入 design-dont-dos。研究中发现的模块进入其目录。
motion-design	当：任务涉及动画、过渡、悬停或按下状态、滚动效果、加载器、页面入场、或任何移动的内容时。	在设置询问动画问题时运行。 答案设置 users-design-system 中的动画旋钮。一旦旋钮被 confirmed，就不再次询问。	在任何动画代码编写或审查之前。	当用户批准一个动画模式或更改一个动画值时：在其决策表中记录。用户不喜欢的动画进入 design-dont-dos。
copy-writing	当：任务编写、重写或审查站点上任何可见文本时（简介、传记、项目描述、标题、链接、alt 文本、meta 标签）。	在设置询问语音问题时运行。 答案设置 users-design-system 中的语音。一旦语音被 confirmed，就不再次询问。	在第一个文案文字编写之前，以及再次在交接之前。	当用户陈述一个适用于多个字符串的文案规则时：将其添加到用户文案规则表中。一个不喜欢的短语或语气也会进入 design-dont-dos。一个语音规则进入 users-design-system。
review-gate	当：在交接任何页面、部分或组件之前，以及当用户要求审查或审计其站点时。	从不设置。 不在设置期间使用。	在构建之后、向用户报告之前。	当用户在交接后发现门控遗漏的问题时：将检查添加到其用户检查表中，并将问题添加到 design-dont-dos。

品味在这里意味着什么

品味不是一种风格。它是一套有意为之的决定，为这个人而做，而模型在其他情况下会选择默认项。

• 具体胜于通用。 模型编写的每个个人网站都会趋向于适合任何人的版本：“嗨，我是 [姓名] 👋”、“一位热爱创造数字体验的充满热情的开发者”、技能条、时间线、三个带有 GitHub 按钮的项目卡片、紫色光芒。其中每一个都是无人做出的决定。具体必须来自这个人：他们的作品、他们的话语、他们的照片、他们的设计系统。永远不是来自风格规则，也永远不是编造的。
• 作品是主角。 访客前来看看这个人创造、编写或发现了什么。将其最好的内容放在首屏或一次滚动之内。装饰（球体、粒子、3D 斑点、假终端、概念演示小部件）是在作品缺失时用来填充页面的东西。
• 一个人，一种声音。 个人网站听起来像某个人，而不是招聘模板。简短、平淡、具体的句子，使用此人选择的声音。没有自我赞扬：作品会赞扬自己。
• 策划，而非存档。 三个到六个强有力的作品胜过三十个缩略图。最好的一个领先并获得更多空间。其余的内容距离一次点击之遥。
• 克制是奢华。 一个调色板。一个圆角半径比例。一种链接样式。一个主题。空间被用作材料。拥有更少、更好决策的站点读起来被认为更周全。
• 有生命力，而非平淡。 由文本和灰色构成的站点与发光站点一样通用。赋予它色彩：两种匹配的颜色，以及一种仅在页眉和 hero 中使其生动起来的点缀色。赋予它一个精心设计的 hero 以及 2 到 4 个视觉模块：此人以工艺展示的作品，以及来自调色板的形式，不声称任何东西。永远不要为了填充空间而设置虚假部分。
• 眯眼就能看到的层级。 模糊你的眼睛看着截图。每个屏幕都由一个内容引导：姓名、作品或文字。
• 字体承载着人。 为这个人挑选字型，使用紧凑的展示字距、可读的正文宽度（约 65 个字符）以及真实的字体粗细步长。对于作家来说，正文就是设计。
• 节奏，而非统一。 让一个项目长一些，另一个只有两行。网格中完全相同的卡片是主题的外观。
• 动画是回应，而非表演。 简介入场一次，一个设计好的时刻赢得其位置，每个链接回应指针。没有内容因为能做到而自动打字、旋转或在滚动时淡入。
• 小巧快速是一个特性。 个人网站眨眼间加载、在手机上阅读良好、无需 JavaScript 也能工作，并且在五年后仍然有效。
• 外观由人来选，而非代理。 摄影师、诗人、后端工程师和插画家各自应得到不同的答案。相同的请求不得两次产生相同的网站。

家规

除了用户自己的话和已确认的设计系统之外，这些规则胜过 assets 中的一切。

1. 仅限个人网站。 一个人及其工作。其他任何内容均超出范围。
2. 先设置后设计。 如果没有真正的设计系统（users-design-system 中的“方向”行未 confirmed，或者颜色和字体没有 confirmed 行），则首先运行 initial-setup 并在第一个回复中询问一轮问题。用户也可以随时开始设置，或者说“你决定”让代理研究并提出系统。永远不要基于假设的品味开始一个网站。
3. 绝无发光、绝无发光胶囊、绝无 AI 紫色。 用户已按名称禁止了这些。任何表面上，永远不得有外部发光、霓虹、发光球体、发光边框、或紫色和紫罗兰色渐变，除非用户的设计系统确认了它。
4. 清单就是法律。 在编写任何可见内容之前，对照 design-dont-dos 进行检查。用户行永远不会被违反。
5. 倾听并记录下来。 当用户表示不喜欢某些内容时，在同一轮中且在修复之前添加清单行。当用户命名一种颜色、字体或令牌时，在同一轮中更新 users-design-system。此技能永远不得为同一个人犯同样的错误两次。
6. 令牌，而非原始值。 每个颜色、大小、圆角半径、阴影和持续时间都来自设计系统，通过一个 CSS 变量块或主题。组件中不得有原始十六进制值。
7. 展示真实作品。 真实项目图片、真实写作、真实照片（如果用户想要）。永远不要用灰色方框构成的虚假项目 UI，永远不要用库存或 AI 图片冒充他们的作品。一个开源或生成的图像仅允许作为 hero 氛围，在用户同意生成一个之后，并且永远不得显示此人或其作品。
8. 绝不编造。 没有编造的推荐信、客户、雇主、奖项、数字或生活故事。任何假设的内容都在代码中标注并在报告中列出。
9. 首屏说明身份和职责，分辨率为 1440x900 和 390x844：姓名、一行说明他们做什么、以及通往作品或联系方式的途径。
10. 默认具有可访问性。 对比度 4.5:1，可见的焦点环，每个作品上的 alt 文本，44px 的触摸目标，尊重减少动画偏好。绝不为外观而牺牲。
11. 交接前检查。 运行 review-gate。首先报告失败或未检查的内容。

三个旋钮

设置后，三个旋钮引导每个布局、动画和密度决策。它们的值存储在用户的设计系统中（设置设定它们；用户可以通过一句话更改它们：“让它更平静”、“更多动画”、“更紧凑”）。

旋钮	1 到 3	4 到 6	7 到 10
变异性（对称到非对称）	居中、对称、单列文本。作家、学者、简历站点。	左对齐阅读、分割简介、混合图片大小、多样化的部分布局。	非对称网格、大空白区域、作为图像设置的字体、编辑拆分。任何级别在 768px 以下为单列。
动画（静态到电影感）	仅悬停和按下状态。	默认。加上简介入场和一个设计好的时刻。	仅当此人自己的作品是交互式或移动的时（创意编程、动图设计、视频作品集）。

**[文件已截断 - 为翻译缩写]” }