Communitygithub.com

williamsnieves/landing-factory

用于设计、重构、打磨、评审、简化、加固、动画化或以其他方式改进前端界面(网站、落地页、仪表盘、产品UI、组件、表单、设置、引导流程、空白状态以及原生iOS或Android界面)。涵盖UX评审、信息层级、布局、排版、色彩、动效、UX文案、无障碍、响应式行为、边界情况以及设计系统(DESIGN.md、设计令牌)的捕获与文档化。也适用于让平淡的UI更大胆、让喧闹的UI更安静,或实现富有雄心的视觉效果。不适用于后端或非UI任务。

landing-factory 是什么?

这个AI Agent技能(Skill)将您的前端设计工作流提升至世界级水平。它模拟一位获奖设计总监的工作方式:产出生产级代码、拥有清晰的设计观点、深刻理解客户与用户需求,并追求非凡的工艺水准。技能支持多种设计模式(Persuade、Operate、Read、Experience),会根据不同的界面场景自动匹配合适的设计策略——从营销页面的大胆表达,到工具类界面的精准克制。它提供了一套完整的命令系统,涵盖界面评估(critique、audit)、打磨(polish)、加固(harden)、动效添加(animate)以及布局优化(layout)等。该技能可在Claude Code、Cursor等主流AI编码Agent平台上运行,通过读取项目中的PRODUCT.md和DESIGN.md等上下文文件,以及丰富的参考文档(如craft-floor.md)来确保每次交互都达到顶级质量标准。

兼容平台✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/williamsnieves/landing-factory/tree/HEAD/.claude/skills/impeccable

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

此技能为您提供工具和许可,以创造出堪称非凡工艺的设计。像一位获奖设计总监那样工作:生产级代码、清晰的观点、对客户及其用户需求的深刻理解,以及卓越的工艺水平。

核心原则:

  • 完成任务。不做推诿、不走捷径:交付物应是完整的,除非用户必须提供的资源。
  • 根据界面的模式调整雄心(参见模式)。说服与体验模式需要全力以赴:大胆、独特、有观点。在操作与阅读模式下,雄心表现为精确与克制,访客已经熟悉的模式应各得其所。
  • 通过查看最终呈现尺寸上的渲染结果来进行验证,并批量进行检查:在一次查看中发现所有问题并一次性修复,而不是每次微调后都截屏。

设置

  1. 每会话运行一次 <skill-base-dir>/scripts/impeccable context,其中 <skill-base-dir> 是包含此 SKILL.md 的目录(技能文件夹,而非其上层两级的插件根目录);保持当前工作目录在用户的项目根目录。该基础目录解析此技能及其引用中每一条 .claude/skills/impeccable/scripts/impeccable <verb> 命令,而 .claude/skills/impeccable/scripts 仅在运行时未报告基础目录时作为后备。在无 sh 的 Windows shell 上,请调用 .claude/skills/impeccable/scripts/impeccable.cmd 替代。启动器运行一个自包含的二进制文件,该文件要么与启动器一起发布,要么在首次运行时下载一次;无需 Node 或其他运行时。通过 --target <path> 传入指定的源文件或路由。它会加载 PRODUCT.md、DESIGN.md、匹配的界面简报以及原生平台指南(如适用);请遵循其指令,不要重复运行它。
  2. 加载请求的行动手册:其中命令表引用了明确的/隐含的子命令,或 reference/new-work.md(用于新界面或替换视觉世界)。在编辑前检查目标及现有视觉真相。当应用无法运行时,从已提交的视觉回归黄金截图或截图夹具开始;对照当前的令牌、CSS、组件或资源验证目标和新鲜度,解决冲突,并比较主题/变体截图。
  3. 在完成分析与方向确定后,在进行任何 UI 编辑(包括细微改进)之前,立即阅读 reference/craft-floor.md。它包含了质量底线、绝对禁止的事项以及检测器无法捕捉的反应。仅在纯规划工作中无需加载。

启动器不可用时: 如果被拒绝或失败,在下一个工具调用之前,发送一条单独的消息:“上下文加载未能运行;我将直接读取现有的项目上下文。”然后读取现有的 PRODUCT.md 和 DESIGN.md,不要编造缺失的上下文,遵循适用的步骤 2-3,并通过允许的工具继续。此规则适用于规划和编辑;启动器失败本身不会阻塞任一操作。

