mandasTeam/frontend-autoral

Frontend autoral

请用中文（简体）回答，直接给出结果。交付已运行并经过屏幕检查的界面，而不是草稿。

本技能解决的问题：AI生成的网站看起来相似，因为它们源于模糊的计划，缺乏真实内容，并且没人检查结果。在这里，每个项目在写代码之前都会获得一个基于主题的艺术方向；它在真实浏览器中经过测量，只有在看到渲染并与陈词滥调列表对比后才会交付。

这里整合了四种来源，已经协调一致：

• taste-skill (leonxlnx)：主题清单、论点、从247个获奖网站中学习的布局抽签、创意短语、生动元素、开放馆藏图片、在真实浏览器中的lint和检查器、带有评分上限的多轮批评。工具位于 vendor/taste-skill/。
• Emil Kowalski (emilkowalski/skills)：动效决策、曲线、时长、物理、手机上的应用感、最坏情况数据、前后对照表审查。
• UX法则 (lawsofux.com)：30条法则转化为可在屏幕上检查的问题。
• logo-design (kaankiziltug)：Logo、应用图标和favicon的创建流程，包含SVG审计和Web资源导出。工具位于 vendor/logo-design/。

当来源冲突时： 当前需求 > "Igor的品味" 和 references/cliches.md > 本文件 > references/movimento.md（关于动效的规则）> vendor/ 中的英文参考。特别说明：此处的动效仅具有功能性，无动画元素配额，也无需每个区块都添加入场动画；只有在用户要求时才添加滚动场景动画。

<skill> 在命令中代表本技能的文件夹。脚本需要Node 22+（lint需要18+）和Chrome、Edge或Chromium（Playwright自带的即可；scripts/achar-chrome.mjs 会自动查找）。图标相关脚本需要Python 3（Windows上为 python）。

何时使用

• 创建网站、落地页、作品集、企业官网、应用界面、仪表盘、表单。
• 重新设计或“美化”现有界面。
• 审核UI/UX：层级结构、可访问性、状态、文案、响应式、动效。
• 为产品创建具有识别度（不仅是功能性）的组件。
• 创建Logo、标志、应用图标或项目favicon，或为现有Logo生成变体。

不要用于：GitHub个人简介README和头像（使用 readme-designer 技能）、图表和数据可视化（使用 dataviz 技能）、演示文稿和文档。

选择模式

• 创建页面（网站、落地页、作品集；新项目或完全重新设计）：完整流程。
• 应用界面（仪表盘、管理后台、设置、收件箱、带过滤器的列表、编辑器）：开始前完整阅读 vendor/taste-skill/references/app-screens.md。它有自己的序列、自己的抽签（draw.mjs --app --kind <type>）和自身规则（边框不明显、小标签、重复面板是正常的；渐变、发光、方形彩色图标、彩虹图表和虚构的虚荣数字则不允许）。使用下面的流程，在关卡处加上 --app；生动元素和图片基线不适用。展示应用的产品页面属于页面；页面内的应用片段遵循应用规则并带有 data-ui 属性。
• 演化（已有视觉系统、DESIGN.md、BRAND.md、tokens、Tailwind主题、组件库）：现有方向决定一切。先阅读，重用tokens和组件，仅在用户要求时才提出身份变更。跳过抽签（或使用 --keep palette,type 仅提取布局），但要通过关卡和陈词滥调列表。
• 审核（审计、“哪里有问题？”、“检查动效”）：仅执行步骤1和5，基于当前状态。结果以 位置 | 之前 | 之后 | 原因 的表格形式呈现，按严重程度分组，无需前言（references/revisao.md 第11节）。
• 微调（“更激进”、“更温和”、“更换字体”、“对此添加动效”）：仅更改被要求的部分，在现有方向内。查看 references/oficio.md 中的“调整”部分，关于动效的查看 references/movimento.md。
• 图标或Logo（Logo、标志、应用图标、favicon）：references/icones.md。在任何网站或应用项目中，其中的轻量模式将在步骤4中运行，使项目拥有自己的图标。

流程

每个步骤只有在完成标准满足后才能结束。

