真正美观的网站
一个单一的事实来源，涵盖视觉与技术决策，用于打造看起来像由真正的产品团队交付、而非语言模型猜出的“现代与简洁”的网站。
与 $refero-design 的协作
当 $refero-design 可用时，先加载它，并让它在视觉研究、Refero工具路由、综合、参考锁定和决策记录方面主导。本技能在此锁定之后使用，负责实施约束：现有系统范围、界面模式、框架选择、空间与交互工艺、响应式行为、反模版化检查和渲染验证。
固定顺序如下：
$refero-design根据任务比例研究样式、界面和流程。$refero-design选择一个主要方向，并记录有限度的次要影响。- 本技能将已批准的锁定转化为方向约定和生产UI。
- 本技能针对锁定和支持平台验证渲染结果。
不要让两种技能作为相互竞争的审美权威同时运行。Refero提供产品和视觉证据。本技能提供前端执行纪律。如果Refero MCP不可用，$refero-design使用其内置的备用方案，然后本技能从结果锁定处继续。
默认框架是 React (Vite / Next / vite-react-ssg)。Astro、Vue 和 vanilla CSS/JS 也是一等公民；特定框架的习语在 framework-adapters.md 中。如果未指定，则假定为React。当现有系统是Astro或需求要求EmDash时，保留服务端渲染并默认使用Astro组件，仅在交互真正需要的地方添加框架孤岛。
如何使用
- 阅读 direction-workflow.md。确定现有系统的真实情况，然后设置
CHANGE_SCOPE和SURFACE_MODE。 - 根据范围按比例进行研究。对于
world，必须进行全面研究；local继承周围界面的设置。 - 使用 项目类型预设（第1节）来校准领域约束和技术成本，而非用于选择美学方案。
- 从证据中推导方向。将氛围和布局原型作为词汇表和挑战者，而非必需的菜单。
- 在编写代码之前记录方向约定，然后从头构建每个部分。
- 应用间距、动效、状态、响应式和可访问性的技术参考。
- 对照第14节和第13节中的AI痕迹进行自我审计，然后完成有边界的视觉传递。
参考文件：
- direction-workflow.md — 目标上下文、
CHANGE_SCOPE、SURFACE_MODE、方向约定、合成图门控、有边界完成 - foundations.md — 英雄类型、视口高度、动效属性、眉毛和现有系统优先级的权威限制
- spatial-design.md — 4pt网格、层级、容器查询
- motion-design.md — 缓动、持续时间、减少动效、过渡模式目录
- interaction-design.md — 8种状态、focus-visible、弹出框、模态框
- laws-of-ux.md — 带有命名研究的构图启发式做法：希克、米勒、菲茨、冯·雷斯托夫、峰终、雅各布、认知负荷
- form-validation.md — 验证时机、输入状态机、
:user-invalid、错误摘要、作为跨栈约定的模式 - responsive-design.md — 移动优先、指针查询、安全区域、srcset
- framework-adapters.md — React / Vue / vanilla 用于动效、状态、水合的等价方案
- component-libs.md — (仅React) 可复制粘贴的动画组件：Magic UI、React Bits、通过shadcn注册表的动画Lucide图标
- scroll-motion.md — (第3级) GSAP ScrollTrigger + Lenis 平滑滚动，带有性能/可访问性护栏
- design-references.md — (研究，免费) 无Refero的研究层：通过实时读取网站的真实令牌、DESIGN.md包、免费画廊、公共设计系统和细分市场 → 参考库
- media-pipeline.md — 免费图库摄影 (Pexels/Unsplash/Pixabay/公共领域，附带各来源托管规则) + Magnific 通过REST的授权目录 + 生成的静态图像 通过两个对等通道 (
$image-gen/ Magnific MCP)、alpha抠图路径 + (第3级，成本门控) 通过Magnific实现图像→视频，附带<video>配方 - style-interview.md — (访谈模式) 何时向用户询问方向、轮次脚本、如何基于研究构建候选方案而非将原型列表作为菜单提供
- redesign.md : (重新设计模式) 扫描、诊断、修复；模式检测 (绿地 / 保留 / 大改)；哪些内容永不静默更改
- conversion-diagnosis.md — (落地页) 重写文案前的交付门控以及十层获客与转化诊断
SEO、可访问性分数和Core Web Vitals不在此处审计。 本技能负责构建；对已上线URL的验证属于 site-audit 技能，它拥有页内SEO规则 (标题、meta、canonical、OG、schema、机器人、站点地图)、AEO/GEO层、axe-core运行和CWV预算。按照第14节的预检构建，然后将site-audit指向已部署的URL。
在重写落地页文案之前先诊断其交付情况。 阅读 conversion-diagnosis.md，在真实用户浏览器配置文件和渲染后的Googlebot配置文件中打开已部署页面，并确定两者是否都能收到正常工作的页面。脚本错误、首屏缓慢、爬虫被拦截、CTA失效或表单不可用，优先级高于文案润色。SEO赢得访问；交付的体验必须将其转化为线索。
两种模式：自主（默认） vs 访谈
自主（默认）： 基于您已有的上下文以及预设的合理假设进行工作。不询问用户任何问题。缺少细节？假设最可能的值，用一行记录假设，继续执行。当没有人类参与时，这是唯一安全的模式。
访谈： 当调用明确要求 (--interview、“modo entrevista”、“问我哪种风格”) 时触发，或者当 CHANGE_SCOPE=world、会话有人参与且用户未指定任何参考或品牌时触发。它分两步进行：收集简报 (细分市场/产品、受众、目标、语气、异议、约束、他们喜欢的网站)，然后 先研究，再带回两到三个具体的方案供选择 —— 画布、字体、强调色角色、媒体策略、标志性动作，以及每个方案来自哪个真实产品。关键是要打造一个带有用户个性、而非仅仅是个合格默认风格的网站。
两种模式都会执行第0节的研究，并且都以相同的参考锁定和方向约定结束。唯一的区别是谁来做审美决策。完整协议、问题脚本、反菜单规则和轮次限制： style-interview.md。
正在重新设计现有网站而非全新构建？ 请参阅 redesign.md 了解重新设计模式 (扫描、诊断、修复) 以及保留与大改规则。以上两种模式仍然适用；重新设计只是还需要保护现有网站已经赢得的价值。
0. 研究优先 — 与变更范围成比例
对于
CHANGE_SCOPE=world是强制性的。 完全定义的品牌也不能免除为新的或替换性的world进行结构性研究的义务。对于surface，在研究可比结构和流程的同时，保留现有系统。对于local，周围的界面是主要证据；只研究它无法回答的问题。请参阅 direction-workflow.md。
每个视觉决策都始于 真实产品实际交付的证据，而非模型的“好品味”记忆。模型擅长代码和逻辑，但不擅长产品品味，因此要将品味锚定在真实参考上。
在哪里研究
推荐高级方案 — Refero (refero.design)。 如果 mcp__refero__* 工具可用，优先使用它们。三层：
- 样式 (视觉方向，从此处开始):
refero_search_styles(query)→refero_get_style(...)。 - 界面 (具体UI):
refero_search_screens(query, platform:"web"|"ios")→refero_get_screen(...)、refero_get_similar_screens(...)、refero_get_screen_image(...)。 - 流程 (多步骤旅程 — 引导/结账):
refero_search_flows(...)→refero_get_flow(...)。 - 界面使用UUID，流程使用数字ID。仅通过
page进行分页。get_screen_image消耗一次视觉调用 — 仅在需要检查像素时使用。
免费路径 (无Refero) — design-references.md。 Refero使此步骤变得快速；但它并非决定性因素。免费路径从同一类证据中产生相同的参考锁定，并且该文件包含了整个地址簿：如何使用 curl/WebFetch 读取实时网站的真实令牌 (这是最强证据，优于任何截图)、开源 DESIGN.md 包 (第一个在 VoltAgent/official-design-md, 70+ 个逆向工程品牌在 VoltAgent/awesome-design-md)、经验证的免费画廊 (siteinspire、httpster、minimal.gallery、onepagelove 板块、dark.design、navbar.gallery、footer.design)、公共设计系统，以及一个 细分市场 → 真实产品研究库，这样你就不必从空白查询开始。
简而言之：挑选该细分市场中的两到三个真实产品，打开它们，提取它们的字体栈和CSS自定义属性，指明每个产品好的地方，并记录下来。永远不要锁定一个你尚未实际查看过的特征。
工作流
- 上下文 + 简短简报： 确定现有系统的真实情况、
CHANGE_SCOPE、SURFACE_MODE、什么 / 为谁 / 平台 / 目标 / 语气 / 异议 / 约束。(自主模式：推断。访谈模式：询问。) - 先看样式： 从不同角度进行两到三次搜索 — 一次美学、一次领域/细分市场、一次强参考品牌。打开一到三个强大的方向。
- 界面/流程 当你需要具体的界面结构或旅程逻辑时。对于
SURFACE_MODE=persuade，像素目标本身必须是一个带有可见焦点介质的具有说服力的营销界面。法律/条款页面、文档、目录、变更日志、档案索引、仪表盘和纯文本编辑页面是反例，永远不能作为主要的界面锁定。在编码之前，命名目标的焦点介质和一个支持的视觉时刻。如果检查的界面是因为摄影、插图、产品图像或动效而有效，请保留该媒体角色。用排版、规则、元数据或空卡片替换它是参考漂移。 - 综合 — 不要取平均。 选择 一个主导的原始方向 并保留其独特特征。次要参考每个仅借用一处细节。绝不要成为所有事物的温和平均值：如果一个参考是深色，一个是衬线，一个是酸性风格，答案 不是 文雅的乳白色 + 有教养的衬线。
- 在编码之前完成 参考锁定 + 决策记录 + 方向约定：
- 参考锁定： 主要方向 + 要保留的三到五个特征 (画布、字体、强调色、布局、密度、媒体) + 从次要参考借用的内容 + 角色规则 (仅CTA、仅代码、仅装饰) + 媒体策略 (真实 / 生成 / 图库 / 占位符)。
- 决策记录： 一个
决策 | 来源 | 角色/规则 | 原因表格。每个主要的视觉选择都追溯到一个参考、一个客户约束、现有系统视觉真相或本技能中的一条工艺规则。无来源意味着它不会交付。 - 方向约定： direction-workflow.md 中的五个简短模块。完成阶段将检查渲染结果是否与它们一致。
- 使用预设 (第1节)、层级 (PREMIUM_TECH_TIER) 和反模版化规则 (第13节) 进行实施。
什么覆盖什么 (研究 vs 本技能)
硬性 — 产品真相、可访问性和现有系统胜出：
- 在
local和surface范围内，已建立的品牌令牌和组件约定胜于本技能的品味默认值。除非用户授权重新设计或要求移除该痕迹，否则不要替换现有字体、紫色品牌色、Lucide系统、圆角或组件语言。请参阅 foundations.md。 - 可访问性、语义正确性、工作行为、真实资产和明确的用户约束始终胜出。修复对比度问题，不要将其作为重新设计整个产品的许可。
- 在
world范围内，内容和品味痕迹适用于每一个新选择：过度使用长破折号、装饰性浮动药丸、条件反射性地使用AI紫色、无理由的默认字体、伪造的AI人物评价以及装饰性框内的图标。 - 不要完全克隆一个样式；保持令牌角色不变 (一个仅CTA的强调色保持仅为CTA)。
软性 — 真实参考胜出 (结构和布局)：
- 页面结构、区块顺序和数量、页脚形状、英雄形状、布局变化、密度：由研究主导，而非固定模板。 本技能中的结构规则是 明智的默认值，而非定律 — 如果参考为该场景显示了不同的、良好的结构，则遵循参考。
- 结构只有在破坏可用性、转化或响应式时才是“错误的” — 而非因为它与本技能的默认值不同。
0.1 — Visu
…