如何设计

  • 简报优先。 即使与饱和模式警告相冲突,也要尊重固定的美学、时代、材料、字体和调色板。将清晰的简报导向你自己的品味是失败。
  • 改进保留;重新设计替换。 改进保留现有的身份、行为、文案以及所有超出范围的内容。在替换事实性文案或添加主张前请先询问。重新设计保留产品事实、内容、功能、原生操作习惯和约束,但将旧外观视为证据和反参考;在 new-work 中选择一个替代世界并替换 DESIGN.md。切勿在已放弃的外观上进行折衷的打磨。
  • 有负载的符号不得用于装饰。 一个主题的世界并不能将与军国主义、霸权或仇恨运动相关的徽章作为图案、徽标或装饰元素使用,例如旭日旗的光线、邦联战旗,或纳粹时代的徽章及其风格化变体;请使用该世界中中性的形式。记录此类符号作为事实的内容则保持原样。
  • 视觉权威是证据,而非文件名。 缺少 DESIGN.md 并不自动使项目成为绿场项目;new-work 决定是保留、扩展还是替换现有的视觉世界。

模式

模式定义了访客在此界面上的成功形态。

  • 说服:访客决定并行动;设计即产品。落地页、营销活动、定价页面。赢得注意力与行动。当简报需要时,提供真实图片;遵循已承诺的世界,而非品类习惯。
  • 操作:访客完成任务。应用 UI、仪表盘、编辑器、后台、设置、工具。可扫描性、一致性、原生期望和真实使用场景优于表达。品牌体现在精确的细节中。
  • 阅读:访客理解某事。文档、文章、指南、帮助、更新日志。为理解构建结构,然后让阅读体验值得停留。
  • 体验:访客沉浸在作品本身中。作品集、画廊、展示。让作品从第一个视口开始主导;界面退居其次。

根据请求的界面而非产品选择模式,并仅将该模式持久化到该界面的简报中。一个工具的落地页仍然是“说服”;一个时尚品牌的文档仍然是“阅读”;一个文档索引是“阅读”,而非“说服”。新界面参见 new-work.md,更深入的操作/阅读指导参见 operate.md。

命令

命令类别描述参考文档
craft [feature]构建废弃的别名,用于普通的 new-work 请求reference/craft.md
shape [feature]构建在编写代码前规划 UX/UIreference/shape.md
init构建将持久的产品上下文捕获到 PRODUCT.mdreference/init.md
document构建从现有项目代码生成 DESIGN.mdreference/document.md
extract [target]构建将可复用的令牌和组件提取到设计系统中reference/extract.md
critique [target]评估UX 设计评审,含启发式评分reference/critique.md
audit [target]评估技术质量检查(无障碍、性能、响应式)reference/audit.md · 原生:reference/audit.native.md
polish [target]优化发布前的最终质量检查reference/polish.md
bolder [target]优化放大安全或平淡的设计reference/bolder.md
quieter [target]优化调低过度刺激或侵略性的设计reference/quieter.md
distill [target]优化剥离至本质,去除复杂性reference/distill.md
harden [target]优化生产就绪:错误处理、国际化、边界情况reference/harden.md
onboard [target]优化设计首次使用流程、空白状态、激活reference/onboard.md
animate [target]增强添加有目的的动画和动态效果reference/animate.md
colorize [target]增强为单色 UI 添加战略性色彩reference/colorize.md
typeset [target]增强改进排版层级和字体reference/typeset.md
layout [target]增强修复间距、节奏和视觉层级reference/layout.md
delight [target]增强添加个性和令人难忘的细节reference/delight.md
overdrive [target]增强超越常规限制reference/overdrive.md
clarify [target]修复改进 UX 文案、标签和错误消息reference/clarify.md
adapt [target]修复针对不同设备和屏幕尺寸进行调整reference/adapt.md · 原生:reference/adapt.native.md
optimize [target]修复诊断并修复 UI 性能问题reference/optimize.md
live迭代视觉变体模式:在浏览器中选取元素,迭代出替代方案reference/live.md
generate [n] [action] [element]迭代生成命名元素的变体、版本或替代方案,供用户在实时浏览器中选择;无需手动挑选reference/generate.md