1. 理解主题。 阅读需求和现有代码。针对自己，每行回答一个问题：产品是什么、面向谁、主要任务是什么、是页面还是应用界面、存在哪些真实内容（文本、图片、数据、Logo、品牌）以及哪些图片是真实存在的。完成 8到12个仅属于该客户的项清单（references/direcao.md 第1节）。如果缺少关键信息（产品是什么或面向谁），进行一次最多4个问题的批量询问。如果仅缺少品味，作出决定并说明做出的决定。

   • 完成标准：产品、受众、任务、类型、清单和图片清单都已明确，并且空缺已有答案或已记录的决定。

2. 在写任何CSS之前撰写艺术方向，存储在项目根目录的 DESIGN.md 中（模板位于 assets/DESIGN.template.md；在一个文件中，位于回复顶部）。方法在 references/direcao.md 中：

   • 论点：页面作为每个区块的带证据的断言；没有断言的区块删除；
   • 布局抽签（vendor/taste-skill/scripts/draw.mjs ... --options 3），推荐用于页面：选择能承载清单中某些内容的选项，而不是最熟悉的选项；并根据主题和陈词滥调过滤调色板和类型；
   • 单句场景概念、"像 / 不像" 列表；
   • 创意短语（"在此页面中，[清单中的某元素] 变成 [该元素]")、竞争对手测试和生动元素（基于创意且包含真实内容的交互）；
   • 签名；4到6种命名颜色，带有角色和对比度；1或2个字体系列，最多5个尺寸；等宽边距、节奏和形状规则的网格；动效规则；图片来源；图标的来源；
   • 每个区块的ASCII线框图，相邻区块形状不同。

   然后进行替换测试："如果我把产品名称换掉，这个方向是否适用于任何竞争对手？" 如果是，修改并说明更改了什么。对照 references/cliches.md 检查，包括第11节（移除陈词滥调不能只留下空白）。

   • 完成标准：每个选择都有与产品、受众或内容相关的理由；创意短语通过竞争对手测试；没有项无故落入陈词滥调。

3. 编写内容作为纯文本脚本，在标记之前，使用 references/copy.md：标题在任何宽度下都在两行内（计算一下），支持短语紧随其后，一个带有动词和宾语的主要行动号召，每个区块包含完整内容。如果缺少证据（数字、推荐、客户、评价），使用可见标记如 [插入真实评价] 而不是捏造；如果仅缺少内容细节（菜名、房间名），使用合理的示例并列出以供确认。

   • 完成标准：没有文本可能出现在另一家公司的网站上，没有捏造证据，且示例已列出。

4. 处于静止状态的构建。 脑海中关闭动效：需要动效才能看起来完成的页面不是真正的完成。顺序：tokens（颜色、字体、间距、形状、曲线）、Hero区块严格按桌面和手机设计、每个区块按其线框图构建，承载创意直至定价、FAQ和页脚、图片（references/imagens.md：自有、生成、拥有开放馆藏的 assets.mjs、基于主题绘制）、生动元素、框架（等宽边距、每个区块有标题、无空白段）、状态和语义、favicon和图标（references/icones.md 轻量模式）。遵循 references/oficio.md、references/ux.md 和 references/leis-ux.md。vendor/taste-skill/assets/base.css 是可选的空白基础。

   • 使用项目已有的技术栈。没有功能性理由时不引入新的视觉依赖。
   • 完成标准：页面运行无控制台错误、手机上无水平滚动、所有相关状态（hover, focus-visible, active, disabled, loading, error, empty）都已处理、最坏情况数据已测试（references/ux.md 第9节）、且图标已设置。

5. 测量、查看、修正。 运行关卡： node <skill>/scripts/inspecionar.mjs <url-或-index.html> --src <代码文件夹>（应用界面加上 --app）。它将在1440、768和390像素下运行lint和检查器，并将截图保存到 .taste-skill/inspect/。修正所有FAIL。然后打开所有截图并使用 references/revisao.md 进行批评：AI测试、15轮检查、带上限的评分标准、以指定格式书写的批评。修正最严重的3个问题，再次测量并检查；最多3轮。

   • 完成标准：0 FAIL、平均分 ≥ 8、无标准 < 7、问题列表为空。如果无法达到，说明遗留问题及实际分数。

