以 skill 自身的术语
一个用于落地页、作品集和改版项目的反平庸化前端 skill。Agent 会先读取 brief，推断出设计方向，然后设置三个旋钮（DESIGN_VARIANCE、MOTION_INTENSITY、VISUAL_DENSITY），用它们统辖每一项布局、动效与密度决策。当存在真实设计系统（Fluent、Carbon、GOV.UK、Polaris）时，它会将 brief 映射到该系统，并诚实标注纯美学取向的方案。
硬性规则涵盖首屏视口适配、eyebrow 文案克制、每页仅一种强调色与一套主题、被禁止的 AI 痕迹，以及具体的图标、字体和动效库。改版工作从审查开始。文档最后以一份机械化的 Pre-Flight Check 收尾，每一项都必须通过后才能交付代码。
它产出什么
- 在编写任何代码之前先给出的一句话 Design Read：页面类型、目标受众、氛围语言，以及所倾向的设计系统或美学家族。
- 前端代码默认使用 Tailwind v4，只有在现有项目确实需要时才回退到 v3。
- 代码注释会明确说明哪些部分是借鉴的灵感，哪些是官方素材。
- 当没有可用图像来源时，会提供明确标注的占位插槽，并在最后附上仍需的真实图片清单。
工作方式
- 01先读 Brief，再动手
Agent 会根据页面类型、氛围词汇、参考资料、目标受众、现有品牌资产以及隐含约束，推断用户真正想要的效果，而不是直接套用默认美学。
- 02设置三个旋钮
基准值为 8 / 6 / 4，可通过 Design Read 以对话方式调整。针对不同使用场景已有预设，从公共部门服务（3 / 2 / 5）到代理机构落地页（9 / 8 / 3）。
- 03诚实地选择基础方案
如果 brief 读起来像 Microsoft、IBM、GitHub、Shopify、Atlassian 或公共部门风格，就应安装并使用官方包，而不是手动重建其 CSS。
- 04应用默认技术栈
React 或 Next.js，配合 Server Components、Tailwind v4，以及从 motion/react 导入的 Motion，动效被隔离在客户端叶子组件中。
- 05运行 Pre-Flight Check
在输出任何代码之前，第 14 节矩阵中的每一项都必须通过；只要有一项未勾选，就说明工作尚未完成。