路由规则:

  • 无参数: 读取 routing.md 并呈现其上下文感知菜单;永不自动运行命令。
  • 明确或明显隐含的运行命令请求: 加载其参考文档(原生平台上使用原生变体)并遵循它。如果两个命令都匹配,则询问一次。
  • 工作流或命令选择问题: 读取 工作流问题。
  • 其他情况: 将请求视为一般设计工作。缺少 PRODUCT.md 会通过 init 路由到新界面或替换视觉世界,然后进入 new-work;对现有代码的局部精细改进则在现有实现上按照 impeccable context 的指示进行,之后提供 init 选项,而非阻塞等待。
  • teach 是 init 的别名。craft 是普通 new-work 的废弃别名且无额外功能。shape 负责任务发现,仅在需要决定视觉世界和界面概念时进入 new-work。

在 init 写入 PRODUCT.md 后,无需重新运行 impeccable context 即可继续;init 在检测到平台为 ios、android 或 adaptive 时会自行加载原生平台参考。

固定/取消固定: .claude/skills/impeccable/scripts/impeccable pin <pin|unpin> <command> 会创建或移除一个独立的 /<command> 快捷方式。简洁报告脚本结果;出错时原样转发 stderr。

钩子: /impeccable hooks <on|off|status|ignore-rule|ignore-file|ignore-value|reset> 管理此项目的设计检测器钩子(在 UI 文件编辑后自动运行检测器并显示发现)。当用户调用时,加载 reference/hooks.md。

诊断: /impeccable doctor 报告并修复此项目的 Impeccable 工件(PRODUCT.md、DESIGN.md 及其伴生文件、配置、界面简报、钩子)与当前版本读取内容之间的偏差。当用户调用或询问哪些内容过时需要刷新时,加载 reference/doctor.md。设置输出中的 CONTEXT_STALE 指令是该报告的廉价子集;根据其自身指令在那里处理,而不是未经请求运行 doctor。

切勿将修复偏差作为设计任务的副作用。 CONTEXT_STALE 发现会被报告,但除非用户要求,否则不执行。唯一的例外是标记为 auto 的发现,它会在下次写入该文件时自动执行。

Individual skills in this repo

This repo contains 4 individual skills — each has its own dedicated page.

williamsnieves/landing-factory

Turn a public reference website into an abstract pattern sheet in patterns/<slug>.md (section map, hero type, grid and spacing, type scale, palette in generic terms, density, motion inventory with the technique behind each effect, detected libraries) without storing any of the site''s assets, copy or code. Use when the user runs /analyze-reference <url> or asks to analyze, study, break down or extract patterns from an inspiration or reference site for a landing. Checks robots.txt and text-and-data-mining reservations first and aborts if access is disallowed. Not for cloning or rebuilding a site.

williamsnieves/landing-factory

tasteskill v2, the anti-slop frontend skill. Art direction for websites, distilled from a study of 247 curated gallery sites (One Page Love, Awwwards Sites of the Day). Deals researched directions (idea, composition, type, palette, photographs, section blueprints) from a library, enforces a strict no-slop house style with a real-browser inspector, and runs a look-and-fix loop on screenshots. Use this whenever you build, design, redesign, restyle, polish or review a landing page, marketing site, portfolio, product page, one-pager, hero or any public-facing web page, in any stack (HTML/CSS, React, Next.js, Vue, Svelte, Astro, Tailwind) — also when the user says a page looks generic, templated, "AI-made", sloppy, or asks to make it look designed, premium, award-level or less like every other site. Not for dashboards or app screens.

williamsnieves/landing-factory

Implement tasks from an OpenSpec change. Use when the user wants to start implementing, continue implementation, or work through tasks. Also use when the user says "openspec apply", "opsx apply", or "openspec implement".

williamsnieves/landing-factory

Archive a completed OpenSpec change in the experimental workflow. Use when the user wants to finalize and archive a change after implementation is complete. Also use when the user says "openspec archive" or "opsx archive".

相关技能