6. 移动，仅限功能性。 现在决定动效，由 references/movimento.md 决定：频率（键盘操作和日常查看的内容不做动画）、目的、曲线（强烈的 ease-out，从不使用 ease-in）、时长（界面中 < 300 毫秒）、按压效果（scale(0.97)）、触发点原点、仅鼠标悬停的hover、prefers-reduced-motion。每个页面最多一个编排好的动效时刻，通常是生动元素或签名。重新运行关卡，确认截图中没有内容消失。

   • 完成标准：每个动效都回答“为了什么？”且关卡仍为0 FAIL。

7. 确认并报告。 最终检查清单和报告，格式见 references/revisao.md 第9和10节。

无法渲染（没有浏览器且无法安装）？只运行lint，在报告中说明，并对照检查清单阅读代码进行审查。不要声称已在屏幕上检查。

设计原则

细节在 references/oficio.md、references/cliches.md 和 references/leis-ux.md 中。

• 每个视觉决策都有理由，与产品、品牌、内容或用途相关。在添加任何元素之前，询问它是否改善了理解、功能、美学或体验。如果没改善，就不添加。
• 身份来自主题，而非潮流。未来主义、科技或极简主义不是默认设置；只有主题要求时才使用。极简主义并不是没有个性。
• 视觉自主，机制传统（雅各布定律）。大胆体现在字体、颜色、图片和布局上；菜单、链接、按钮和表单像任何网站一样工作。
• 仅在一处大胆，即创意签名处。其余部分保持克制。交付前，移除一件装饰品。但移除装饰不是留下空白：空间被用于缩放、完整内容、主题图片或颜色区域。
• 布局跟随内容。 每个区块根据其展示内容选择形状：列表、序列、对比、大图、引用、表格。相邻区块不重复形状。不全是卡片，不全是居中，也不全是3列网格。
• 层级结构优先于对称性。 每个屏幕一个主要元素；2到3个尺寸即可完成工作，总共最多5个；标题最多两行。不对称在网格内，外部边距始终相等。
• 颜色有角色。 一个背景色、一种强调色、1到2种微妙的中间色、1到3个位置的强调色（冯·雷斯托夫效应）。表面通过色调层级区分，不使用渐变、发光、模糊、玻璃效果或静态阴影。
• 字体作为声音。 1到2个字体系列，根据产品特性选择；正文可读（≥ 16px，每行45到75个字符），使用完整颜色。
• 图片展示内容。 项目真实图片、生成的图片、带有版权的开放馆藏图片、或基于主题绘制的图片；一张主导图片胜过六张小图片；从不使用灰色占位符或通用银行图片。
• 动效仅具功能性，快速、可中断、使用 ease-out 和正确原点。始终支持 prefers-reduced-motion。
• 可访问性不可妥协：AA对比度、可见焦点、键盘导航、正确语义、内容图片的 alt 属性、目标区域 ≥ 44px、允许缩放。

Igor的品味

作为起点，而非配方。当前需求始终优先。

• 主题随项目变化。不要重用之前工作的调色板、字体、主题或文案，除非用户要求。（taste-skill的抽签有帮助：它会记住以前的项目。）
• 喜欢明确且执行良好的主题，贯穿整个设计，而不是怯懦的装饰。
• 一致性高于一切：一个“粗糙”的区块放在精致的设计中会很碍眼。如果不一致，按照相同标准重做。
• 动效微妙。禁止对象穿过屏幕。
• 文案自然，不强行使用格言，不添加未经请求的免责声明或页脚。
• “改进”一个区块意味着保持内容的同时重新设计视觉效果，而不是删除。
• 当他否决一个元素时，只移除那个元素。不要重新解释其余部分。

陷阱

• 第一反应是陈词滥调。 居中Hero带标题、副标题、两个按钮和渐变；三个卡片带方形彩色图标；数字区块；推荐。如果第一个想法来得太快，很可能是默认模式。回到清单。
• 逃避一个陈词滥调却落入另一个。 从紫色逃离到米色背景 + 衬线字体 + 陶土色，或到黑色 + 荧光绿，是用一个AI模式替换另一个。查看 references/cliches.md 中的“五个默认视觉效果”。
• 页面干净但空洞。 没有装饰且没有内容替代它，会输给满是陈词滥调的页面。完整内容、大字体、真实图片。
• 品类想法。 “面包”适用于所有面包店。如果创意短语对竞争对手同样有效，回到清单。
• 为了填充而捏造的内容。 没有来源的数字、虚假客户Logo、推荐、随机头像、通用仪表盘样机。使用标记或删除该区块。
• 三行标题。