ishan-parihar/website-design

Website Design

一个流水线，能将任何 AI 代理（包括小型或弱模型）转变为交付世界级、美观且功能丰富的网站并进行部署的系统。每个阶段都会产生一个命名的产物，供下一阶段重新读取，因此任何决策都不会被重新做出或丢失。通过 skill-creator 约定触发；每段描述都是一个单行引号字符串。

流水线产物（工作记忆）：DESIGN BRIEF（受众、氛围、拨盘）→ DIRECTION（风格、调色板、字体、允许/禁止）→ TOKENS（规范化的 CSS 自定义属性，暗色模式）→ SECTION MAP（有序的区块，每个区块包含标题/正文/资源/行为召唤插槽）→ DEPLOY SPEC（主机、类型、URL、回滚）。

路由模式：流水线 + 切面

流水线（按顺序执行，永不跳过任何阶段）：

1. briefing - 从用户消息、链接、截图、仓库中提取 DESIGN BRIEF。
2. direction - 在任何 HTML 或 CSS 之前选择风格、调色板、字体。
3. system - 将 DIRECTION 转换为 TOKENS 并配置主题/暗色模式。
4. structure - 将 TOKENS 和 DIRECTION 转换为 SECTION MAP。
5. components - 根据区块配方构建每个版块（子项：导航、首屏、特色区块、社会证明、转化、表单）。
6. content - 用真实的文案和真实的资源填充每个 SECTION MAP 插槽。
7. motion - 根据 MOTION 拨盘为每个版块提供动画规范。
8. quality - 仅审核的门控：反劣质、可访问性、性能、审计、生产、预检（最终门控）。
9. deploy - 选择主机：higgsfield 或 generic。

切面（入口点，非阶段）：

• 站点已存在（URL、仓库、文件）→ 从 redesign 开始，位于 briefing 之前，然后重新进入流水线。
• quality/* 叶子节点仅用于审核；检查时加载，而非构建时加载。
• version-control 与每个阶段并行运行：每当产生一个产物时就提交它。在由 webdev 管理的站点仓库（WEBSITES/）中工作时，此要求为强制性。

子节点

• briefing - 对于新构建始终是第一步；产生带有 VARIANCE/MOTION/DENSITY 拨盘的 DESIGN BRIEF。
• direction - 通过 ui-ux-pro-max 验证的搜索确定风格、调色板、字体；产生 DIRECTION.md。
• system - 规范化的令牌、主题、暗色模式；产生 TOKENS。
• structure - 有序的区块和插槽计数；产生 SECTION MAP。
• components - 每种版块类型的区块配方；按版块加载一个叶子节点。
• content - 真实的文案，真实的图片，无填充内容；产生 CONTENT。
• motion - 动画规范，GSAP 骨架，减少动效路径。
• preflight - 最终门控；咨询所有质量检查的兄弟节点，然后移交给部署。
• deploy - 托管路由器：higgsfield（网站/应用/游戏）或通用静态主机；产生 DEPLOY SPEC。
• redesign - 当站点已存在时，首先进行审计的入口。
• version-control - 贯穿所有阶段的 git 规范；永不留下未提交的工作。

导航（仅根路由器）

• 跳转：知道是哪个阶段？直接加载那个子节点；绝不加载整个树。
• 遍历：仅当决策本身不明确时；一次只读取一个路由器。
• 宣布你正在操作哪个阶段；当阶段切换时，说出来。
• 重路由：如果加载的叶子节点与任务矛盾，返回此处并重新选择；绝不即兴创造叶子节点。
• 委派：将广泛的分支委派给一个子代理，附带子节点的路径和切分的任务；仅该子树加载。
• 天花板：叶子节点绝不超越其祖先的规则；此文件在冲突中获胜。

约定

从 _build/plan-expanded.md 提升而来；对子树中的每个节点具有约束力。

• 弱模型验证：决策表、具体数字（“内边距 96-128px”，绝不写“宽敞”）、每个叶子节点有 3-8 个可计数且可 grep 的通过/失败检查。用一行解释以便更强模型进行泛化；机械规则本身独立成立。
• 主题基础：每个美学选择都锚定于具体的主题、受众和主要任务（行业、材料、语言环境）。面向 8-11 岁女孩的玩具店与面向金融分析师的工具必须有所区分。内容始终真实；当内容缺失时，通过 briefing 提出具体文案并确认。
• 语言无关：原则存在于语义化 HTML + CSS 中，见 references/stack-adapters.md。绝不依赖 React、Tailwind 或任何框架。
• 规范化令牌：定义于 system，随处使用：--bg --surface --text --text-muted --accent --accent-contrast --border --destructive，--radius --radius-lg，--font-display --font-body --font-mono，--space-1..--space-10 (4 8 12 16 24 32 48 64 96 128)，--container，--shadow-1 --shadow-2。
• briefing 中的拨盘：整数 1-10，确切名称 VARIANCE（1 最小化，10 不对称/艺术化），MOTION（1 静态，10 电影级），DENSITY（1 稀疏，10 紧密）。绝不发明新拨盘。
• ui-ux-pro-max 协议：方向/系统选择需通过该包的风格/调色板/字体数据进行验证；结果为空时，回退到内置表格并声明。
• 五个产物以围栏代码块形式传递，按名称重新读取，绝不靠记忆。
• Frontmatter：name: 匹配目录名，description: 单行引号字符串，作为触发指令。
• 风格：不使用长破折号（使用连字符或句号），不使用表情符号，绝对禁止的内容仅存在于 anti-slop 中，兄弟节点间使用根相对路径交叉链接（如 heroes）。

不可协商

• 任何节点中均不得出现长破折号；anti-slop 叶子节点的检测器会 grep 它。
• 不得使用伪造的标志、推荐语、统计数据或品牌图片；content 提出建议，用户确认。
• 不得使用占位符令牌；每个版块都通过规范化的令牌集呈现。
• 不得混合设计系统：每次构建只能使用一种风格系列、一个调色板、一组字体配对。
• 不得有未提交的产物：version-control 在每个阶段输出后、下一阶段开始前进行提交。
• 未经 preflight 通过，不得部署。
• 图表明确超出本技能范围。如需数据可视化（ui-ux-pro-max 中包含 25 种图表类型），请查询 python ~/.agents/skills/ui-ux-pro-max/scripts/search.py "<data shape>" --domain chart，而不是即兴利用网格加条形图。